ModuleResources: Support link resource type, but still missing banner for the card

src/components/molecules/CategoryList/index.tsx

@@ -6,14 +6,9 @@ import Row from "react-bootstrap/esm/Row";
 import Col from "react-bootstrap/esm/Col";
 import Badge from "react-bootstrap/Badge";
 import { faSquare, faCheckSquare } from "@fortawesome/free-regular-svg-icons";
-import {
-  faFileAlt,
-  IconDefinition,
-  faFilePdf,
-  faFileVideo,
-} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { SelectionProps } from "components/molecules/SelectionView";
+import { resourceTypeToIcon } from "../../pages/ModuleResources"
 
 const CategoryList: React.FC<{ select: SelectionProps }> = ({
   select,
@@ -21,25 +16,13 @@ const CategoryList: React.FC<{ select: SelectionProps }> = ({
   return (
       <>
       {select.selectionItems.map(({ title, type, tags, id }) => {
-        let normalIcon: IconDefinition;
         if (type === undefined || tags === undefined) return null;
-        switch (type) {
-          case "pdf":
-            normalIcon = faFilePdf;
-            break;
-          case "video":
-            normalIcon = faFileVideo;
-            break;
-          default:
-            normalIcon = faFileAlt;
-            break;
-        }
 
         let icon = select.isAnySelected() || select.state.isHoveringOver[id]
           ? select.state.isSelected[id]
             ? faCheckSquare
             : faSquare
-          : normalIcon;
+          : resourceTypeToIcon(type);
 
         return (
           <Row

src/components/molecules/CurrentDirectoryRow/index.tsx

@@ -4,13 +4,8 @@ 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";
+import { resourceTypeToIcon } from "../../pages/ModuleResources"
 
 const CurrentDirectoryRow: React.FC<{ select: SelectionProps }> = ({
   select,
@@ -20,19 +15,8 @@ const CurrentDirectoryRow: React.FC<{ select: SelectionProps }> = ({
       style={{ marginTop: "10px", marginLeft: "-10px", marginRight: "-10px" }}
     >
       {select.selectionItems.map(({ title, type, tags, id }) => {
-        let normalIcon: IconDefinition;
         if (type === undefined || tags === undefined) return null;
-        switch (type) {
-          case "pdf":
-            normalIcon = faFilePdf;
-            break;
-          case "video":
-            normalIcon = faFileVideo;
-            break;
-          default:
-            normalIcon = faFileAlt;
-            break;
-        }
+
         return (
           <Col
             xs={6}
@@ -57,7 +41,7 @@ const CurrentDirectoryRow: React.FC<{ select: SelectionProps }> = ({
                   ? select.state.isSelected[id]
                     ? faCheckSquare
                     : faSquare
-                  : normalIcon
+                  : resourceTypeToIcon(type)
               }
               onClick={() => select.handleCardClick(id)}
               onIconClick={(e) => {

src/components/molecules/QuickAccessRow/index.tsx

@@ -6,13 +6,8 @@ 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";
+import { resourceTypeToIcon } from "../../pages/ModuleResources"
 
 const QuickAccessRow: React.FC<{ select: SelectionProps }> = ({
   select,
@@ -27,19 +22,8 @@ const QuickAccessRow: React.FC<{ select: SelectionProps }> = ({
       )}
     >
       {select.selectionItems.map(({ title, type, tags, id }) => {
-        let normalIcon: IconDefinition;
         if (type === undefined || tags === undefined) return null;
-        switch (type) {
-          case "pdf":
-            normalIcon = faFilePdf;
-            break;
-          case "video":
-            normalIcon = faFileVideo;
-            break;
-          default:
-            normalIcon = faFileAlt;
-            break;
-        }
+
         return (
           <Col
             xs={7}
@@ -64,7 +48,7 @@ const QuickAccessRow: React.FC<{ select: SelectionProps }> = ({
                   ? select.state.isSelected[id]
                     ? faCheckSquare
                     : faSquare
-                  : normalIcon
+                  : resourceTypeToIcon(type)
               }
               onClick={() => select.handleCardClick(id)}
               onIconClick={(e) => {

src/components/pages/ModuleResources/index.tsx

@@ -7,6 +7,13 @@ import CurrentDirectoryView from "./components/CurrentDirectoryView";
 import FoldersView from "./components/FoldersView";
 import ListView from "./components/ListView";
 import TopSection from "./components/TopSection";
+import {
+  faFileAlt,
+  faFilePdf,
+  faFileVideo,
+  faLink,
+  IconDefinition,
+} from "@fortawesome/free-solid-svg-icons";
 
 export interface Resource {
   title: string;
@@ -14,6 +21,7 @@ export interface Resource {
   tags: string[];
   folder: string;
   id: number;
+  path?: string;
 }
 
 export interface Folder {
@@ -35,6 +43,19 @@ export interface ResourceState {
   searchText: string;
 }
 
+export function resourceTypeToIcon(type: string): IconDefinition {
+  switch (type) {
+    case "pdf":
+      return faFilePdf;
+    case "video":
+      return faFileVideo;
+    case "link":
+      return faLink;
+    default:
+      return faFileAlt;
+  }
+}
+
 class ModuleResources extends React.Component<ResourcesProps, ResourceState> {
   moduleCode = this.props.moduleID.startsWith("CO")
     ? this.props.moduleID.slice(2)
@@ -65,6 +86,7 @@ class ModuleResources extends React.Component<ResourcesProps, ResourceState> {
             tags: resource.tags,
             folder: resource.category,
             id: resource.id,
+            path: resource.path,
           } as Resource);
         }
         this.setState({ resources: resourceArr, isLoaded: true });
@@ -128,7 +150,17 @@ class ModuleResources extends React.Component<ResourcesProps, ResourceState> {
     });
   }
 
-  handleFileClick(id: number) {
+  handleResourceClick(id: number) {
+    let resource = this.state.resources.find(resource => resource.id === id);
+    if (resource === undefined) {
+      return;
+    }
+    if (resource.type === "link") {
+      window.open(resource.path, "_blank");
+      return;
+    }
+
+    // Resource is of file type, get from Materials
     const onSuccess = (data: any) => {
       // TODO: Try to navigate straight to the endpoint url instead of creating an object url
       data.blob().then((blob: any) => {
@@ -218,7 +250,7 @@ class ModuleResources extends React.Component<ResourcesProps, ResourceState> {
               scope={scope}
               searchText={this.state.searchText}
               onDownloadClick={(ids) => this.handleFileDownload(ids)}
-              onItemClick={(id) => this.handleFileClick(id)}
+              onItemClick={(id) => this.handleResourceClick(id)}
               includeInSearchResult={this.includeInSearchResult}
             />
 
@@ -227,7 +259,7 @@ class ModuleResources extends React.Component<ResourcesProps, ResourceState> {
               scope={scope}
               searchText={this.state.searchText}
               onDownloadClick={(ids) => this.handleFileDownload(ids)}
-              onItemClick={(id) => this.handleFileClick(id)}
+              onItemClick={(id) => this.handleResourceClick(id)}
             />
           </>
         );
@@ -239,7 +271,7 @@ class ModuleResources extends React.Component<ResourcesProps, ResourceState> {
               searchText={this.state.searchText}
               onDownloadClick={(ids) => this.handleFileDownload(ids)}
               onSectionDownloadClick={(category) => this.handleSectionDownload(category)}
-              onItemClick={(id) => this.handleFileClick(id)}
+              onItemClick={(id) => this.handleResourceClick(id)}
               includeInSearchResult={this.includeInSearchResult}
             />
           </>