Merge pull request #11 from bharatari/dev

v1.1.0
bharatari · Apr 25, 2020 · e156ef5 · e156ef5
2 parents 61fbb60 + 90d4df1
commit e156ef5
Show file tree

Hide file tree

Showing 6 changed files with 110 additions and 100 deletions.
diff --git a/client/components/Results/components/Content/index.js b/client/components/Results/components/Content/index.js
@@ -24,7 +24,7 @@ const Spinner = styled(Spin)`
   display: block !important;
 `;
 
-export default function Content({ section, relatedSections, loadingSection, handleRelatedSectionClick }) {
+export default function Content({ section, relatedSections, loadingSection, handleRelatedSectionClick, error }) {
   if (section) {
     return <SectionContent section={section} relatedSections={relatedSections} handleRelatedSectionClick={handleRelatedSectionClick} />;
   } else if (loadingSection) {
@@ -33,6 +33,12 @@ export default function Content({ section, relatedSections, loadingSection, hand
         <Spinner />
       </LoadingContainer>
     );
+  } else if (error) {
+    return (
+      <EmptyContainer>
+        <Empty>We had trouble loading that for you, please try again.</Empty>
+      </EmptyContainer>
+    );
   } else {
     return (
       <EmptyContainer>

diff --git a/client/components/Results/components/List/index.js b/client/components/Results/components/List/index.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { List, Spin, Popover as AntPopover } from 'antd';
 import { FrownTwoTone, UserOutlined } from '@ant-design/icons';
 import general from '../../../../utils/general';
@@ -91,14 +91,20 @@ const IconText = ({ icon, text }) => (
   </span>
 );
 
-export default function ResultsList({ loading, id, data, onClick }) {
+export default function ResultsList({ loading, id, data, onClick, error }) {
+  const [page, setPage] = useState(1);
+
+  useEffect(() => {
+    setPage(1);
+  }, [data]);
+
   const popover = (
     <Popover>
       <p>Because of FERPA restrictions, grade data for certain classes — in particular, classes with a small number of students — is unavailable.</p>
     </Popover>
   );
 
-  const empty = (
+  const emptyMessage = (
     <EmptyContainer>
       <StyledIcon />
       <Error>We weren't able to find that. Try searching for something else!</Error>
@@ -110,6 +116,13 @@ export default function ResultsList({ loading, id, data, onClick }) {
     </EmptyContainer>
   );
 
+  const errorMessage = (
+    <EmptyContainer>
+      <StyledIcon />
+      <Error>We had trouble getting that for you, please try again.</Error>
+    </EmptyContainer>
+  );
+
   if (data) {
     if (data.length < 1) {
       return empty;
@@ -123,7 +136,9 @@ export default function ResultsList({ loading, id, data, onClick }) {
             style: {
               marginRight: '10px'
             },
-            showSizeChanger: false
+            showSizeChanger: false,
+            current: page,
+            onChange: (page) => setPage(page)
           }}
           dataSource={data}
           renderItem={item => {  
@@ -159,7 +174,9 @@ export default function ResultsList({ loading, id, data, onClick }) {
         </LoadingItem>
       </List>
     );
+  } else if (error) {
+    return errorMessage;
   } else {
-    return empty;
+    return emptyMessage;
   }
 }
diff --git a/client/components/Results/index.js b/client/components/Results/index.js
@@ -2,10 +2,11 @@ import React, { useEffect, useState, useRef } from 'react';
 import { List, Content } from './components';
 import { Form } from '../';
 import { Row, Col } from 'antd';
-import * as sectionModule from '../../modules/section';
+import { fetchSections, fetchSection } from '../../modules/section';
 import { useRouter } from 'next/router';
 import styled from 'styled-components';
 import { animateScroll as scroll } from 'react-scroll';
+import { useQuery } from 'react-query';
 
 const Container = styled.div`
   display: block;
@@ -45,119 +46,93 @@ export default function Results() {
   const router = useRouter();
   const { search, sectionId } = router.query;
 
-  const [sections, setSections] = useState(null);
-  const [loadingSections, setLoadingSections] = useState(true);
-
-  const [relatedSections, setRelatedSections] = useState(null);
-
-  const [section, setSection] = useState(null);
-  const [loadingSection, setLoadingSection] = useState(false);
-
-  const [sortParams, setSortParams] = useState({
-    sortField: 'year',
-    sortDirection: 'DESC'
-  });
-
-  useEffect(() => {
-    async function fetchSections() {
-      setSections(null);
-      setSection(null);
-
-      if (search) {
-        setLoadingSections(true);
-
-        const response = await sectionModule.fetchSections({ search, ...sortParams });
-
-        setSections(response);
-        setLoadingSections(false);
-      }
-    }
-
-    fetchSections();
-  }, [search]);
-
-  useEffect(() => {
-    async function fetchSection() {
-      if (sectionId != null) {
-        setSection(null);
-        setLoadingSection(true);
-
-        const response = await sectionModule.fetchSection(sectionId);
-
-        setSection(response);
-        setLoadingSection(false);
-      }
-    }
-
-    fetchSection();
-  }, [sectionId]);
-
-  useEffect(() => {
-    async function fetchRelatedSections() {
-      if (section) {
-        setRelatedSections(null);
-
-        const response = await sectionModule.fetchSections({
-          courseNumber: section.course.number,
-          coursePrefix: section.course.prefix,
-        });
-
-        setRelatedSections(response);
-      }
-    }
-
-    fetchRelatedSections();
-  }, [section]);
+  const { data: sections, status: sectionsStatus, error: sectionsError } = useQuery(
+    search && [
+      'sections',
+      { search, sortField: 'year', sortDirection: 'DESC' },
+    ],
+    fetchSections
+  );
+  const { data: section, status: sectionStatus, error: sectionError } = useQuery(sectionId, fetchSection);
+  const { data: relatedSections } = useQuery(
+    section && [
+      'relatedSections',
+      {
+        courseNumber: section.course.number,
+        coursePrefix: section.course.prefix,
+      },
+    ],
+    fetchSections
+  );
 
   function handleSubmit({ search }) {
     router.push({
       pathname: '/results',
-      query: { search }
+      query: { search },
     });
   }
 
   function handleClick(id) {
     router.push({
       pathname: '/results',
-      query: { search, sectionId: id }
+      query: { search, sectionId: id },
     });
 
-    const scrollDistance = window.pageYOffset + scrollRef.current.getBoundingClientRect().top
+    const scrollDistance =
+      window.pageYOffset + scrollRef.current.getBoundingClientRect().top;
 
     scroll.scrollTo(scrollDistance);
   }
 
   function handleRelatedSectionClick(search, id) {
     router.push({
       pathname: '/results',
-      query: { search, sectionId: id }
+      query: { search, sectionId: id },
     });
 
-    const scrollDistance = window.pageYOffset + scrollRef.current.getBoundingClientRect().top
+    const scrollDistance =
+      window.pageYOffset + scrollRef.current.getBoundingClientRect().top;
 
     scroll.scrollTo(scrollDistance);
   }
 
-  return (      
+  return (
     <Container>
       <Row>
-        <Col lg={{ span: 8, offset: 8 }} sm={{ span: 18, offset: 3 }} xs={{ span: 20, offset: 2 }}>
+        <Col
+          lg={{ span: 8, offset: 8 }}
+          sm={{ span: 18, offset: 3 }}
+          xs={{ span: 20, offset: 2 }}
+        >
           <Form onSubmit={handleSubmit} initialValues={{ search }} />
         </Col>
       </Row>
-      
+
       <Row>
-        <ResultsContainer lg={{ span: 20, offset: 2 }} xs={{ span: 24, offset: 0 }}>
+        <ResultsContainer
+          lg={{ span: 20, offset: 2 }}
+          xs={{ span: 24, offset: 0 }}
+        >
           <Row>
             <Col lg={6} sm={24}>
-              <List data={sections} onClick={handleClick} loading={loadingSections}
-                id={sectionId} />
+              <List
+                data={sections}
+                onClick={handleClick}
+                loading={sectionsStatus === 'loading'}
+                id={sectionId}
+                error={sectionsError}
+              />
             </Col>
 
-
             <Col lg={18} sm={24}>
               <div style={{ width: '100%', height: '100%' }} ref={scrollRef}>
-                <Content section={section} relatedSections={relatedSections} loadingSection={loadingSection} handleRelatedSectionClick={handleRelatedSectionClick} />
+                <Content
+                  section={section}
+                  relatedSections={relatedSections}
+                  loadingSection={sectionStatus === 'loading'}
+                  handleRelatedSectionClick={handleRelatedSectionClick}
+                  error={sectionError}
+                />
               </div>
             </Col>
           </Row>

diff --git a/client/modules/section/index.js b/client/modules/section/index.js
@@ -1,26 +1,18 @@
 import data from '../../utils/data';
 import utils from './utils';
 
-export async function fetchSections(params) {
-  try { 
-    let response = await data.request('section', 'get', null, params);
+export async function fetchSections(key, params) {
+  let response = await data.request('section', 'get', null, params);
 
-    response = utils.buildSectionNames(response);
+  response = utils.buildSectionNames(response);
 
-    return response;
-  } catch (e) {
-    throw e;
-  }
+  return response;
 }
 
 export async function fetchSection(id) {
-  try {
-    let response = await data.request('section', 'get', id);
+  let response = await data.request('section', 'get', id);
 
-    response = utils.buildSectionName(response);
+  response = utils.buildSectionName(response);
 
-    return response;
-  } catch (e) {
-    throw e;
-  }
+  return response;
 }
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "utd-grades-client",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -17,6 +17,7 @@
     "next": "9.3.5",
     "react": "16.13.1",
     "react-dom": "16.13.1",
+    "react-query": "^1.2.9",
     "react-scroll": "^1.7.16",
     "react-transition-group": "^4.3.0",
     "styled-components": "^5.1.0"