Add scope to resources

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

+import React from "react";
+import Row from "react-bootstrap/esm/Row";
+import Col from "react-bootstrap/esm/Col";
+import ResourceSectionHeader from "../ResourceSectionHeader";
+import { faSquare, faCheckSquare } from "@fortawesome/free-regular-svg-icons";
+import { faFile } from "@fortawesome/free-solid-svg-icons";
+import FileCard from "components/atoms/FileCard";
+
+export interface CurrentDirectoryViewProps {
+  documentItems: {
+    title: string;
+    type: string;
+    tags: string[];
+    id: number;
+  }[];
+}
+
+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 };
+  }
+
+  componentDidMount() {
+    let isSelected: idBooleanMap = [];
+    this.props.documentItems.forEach(({ id }: { id: number }) => {
+      isSelected[id] = false;
+    });
+    this.setState({ isSelected });
+  }
+
+  isAnySelected(): boolean {
+    let items = this.props.documentItems;
+    let isSelected = this.state.isSelected;
+    for (let item in items) {
+      if (isSelected[items[item].id]) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  isAllSelected(): boolean {
+    let items = this.props.documentItems;
+    let isSelected = this.state.isSelected;
+    for (let item in items) {
+      if (!isSelected[items[item].id]) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  handleIconClick(id: number) {
+    let isSelected = JSON.parse(JSON.stringify(this.state.isSelected));
+    let isHoveringOver = JSON.parse(JSON.stringify(this.state.isHoveringOver));
+    isSelected[id] = !isSelected[id];
+    isHoveringOver[id] = false;
+    this.setState({ isSelected, isHoveringOver });
+  }
+
+  handleSelectAllClick() {
+    let items = this.props.documentItems;
+    let isSelected = JSON.parse(JSON.stringify(this.state.isSelected));
+    let setValue = !this.isAllSelected();
+    for (let item in items) {
+      isSelected[items[item].id] = setValue;
+    }
+    this.setState({ isSelected, isHoveringTitle: false });
+  }
+
+  handleCardClick(id: number) {
+    if (this.isAnySelected()) {
+      this.handleIconClick(id);
+    }
+  }
+
+  handleMouseOver(id: number) {
+    let isHoveringOver = JSON.parse(JSON.stringify(this.state.isHoveringOver));
+    isHoveringOver[id] = true;
+    this.setState({ isHoveringOver });
+  }
+
+  handleMouseOut(id: number) {
+    let isHoveringOver = JSON.parse(JSON.stringify(this.state.isHoveringOver));
+    isHoveringOver[id] = false;
+    this.setState({ isHoveringOver });
+  }
+
+  render() {
+    return (
+      <>
+        <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}
+        />
+
+        <Row style={{ marginTop: "10px" }}>
+          {this.props.documentItems.map(({ title, type, tags, id }) => (
+            <Col
+              xs={6}
+              sm={6}
+              md={6}
+              lg={4}
+              xl={3}
+              key={id}
+              style={{ marginBottom: ".5rem", marginTop: ".5rem" }}
+            >
+              <FileCard
+                title={title}
+                type={type}
+                tags={tags}
+                icon={
+                  this.isAnySelected() || this.state.isHoveringOver[id]
+                    ? this.state.isSelected[id]
+                      ? faCheckSquare
+                      : faSquare
+                    : faFile
+                }
+                onClick={() => this.handleCardClick(id)}
+                onIconClick={() => this.handleIconClick(id)}
+                onMouseOver={() => this.handleMouseOver(id)}
+                onMouseOut={() => this.handleMouseOut(id)}
+              />
+            </Col>
+          ))}
+        </Row>
+      </>
+    );
+  }
+}
+
+export default CurrentDirectoryView;

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

+@import "assets/scss/custom";
\ No newline at end of file

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

@@ -5,6 +5,15 @@ import ResourceSectionHeader from "../ResourceSectionHeader";
 import FolderCard from "components/atoms/FolderCard";
 import { faSquare, faCheckSquare } from "@fortawesome/free-regular-svg-icons";
 import { faFolder } from "@fortawesome/free-solid-svg-icons";
+import { withRouter, RouteComponentProps } from "react-router-dom";
+
+type PathParamsType = {
+	location: any;
+  history: string;
+};
+
+type PropsType = RouteComponentProps<PathParamsType> & ResourceFoldersProps;
+
 export interface ResourceFoldersProps {
   folderItems: {
     title: string;
@@ -19,10 +28,10 @@ interface MyState {
   isHoveringTitle: Boolean;
 }
 
-class ResourcesFolderView extends React.Component<ResourceFoldersProps, MyState> {
-  constructor(props: ResourceFoldersProps) {
+class ResourcesFolderView extends React.Component<PropsType, MyState> {
+  constructor(props: PropsType) {
     super(props);
-    this.state = { isSelected: [], isHoveringOver: [], isHoveringTitle: false };
+		this.state = { isSelected: [], isHoveringOver: [], isHoveringTitle: false };
   }
 
   componentDidMount() {
@@ -76,6 +85,16 @@ class ResourcesFolderView extends React.Component<ResourceFoldersProps, MyState>
   handleCardClick(id: number) {
     if (this.isAnySelected()) {
       this.handleIconClick(id);
+      return;
+    }
+
+    let items = this.props.folderItems;
+    for (let item in items) {
+      if (items[item].id == id) {
+				console.log(`/${items[item].title}`);
+        this.props.history.push(`${this.props.location.pathname}/${items[item].title}`);
+        return;
+      }
     }
   }
 
@@ -133,4 +152,4 @@ class ResourcesFolderView extends React.Component<ResourceFoldersProps, MyState>
   }
 }
 
-export default ResourcesFolderView;
+export default withRouter(ResourcesFolderView);

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

@@ -29,15 +29,15 @@ const LeftBarModule: React.FC = () => {
   let outlineButtons = [
     {
       title: "Overview",
-      activeURL: "overview",
+      activeURL: `/modules/${id}/overview`,
     },
     {
       title: "Feedback",
-      activeURL: "feedback",
+      activeURL: `/modules/${id}/feedback`,
     },
     {
       title: "Resources",
-      activeURL: "resources",
+      activeURL: `/modules/${id}/resources`,
     },
     {
       title: "Piazza",

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

@@ -9,113 +9,21 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
 import QuickAccessView from "components/molecules/QuickAccessView";
 import ResourcesFolderView from "components/molecules/ResourcesFolderView";
+import CurrentDirectoryView from "components/molecules/CurrentDirectoryView";
+import { useParams } from "react-router-dom";
 
 const ModuleResources: React.FC = () => {
-  let folderItems = [
-    {
-      title: "Slides",
-      id: 0,
-    },
-    {
-      title: "Logic Exercise",
-      id: 2,
-    },
-    {
-      title: "Pandor Lab",
-      id: 3,
-    },
-    {
-      title: "Extra",
-      id: 4,
-    },
-	];
-	
-	let ResourceItems = [
-    {
-			title: "Syntax Semantics Propositional Logic",
-			type: "File",
-			tags:["new", "Week 1"],
-      id: 0,
-		},
-		{
-			title: "Classical First-Order Predicate Logic",
-			type: "File",
-			tags:["new", "Week 2"],
-      id: 1,
-		},
-		{
-			title: "Translation Validity",
-			type: "Link",
-			tags:["new", "Week 2"],
-      id: 2,
-		},
-		{
-			title: "validityPL-part1",
-			type: "Panopto",
-			tags:["new"],
-      id: 3,
-		},
-		{
-			title: "validityPL-part2",
-			type: "Link",
-			tags:["Week 2"],
-      id: 4,
-		},
-		{
-			title: "validityPL-part3",
-			type: "File",
-			tags:["Week 3"],
-      id: 5,
-		},
-		{
-			title: "validityPL-part3",
-			type: "File",
-			tags:["Week 3"],
-      id: 6,
-		},
-		{
-			title: "validityFOL-part2",
-			type: "File",
-			tags:["Week 3"],
-      id: 7,
-		},
-				{
-			title: "Logic Exercise 1",
-			type: "File",
-			tags:["Week 3"],
-      id: 8,
-		},
-		{
-			title: "Logic Exercise 2",
-			type: "File",
-			tags:["Week 3"],
-      id: 9,
-		},
-		{
-			title: "Logic Exercise 3",
-			type: "File",
-			tags:["Week 3"],
-      id: 10,
-		},
-		{
-			title: "Pandor Lab",
-			type: "File",
-			tags:["Week 3"],
-      id: 11,
-		},
-		{
-			title: "Propositional Logic Exercises",
-			type: "File",
-			tags:["Week 3"],
-      id: 12,
-		},
-		{
-			title: "Extra Logic Exercises",
-			type: "File",
-			tags:["Week 3"],
-      id: 13,
-		},
-	]
+  let { scope } = useParams();
+  scope = scope === undefined ? "" : scope;
+
+  let quickAccessItems = resourceItems.filter(
+    ({ tags, folder }) =>
+      tags.includes("new") && (scope === "" || scope === folder)
+  );
+
+  let currentDirectoryFiles = resourceItems.filter(
+    ({ folder }) => folder === scope
+  );
 
   return (
     <>
@@ -133,10 +41,138 @@ const ModuleResources: React.FC = () => {
         </InputGroup.Append>
       </InputGroup>
 
-      <QuickAccessView quickAccessItems={ResourceItems}/>
-      <ResourcesFolderView folderItems={folderItems}/>
+      <QuickAccessView quickAccessItems={quickAccessItems} />
+      {scope === "" && folderItems.length > 0 ? <ResourcesFolderView folderItems={folderItems} /> : null}
+      {currentDirectoryFiles.length > 0 ? <CurrentDirectoryView documentItems={currentDirectoryFiles} /> : null}
     </>
   );
 };
 
-export default ModuleResources;
\ No newline at end of file
+export default ModuleResources;
+
+let folderItems = [
+  {
+    title: "Lecture Notes",
+    id: 0,
+  },
+  {
+    title: "Logic Exercise",
+    id: 1,
+  },
+  {
+    title: "Pandor Lab",
+    id: 2,
+  },
+  {
+    title: "Extra",
+    id: 3,
+  },
+];
+
+let resourceItems = [
+  {
+    title: "Syntax Semantics Propositional Logic",
+    type: "File",
+    tags: ["Slides"],
+    folder: "Lecture Notes",
+    id: 0,
+  },
+  {
+    title: "Classical First-Order Predicate Logic",
+    type: "File",
+    tags: ["Slides"],
+    folder: "Lecture Notes",
+    id: 1,
+  },
+  {
+    title: "Translation Validity",
+    type: "File",
+    tags: ["new", "Slides"],
+    folder: "Lecture Notes",
+    id: 2,
+  },
+  {
+    title: "validityPL-part1",
+    type: "File",
+    tags: ["Slides"],
+    folder: "Lecture Notes",
+    id: 3,
+  },
+  {
+    title: "validityPL-part2",
+    type: "File",
+    tags: ["Slides"],
+    folder: "Lecture Notes",
+    id: 4,
+  },
+  {
+    title: "validityPL-part3",
+    type: "File",
+    tags: ["new", "Slides"],
+    folder: "Lecture Notes",
+    id: 5,
+  },
+  {
+    title: "validityFOL-part1",
+    type: "File",
+    tags: ["Slides"],
+    folder: "Lecture Notes",
+    id: 6,
+  },
+  {
+    title: "validityFOL-part2",
+    type: "File",
+    tags: ["new", "Slides"],
+    folder: "Lecture Notes",
+    id: 7,
+  },
+  {
+    title: "Logic Exercise 1",
+    type: "File",
+    tags: ["Week 1"],
+    folder: "Logic Exercise",
+    id: 8,
+  },
+  {
+    title: "Logic Exercise 2",
+    type: "File",
+    tags: ["Week 2"],
+    folder: "Logic Exercise",
+    id: 9,
+  },
+  {
+    title: "Logic Exercise 3",
+    type: "File",
+    tags: ["new", "Week 3"],
+    folder: "Logic Exercise",
+    id: 10,
+  },
+  {
+    title: "Pandor Lab",
+    type: "File",
+    tags: [],
+    folder: "Pandor Lab",
+    id: 11,
+  },
+  {
+    title: "Propositional Logic Exercises",
+    type: "File",
+    tags: ["new", "Revision"],
+    folder: "Extra",
+    id: 12,
+  },
+  {
+    title: "Extra Logic Exercises",
+    type: "File",
+    tags: ["new", "Revision"],
+    folder: "Extra",
+    id: 13,
+  },
+  {
+    title: "Course Introduction",
+    type: "File",
+    tags: ["README"],
+    folder: "",
+    id: 14,
+  },
+];

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

@@ -66,7 +66,7 @@ const StandardView: React.FC<StandardViewProps> = ({
             <ModuleOverview />
           </Route>
 
-          <Route path="/modules/:id/resources">
+          <Route path="/modules/:id/resources/:scope?">
             <ModuleResources />
           </Route>