Allow each user to select favorites

src/components/FileListItem.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import { LogFile, deleteFile } from "../data/files";
+import { setFavorite } from "../data/user";
 import {
   Box,
   Button,
@@ -14,12 +15,15 @@ import {
   Typography,
 } from "@material-ui/core";
 import DeleteIcon from "@material-ui/icons/Delete";
+import { Favorite, FavoriteBorder } from "@material-ui/icons";
 import { Done, Error, HourglassEmpty } from "@material-ui/icons";
 
 interface FileListItemProps {
   file: LogFile;
   onClick: () => void;
   reloadFiles: () => void;
+  isFavorite: boolean;
+  reloadUser: () => void;
 }
 
 function CircularProgressWithLabel(
@@ -52,6 +56,8 @@ const FileListItem: React.FC<FileListItemProps> = ({
   file,
   onClick,
   reloadFiles,
+  isFavorite,
+  reloadUser,
 }) => {
   const [deleteOpen, setDeleteOpen] = useState<boolean>(false);
   const downloadUrl = file.npzURL;
@@ -107,6 +113,14 @@ const FileListItem: React.FC<FileListItemProps> = ({
             </Button>
           </DialogActions>
         </Dialog>
+        <Button
+          onClick={async () => {
+            await setFavorite(file.id, !isFavorite);
+            reloadUser();
+          }}
+        >
+          {isFavorite ? <Favorite /> : <FavoriteBorder />}
+        </Button>
 
         <ButtonGroup>
           <Button onClick={() => onClick()} variant="contained">

src/data/user.ts

@@ -0,0 +1,32 @@
+import firebase from "firebase/app";
+import "firebase/firestore";
+
+export const getFavorites = async (): Promise<string[]> => {
+  const uid = firebase.auth().currentUser?.uid;
+  if (!uid) return [];
+  const data = (
+    await firebase.firestore().collection("users").doc(uid).get()
+  ).data();
+  return data ? data["favorites"] : [];
+};
+
+export const setFavorite = async (
+  fileId: string,
+  on: boolean
+): Promise<void> => {
+  const uid = firebase.auth().currentUser?.uid;
+  const prev = await getFavorites();
+  if (on) {
+    prev.push(fileId);
+  } else {
+    const idx = prev.indexOf(fileId);
+    if (idx !== -1) {
+      prev.splice(idx, 1);
+    }
+  }
+  await firebase
+    .firestore()
+    .collection("users")
+    .doc(uid)
+    .set({ favorites: prev }, { merge: true });
+};

src/pages/Home.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import Fuse from "fuse.js";
 import { LogFile, getFiles } from "../data/files";
+import { getFavorites } from "../data/user";
 import fullWhite from "../images/fullWhite.png";
 import bugIssues from "../images/bugIssues.svg";
 import "../utilities.css";
@@ -49,6 +50,7 @@ import {
 type FileFilter = (l: LogFile) => boolean;
 const Home: React.FC = () => {
   const [logFiles, setLogFiles] = useState<LogFile[]>([]);
+  const [favorites, setFavorites] = useState<string[]>([]);
   const [selectedFile, setSelectedFile] = useState<LogFile | null>(null);
   const [showUploadModal, setShowUploadModal] = useState(false);
   const [fileTypeSelection, setFileTypeSelection] = useState<"logs" | "specs">(
@@ -106,9 +108,13 @@ const Home: React.FC = () => {
     getFiles(setLogFiles);
   };
 
+  const reloadUser = async () => {
+    setFavorites(await getFavorites());
+  };
+
   // TODO @rhuffy fix this!
   useEffect(() => {
-    reloadFiles();
+    reloadFiles().then(reloadUser);
   }, []); // eslint-disable-line
 
   makeStyles((theme) => ({
@@ -354,14 +360,30 @@ const Home: React.FC = () => {
                       file={f}
                       onClick={() => setSelectedFile(f)}
                       reloadFiles={reloadFiles}
+                      isFavorite={favorites.includes(f.id)}
+                      reloadUser={reloadUser}
                     />
                   ) : null
                 )
                 .filter((el: React.FC) => el !== null),
             ])
               .sort((a, b) => (a[0] > b[0] ? -1 : 1))
               .map(([k, v]) => [new Date(k).toDateString(), v]);
-
+            groupItems.unshift([
+              "Favorites",
+              logFiles
+                .filter((log) => favorites.includes(log.id))
+                .map((f) => (
+                  <FileListItem
+                    key={f.id}
+                    file={f}
+                    onClick={() => setSelectedFile(f)}
+                    reloadFiles={reloadFiles}
+                    isFavorite={favorites.includes(f.id)}
+                    reloadUser={reloadUser}
+                  />
+                )),
+            ]);
             return groupItems.map(
               (item, i) =>
                 item[1].length > 0 &&