refactor to solve react warnings

frontend/src/components/atoms/SideBarCard/index.tsx

@@ -27,7 +27,7 @@ const SideBarCard: React.FC<SideBarCardProps> = ({
       className={classNames(
         styles.sideBarCard,
         getStyle(type),
-        subtitle === undefined && content === undefined
+        subtitle === undefined || content === undefined
           ? styles.sideBarEmptyCard
           : ""
       )}

frontend/src/components/molecules/CurrentDirectoryView/index.tsx

@@ -19,13 +19,12 @@ type idBooleanMap = { [key: number]: boolean };
 interface MyState {
   isSelected: idBooleanMap;
   isHoveringOver: idBooleanMap;
-  isHoveringTitle: Boolean;
 }
 
 class CurrentDirectoryView extends React.Component<CurrentDirectoryViewProps, MyState> {
   constructor(props: CurrentDirectoryViewProps) {
     super(props);
-    this.state = { isSelected: [], isHoveringOver: [], isHoveringTitle: false };
+    this.state = { isSelected: [], isHoveringOver: []};
   }
 
   componentDidMount() {
@@ -73,7 +72,7 @@ class CurrentDirectoryView extends React.Component<CurrentDirectoryViewProps, My
     for (let item in items) {
       isSelected[items[item].id] = setValue;
     }
-    this.setState({ isSelected, isHoveringTitle: false });
+    this.setState({ isSelected});
   }
 
   handleCardClick(id: number) {
@@ -99,16 +98,10 @@ class CurrentDirectoryView extends React.Component<CurrentDirectoryViewProps, My
       <>
         <ResourceSectionHeader
           heading="Files"
-          onMouseOver={() => {
-            this.setState({ isHoveringTitle: true });
-          }}
-          onMouseOut={() => {
-            this.setState({ isHoveringTitle: false });
-          }}
           showDownload={this.isAnySelected()}
-          showSelectAll={this.isAnySelected() || this.state.isHoveringTitle}
           onSelectAllClick={() => this.handleSelectAllClick()}
-          selectAllIcon={this.isAllSelected() ? faCheckSquare : faSquare}
+					selectAllIcon={this.isAllSelected() ? faCheckSquare : faSquare}
+					checkBoxColur={this.isAllSelected() ? "#495057" : "#acb5bd"}
         />
 
         <Row style={{ marginTop: "10px" }}>

frontend/src/components/molecules/QuickAccessView/index.tsx

@@ -22,13 +22,12 @@ type idBooleanMap = { [key: number]: boolean };
 interface MyState {
   isSelected: idBooleanMap;
   isHoveringOver: idBooleanMap;
-  isHoveringTitle: Boolean;
 }
 
 class QuickAccessView extends React.Component<QuickAccessProps, MyState> {
   constructor(props: QuickAccessProps) {
     super(props);
-    this.state = { isSelected: [], isHoveringOver: [], isHoveringTitle: false };
+    this.state = { isSelected: [], isHoveringOver: []};
   }
 
   componentDidMount() {
@@ -78,7 +77,7 @@ class QuickAccessView extends React.Component<QuickAccessProps, MyState> {
     for (let item in items) {
       isSelected[items[item].id] = setValue;
     }
-    this.setState({ isSelected ,isHoveringTitle: false});
+    this.setState({ isSelected});
   }
 
   handleCardClick(id: number) {
@@ -104,16 +103,10 @@ class QuickAccessView extends React.Component<QuickAccessProps, MyState> {
       <>
         <ResourceSectionHeader
           heading="Quick Access"
-          onMouseOver={() => {
-            this.setState({ isHoveringTitle: true });
-          }}
-          onMouseOut={() => {
-            this.setState({ isHoveringTitle: false });
-          }}
           showDownload={this.isAnySelected()}
-          showSelectAll={this.state.isHoveringTitle || this.isAnySelected()}
           onSelectAllClick={() => this.handleSelectAllClick()}
-          selectAllIcon={this.isAllSelected() ? faCheckSquare : faSquare}
+					selectAllIcon={this.isAllSelected() ? faCheckSquare : faSquare}
+					checkBoxColur={this.isAllSelected() ? "#495057" : "#acb5bd"}
         />
 
         <Row

frontend/src/components/molecules/ResourceSectionHeader/index.tsx

@@ -3,7 +3,6 @@ import styles from "./style.module.scss";
 
 import Button from "react-bootstrap/Button";
 import Fade from "react-bootstrap/Fade";
-import { CSSTransition } from "react-transition-group";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faDownload, IconDefinition } from "@fortawesome/free-solid-svg-icons";
 
@@ -11,28 +10,22 @@ export interface SectionHeaderProps {
   heading: string;
   selectAllIcon: IconDefinition;
   showDownload: Boolean;
-  showSelectAll: Boolean;
-  onSelectAllClick: (event: React.MouseEvent) => void;
-  onMouseOver: (event: React.MouseEvent) => void;
-  onMouseOut: (event: React.MouseEvent) => void;
+	onSelectAllClick: (event: React.MouseEvent) => void;
+	checkBoxColur: string;
 }
 
 const ResourceSectionHeader: React.FC<SectionHeaderProps> = ({
   heading,
   showDownload,
   selectAllIcon,
-  showSelectAll,
-  onSelectAllClick,
-  onMouseOver,
-  onMouseOut
+	onSelectAllClick,
+	checkBoxColur,
 }: SectionHeaderProps) => {
   let show = showDownload.valueOf();
   return (
     <>
       <div
         className={styles.sectionHeaderContainer}
-        onMouseOut={onMouseOut}
-        onMouseOver={onMouseOver}
       >
         <span className={styles.sectionHeader} onClick={onSelectAllClick}>
           {heading}
@@ -41,9 +34,9 @@ const ResourceSectionHeader: React.FC<SectionHeaderProps> = ({
           <Fade in={show} timeout={500}>
             <span id="download-button">
               <Button
+								style={{ color: checkBoxColur }}
                 className={styles.sectionHeaderButton}
                 onClick={() => {}}
-                style={{ color: showDownload ? "#495057" : "#acb5bd" }}
               >
                 <FontAwesomeIcon
                   className={styles.buttonIcon}
@@ -53,7 +46,7 @@ const ResourceSectionHeader: React.FC<SectionHeaderProps> = ({
             </span>
           </Fade>
           <Button
-            style={{ color: showDownload ? "#495057" : "#acb5bd" }}
+            style={{ color: checkBoxColur }}
             className={styles.sectionHeaderButton}
             onClick={onSelectAllClick}
             aria-controls="download-button"

frontend/src/components/molecules/ResourceSectionHeader/style.module.scss

@@ -12,10 +12,6 @@
 	font-size: 20px;
 }
 
-.sectionHeaderButtonGroup {
-  // display: none;
-}
-
 .sectionHeaderButton {
   background-color: $white;
   color: $gray-500;

frontend/src/components/molecules/ResourcesFolderView/index.tsx

@@ -25,13 +25,12 @@ type idBooleanMap = { [key: number]: boolean };
 interface MyState {
   isSelected: idBooleanMap;
   isHoveringOver: idBooleanMap;
-  isHoveringTitle: Boolean;
 }
 
 class ResourcesFolderView extends React.Component<PropsType, MyState> {
   constructor(props: PropsType) {
     super(props);
-    this.state = { isSelected: [], isHoveringOver: [], isHoveringTitle: false };
+    this.state = { isSelected: [], isHoveringOver: []};
   }
 
   componentDidMount() {
@@ -79,7 +78,7 @@ class ResourcesFolderView extends React.Component<PropsType, MyState> {
     for (let item in items) {
       isSelected[items[item].id] = setValue;
     }
-    this.setState({ isSelected, isHoveringTitle: false });
+    this.setState({ isSelected });
   }
 
   handleCardClick(id: number) {
@@ -117,16 +116,10 @@ class ResourcesFolderView extends React.Component<PropsType, MyState> {
       <>
         <ResourceSectionHeader
           heading="Folders"
-          onMouseOver={() => {
-            this.setState({ isHoveringTitle: true });
-          }}
-          onMouseOut={() => {
-            this.setState({ isHoveringTitle: false });
-          }}
           showDownload={this.isAnySelected()}
-          showSelectAll={this.isAnySelected() || this.state.isHoveringTitle}
           onSelectAllClick={() => this.handleSelectAllClick()}
-          selectAllIcon={this.isAllSelected() ? faCheckSquare : faSquare}
+					selectAllIcon={this.isAllSelected() ? faCheckSquare : faSquare}
+					checkBoxColur={this.isAllSelected() ? "#495057" : "#acb5bd"}
         />
 
         <Row style={{ marginTop: "10px" }}>

frontend/src/components/molecules/WorkDueGroup/index.tsx

@@ -4,104 +4,70 @@ import { eventTypes } from "components/atoms/SideBarCard";
 
 export interface WorkDueGroupProps {
   filter?: String;
-  noModuleCode?: Boolean;
 }
 
 const WorkDueGroup: React.FC<WorkDueGroupProps> = ({
   filter,
-  noModuleCode
 }: WorkDueGroupProps) => {
-  {/* TODO: This has to be cleaned up and refactored into a simpler implementation 
-      Note (sudarshan): I tried doing this with the basic knowledge I have, 
-                        so please excuse me if this is bad code.  */}
-  if (noModuleCode !== undefined && noModuleCode.valueOf()) {
-    return (
-      <SideBarCardGroup
-        title="Work Due"
-        events={events
-          .filter(({ title }) => filter === undefined || title === filter)
-          .map(({ type, title, subtitle, content }) => {
-            let colorType: eventTypes;
-            switch (type) {
-              case "tutorial":
-                colorType = eventTypes.BlueCard;
-                title = subtitle;
-                break;
-              default:
-                colorType = eventTypes.GreenCard;
-                title = subtitle;
-                break;
-            }
+  return (
+    <SideBarCardGroup
+      title="Work Due"
+      events={events
+        .filter(({ module }) => filter === undefined || module === filter)
+        .map(({ type, module, task, content }) => {
+          let colorType: eventTypes;
+          switch (type) {
+            case "tutorial":
+              colorType = eventTypes.BlueCard;
+              break;
+            default:
+              colorType = eventTypes.GreenCard;
+              break;
+          }
 
-            return {
-              type: colorType,
-              title,
-              subtitle: filter === undefined ? subtitle : undefined,
-              content
-            };
-          })}
-      />
-    );
-  } else {
-    return (
-      <SideBarCardGroup
-        title="Work Due"
-        events={events
-          .filter(({ title }) => filter === undefined || title === filter)
-          .map(({ type, title, subtitle, content }) => {
-            let colorType: eventTypes;
-            switch (type) {
-              case "tutorial":
-                colorType = eventTypes.BlueCard;
-                break;
-              default:
-                colorType = eventTypes.GreenCard;
-                break;
-            }
-
-            return {
-              type: colorType,
-              title,
-              subtitle: filter === undefined ? subtitle : undefined,
-              content
-            };
-          })}
-      />
-    );
-  }
+          return {
+            title: filter === undefined ? module : task,
+						subtitle: filter === undefined ? task : undefined,
+						content,
+            type: colorType,
+          };
+        })}
+    />
+  );
 };
 
+
 export default WorkDueGroup;
 
 let events = [
   {
     type: "tutorial",
-    title: "CO112",
-    subtitle: "Tutorial 1",
+    module: "CO112",
+    task: "Tutorial 1",
     content: "Fri 14 Aug, 19:30"
   },
   {
     type: "coursework",
-    title: "CO112",
-    subtitle: "Coursework 1",
+    module: "CO112",
+    task: "Coursework 1",
     content: "Mon 17 Aug, 17:00"
   },
   {
     type: "coursework",
-    title: "CO140",
-    subtitle: "Coursework 2",
+    module: "CO140",
+    task: "Coursework 2",
     content: "Tue 18 Aug, 12:30"
   },
   {
     type: "tutorial",
-    title: "CO142",
-    subtitle: "PPT2",
+    module: "CO142",
+    task: "PPT2",
     content: "Fri 21 Aug, 19:30"
   },
   {
     type: "tutorial",
-    title: "CO120.2",
-    subtitle: "PMT3",
+    module: "CO120.2",
+    task: "PMT3",
     content: "Mon 24 Aug, 12:30"
   }
 ];

frontend/src/components/organisms/LeftBarModule/index.tsx

@@ -50,7 +50,7 @@ const LeftBarModule: React.FC = () => {
   return (
     <LeftBar>
       <SideBarTabGroup title="Outline" buttons={outlineButtons} />
-			<WorkDueGroup filter={id} noModuleCode={true}/>
+			<WorkDueGroup filter={id} />
     </LeftBar>
   );
 };

frontend/src/components/organisms/LeftBarModuleList/index.tsx

@@ -23,6 +23,7 @@ const LeftBarModuleList: React.FC = () => {
   return (
     <LeftBar>
 			<SideBarTabGroup title="Sort" buttons={sortButtons} />
+			<WorkDueGroup/>
 		</LeftBar>
   );
 };

frontend/src/components/pages/Dashboard/index.tsx

 import React, { useEffect } from "react";
-import { useParams } from "react-router-dom";
 import MyBreadcrumbs from "components/atoms/MyBreadcrumbs";
 import Image from "react-bootstrap/Image";
 import Container from "react-bootstrap/Container";
 import Row from "react-bootstrap/Row";
 import Col from "react-bootstrap/Col";
 import styles from "./style.module.scss";
-import classnames from "classnames";
 import { faFile } from "@fortawesome/free-solid-svg-icons";
 import Button from "react-bootstrap/Button";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

frontend/src/components/pages/ModuleResources/index.tsx

@@ -68,11 +68,11 @@ const ModuleResources: React.FC<{ year: string}> = ({year}) => {
         </InputGroup.Append>
       </InputGroup>
 
-      
-			{quickAccessItems.length > 0 ? <QuickAccessView quickAccessItems={quickAccessItems} /> : null}
       {scope === "" && folderItems.length > 0 ? <ResourcesFolderView folderItems={folderItems} /> : null}
-      {currentDirectoryFiles.length > 0 ? <CurrentDirectoryView documentItems={currentDirectoryFiles} /> : null}
-    </>
+      {scope !== "" && currentDirectoryFiles.length > 0 ? <CurrentDirectoryView documentItems={currentDirectoryFiles} /> : null}
+			{scope === "" && quickAccessItems.length > 0 ? <QuickAccessView quickAccessItems={quickAccessItems} /> : null}
+
+		</>
   );
 };
 
@@ -179,7 +179,7 @@ let resourceItems = [
     title: "Pandor Lab",
     type: "File",
     tags: [],
-    folder: "Pandor Lab",
+    folder: "Pandora Lab",
     id: 11,
   },
   {

frontend/src/index.tsx

@@ -5,11 +5,11 @@ import * as serviceWorker from "./serviceWorker";
 import { BrowserRouter as Router } from "react-router-dom";
 
 ReactDOM.render(
-  <React.StrictMode>
+  <React.Fragment>
     <Router>
       <App />
     </Router>
-  </React.StrictMode>,
+  </React.Fragment>,
   document.getElementById("root")
 );