Merge pull request #495 from cornell-dti/matt/less-intrusive-anon-modal

Less intrusive anon modal

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import styles from '../Styles/LoginModal.module.css';
+import Emoji from '/login_modal_bear.svg';
+import { useAuthOptionalLogin } from '../../../auth/auth_utils';
+
+type Props = {
+  open: boolean;
+};
+
+const LoginModal = ({ open }: Props) => {
+  const { signIn } = useAuthOptionalLogin();
+  if (!open) {
+    return <></>;
+  }
+
+  /**
+   * Should only render when the user is not signed in
+   */
+  return (
+    <div className={styles.warningContainer}>
+      <img
+        src={Emoji}
+        className={styles.emoji}
+        alt="CUReviews Bear -- 'You got this!' emoji"
+      />
+      <div className={styles.message}>
+        <span className="line1">
+          Your review will upload once you login!
+          <br />
+        </span>{' '}
+      </div>
+      <button
+        className={`${styles.button}`}
+        onClick={() => signIn('profile')}
+      >
+        Login
+      </button>
+      <div className={styles.pastReviewsMessage}>
+        You will be redirected to your past reviews page
+      </div>
+    </div>
+  );
+};
+
+export default LoginModal;

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

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react';
-import axios from 'axios';
 
 import MultiSelect from './MultiSelect';
 import SingleSelect from './SingleSelect';
@@ -11,7 +10,7 @@ import closeIcon from '../../../assets/icons/X.svg';
 
 // Data
 import majors from '../../Globals/majors';
-import AnonymousWarning from './AnonymousWarning';
+import LoginModal from './LoginModal';
 import { useAuthOptionalLogin } from '../../../auth/auth_utils';
 
 const ReviewModal = ({
@@ -58,10 +57,9 @@ const ReviewModal = ({
   const [difficulty, setDifficulty] = useState<number>(3);
   const [workload, setWorkload] = useState<number>(3);
 
-  const [anonymousOpen, setAnonymousOpen] = useState<boolean>(false);
-  const [noReviews, setNoReviews] = useState<boolean>(false);
+  const [loginModalOpen, setLoginModalOpen] = useState<boolean>(false);
 
-  const { isLoggedIn, netId, signIn } = useAuthOptionalLogin();
+  const { isLoggedIn, signIn } = useAuthOptionalLogin();
 
   const [valid, setValid] = useState<Valid>({
     professor: false,
@@ -79,45 +77,28 @@ const ReviewModal = ({
 
   useEffect(() => {
     setAllowSubmit(valid.professor && valid.major && valid.grade && valid.text);
-    if (isLoggedIn) {
-      getNoReviews();
-    }
   }, [valid]);
 
-  /**
-   * Determines if the current user has no reviews, so they should receive
-   * the anonymous modal
-   */
-  async function getNoReviews() {
-    const response = await axios.post('/api/profiles/count-reviews', {
-      netId
-    });
-    const res = response.data;
-    if (response.status === 200) {
-      setNoReviews(res.result === 0);
-    }
-  }
-
-  function onProfessorChange(newSelectedProfessors: string[]) {
+  const onProfessorChange = (newSelectedProfessors: string[]) => {
     setSelectedProfessors(newSelectedProfessors);
     if (newSelectedProfessors.length > 0)
       setValid({ ...valid, professor: true });
     else setValid({ ...valid, professor: false });
   }
 
-  function onMajorChange(newSelectedMajors: string[]) {
+  const onMajorChange = (newSelectedMajors: string[]) => {
     setSelectedMajors(newSelectedMajors);
     if (newSelectedMajors.length > 0) setValid({ ...valid, major: true });
     else setValid({ ...valid, major: false });
   }
 
-  function onGradeChange(newSelectedGrade: string) {
+  const onGradeChange = (newSelectedGrade: string) => {
     setSelectedGrade(newSelectedGrade);
     if (newSelectedGrade !== '') setValid({ ...valid, grade: true });
     else setValid({ ...valid, grade: false });
   }
 
-  function onReviewTextChange(newText: string) {
+  const onReviewTextChange = (newText: string) => {
     setReviewText(newText);
     if (newText !== '') setValid({ ...valid, text: true });
     else setValid({ ...valid, text: false });
@@ -131,7 +112,7 @@ const ReviewModal = ({
     return false;
   }
 
-  // Called by onSubmitReview if the user should not see anonymous
+  // Called by onSubmitReview if the user should not see modal
   function handleSubmitReview() {
     if (validReview()) {
       const newReview: NewReview = {
@@ -150,21 +131,21 @@ const ReviewModal = ({
 
   // Handle click of submit button
   function onSubmitReview() {
-    if (!noReviews && isLoggedIn) {
+    if (isLoggedIn) {
       handleSubmitReview();
       signIn('profile');
     } else {
       handleSubmitReview();
-      setAnonymousOpen(true);
+      setLoginModalOpen(true);
       setReviewOpen(false);
     }
   }
 
-  if (!open && anonymousOpen) {
+  if (!open && loginModalOpen && !isLoggedIn) {
     return (
       <div className={styles.modalbg}>
         <div className={styles.modal}>
-          <AnonymousWarning open={anonymousOpen} />
+          <LoginModal open={loginModalOpen} />
         </div>
       </div>
     );
@@ -251,6 +232,9 @@ const ReviewModal = ({
               id="review-content"
               placeholder={placeholdertext}
             ></textarea>
+            <p className={styles.anonymouslabel}>
+              Don't worry - all your reviews are anonymous!
+            </p>
             <button
               className={styles.submitbutton}
               onClick={() => {

client/src/modules/Course/Styles/AnonymousWarning.module.css → client/src/modules/Course/Styles/LoginModal.module.css

@@ -9,7 +9,7 @@
   border-radius: 8px;
 }
 
-.anonymousLogo {
+.emoji {
   max-width: 25%;
   max-height: 25%;
   margin: auto;

client/src/modules/Course/Styles/ReviewModal.module.css

@@ -109,7 +109,7 @@
   flex-flow: column nowrap;
   align-items: center;
   justify-content: space-between;
-  gap: 32px;
+  gap: 16px;
 
   width: 100%;
   height: 100%;
@@ -119,6 +119,14 @@
   place-self: center;
 }
 
+.anonymouslabel {
+  display: flex;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--clr-blue-300);
+  text-align: center;
+}
+
 .textinputbox {
   width: 100%;
   height: 100%;
@@ -140,21 +148,6 @@
   color: #a8a8a8;
 }
 
-/* for future tags feature - placeholder  */
-.tags {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 10px;
-  width: 100%;
-  height: 100px;
-  font-size: 1em;
-  letter-spacing: 1ch;
-  font-weight: 500;
-  border: 2px solid var(--clr-blue-200);
-  color: var(--clr-blue-300);
-}
-
 .submitbutton {
   width: 100%;
   height: 39px;