Release ScholarX v1.5

sef-global · Aug 16, 2021 · a64d490 · a64d490
2 parents 5434ab3 + 76067c1
commit a64d490
Show file tree

Hide file tree

Showing 7 changed files with 89 additions and 53 deletions.
diff --git a/src/components/MentorResponses/index.tsx b/src/components/MentorResponses/index.tsx
@@ -0,0 +1,69 @@
+import React, { useEffect, useState } from 'react';
+
+import { Divider, notification, Row, Typography } from 'antd';
+import axios, { AxiosResponse } from 'axios';
+
+import { API_URL } from '../../constants';
+import { MentorResponse } from '../../types';
+import { MentorResponsesProps } from './interfaces';
+
+const { Text } = Typography;
+
+function MentorResponses({ programId, mentorId }: MentorResponsesProps) {
+  const [mentorResponse, setMentorResponse] = useState<MentorResponse[]>();
+
+  useEffect(() => {
+    getMentorResponses();
+  }, []);
+
+  const getMentorResponses = () => {
+    axios
+      .get(
+        `${API_URL}/programs/${programId}/responses/mentor?mentorId=${mentorId}`,
+        {
+          withCredentials: true,
+        }
+      )
+      .then((result: AxiosResponse<MentorResponse[]>) => {
+        if (result.status == 200) {
+          setMentorResponse(result.data);
+        } else {
+          throw new Error();
+        }
+      })
+      .catch(() => {
+        notification.error({
+          message: 'Error!',
+          description: 'Something went wrong when fetching mentor response',
+        });
+      });
+  };
+
+  const replaceLinksWithAnchor = (text: string) => {
+    const urlRegex = /(https?:\/\/[^\s]+)/g;
+    const response = text.replace(urlRegex, (url) => {
+      return '<a target="_blank" href="' + url + '" >' + url + '</a>';
+    });
+    return <span dangerouslySetInnerHTML={{ __html: response }} />;
+  };
+
+  return (
+    <>
+      {mentorResponse?.map((response: MentorResponse, index: number) => {
+        return (
+          <div key={response.question.id}>
+            <Row>
+              <Text strong>
+                {index + 1}. {response.question.question}
+              </Text>
+            </Row>
+            <Row>{replaceLinksWithAnchor(response.response)}</Row>
+            <Divider />
+          </div>
+        );
+      })}
+    </>
+  );
+}
+
+export default MentorResponses;
diff --git a/src/components/MentorResponses/interfaces.ts b/src/components/MentorResponses/interfaces.ts
@@ -0,0 +1,4 @@
+export interface MentorResponsesProps {
+  programId: number;
+  mentorId: number;
+}
diff --git a/src/scenes/Dashboard/scenes/ManageMentors/components/MentorRow/index.tsx b/src/scenes/Dashboard/scenes/ManageMentors/components/MentorRow/index.tsx
@@ -5,7 +5,6 @@ import {
   Avatar,
   Button,
   Col,
-  Divider,
   Drawer,
   List,
   Modal,
@@ -16,20 +15,20 @@ import {
 import axios, { AxiosResponse } from 'axios';
 import { useParams } from 'react-router-dom';
 
+import MentorResponses from '../../../../../../components/MentorResponses';
 import { API_URL } from '../../../../../../constants';
-import { Mentor, MentorResponse } from '../../../../../../types';
+import { Mentor } from '../../../../../../types';
 import StatusTag from '../StatusTag';
 import { Props } from './interfaces';
 import styles from './style.css';
 
-const { Title, Text } = Typography;
+const { Title } = Typography;
 
 function MentorRow({ mentor, programState }: Props) {
   const actions: ReactNode[] = [];
   const { programId } = useParams();
   const [isDrawerVisible, setIsDrawerVisible] = useState(false);
   const [mentorState, setMentorState] = useState<string>(mentor.state);
-  const [mentorResponse, setMentorResponse] = useState<MentorResponse[]>([]);
 
   const updateMentorState = (mentorState: string) => {
     let successMessage: string;
@@ -107,29 +106,6 @@ function MentorRow({ mentor, programState }: Props) {
     });
   };
 
-  const getMentorResponse = () => {
-    axios
-      .get(
-        `${API_URL}/programs/${programId}/responses/mentor?mentorId=${mentor.id}`,
-        {
-          withCredentials: true,
-        }
-      )
-      .then((result: AxiosResponse<MentorResponse[]>) => {
-        if (result.status == 200) {
-          setMentorResponse(result.data);
-        } else {
-          throw new Error();
-        }
-      })
-      .catch(() => {
-        notification.error({
-          message: 'Error!',
-          description: 'Something went wrong when fetching mentor response',
-        });
-      });
-  };
-
   if (programState === 'MENTOR_SELECTION') {
     const isApproveDisabled: boolean =
       mentorState == 'APPROVED' || mentorState == 'REMOVED';
@@ -142,7 +118,6 @@ function MentorRow({ mentor, programState }: Props) {
         className={styles.buttonMargin}
         onClick={() => {
           setIsDrawerVisible(true);
-          getMentorResponse();
         }}
       >
         View Application
@@ -235,21 +210,7 @@ function MentorRow({ mentor, programState }: Props) {
             </Row>
           </Col>
         </Row>
-        {mentorResponse.map((response: MentorResponse, index: number) => {
-          return (
-            <div key={response.id.mentorId}>
-              <Row>
-                <Text strong>
-                  {index + 1}. {response.question.question}
-                </Text>
-              </Row>
-              <Row>
-                <Text>{response.response}</Text>
-              </Row>
-              <Divider />
-            </div>
-          );
-        })}
+        <MentorResponses mentorId={mentor.id} programId={programId} />
       </Drawer>
     </>
   );

diff --git a/src/scenes/Home/components/ActivePrograms/index.tsx b/src/scenes/Home/components/ActivePrograms/index.tsx
@@ -121,7 +121,7 @@ function ActivePrograms() {
         {programs.map((program: SavedProgram) => (
           <>
             {program.state !== 'COMPLETED' && program.state !== 'REMOVED' ? (
-              <Col className={styles.col} md={5} sm={6} key={program.id}>
+              <Col className={styles.col} md={6} key={program.id}>
                 <Card
                   className={styles.card}
                   bordered={false}

diff --git a/src/scenes/Home/scenes/RequestMentors/index.tsx b/src/scenes/Home/scenes/RequestMentors/index.tsx
@@ -9,7 +9,6 @@ import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import { API_URL } from '../../../../constants';
 import { UserContext } from '../../../../index';
 import { Profile, SavedProgram } from '../../../../types';
-import Footer from '../../components/Footer';
 import HelpButton from '../../components/HelpButton';
 import NavigationBar from '../../components/NavigationBar';
 import styles from '../../styles.css';
@@ -104,7 +103,6 @@ function RequestMentors() {
         </Col>
       </Row>
       <HelpButton />
-      <Footer />
     </>
   );
 }

diff --git a/src/scenes/Home/scenes/RequestMentors/scenes/MenteeApplication/index.tsx b/src/scenes/Home/scenes/RequestMentors/scenes/MenteeApplication/index.tsx
@@ -16,6 +16,7 @@ import {
 import axios, { AxiosResponse, Method } from 'axios';
 import { useHistory, useParams } from 'react-router';
 
+import MentorResponses from '../../../../../../components/MentorResponses';
 import { API_URL, APPLICATION_TEMPLATE } from '../../../../../../constants';
 import { Mentee, Mentor } from '../../../../../../types';
 import styles from './styles.css';
@@ -143,15 +144,17 @@ function MenteeApplication() {
                 {mentor?.profile.firstName} {mentor?.profile.lastName}
               </Title>
               <Text>{mentor?.profile.headline}</Text>
+              <a href={mentor?.profile.linkedinUrl}>
+                <LinkedinOutlined />
+                {''} {mentor?.profile.firstName}&apos;s LinkedIn profile
+              </a>
             </Col>
           </Row>
+          <br />
           <div className={styles.contentMargin}>
-            <a href={mentor?.profile.linkedinUrl}>
-              <LinkedinOutlined />
-              {''} {mentor?.profile.firstName}&apos;s LinkedIn profile
-            </a>
-            <br />
-            <br />
+            <Col span={12}>
+              <MentorResponses programId={programId} mentorId={mentorId} />
+            </Col>
             {isFormVisible ? (
               ''
             ) : (

diff --git a/src/scenes/Home/styles.css b/src/scenes/Home/styles.css
@@ -20,7 +20,8 @@
 
 .col{
     display: flex;
-    min-width: 320px;
+    max-width: 380px;
+    min-width: 340px;
 }
 
 .programActionButton {