Merge pull request #242 from sef-global/development

ScholarX release v1.4.1
sef-global · Aug 13, 2021 · 5434ab3 · 5434ab3
2 parents ddc9f94 + 643f0a4
commit 5434ab3
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 19 deletions.
diff --git a/src/scenes/Home/components/ActivePrograms/index.tsx b/src/scenes/Home/components/ActivePrograms/index.tsx
@@ -28,6 +28,7 @@ function ActivePrograms() {
   const [mentoringPrograms, setMentoringPrograms] = useState<SavedProgram[]>(
     []
   );
+  const [menteePrograms, setMenteePrograms] = useState<SavedProgram[]>([]);
   const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
   const user: Partial<Profile | null> = useContext(UserContext);
   const isUserAdmin: boolean = user != null && user.type == 'ADMIN';
@@ -36,6 +37,7 @@ function ActivePrograms() {
   useEffect(() => {
     getPrograms();
     getMyMentoringPrograms();
+    getMyMenteePrograms();
   }, []);
 
   const getPrograms = () => {
@@ -78,6 +80,29 @@ function ActivePrograms() {
       });
   };
 
+  const getMyMenteePrograms = () => {
+    setIsLoading(true);
+    axios
+      .get(`${API_URL}/me/programs/mentee`, {
+        withCredentials: true,
+      })
+      .then((response: AxiosResponse<SavedProgram[]>) => {
+        response.status === 204
+          ? setMenteePrograms([])
+          : setMenteePrograms(response.data);
+        setIsLoading(false);
+      })
+      .catch((error) => {
+        setIsLoading(false);
+        if (error.response.status != 401) {
+          notification.error({
+            message: 'Something went wrong when fetching the user',
+            description: error.toString(),
+          });
+        }
+      });
+  };
+
   const handleModalPopUp = () => {
     setIsModalVisible(true);
   };
@@ -96,7 +121,7 @@ function ActivePrograms() {
         {programs.map((program: SavedProgram) => (
           <>
             {program.state !== 'COMPLETED' && program.state !== 'REMOVED' ? (
-              <Col className={styles.col} md={6} key={program.id}>
+              <Col className={styles.col} md={5} sm={6} key={program.id}>
                 <Card
                   className={styles.card}
                   bordered={false}
@@ -110,14 +135,8 @@ function ActivePrograms() {
                 >
                   <Row>
                     <Col span={13}>
-                      <Title level={4}>
-                        <a
-                          target={'_blank'}
-                          rel={'noreferrer'}
-                          href={program.landingPageUrl}
-                        >
-                          {program.title}
-                        </a>
+                      <Title level={4} className={styles.programTitle}>
+                        {program.title}
                       </Title>
                     </Col>
                     <Col span={11} className={styles.programActionButton}>
@@ -184,7 +203,8 @@ function ActivePrograms() {
                         !mentoringPrograms.some(
                           (mentoringProgram) =>
                             mentoringProgram.id == program.id
-                        ) && (
+                        ) &&
+                        menteePrograms.length !== 0 && (
                           <Button
                             type="primary"
                             onClick={() =>
@@ -196,18 +216,39 @@ function ActivePrograms() {
                             My mentor
                           </Button>
                         )}
+                      {(program.state === 'MENTEE_SELECTION' ||
+                        program.state === 'ONGOING') &&
+                        !isUserAdmin &&
+                        user != null &&
+                        mentoringPrograms.some(
+                          (mentoringProgram) =>
+                            mentoringProgram.id == program.id
+                        ) && (
+                          <Button
+                            type="primary"
+                            onClick={() =>
+                              history.push(`/mentor/program/${program.id}`)
+                            }
+                          >
+                            Manage
+                          </Button>
+                        )}
                     </Col>
                   </Row>
                   {program.state === 'MENTOR_SELECTION' && !isUserAdmin && (
                     <Tag className={styles.tag} color="green">
                       Mentor Selection Period
                     </Tag>
                   )}
-                  {program.state === 'MENTEE_SELECTION' && !isUserAdmin && (
-                    <Tag className={styles.tag} color="green">
-                      Mentee Selection Period
-                    </Tag>
-                  )}
+                  {program.state === 'MENTEE_SELECTION' &&
+                    !isUserAdmin &&
+                    !mentoringPrograms.some(
+                      (mentoringProgram) => mentoringProgram.id == program.id
+                    ) && (
+                      <Tag className={styles.tag} color="green">
+                        Mentee Selection Period
+                      </Tag>
+                    )}
                   {program.state === 'MENTOR_CONFIRMATION' &&
                   !isUserAdmin &&
                   (user === null ||
@@ -220,16 +261,22 @@ function ActivePrograms() {
                   ) : null}
                   {program.state === 'ONGOING' &&
                   !isUserAdmin &&
-                  (mentoringPrograms.some(
-                    (mentoringProgram) => mentoringProgram.id == program.id
-                  ) ||
-                    user === null) ? (
+                  user === null ? (
                     <Tag className={styles.tag} color="green">
                       Ongoing
                     </Tag>
                   ) : null}
                   <Paragraph>{program.headline}</Paragraph>
                 </Card>
+                <Row className={styles.viewMoreButton}>
+                  <a
+                    target={'_blank'}
+                    rel={'noreferrer'}
+                    href={program.landingPageUrl}
+                  >
+                    View More
+                  </a>
+                </Row>
               </Col>
             ) : null}
           </>

diff --git a/src/scenes/Home/components/HelpButton/index.tsx b/src/scenes/Home/components/HelpButton/index.tsx
@@ -34,6 +34,15 @@ const content = (
     <Title level={4}>Mentee</Title>
     <Paragraph>
       <ul>
+        <li>
+          <a
+            href="https://docs.google.com/document/d/1IbdbR-tukgLykP_1jgDcapYncTU3d7fTg2NP6xbo8PI/edit#heading=h.s76f76qd3wwq"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Mentee Guide
+          </a>
+        </li>
         <li>
           <a
             href="https://drive.google.com/file/d/1vnW1bhNzETtPtiGTsphzBT2GQ6K0LuX9/view"

diff --git a/src/scenes/Home/styles.css b/src/scenes/Home/styles.css
@@ -9,6 +9,7 @@
 
 .card {
     box-shadow: 0 15px 35px rgba(50, 50, 93, .1), 0 5px 15px rgba(0, 0, 0, .07) !important;
+    position: relative;
 }
 
 .img{
@@ -51,11 +52,22 @@
     justify-content: center;
 }
 
+.programTitle {
+    color: #40a9ff!important;
+}
+
 .tag{
     border-radius: 5px;
     margin-bottom: 10px;
 }
 
+.viewMoreButton {
+    justify-content: flex-end;
+    position: absolute;
+    bottom: 30px;
+    right: 30px;
+}
+
 .footer, .push {
     height: 70px;
 }