Add basic render prop implementation of resources

src/components/molecules/CurrentDirectoryRow/index.tsx

+import React from "react";
+
+import Row from "react-bootstrap/esm/Row";
+import Col from "react-bootstrap/esm/Col";
+import FileCard from "components/atoms/FileCard";
+import { faSquare, faCheckSquare } from "@fortawesome/free-regular-svg-icons";
+import {
+  faFileAlt,
+  IconDefinition,
+  faFilePdf,
+  faFileVideo,
+} from "@fortawesome/free-solid-svg-icons";
+import { SelectionProps } from "components/molecules/SelectionView";
+
+const CurrentDirectoryRow: React.FC<{ select: SelectionProps }> = ({
+  select,
+}) => {
+  return (
+    <Row
+      style={{ marginTop: "10px", marginLeft: "-10px", marginRight: "-10px" }}
+    >
+      {select.selectionItems.map(({ title, type, tags, id }) => {
+        let normalIcon: IconDefinition;
+        if (type === undefined || tags === undefined) return;
+        switch (type) {
+          case "pdf":
+            normalIcon = faFilePdf;
+            break;
+          case "video":
+            normalIcon = faFileVideo;
+            break;
+          default:
+            normalIcon = faFileAlt;
+            break;
+        }
+        return (
+          <Col
+            xs={6}
+            sm={6}
+            md={6}
+            lg={4}
+            xl={3}
+            key={id}
+            style={{
+              marginBottom: ".5rem",
+              marginTop: ".5rem",
+              paddingLeft: "10px",
+              paddingRight: "10px",
+            }}
+          >
+            <FileCard
+              title={title}
+              type={type}
+              tags={tags}
+              icon={
+                select.isAnySelected() || select.state.isHoveringOver[id]
+                  ? select.state.isSelected[id]
+                    ? faCheckSquare
+                    : faSquare
+                  : normalIcon
+              }
+              onClick={() => select.handleCardClick(id)}
+              onIconClick={(e) => {
+                e.stopPropagation();
+                select.handleIconClick(id);
+              }}
+              onMouseOver={() => select.handleMouseOver(id)}
+              onMouseOut={() => select.handleMouseOut(id)}
+            />
+          </Col>
+        );
+      })}
+    </Row>
+  );
+};
+
+export default CurrentDirectoryRow;

src/components/molecules/NewQuickAccessView/index.tsx → src/components/molecules/FoldersRow/index.tsx

 import React from "react";
-import styles from "./style.module.scss";
-
-import classNames from "classnames";
 import Row from "react-bootstrap/esm/Row";
 import Col from "react-bootstrap/esm/Col";
-import FileCard from "components/atoms/FileCard";
+import FolderCard from "components/atoms/FolderCard";
 import { faSquare, faCheckSquare } from "@fortawesome/free-regular-svg-icons";
-import {
-  faFileAlt,
-  IconDefinition,
-  faFilePdf,
-  faFileVideo,
-} from "@fortawesome/free-solid-svg-icons";
-import { SelectionProps } from "components/molecules/SelectionView";
+import { faFolder } from "@fortawesome/free-solid-svg-icons";
+import { SelectionProps } from "../SelectionView";
 
-const NewQuickAccessView: React.FC<{ select: SelectionProps }> = ({
+const FoldersRow: React.FC<{ select: SelectionProps }> = ({
   select,
 }) => {
-  return (
-    <>
-      <Row
-        className={classNames(
-          "d-flex",
-          "flex-row",
-          "flex-nowrap",
-          styles.quickAccessRow
-        )}
-      >
-        {select.quickAccessItems.map(({ title, type, tags, id }) => {
-          let normalIcon: IconDefinition;
-          switch (type) {
-            case "pdf":
-              normalIcon = faFilePdf;
-              break;
-            case "video":
-              normalIcon = faFileVideo;
-              break;
-            default:
-              normalIcon = faFileAlt;
-              break;
-          }
-          return (
-            <Col
-              xs={7}
-              sm={5}
-              md={5}
-              lg={4}
-              xl={3}
-              key={id}
-              style={{
-                marginBottom: ".5rem",
-                marginTop: ".5rem",
-                paddingLeft: "10px",
-                paddingRight: "10px",
-              }}
-            >
-              <FileCard
+    return (
+        <Row style={{ marginTop: "10px", marginRight: "-10px", marginLeft: "-10px" }}>
+          {select.selectionItems.map(({ title, id }) => (
+            <Col xs={6} sm={6} md={3} key={id} style={{ paddingLeft: "10px", paddingRight: "10px" }}>
+              <FolderCard
                 title={title}
-                type={type}
-                tags={tags}
                 icon={
                   select.isAnySelected() || select.state.isHoveringOver[id]
                     ? select.state.isSelected[id]
                       ? faCheckSquare
                       : faSquare
-                    : normalIcon
+                    : faFolder
                 }
-                onClick={() => select.handleCardClick(id)}
                 onIconClick={(e) => {
                   e.stopPropagation();
                   select.handleIconClick(id);
                 }}
+                onClick={() => select.handleCardClick(id)}
                 onMouseOver={() => select.handleMouseOver(id)}
                 onMouseOut={() => select.handleMouseOut(id)}
               />
             </Col>
-          );
-        })}
-      </Row>
-    </>
-  );
-};
+          ))}
+        </Row>
+    );
+  }
 
-export default NewQuickAccessView;
+export default FoldersRow;

src/components/molecules/FoldersRow/style.module.scss

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

src/components/molecules/QuickAccessRow/index.tsx

+import React from "react";
+import styles from "./style.module.scss";
+
+import classNames from "classnames";
+import Row from "react-bootstrap/esm/Row";
+import Col from "react-bootstrap/esm/Col";
+import FileCard from "components/atoms/FileCard";
+import { faSquare, faCheckSquare } from "@fortawesome/free-regular-svg-icons";
+import {
+  faFileAlt,
+  IconDefinition,
+  faFilePdf,
+  faFileVideo,
+} from "@fortawesome/free-solid-svg-icons";
+import { SelectionProps } from "components/molecules/SelectionView";
+
+const QuickAccessRow: React.FC<{ select: SelectionProps }> = ({
+  select,
+}) => {
+  return (
+    <Row
+      className={classNames(
+        "d-flex",
+        "flex-row",
+        "flex-nowrap",
+        styles.quickAccessRow
+      )}
+    >
+      {select.selectionItems.map(({ title, type, tags, id }) => {
+        let normalIcon: IconDefinition;
+        if (type === undefined || tags === undefined) return;
+        switch (type) {
+          case "pdf":
+            normalIcon = faFilePdf;
+            break;
+          case "video":
+            normalIcon = faFileVideo;
+            break;
+          default:
+            normalIcon = faFileAlt;
+            break;
+        }
+        return (
+          <Col
+            xs={7}
+            sm={5}
+            md={5}
+            lg={4}
+            xl={3}
+            key={id}
+            style={{
+              marginBottom: ".5rem",
+              marginTop: ".5rem",
+              paddingLeft: "10px",
+              paddingRight: "10px",
+            }}
+          >
+            <FileCard
+              title={title}
+              type={type}
+              tags={tags}
+              icon={
+                select.isAnySelected() || select.state.isHoveringOver[id]
+                  ? select.state.isSelected[id]
+                    ? faCheckSquare
+                    : faSquare
+                  : normalIcon
+              }
+              onClick={() => select.handleCardClick(id)}
+              onIconClick={(e) => {
+                e.stopPropagation();
+                select.handleIconClick(id);
+              }}
+              onMouseOver={() => select.handleMouseOver(id)}
+              onMouseOut={() => select.handleMouseOut(id)}
+            />
+          </Col>
+        );
+      })}
+    </Row>
+  );
+};
+
+export default QuickAccessRow;

src/components/molecules/SelectionView/index.tsx

@@ -5,13 +5,17 @@ import { request } from "../../../utils/api";
 import ResourceSectionHeader from "../ResourceSectionHeader";
 import { faSquare, faCheckSquare } from "@fortawesome/free-regular-svg-icons";
 
+interface SelectionItem {
+  title: string;
+  id: number;
+  type?: string;
+  tags?: string[];
+}
+
+type idBooleanMap = { [key: number]: boolean };
+
 export interface SelectionProps {
-  quickAccessItems: {
-    title: string;
-    type: string;
-    tags: string[];
-    id: number;
-  }[];
+  selectionItems: SelectionItem[];
   state: MyState;
   isAnySelected: () => boolean;
   handleCardClick: (id: number) => void;
@@ -21,18 +25,12 @@ export interface SelectionProps {
 }
 
 export interface MyProps {
-  quickAccessItems: {
-    title: string;
-    type: string;
-    tags: string[];
-    id: number;
-  }[];
+  selectionItems: SelectionItem[];
   moduleCode?: string;
-  render: (selection: SelectionProps) => any;
+	render: (selection: SelectionProps) => any;
+	heading: string;
 }
 
-type idBooleanMap = { [key: number]: boolean };
-
 interface MyState {
   isSelected: idBooleanMap;
   isHoveringOver: idBooleanMap;
@@ -47,7 +45,7 @@ class SelectionView extends React.Component<MyProps, MyState> {
   componentDidMount() {
     let isSelected: idBooleanMap = [];
     let isHoveringOver: idBooleanMap = [];
-    this.props.quickAccessItems.forEach(({ id }: { id: number }) => {
+    this.props.selectionItems.forEach(({ id }: { id: number }) => {
       isSelected[id] = false;
       isHoveringOver[id] = false;
     });
@@ -55,7 +53,7 @@ class SelectionView extends React.Component<MyProps, MyState> {
   }
 
   isAnySelected(): boolean {
-    let items = this.props.quickAccessItems;
+    let items = this.props.selectionItems;
     let isSelected = this.state.isSelected;
     for (let item in items) {
       if (isSelected[items[item].id]) {
@@ -66,7 +64,7 @@ class SelectionView extends React.Component<MyProps, MyState> {
   }
 
   isAllSelected(): boolean {
-    let items = this.props.quickAccessItems;
+    let items = this.props.selectionItems;
     let isSelected = this.state.isSelected;
     for (let item in items) {
       if (!isSelected[items[item].id]) {
@@ -87,7 +85,7 @@ class SelectionView extends React.Component<MyProps, MyState> {
   handleDownloadClick() {}
 
   handleSelectAllClick() {
-    let items = this.props.quickAccessItems;
+    let items = this.props.selectionItems;
     let isSelected = JSON.parse(JSON.stringify(this.state.isSelected));
     let setValue = !this.isAllSelected();
     for (let item in items) {
@@ -117,7 +115,7 @@ class SelectionView extends React.Component<MyProps, MyState> {
 
   render() {
     let selection: SelectionProps = {
-      quickAccessItems: this.props.quickAccessItems,
+      selectionItems: this.props.selectionItems,
       state: this.state,
       isAnySelected: () => this.isAnySelected(),
       handleCardClick: (id: number) => this.handleCardClick(id),
@@ -129,7 +127,7 @@ class SelectionView extends React.Component<MyProps, MyState> {
     return (
       <>
         <ResourceSectionHeader
-          heading="Quick Access"
+          heading={this.props.heading}
           onDownloadClick={() => this.handleDownloadClick()}
           showDownload={this.isAnySelected()}
           onSelectAllClick={() => this.handleSelectAllClick()}

src/components/molecules/SelectionView/style.module.scss

-@import "assets/scss/custom";
-
-.quickAccessRow {
-  scrollbar-width: thin;
-	scrollbar-color: $white $white;
-	margin-top: 10px;
-	overflow-y: visible;
-	overflow-x: auto;
-  margin-right: -10px;
-  margin-left: -10px;
-	// margin-left: 0; // leave space before card
-}
-
-.quickAccessRow::-webkit-scrollbar {
-	width: 1rem;
-  height: 0.5rem;
-}
-.quickAccessRow::-webkit-scrollbar-track {
-  background: $white;
-	margin-left: 10px; 
-	margin-right: 10px; 
-}
-.quickAccessRow::-webkit-scrollbar-thumb {
-  background-color: $white;
-  border-radius: .5rem;
-}
-
-.quickAccessRow:hover {
-	scrollbar-color: $gray-400 $white;
-}
-
-.quickAccessRow:hover::-webkit-scrollbar-thumb {
-	background-color: $gray-400;
-}

src/components/pages/ModuleResources/index.tsx

@@ -4,10 +4,15 @@ import { request } from "../../../utils/api";
 import { api, methods } from "../../../constants/routes";
 import MyBreadcrumbs from "components/atoms/MyBreadcrumbs";
 
-import QuickAccessView from "components/molecules/QuickAccessView";
+import QuickAccessRow from "components/molecules/QuickAccessRow";
 import ResourcesFolderView from "components/molecules/ResourcesFolderView";
 import CurrentDirectoryView from "components/molecules/CurrentDirectoryView";
 import SearchBox from "components/molecules/SearchBox";
+import SelectionView, {
+  SelectionProps,
+} from "components/molecules/SelectionView";
+import CurrentDirectoryRow from "components/molecules/CurrentDirectoryRow";
+import FoldersRow from "components/molecules/FoldersRow";
 
 interface Resource {
   title: string;
@@ -116,8 +121,16 @@ class ModuleResources extends React.Component<ResourcesProps, ResourceState> {
       id: id,
     }));
 
-    if (this.state.searchText === "" && scope === "" && folders.length > 0) {
-      return <ResourcesFolderView folderItems={folders} />;
+    if (this.state.searchText === "" && scope === "" && folders.length > 0) {			
+			return (
+        <SelectionView
+          heading="Folders"
+          selectionItems={folders}
+          render={(select: SelectionProps) => (
+            <FoldersRow select={select} />
+          )}
+        />
+			);
     }
   }
 
@@ -134,9 +147,12 @@ class ModuleResources extends React.Component<ResourcesProps, ResourceState> {
 
     if (scope !== "" || this.state.searchText !== "") {
       return (
-        <CurrentDirectoryView
-          documentItems={filesContent}
-          moduleCode={this.moduleCode}
+        <SelectionView
+          heading="Files"
+          selectionItems={filesContent}
+          render={(select: SelectionProps) => (
+            <CurrentDirectoryRow select={select} />
+          )}
         />
       );
     }
@@ -154,9 +170,12 @@ class ModuleResources extends React.Component<ResourcesProps, ResourceState> {
       quickAccessItems.length > 0
     ) {
       return (
-        <QuickAccessView
-          quickAccessItems={quickAccessItems}
-          moduleCode={this.moduleCode}
+        <SelectionView
+          heading="Quick Access"
+          selectionItems={quickAccessItems}
+          render={(select: SelectionProps) => (
+            <QuickAccessRow select={select} />
+          )}
         />
       );
     }