Add basic selection to folders

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

@@ -32,7 +32,7 @@ const FileCard: React.FC<FileCardProps> = ({
       <Card.Footer>
 				{
 					tags.map(tag => 
-						<Badge pill className={classNames(styles.quickViewTag, tag==="new" ? styles.tagTeal : styles.tagBlue)}>
+						<Badge pill key={tag} className={classNames(styles.quickViewTag, tag==="new" ? styles.tagTeal : styles.tagBlue)}>
 						{tag}
 					</Badge>
 					)

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

@@ -2,20 +2,21 @@ import React from "react";
 import styles from "./style.module.scss";
 import Card from "react-bootstrap/Card";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faFolder } from "@fortawesome/free-solid-svg-icons";
+import { IconDefinition } from "@fortawesome/free-solid-svg-icons";
 
 export interface FolderCardProps{
     title: string;
-    id: number;
+		icon: IconDefinition;
+		onIconClick: (event: React.MouseEvent) => void;
 }
 
 
-const FolderCard: React.FC<FolderCardProps> = ({title, id}: FolderCardProps) => {
+const FolderCard: React.FC<FolderCardProps> = ({title, icon, onIconClick}: FolderCardProps) => {
   return (
     <Card className={styles.folderCard}>
       <Card.Body style={{ padding: ".6rem" }}>
         <Card.Text style={{ marginBottom: 0 }}>{title}</Card.Text>
-        <FontAwesomeIcon style={{ fontSize: "1.125rem" }} icon={faFolder} />
+        <FontAwesomeIcon style={{ fontSize: "1.125rem" }} icon={icon} onClick={onIconClick}/>
       </Card.Body>
     </Card>
   );

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

@@ -3,28 +3,93 @@ import Row from "react-bootstrap/esm/Row";
 import Col from "react-bootstrap/esm/Col";
 import ResourceSectionHeader from "../ResourceSectionHeader";
 import FolderCard from "components/atoms/FolderCard";
-
-export interface ResourceFoldersProps{
-	folderItems: {
+import {
+  faSquare,
+  faCheckSquare,
+} from "@fortawesome/free-regular-svg-icons";
+import {
+  faFolder
+} from "@fortawesome/free-solid-svg-icons";
+export interface ResourceFoldersProps {
+  folderItems: {
     title: string;
     id: number;
-	}[];
+  }[];
+}
+
+type idBooleanMap = { [key: number]: boolean };
+interface MyState {
+  isSelected: idBooleanMap;
 }
 
-const ResourceFolders: React.FC<ResourceFoldersProps> = ({folderItems}: ResourceFoldersProps) => {
-  return (
-    <>
-      <ResourceSectionHeader heading="Folders" />
-
-      <Row style={{ marginTop: "10px" }}>
-        {folderItems.map(({title, id}) => (
-          <Col xs={6} sm={6} md={3} key={id}>
-            <FolderCard title={title} id={id}/>
-          </Col>
-        ))}
-      </Row>
-    </>
-  );
-};
+class ResourceFolders extends React.Component<ResourceFoldersProps, MyState> {
+  constructor(props: ResourceFoldersProps) {
+    super(props);
+    let isSelected: idBooleanMap = [];
+    this.state = { isSelected };
+  }
+
+  componentDidMount() {
+    let isSelected: idBooleanMap = [];
+    this.props.folderItems.forEach(({ id }: { id: number }) => {
+      isSelected[id] = false;
+    });
+    this.setState({ isSelected });
+  }
+
+  isAnySelected(): boolean {
+    let items = this.props.folderItems;
+    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.folderItems;
+    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));
+    isSelected[id] = !isSelected[id];
+    this.setState({ isSelected });
+  }
+
+  render() {
+    return (
+      <>
+        <ResourceSectionHeader heading="Folders" />
+
+        <Row style={{ marginTop: "10px" }}>
+          {this.props.folderItems.map(({ title, id }) => (
+            <Col xs={6} sm={6} md={3} key={id}>
+              <FolderCard
+                title={title}
+                icon={
+                  this.isAnySelected()
+                    ? this.state.isSelected[id]
+                      ? faCheckSquare
+                      : faSquare
+                    : faFolder
+                }
+                onIconClick={() => this.handleIconClick(id)}
+              />
+            </Col>
+          ))}
+        </Row>
+      </>
+    );
+  }
+}
 
 export default ResourceFolders;