completed timetable share feature

relaxxpls · Feb 10, 2022 · e576e38 · e576e38
1 parent 3ef6254
commit e576e38
Show file tree

Hide file tree

Showing 7 changed files with 109 additions and 62 deletions.
diff --git a/src/components/CourseFinder/CourseSuggestionButton.jsx b/src/components/CourseFinder/CourseSuggestionButton.jsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+const CourseSuggestionButton = () => {
+  return <div>CourseSuggestionButton</div>
+}
+
+export default CourseSuggestionButton
diff --git a/src/components/CourseFinder/index.jsx b/src/components/CourseFinder/index.jsx
@@ -1,3 +1,4 @@
 export { default as CourseList } from './CourseList'
 export { default as CourseSearch } from './CourseSearch'
 export { default as CourseFinderContainer } from './CourseContainer'
+export { default as CourseSuggestionButton } from './CourseSuggestionButton'
diff --git a/src/components/Timetable/TimetableContainer.jsx b/src/components/Timetable/TimetableContainer.jsx
@@ -173,24 +173,26 @@ const TimetableContainer = () => {
       </PageHeading>
 
       {semesterList[semIdx] && (
-        <TimetableSemesterTitle>
-          <ButtonIcon
-            icon={<ChevronLeft size="20" />}
-            onClick={handleClickPrev}
-            disabled={loading || !(semIdx - 1 in semesterList)}
-            hoverstyle={{ background: 'rgba(0, 0, 0, 0.3)' }}
-          />
-          {semesterList[semIdx].season}&nbsp;
-          {displayYear(semesterList[semIdx])}
-          <ButtonIcon
-            icon={<ChevronRight size="20" />}
-            disabled={loading || !(semIdx + 1 in semesterList)}
-            onClick={handleClickNext}
-            hoverstyle={{ background: 'rgba(0, 0, 0, 0.3)' }}
-          />
+        <TimetableSemesterHeader>
           <TimetableShareButton coursesInTimetable={courseTimetableList} />
+          <TimetableSemesterTitle>
+            <ButtonIcon
+              icon={<ChevronLeft size="20" />}
+              onClick={handleClickPrev}
+              disabled={loading || !(semIdx - 1 in semesterList)}
+              hoverstyle={{ background: 'rgba(0, 0, 0, 0.3)' }}
+            />
+            {semesterList[semIdx].season}&nbsp;
+            {displayYear(semesterList[semIdx])}
+            <ButtonIcon
+              icon={<ChevronRight size="20" />}
+              disabled={loading || !(semIdx + 1 in semesterList)}
+              onClick={handleClickNext}
+              hoverstyle={{ background: 'rgba(0, 0, 0, 0.3)' }}
+            />
+          </TimetableSemesterTitle>
           <TimetableDownloadLink coursesInTimetable={courseTimetableList} />
-        </TimetableSemesterTitle>
+        </TimetableSemesterHeader>
       )}
 
       {loading && <LoaderAnimation />}
@@ -240,13 +242,17 @@ const TimetableContainer = () => {
 
 export default TimetableContainer
 
+const TimetableSemesterHeader = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+`
+
 const TimetableSemesterTitle = styled.div`
   display: flex;
-  position: relative;
   gap: 0.5rem;
   align-items: center;
-  justify-content: center;
-  margin-bottom: 1rem;
   color: ${({ theme }) => theme.textColor};
   font-size: 1.25rem;
   text-transform: capitalize;
@@ -265,6 +271,7 @@ const TimetableCardTitle = styled.div`
   justify-content: space-between;
   width: 100%;
 `
+
 const ClashAlerts = styled.div`
   margin-top: 1rem;
 `
diff --git a/src/components/Timetable/TimetableContainerCustom.jsx b/src/components/Timetable/TimetableContainerCustom.jsx
@@ -1,4 +1,15 @@
-import { Aside, PageHeading, PageTitle } from 'components/shared'
+import { LoadingOutlined } from '@ant-design/icons'
+import { Spin } from 'antd'
+import { useEffect, useState } from 'react'
+
+import {
+  Aside,
+  PageHeading,
+  PageTitle,
+  toast,
+  LoaderAnimation,
+} from 'components/shared'
+import { API } from 'config/api'
 import { useQueryString } from 'hooks'
 
 import CurrentTime from './CurrentTime'
@@ -7,21 +18,50 @@ import TimetableLayout from './TimetableLayout'
 
 const TimetableContainerCustom = () => {
   const { getQueryString } = useQueryString()
-  const coursesJSON = getQueryString('id')
-  const courseTimetableList = JSON.parse(coursesJSON)
+  const [courseTimetableList, setCourseTimetableList] = useState([])
+  const [loading, setLoading] = useState(false)
+
+  useEffect(() => {
+    const fetchTimetableData = async (idList) => {
+      try {
+        setLoading(true)
+        const params = {
+          ids: encodeURIComponent(idList),
+        }
+
+        const response = await API.timetable.list({ params })
+
+        setCourseTimetableList(response.results)
+      } catch (error) {
+        toast({ status: 'error', content: error })
+      } finally {
+        setLoading(false)
+      }
+    }
+    const idList = getQueryString('id')
+    fetchTimetableData(idList)
+  }, [getQueryString])
 
   return (
     <>
       <PageHeading>
         <PageTitle>Timetable (Shared)</PageTitle>
       </PageHeading>
-      <TimetableLayout>
-        {courseTimetableList.map((item) => (
-          <TimetableCourseItem key={item.id} data={item} />
-        ))}
 
-        <CurrentTime mode="vertical" />
-      </TimetableLayout>
+      {loading && <LoaderAnimation />}
+
+      <Spin
+        spinning={loading}
+        indicator={<LoadingOutlined style={{ fontSize: 24 }} spin />}
+      >
+        <TimetableLayout>
+          {courseTimetableList.map((item) => (
+            <TimetableCourseItem key={item.id} data={item} />
+          ))}
+
+          <CurrentTime mode="vertical" />
+        </TimetableLayout>
+      </Spin>
 
       <Aside />
     </>

diff --git a/src/components/Timetable/TimetableDownloadLink.jsx b/src/components/Timetable/TimetableDownloadLink.jsx
@@ -1,7 +1,6 @@
 import { Download } from '@styled-icons/heroicons-outline'
 import { Dropdown, Menu } from 'antd'
 import { useSelector } from 'react-redux'
-import styled from 'styled-components/macro'
 
 import { ButtonIcon } from 'components/shared'
 import { cols, rows, slots } from 'data/timetable'
@@ -113,22 +112,15 @@ END:VCALENDAR`
   )
 
   return (
-    <DownloadButtonContainer>
-      <Dropdown overlay={menu} trigger={['click']}>
-        <ButtonIcon
-          icon={<Download size="22" />}
-          onClick={() => {}}
-          tooltip="Download timetable"
-          hoverstyle={{ background: 'rgba(0, 0, 0, 0.3)' }}
-        />
-      </Dropdown>
-    </DownloadButtonContainer>
+    <Dropdown overlay={menu} trigger={['click']}>
+      <ButtonIcon
+        icon={<Download size="22" />}
+        onClick={() => {}}
+        tooltip="Download timetable"
+        hoverstyle={{ background: 'rgba(0, 0, 0, 0.3)' }}
+      />
+    </Dropdown>
   )
 }
 
 export default TimetableDownloadLink
-
-const DownloadButtonContainer = styled.div`
-  position: absolute;
-  right: 0;
-`
diff --git a/src/components/Timetable/TimetableShareButton.jsx b/src/components/Timetable/TimetableShareButton.jsx
@@ -1,16 +1,17 @@
 import { Share } from '@styled-icons/heroicons-outline'
 import { Dropdown, Menu } from 'antd'
-import styled from 'styled-components/macro'
 
 import { ButtonIcon } from 'components/shared'
 import { useQueryString } from 'hooks'
 
 const TimetableShareButton = ({ coursesInTimetable }) => {
   const { setQueryString } = useQueryString()
 
-  const coursesJSON = JSON.stringify(coursesInTimetable)
   const handleShare = () => {
-    setQueryString('id', coursesJSON)
+    setQueryString(
+      'id',
+      coursesInTimetable.map(({ id }) => id)
+    )
   }
 
   const getURL = () => {
@@ -30,22 +31,15 @@ const TimetableShareButton = ({ coursesInTimetable }) => {
   )
 
   return (
-    <ShareButtonContainer>
-      <Dropdown overlay={menu} trigger={['click']}>
-        <ButtonIcon
-          icon={<Share size="22" />}
-          onClick={handleShare}
-          tooltip="Share Timetable as Link"
-          hoverstyle={{ background: 'rgba(0, 0, 0, 0.3)' }}
-        />
-      </Dropdown>
-    </ShareButtonContainer>
+    <Dropdown overlay={menu} trigger={['click']}>
+      <ButtonIcon
+        icon={<Share size="22" />}
+        onClick={handleShare}
+        tooltip="Share Timetable as Link"
+        hoverstyle={{ background: 'rgba(0, 0, 0, 0.3)' }}
+      />
+    </Dropdown>
   )
 }
 
 export default TimetableShareButton
-
-const ShareButtonContainer = styled.div`
-  position: absolute;
-  left: 0;
-`
diff --git a/src/config/api.jsx b/src/config/api.jsx
@@ -171,6 +171,12 @@ export const API = {
     list: async () => APIInstance.get('/stats'),
   },
 
+  // * Timetable endpoint
+  timetable: {
+    list: async ({ params }) => APIInstance.get('/timetable', { params }),
+    read: async ({ id }) => APIInstance.get(`/timetable/${id}`),
+  },
+
   // * Developer stats endpoints
   GitHub: {
     getContributors: async () => {