Add major selection to profile

client/src/modules/Course/Components/MultiSelect.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 // CSS FILES
 import styles from '../Styles/Select.module.css';
@@ -9,11 +9,18 @@ const MultiSelect = ({
   value,
   options,
   placeholder,
-  onChange
+  onChange,
+  preselectedOptions,
 }: SelectProps) => {
   const [searchTerm, setSearchTerm] = useState<string>('');
   const [open, setOpen] = useState<boolean>(false);
 
+  useEffect(() => {
+    if (preselectedOptions) {
+      onChange(preselectedOptions);
+    }
+  }, [preselectedOptions]);
+
   const filteredOptions = searchTerm.length !== 0
     ? options.filter((option) =>
       option.toLowerCase().includes(searchTerm.toLowerCase())
@@ -110,6 +117,7 @@ type SelectProps = {
   placeholder: string;
   value: string[];
   onChange: (selectedOptions: string[]) => void;
+  preselectedOptions?: string[];
 };
 
 export default MultiSelect;

client/src/modules/Course/Components/ReviewModal.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import axios from 'axios';
 
 import MultiSelect from './MultiSelect';
 import SingleSelect from './SingleSelect';
@@ -14,11 +15,11 @@ import LoginModal from './LoginModal';
 import { useAuthOptionalLogin } from '../../../auth/auth_utils';
 
 const ReviewModal = ({
-  open,
-  setReviewOpen,
-  submitReview,
-  professorOptions
-}: Modal) => {
+                       open,
+                       setReviewOpen,
+                       submitReview,
+                       professorOptions
+                     }: Modal) => {
   // Modal Logic
   function closeModal() {
     setReviewOpen(false);
@@ -59,7 +60,9 @@ const ReviewModal = ({
 
   const [loginModalOpen, setLoginModalOpen] = useState<boolean>(false);
 
-  const { isLoggedIn, signIn } = useAuthOptionalLogin();
+  const [userMajors, setUserMajors] = useState<string[]>([]);
+  const [loadingMajors, setLoadingMajors] = useState<boolean>(true);
+  const { isLoggedIn, netId, signIn } = useAuthOptionalLogin();
 
   const [valid, setValid] = useState<Valid>({
     professor: false,
@@ -69,6 +72,18 @@ const ReviewModal = ({
   });
   const [allowSubmit, setAllowSubmit] = useState<boolean>(false);
 
+  useEffect(() => {
+    setLoadingMajors(true)
+    if (isLoggedIn) {
+      getUserMajors();
+    } else {
+      setLoadingMajors(false)
+    }
+    if (!isLoggedIn || userMajors.length === 0) {
+      setValid({ ...valid, major: true });
+    }
+  }, [isLoggedIn, open]);
+
   useEffect(() => {
     if (!professorOptions.includes('Not Listed')) {
       professorOptions.push('Not Listed');
@@ -79,6 +94,16 @@ const ReviewModal = ({
     setAllowSubmit(valid.professor && valid.major && valid.grade && valid.text);
   }, [valid]);
 
+  const getUserMajors = async () => {
+    const response = await axios.post('/api/profiles/get-majors', {
+      netId
+    })
+    if (response.status === 200) {
+      setUserMajors(response.data.majors)
+      setLoadingMajors(false)
+    }
+  }
+
   const onProfessorChange = (newSelectedProfessors: string[]) => {
     setSelectedProfessors(newSelectedProfessors);
     if (newSelectedProfessors.length > 0)
@@ -123,7 +148,7 @@ const ReviewModal = ({
         text: reviewText,
         isCovid: false,
         grade: selectedGrade,
-        major: selectedMajors
+        major: selectedMajors ? selectedMajors : [],
       };
       submitReview(newReview);
     }
@@ -210,18 +235,21 @@ const ReviewModal = ({
                 isOverall={false}
               />
             </div>
-            <MultiSelect
-              options={majorOptions}
-              value={selectedMajors}
-              onChange={onMajorChange}
-              placeholder="Major"
-            />
             <SingleSelect
               options={gradeoptions}
               value={selectedGrade}
               onChange={onGradeChange}
               placeholder="Grade Received"
             />
+            {!loadingMajors && (!isLoggedIn || userMajors.length === 0) && (
+              <MultiSelect
+                options={majorOptions}
+                value={selectedMajors}
+                onChange={onMajorChange}
+                preselectedOptions={userMajors}
+                placeholder="Major"
+              />
+            )}
           </div>
           <div className={styles.textcol}>
             <textarea

client/src/modules/Profile/Component/Profile.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Redirect } from 'react-router-dom';
 
 import axios from 'axios';
@@ -19,6 +19,7 @@ import type { NewReview } from '../../../types';
 
 import { useAuthMandatoryLogin } from '../../../auth/auth_utils';
 import { randomPicture } from '../../Globals/profile_picture';
+import formatList from 'common/formatList'
 
 import styles from '../Styles/Profile.module.css';
 
@@ -29,6 +30,7 @@ const Profile = () => {
   const [pendingReviews, setPendingReviews] = useState<ReviewType[]>([]);
   const [approvedReviews, setApprovedReviews] = useState<ReviewType[]>([]);
 
+  const savedSessionReview = useRef<NewReview | null>(null);
   const [upvoteCount, setUpvoteCount] = useState(0);
 
   const { isLoggedIn, token, netId, isAuthenticating, signOut } =
@@ -128,10 +130,26 @@ const Profile = () => {
       }
     }
 
+    const checkForUpdatedMajor = async (review: NewReview) => {
+      const getMajorsReq = await axios.post('/api/profiles/get-majors', { netId })
+      if (getMajorsReq.status === 200) {
+        const oldMajors = getMajorsReq.data.majors
+        if (oldMajors && review &&
+          JSON.stringify(oldMajors) !== JSON.stringify(review.major)) {
+          toast.info('Your major has been changed ' +
+            (oldMajors.length !== 0 && 'from ')
+            + formatList(oldMajors) + ' to '
+            + formatList(review.major) + "."
+          )
+        }
+      }
+    }
+
     // Only update reviews if we have a given user's netId + they are no longer authenticating.
     if (netId && !isAuthenticating) {
       getReviews();
       getReviewsHelpful();
+      if (savedSessionReview.current) checkForUpdatedMajor(savedSessionReview.current)
     }
   }, [netId, isAuthenticating]);
 
@@ -186,6 +204,7 @@ const Profile = () => {
       sessionCourseId !== '' &&
       isLoggedIn
     ) {
+      savedSessionReview.current = sessionReview;
       submitReview(sessionReview, sessionCourseId);
     }
   }, [isLoggedIn, token]);

client/src/modules/Profile/Component/UserInfo.tsx

@@ -1,6 +1,11 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import styles from '../Styles/UserInfo.module.css';
 import ProfileCard from './ProfileCard';
+import MultiSelect from '../../Course/Components/MultiSelect';
+import allMajors from '../../Globals/majors';
+import formatList from 'common/formatList'
+import axios from 'axios';
+import { toast } from 'react-toastify';
 
 type UserInfoProps = {
   profilePicture: string;
@@ -17,6 +22,40 @@ const UserInfo = ({
   netId,
   signOut
 }: UserInfoProps) => {
+  const majorOptions: string[] = allMajors;
+  const [selectedMajors, setSelectedMajors] = useState<string[]>([]);
+  const [validMajor, setValidMajor] = useState<boolean>(false);
+  const [userMajors, setUserMajors] = useState<string[]>([]);
+  const [showMajorUpdate, setShowMajorUpdate] = useState<boolean>(false);
+
+  useEffect(() => {
+    getUserMajors();
+  }, []);
+
+  const onMajorSelectionChange = (newSelectedMajors: string[]) => {
+    setSelectedMajors(newSelectedMajors);
+    setValidMajor(JSON.stringify(newSelectedMajors) !== JSON.stringify(userMajors));
+  }
+
+  const getUserMajors = async () => {
+    const response = await axios.post('/api/profiles/get-majors', { netId })
+    if (response.status === 200) {
+      setUserMajors(response.data.majors)
+    }
+  }
+
+  const updateMajors = async () => {
+    const response = await axios.post('/api/profiles/set-majors', { netId, majors: selectedMajors })
+    console.log(response)
+    if (response.status === 200) {
+      setUserMajors(selectedMajors)
+      setShowMajorUpdate(false)
+      toast.success(
+        "Majors successfully updated!"
+      );
+    }
+  }
+
   return (
     <div className={styles.container}>
       <div className={styles.title}>My Dashboard</div>
@@ -25,7 +64,15 @@ const UserInfo = ({
         src={profilePicture}
         alt="user profile bear"
       />
-      <div className={styles.netid}>{netId}</div>
+      <div>
+        <div className={styles.netid}>
+          <span className={styles.bold}>{netId}</span>
+          {userMajors.length > 0 && " is studying"}
+          <p className={styles.bold}>
+            {formatList(userMajors)}
+          </p>
+        </div>
+      </div>
       <div className={styles.subtitle}>User Statistics</div>
       <div className={styles.statssection}>
         <ProfileCard
@@ -39,7 +86,43 @@ const UserInfo = ({
           image="/helpful_review_icon.svg"
         ></ProfileCard>
       </div>
-      <button className={styles.signoutbutton} onClick={signOut}>
+      {!showMajorUpdate && (
+        <button className={styles.btn} onClick={() => setShowMajorUpdate(true)}>
+          {userMajors.length === 0
+            ? 'Set your major(s)'
+            : 'Update your major(s)'}
+        </button>
+      )}
+      {showMajorUpdate && (
+        <div className={styles.majorcard}>
+          <MultiSelect
+            options={majorOptions}
+            value={selectedMajors}
+            onChange={onMajorSelectionChange}
+            preselectedOptions={userMajors}
+            placeholder="Major"
+          />
+          <div className={styles.halfsizebuttons}>
+            <button
+              className={styles.btn}
+              onClick={updateMajors}
+              disabled={!validMajor}
+              title={validMajor ? '' : "You've already selected these majors!"}
+            >
+              {selectedMajors.length === 0 && validMajor
+                ? 'Submit (clear)'
+                : 'Submit'}
+            </button>
+            <button
+              className={styles.btn}
+              onClick={() => setShowMajorUpdate(false)}
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      )}
+      <button className={styles.btn} onClick={signOut}>
         Log Out
       </button>
     </div>

client/src/modules/Profile/Styles/UserInfo.module.css

@@ -29,10 +29,20 @@
   text-align: center;
 }
 
+.bold {
+  font-weight: 700;
+}
+
 .netid {
   text-align: center;
   color: var(--clr-gray-300);
-  font-size: 0.85em;
+  font-size: 1em;
+}
+
+.majorcard {
+  background: var(--clr-gray-100);
+  border-radius: 10px;
+  padding: 12px;
 }
 
 .statssection {
@@ -42,7 +52,19 @@
   width: 100%;
 }
 
-.signoutbutton {
+.halfsizebuttons {
+  display: flex;
+  width: 100vw;
+  column-gap: 12px;
+  padding-top: 1em;
+}
+
+.btn:disabled {
+  background: grey;
+  cursor: not-allowed;
+}
+
+.btn {
   width: 100%;
   border-radius: 10px;
   padding: 12px 0;

common/formatList.ts

@@ -0,0 +1,13 @@
+/**
+ * Formats list into human-readable text.
+ * eg ["a","b","c"] --> "a, b, and c"
+ * @param list
+ */
+
+const formatList = (list: string[]) => {
+  return list.join(', ').replace(/(, )(?!.*\1)/,
+    (list.length > 2 ? ', and ' : ' and ')
+  );
+}
+
+export default formatList;

common/index.d.ts

@@ -30,6 +30,7 @@ export interface Student {
   readonly privilege: string; // user privilege level
   reviews: string[];
   likedReviews: string[];
+  majors?: string[];
 }
 
 export interface Subject {

server/db/schema.ts

@@ -69,7 +69,8 @@ const StudentSchema = new Schema<StudentDocument>({
   token: { type: String }, // random token generated during login process
   privilege: { type: String }, // user privilege level. Takes values "regular" | "admin"
   reviews: { type: [String] }, // the reviews that this user has posted.
-  likedReviews: { type: [String] }
+  likedReviews: { type: [String] },
+  majors: { type: [String] },
 });
 export const Students = mongoose.model<StudentDocument>(
   'students',