Merge pull request #229 from sef-global/development

ScholarX v1.3
sef-global · Aug 3, 2021 · 9bbbb58 · 9bbbb58
2 parents 513ecb2 + ce8c181
commit 9bbbb58
Show file tree

Hide file tree

Showing 17 changed files with 92 additions and 21 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -49,6 +49,7 @@
     "axios": "^0.20.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-ga": "^3.3.0",
     "react-router-dom": "^5.2.0"
   },
   "lint-staged": {

diff --git a/src/index.tsx b/src/index.tsx
@@ -4,6 +4,7 @@ import { notification } from 'antd';
 import axios, { AxiosResponse } from 'axios';
 import ReactDOM from 'react-dom';
 import 'antd/dist/antd.less';
+import ReactGA from 'react-ga';
 import {
   BrowserRouter as Router,
   Switch,
@@ -23,6 +24,9 @@ import { Profile } from './types';
 
 export const UserContext = createContext<Partial<Profile>>({});
 
+// Initialize Google Analytics (Works with Universal Analytics (UA) Tracking ID)
+ReactGA.initialize('UA-167873271-3');
+
 function App() {
   const [user, setUser] = useState<Profile | null>(null);
   useEffect(() => {

diff --git a/src/scenes/Dashboard/index.tsx b/src/scenes/Dashboard/index.tsx
@@ -7,6 +7,7 @@ import {
   ProfileOutlined,
 } from '@ant-design/icons';
 import { Menu, Layout, Avatar } from 'antd';
+import { useHistory } from 'react-router';
 import {
   Link,
   BrowserRouter as Router,
@@ -34,6 +35,8 @@ const { Content, Sider, Header } = Layout;
 function Dashboard() {
   const { programId } = useParams();
   const user: Partial<Profile | null> = useContext(UserContext);
+  const history = useHistory();
+
   return (
     <Router>
       <LogInModal isModalVisible={user === null} onCancel={null} />
@@ -44,7 +47,7 @@ function Dashboard() {
           collapsedWidth="0"
         >
           <div>
-            <a href="/">
+            <a onClick={() => history.push('/')}>
               <div className={styles.logo}>
                 <img src={logo} alt="SEF Logo" />
               </div>

diff --git a/src/scenes/Home/components/ActivePrograms/index.tsx b/src/scenes/Home/components/ActivePrograms/index.tsx
@@ -11,6 +11,7 @@ import {
   Tag,
 } from 'antd';
 import axios, { AxiosResponse } from 'axios';
+import { useHistory } from 'react-router-dom';
 
 import LogInModal from '../../../../components/LogInModal';
 import { API_URL } from '../../../../constants';
@@ -30,6 +31,7 @@ function ActivePrograms() {
   const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
   const user: Partial<Profile | null> = useContext(UserContext);
   const isUserAdmin: boolean = user != null && user.type == 'ADMIN';
+  const history = useHistory();
 
   useEffect(() => {
     getPrograms();
@@ -122,7 +124,7 @@ function ActivePrograms() {
                       <Button
                         hidden={!isUserAdmin}
                         type="primary"
-                        href={`/dashboard/${program.id}`}
+                        onClick={() => history.push(`/dashboard/${program.id}`)}
                       >
                         Manage
                       </Button>
@@ -136,14 +138,20 @@ function ActivePrograms() {
                         ) ? (
                           <Button
                             type="primary"
-                            href={`/program/${program.id}/mentor/apply`}
+                            onClick={() =>
+                              history.push(
+                                `/program/${program.id}/mentor/apply`
+                              )
+                            }
                           >
                             Apply as mentor
                           </Button>
                         ) : (
                           <Button
                             type="primary"
-                            href={`/program/${program.id}/mentor/edit`}
+                            onClick={() =>
+                              history.push(`/program/${program.id}/mentor/edit`)
+                            }
                           >
                             Edit application
                           </Button>
@@ -162,18 +170,25 @@ function ActivePrograms() {
                         ) && (
                           <Button
                             type="primary"
-                            href={`/program/${program.id}`}
+                            onClick={() =>
+                              history.push(`/program/${program.id}`)
+                            }
                           >
                             Apply as mentee
                           </Button>
                         )}
-                      {program.state === 'MENTOR_CONFIRMATION' &&
+                      {(program.state === 'MENTOR_CONFIRMATION' ||
+                        program.state === 'ONGOING') &&
                       !isUserAdmin &&
                       user != null &&
                       !mentoringPrograms.length ? (
                         <Button
                           type="primary"
-                          href={`/program/${program.id}/mentor/confirmation`}
+                          onClick={() =>
+                            history.push(
+                              `/program/${program.id}/mentor/confirmation`
+                            )
+                          }
                         >
                           My mentor
                         </Button>
@@ -197,11 +212,13 @@ function ActivePrograms() {
                       Mentor Confirmation Period
                     </Tag>
                   ) : null}
-                  {program.state === 'ONGOING' && !isUserAdmin && (
+                  {program.state === 'ONGOING' &&
+                  !isUserAdmin &&
+                  (mentoringPrograms.length || user === null) ? (
                     <Tag className={styles.tag} color="green">
                       Ongoing
                     </Tag>
-                  )}
+                  ) : null}
                   <Paragraph>{program.headline}</Paragraph>
                 </Card>
               </Col>

diff --git a/src/scenes/Home/components/CompletedPrograms/index.tsx b/src/scenes/Home/components/CompletedPrograms/index.tsx
@@ -12,6 +12,7 @@ import {
   Typography,
 } from 'antd';
 import axios, { AxiosResponse } from 'axios';
+import { useHistory } from 'react-router-dom';
 
 import { API_URL } from '../../../../constants';
 import { SavedProgram } from '../../../../types';
@@ -22,6 +23,7 @@ const { Paragraph, Title } = Typography;
 function CompletedPrograms() {
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [programs, setPrograms] = useState<SavedProgram[]>([]);
+  const history = useHistory();
 
   useEffect(() => {
     getMentoredPrograms();
@@ -90,7 +92,7 @@ function CompletedPrograms() {
               icon={<SmileOutlined />}
               title="You haven't completed any programs"
               extra={
-                <Button href={'/home'} type="primary">
+                <Button onClick={() => history.push('/')} type="primary">
                   View available Programs
                 </Button>
               }

diff --git a/src/scenes/Home/components/MenteePrograms/index.tsx b/src/scenes/Home/components/MenteePrograms/index.tsx
@@ -12,6 +12,7 @@ import {
   Typography,
 } from 'antd';
 import axios, { AxiosResponse } from 'axios';
+import { useHistory } from 'react-router-dom';
 
 import { API_URL } from '../../../../constants';
 import { SavedProgram } from '../../../../types';
@@ -23,6 +24,7 @@ function MenteePrograms() {
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [programs, setPrograms] = useState<SavedProgram[]>([]);
   const [menteePrograms, setMenteePrograms] = useState<SavedProgram[]>([]);
+  const history = useHistory();
 
   useEffect(() => {
     getMenteePrograms();
@@ -113,7 +115,7 @@ function MenteePrograms() {
                 )
               }
               extra={
-                <Button href={'/home'} type="primary">
+                <Button onClick={() => history.push('/')} type="primary">
                   View available Programs
                 </Button>
               }

diff --git a/src/scenes/Home/components/MentorPrograms/components/MentorProgramCard/index.tsx b/src/scenes/Home/components/MentorPrograms/components/MentorProgramCard/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { Button, Card, Col, Row, Typography } from 'antd';
+import { useHistory } from 'react-router-dom';
 
 import styles from '../../../../styles.css';
 import { MentorProgramCardProps } from './interfaces';
@@ -14,6 +15,8 @@ function MentorProgramCard({
   isRejected,
   href,
 }: MentorProgramCardProps) {
+  const history = useHistory();
+
   return (
     <Col className={styles.col} md={6} key={program.id}>
       <Card
@@ -42,7 +45,7 @@ function MentorProgramCard({
           <Col span={11} className={styles.programActionButton}>
             {isRejected ? <Text type={'danger'}>Rejected</Text> : null}
             {state !== 'MENTEE_APPLICATION' && !isRejected ? (
-              <Button type="primary" href={href}>
+              <Button type="primary" onClick={() => history.push(href)}>
                 {buttonText}
               </Button>
             ) : null}

diff --git a/src/scenes/Home/components/MentorPrograms/index.tsx b/src/scenes/Home/components/MentorPrograms/index.tsx
@@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react';
 import { SmileOutlined } from '@ant-design/icons';
 import { Button, Col, notification, Result, Row, Spin, Typography } from 'antd';
 import axios, { AxiosResponse } from 'axios';
+import { useHistory } from 'react-router-dom';
 
 import { API_URL } from '../../../../constants';
 import { SavedProgram } from '../../../../types';
@@ -25,6 +26,7 @@ function MentorPrograms() {
   const [rejectedMentorPrograms, setRejectedMentorPrograms] = useState<
     SavedProgram[]
   >([]);
+  const history = useHistory();
 
   useEffect(() => {
     getMentorPrograms('PENDING');
@@ -134,7 +136,7 @@ function MentorPrograms() {
                 )
               }
               extra={
-                <Button href={'/home'} type="primary">
+                <Button onClick={() => history.push('/')} type="primary">
                   View available Programs
                 </Button>
               }

diff --git a/src/scenes/Home/components/NavigationBar/index.tsx b/src/scenes/Home/components/NavigationBar/index.tsx
@@ -1,6 +1,7 @@
 import React, { useContext } from 'react';
 
 import { Avatar, Button } from 'antd';
+import { useHistory } from 'react-router-dom';
 
 import { AUTH_URL, LOGOUT_URL } from '../../../../constants';
 import { UserContext } from '../../../../index';
@@ -10,10 +11,16 @@ import styles from './styles.css';
 
 const NavigationBar = () => {
   const user: Partial<Profile | null> = useContext(UserContext);
+  const history = useHistory();
+
   return (
     <div className={styles.navbar}>
       <img className={styles.logo} src={logo} alt="ScholarX logo" />
-      <Button type="link" href="/home" className={styles.navButtons}>
+      <Button
+        type="link"
+        onClick={() => history.push('/')}
+        className={styles.navButtons}
+      >
         Home
       </Button>
       {user != null ? (

diff --git a/src/scenes/Home/index.tsx b/src/scenes/Home/index.tsx
@@ -1,9 +1,10 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect } from 'react';
 
 import { Col, Row, Tabs, Typography } from 'antd';
 
 import { UserContext } from '../../index';
 import { Profile } from '../../types';
+import { trackPageWithGoogleAnalytics } from '../../util/google-analytics';
 import ActivePrograms from './components/ActivePrograms';
 import CompletedPrograms from './components/CompletedPrograms';
 import Footer from './components/Footer';
@@ -18,6 +19,10 @@ const { TabPane } = Tabs;
 const { Paragraph } = Typography;
 
 const Home = () => {
+  useEffect(() => {
+    trackPageWithGoogleAnalytics();
+  }, []);
+
   const user: Partial<Profile | null> = useContext(UserContext);
   return (
     <>

diff --git a/src/scenes/Home/scenes/EditMentorApplication/index.tsx b/src/scenes/Home/scenes/EditMentorApplication/index.tsx
@@ -98,7 +98,7 @@ function MentorApplication() {
               icon={<ArrowLeftOutlined />}
               size="large"
               onClick={() => {
-                history.goBack();
+                history.push('/');
               }}
             />
           </Col>

diff --git a/src/scenes/Home/scenes/ManageMentees/index.tsx b/src/scenes/Home/scenes/ManageMentees/index.tsx
@@ -104,7 +104,7 @@ function ManageMentees() {
               icon={<ArrowLeftOutlined />}
               size="large"
               onClick={() => {
-                history.goBack();
+                history.push('/');
               }}
             />
           </Col>

diff --git a/src/scenes/Home/scenes/MentorApplication/index.tsx b/src/scenes/Home/scenes/MentorApplication/index.tsx
@@ -89,7 +89,7 @@ function MentorApplication() {
               icon={<ArrowLeftOutlined />}
               size="large"
               onClick={() => {
-                history.goBack();
+                history.push('/');
               }}
             />
           </Col>

diff --git a/src/scenes/Home/scenes/MentorConfirmation/index.tsx b/src/scenes/Home/scenes/MentorConfirmation/index.tsx
@@ -155,7 +155,7 @@ function MentorConfirmation() {
               icon={<ArrowLeftOutlined />}
               size="large"
               onClick={() => {
-                history.goBack();
+                history.push('/');
               }}
             />
           </Col>
@@ -249,7 +249,7 @@ function MentorConfirmation() {
                   : "You haven't applied for this program as a mentee"
               }
               extra={
-                <Button href={'/home'} type="primary">
+                <Button onClick={() => history.push('/')} type="primary">
                   View available Programs
                 </Button>
               }

diff --git a/src/scenes/Home/scenes/RequestMentors/index.tsx b/src/scenes/Home/scenes/RequestMentors/index.tsx
@@ -66,7 +66,7 @@ function RequestMentors() {
             icon={<ArrowLeftOutlined />}
             size="large"
             onClick={() => {
-              history.goBack();
+              history.push('/');
             }}
           />
         </Col>