[CPM-63] added course regulation tooltips in plan page (#80)

* added course regulation tooltips in plan page * remove unused imports * added course regulation tooltips in plan page Co-authored-by: Nisarag <[email protected]> Co-authored-by: Richard <[email protected]> * remove unused imports * Update comment Co-authored-by: Nisarag <[email protected]> Co-authored-by: Richard <[email protected]> Co-authored-by: Dalton <[email protected]>
momentum-agile · Sep 23, 2020 · 1f9a11d · 1f9a11d
1 parent 530d82a
commit 1f9a11d
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 9 deletions.
diff --git a/client/src/pages/Plan/Plan.js b/client/src/pages/Plan/Plan.js
@@ -19,6 +19,7 @@ const Plan = () => {
         realCourses,
         programme,
         plan: { endYear, startYear, courseAllocations },
+        unfilteredRealCourses,
         setCourseAllocations,
     } = usePlan();
     const [searchTerm, setSearchTerm] = useState("");
@@ -91,7 +92,7 @@ const Plan = () => {
                 <Divider orientation="horizontal" backgroundColor={c.iceBlue} width="100%" height="2px" />
                 <Flex overflowY="scroll" direction="column">
                     {years.map((year) => (
-                        <Year year={year} data={courseAllocations} updateData={setCourseAllocations} />
+                        <Year year={year} data={courseAllocations} updateData={setCourseAllocations} courses={unfilteredRealCourses} />
                     ))}
                 </Flex>
             </Flex>

diff --git a/client/src/pages/Plan/Year.js b/client/src/pages/Plan/Year.js
@@ -1,17 +1,32 @@
 import React from "react";
-import { Flex, Stack, Text } from "@chakra-ui/core";
+import { Flex, Stack, Text, Icon } from "@chakra-ui/core";
+import ReactTooltip from "react-tooltip";
 import { useDrag, useDrop } from "react-dnd";
 import { ItemTypes } from "./ItemTypes";
 import { colors as c } from "../../colors";
 
-const CourseTile = ({ courseName }) => {
+const CourseTile = ({ courseName, courses }) => {
     const [{ isDragging }, drag] = useDrag({
         item: { courseName, type: ItemTypes.COURSE_TILE },
         collect: (monitor) => ({
             isDragging: monitor.isDragging(),
         }),
     });
 
+    const getCourseRegulations = () => {
+        const foundCourses = courses.find((course) => {
+            return course.courseCode === courseName;
+        });
+        if (!foundCourses) return "Course not in database.";
+        const { prerequisites, corequisites, restrictions, informalEquivalents } = foundCourses;
+        const tooltipString = [];
+        prerequisites.length && tooltipString.push(`Prerequisites: ${prerequisites} <br />`);
+        corequisites.length && tooltipString.push(`Corequisites: ${corequisites} <br />`);
+        restrictions.length && tooltipString.push(`Restrictions: ${restrictions} <br />`);
+        informalEquivalents.length && tooltipString.push(`Informal Equivalents: ${informalEquivalents} <br />`);
+        return tooltipString.join("");
+    };
+
     const opacity = isDragging ? 0.4 : 1;
 
     return (
@@ -20,6 +35,7 @@ const CourseTile = ({ courseName }) => {
             justify="center"
             style={{ opacity }}
             align="center"
+            flexDirection="row"
             borderWidth="1px"
             width="90%"
             backgroundColor={c.darkGrey}
@@ -28,14 +44,18 @@ const CourseTile = ({ courseName }) => {
             ref={drag}
             cursor="pointer"
         >
-            <Text textAlign="center" fontWeight="bold" fontSize="xl" color={c.white}>
+            <Text flex="1" textAlign="center" fontWeight="bold" fontSize="xl" color={c.white}>
                 {courseName}
             </Text>
+            <ReactTooltip id={courseName} place="right" multiline html>
+                {getCourseRegulations()}
+            </ReactTooltip>
+            <Icon name="info-outline" color={c.white} data-tip data-for={courseName} />
         </Flex>
     );
 };
 
-const SemesterBox = ({ semester, data, year, updateData }) => {
+const SemesterBox = ({ semester, data, year, updateData, courses }) => {
     const [{ canDrop, isOver }, drop] = useDrop({
         accept: [ItemTypes.COURSE_PILL, ItemTypes.COURSE_TILE, ItemTypes.COURSE_REQUIREMENT_PILL],
         drop: ({ courseName }, monitor) => {
@@ -80,15 +100,15 @@ const SemesterBox = ({ semester, data, year, updateData }) => {
                     {data
                         .filter((x) => x.semester === semester && x.year === year)
                         .map((course, idx) => (
-                            <CourseTile key={idx} courseName={course.course} />
+                            <CourseTile key={idx} courseName={course.course} courses={courses} />
                         ))}
                 </Stack>
             </Flex>
         </Flex>
     );
 };
 
-const Year = ({ year, data, updateData }) => {
+const Year = ({ year, data, updateData, courses }) => {
     return (
         <Flex direction="column" mt={4}>
             <Flex width="100%" justify="center" align="center" marginTop="20px">
@@ -98,7 +118,7 @@ const Year = ({ year, data, updateData }) => {
             </Flex>
             <Flex width="100%" direction="row" marginTop="5px">
                 {["S1", "S2"].map((semester) => (
-                    <SemesterBox semester={semester} year={year} data={data} updateData={updateData} />
+                    <SemesterBox semester={semester} year={year} data={data} updateData={updateData} courses={courses} />
                 ))}
             </Flex>
         </Flex>

diff --git a/client/src/pages/Plan/usePlan.js b/client/src/pages/Plan/usePlan.js
@@ -52,6 +52,7 @@ const usePlan = () => {
     const [programme, setProgramme] = useState({ regulations });
     const { planId } = useParams();
     const [realCourses, setRealCourses] = useState([]);
+    const [unfilteredRealCourses, setUnfilteredRealCourses] = useState([]);
     const [plan, setPlan] = useState([]);
 
     const initPage = useCallback(async () => {
@@ -66,6 +67,7 @@ const usePlan = () => {
         ])
             .then((values) => {
                 const [realCourses, plan, students, programs] = values;
+                setUnfilteredRealCourses(realCourses);
                 const unique = [...new Set(plan.courseAllocations.map((item) => item.course))];
                 setRealCourses(realCourses.filter((val) => !unique.includes(val.courseCode)));
                 setPlan(plan);
@@ -91,7 +93,7 @@ const usePlan = () => {
         });
     };
 
-    return { student, realCourses, programme, plan, setCourseAllocations };
+    return { student, realCourses, programme, plan, unfilteredRealCourses, setCourseAllocations };
 };
 
 export default usePlan;