[Feature] Habilitar para a criação de novos currículos e Universidades

.gitignore

@@ -22,4 +22,6 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-.eslintcache
+.eslintcache
+
+package-lock.json

package.json

@@ -19,6 +19,7 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-icons": "^4.1.0",
+    "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.1",
     "typescript": "^4.0.3",
     "web-vitals": "^0.2.4"
@@ -52,6 +53,7 @@
     ]
   },
   "devDependencies": {
+    "@types/react-router-dom": "^5.3.1",
     "@typescript-eslint/eslint-plugin": "^4.14.1",
     "@typescript-eslint/parser": "^4.14.1",
     "eslint": "^7.2.0",

public/university/university.json

@@ -0,0 +1,14 @@
+[
+    {
+        "key": "UFPE",
+        "name": "Universidade Federal de Pernambuco",
+        "website": "",
+        "logo": "",
+        "courses": [
+            {
+                "key": "engenharia-da-computacao",
+                "name": "Engenharia da Computação"
+            }
+        ]
+    }
+]

src/App.tsx

@@ -1,5 +1,6 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { Box, SimpleGrid } from '@chakra-ui/react';
+import { useParams } from 'react-router-dom';
 
 import Header from './components/Header';
 import Navigator from './components/Navigator';
@@ -8,39 +9,21 @@ import StatsContainer from './components/StatsContainer';
 import NextSteps from './components/NextSteps';
 import Footer from './components/Footer';
 
-import { CurriculumType } from './models/Curriculum';
+import useCurriculum from './service/hook';
 
-function App(): React.ReactElement {
-  const [curriculum, setCurriculum] = useState<
-    CurriculumType | Record<string, never>
-  >({});
-  const [academicTotalDone, setAcademicTotalDone] = useState(0);
-  const [academicObligatoryDone, setAcademicObligatoryDone] = useState(0);
-  const [academicElectiveDone, setAcademicElectiveDone] = useState(0);
+type ParamsType = {
+  course: string;
+  university: string;
+};
 
-  const handleClick = ({ isActive, isObligatory, hours }) => {
-    if (isActive) {
-      if (isObligatory) {
-        setAcademicObligatoryDone(academicObligatoryDone + hours);
-      } else {
-        setAcademicElectiveDone(academicElectiveDone + hours);
-      }
-      setAcademicTotalDone(academicTotalDone + hours);
-    } else {
-      if (isObligatory) {
-        setAcademicObligatoryDone(academicObligatoryDone - hours);
-      } else {
-        setAcademicElectiveDone(academicElectiveDone - hours);
-      }
-      setAcademicTotalDone(academicTotalDone - hours);
-    }
-  };
+function App(): React.ReactElement {
+  const { loadCurriculum, curriculum, updateState, completed } =
+    useCurriculum();
+  const params = useParams<ParamsType>();
 
   useEffect(() => {
-    fetch('./university/UFPE/engenhariaDaComputacao.json')
-      .then((response) => response.json())
-      .then((json) => setCurriculum(json));
-  }, []);
+    loadCurriculum(params.university, params.course);
+  }, [loadCurriculum, params]);
 
   const arrayOfSemesters = Array.from(
     { length: curriculum?.semesters },
@@ -50,7 +33,10 @@ function App(): React.ReactElement {
   return (
     <Box m="5">
       <Header />
-      <Navigator />
+      <Navigator
+        university={curriculum.university}
+        course={curriculum.course}
+      />
       <Box w="100%" maxH="60vh" overflow="scroll">
         {arrayOfSemesters.map((semester) => (
           <Box d="flex" w="100%" key={`row-${semester}`}>
@@ -60,7 +46,7 @@ function App(): React.ReactElement {
                 <DisciplineBox
                   key={item.name}
                   id={item.code}
-                  onClick={handleClick}
+                  onClick={updateState}
                   {...item}
                 />
               ))}
@@ -69,9 +55,9 @@ function App(): React.ReactElement {
       </Box>
       <SimpleGrid columns={[1, 2]} spacing="5">
         <StatsContainer
-          academicTotalDone={academicTotalDone}
-          academicObligatoryDone={academicObligatoryDone}
-          academicElectiveDone={academicElectiveDone}
+          academicTotal={completed.academicTotal}
+          academicObligatory={completed.academicObligatory}
+          academicElective={completed.academicElective}
           totalHours={curriculum?.totalHours}
           totalHoursObligatory={curriculum?.totalHoursObligatory}
           totalHoursElective={curriculum?.totalHoursElective}

src/components/Navigator/index.tsx

@@ -1,16 +1,26 @@
+/* eslint-disable react/require-default-props */
 import React from 'react';
 
 import { Breadcrumb, BreadcrumbItem, BreadcrumbLink } from '@chakra-ui/react';
 
-const Navigator = (): React.ReactElement => {
+type NavigatorProps = {
+  university?: string;
+  course?: string;
+};
+
+const Navigator = ({
+  university,
+  course,
+}: NavigatorProps): React.ReactElement => {
+  if (!university && !course) return <></>;
   return (
     <Breadcrumb size="20" m="3" separator="/">
       <BreadcrumbItem>
-        <BreadcrumbLink href="#">UFPE</BreadcrumbLink>
+        <BreadcrumbLink href="#">{university}</BreadcrumbLink>
       </BreadcrumbItem>
       <BreadcrumbItem>
         <BreadcrumbLink href="#" isCurrentPage>
-          Engenharia da Computação
+          {course}
         </BreadcrumbLink>
       </BreadcrumbItem>
     </Breadcrumb>

src/components/StatsContainer/index.tsx

@@ -4,18 +4,18 @@ import { Stack, Heading, Box } from '@chakra-ui/react';
 import StatsHours from '../StatsHours';
 
 type StatsContainerProps = {
-  academicTotalDone: number;
-  academicObligatoryDone: number;
-  academicElectiveDone: number;
+  academicTotal: number;
+  academicObligatory: number;
+  academicElective: number;
   totalHours: number;
   totalHoursObligatory: number;
   totalHoursElective: number;
 };
 
 const StatsContainer = ({
-  academicTotalDone,
-  academicObligatoryDone,
-  academicElectiveDone,
+  academicTotal,
+  academicObligatory,
+  academicElective,
   totalHours,
   totalHoursObligatory,
   totalHoursElective,
@@ -26,19 +26,15 @@ const StatsContainer = ({
         Aproveitamento Acadêmico
       </Heading>
       <Box w="100%" d="flex" flexWrap="wrap">
-        <StatsHours
-          title="Total"
-          partial={academicTotalDone}
-          total={totalHours}
-        />
+        <StatsHours title="Total" partial={academicTotal} total={totalHours} />
         <StatsHours
           title="Obrigatória"
-          partial={academicObligatoryDone}
+          partial={academicObligatory}
           total={totalHoursObligatory}
         />
         <StatsHours
           title="Eletivas"
-          partial={academicElectiveDone}
+          partial={academicElective}
           total={totalHoursElective}
         />
       </Box>

src/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 import { ChakraProvider, CSSReset, ColorModeScript } from '@chakra-ui/react';
 
 import App from './App';
@@ -10,7 +11,11 @@ ReactDOM.render(
     <ChakraProvider>
       <CSSReset />
       <ColorModeScript />
-      <App />
+      <Router>
+        <Switch>
+          <Route path="/:university/:course" component={App} />
+        </Switch>
+      </Router>
     </ChakraProvider>
   </React.StrictMode>,
   document.getElementById('root')

src/service/hook.tsx

@@ -0,0 +1,59 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+import { useCallback, useMemo, useState, useEffect } from 'react';
+import { useRouteMatch } from 'react-router-dom';
+
+import { CurriculumType } from '../models/Curriculum';
+import Service from './service';
+
+export default function useCurriculum() {
+  const { params } = useRouteMatch<{ university: string; course: string }>();
+
+  const [curriculum, setCurriculum] = useState<
+    CurriculumType | Record<string, never>
+  >({});
+  const [academicTotal, setAcademicTotal] = useState(0);
+  const [academicObligatory, setAcademicObligatory] = useState(0);
+  const [academicElective, setAcademicElective] = useState(0);
+  const service = useMemo(() => new Service(), []);
+
+  useEffect(() => {
+    service.setCurrent(params.university, params.course);
+  }, [params, service]);
+
+  const updateState = ({ isActive, isObligatory, hours }): void => {
+    if (isActive) {
+      if (isObligatory) {
+        setAcademicObligatory(academicObligatory + hours);
+      } else {
+        setAcademicElective(academicElective + hours);
+      }
+      setAcademicTotal(academicTotal + hours);
+    } else {
+      if (isObligatory) {
+        setAcademicObligatory(academicObligatory - hours);
+      } else {
+        setAcademicElective(academicElective - hours);
+      }
+      setAcademicTotal(academicTotal - hours);
+    }
+  };
+
+  const loadCurriculum = useCallback(
+    async (university: string, course: string) => {
+      const data = await service.loadCurriculum(university, course);
+      setCurriculum(data);
+    },
+    [service]
+  );
+
+  return {
+    curriculum,
+    updateState,
+    loadCurriculum,
+    completed: {
+      academicTotal,
+      academicElective,
+      academicObligatory,
+    },
+  };
+}

src/service/service.ts

@@ -0,0 +1,28 @@
+/* eslint-disable no-console */
+/* eslint-disable class-methods-use-this */
+
+import { CurriculumType } from '../models/Curriculum';
+
+export default class Service {
+  currentUniversity = '';
+
+  currentCourse = '';
+
+  setCurrent(university: string, course: string): void {
+    this.currentUniversity = university;
+    this.currentCourse = course;
+  }
+
+  async loadCurriculum(
+    university: string,
+    course: string
+  ): Promise<CurriculumType | Record<string, never>> {
+    try {
+      const response = await fetch(`/university/${university}/${course}.json`);
+      return await (response.json() as Promise<CurriculumType>);
+    } catch (err) {
+      console.error(err);
+      return {};
+    }
+  }
+}