WIP

InfiniteStash · Aug 18, 2024 · 0022f46 · 0022f46
1 parent f37bd69
commit 0022f46
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 65 deletions.
diff --git a/frontend/src/graphql/queries/index.ts b/frontend/src/graphql/queries/index.ts
@@ -138,7 +138,10 @@ export const useScenes = (variables: ScenesQueryVariables, skip = false) =>
     skip,
   });
 
-export const useScenesWithFingerprints = (variables: ScenesWithFingerprintsQueryVariables, skip = false) =>
+export const useScenesWithFingerprints = (
+  variables: ScenesWithFingerprintsQueryVariables,
+  skip = false
+) =>
   useQuery(ScenesWithFingerprintsDocument, {
     variables,
     skip,

diff --git a/frontend/src/pages/users/UserScenes.tsx → ...tend/src/pages/users/UserFingerprints.tsx b/frontend/src/pages/users/UserScenes.tsx → ...tend/src/pages/users/UserFingerprints.tsx
diff --git a/frontend/src/pages/users/UserFingerprintsList/UserFingerprint.tsx b/frontend/src/pages/users/UserFingerprintsList/UserFingerprint.tsx
@@ -1,34 +1,35 @@
-import { FC } from 'react';
-import { Button } from 'react-bootstrap';
+import { FC } from "react";
+import { Button } from "react-bootstrap";
 import { FingerprintAlgorithm } from "src/graphql";
 import { Icon } from "src/components/fragments";
 import { formatDuration } from "src/utils";
-import {
-  faTimesCircle,
-} from "@fortawesome/free-solid-svg-icons";
+import { faTimesCircle } from "@fortawesome/free-solid-svg-icons";
 
 interface Props {
   fingerprint: {
     hash: string;
     duration: number;
     algorithm: FingerprintAlgorithm;
-  }
+  };
   deleteFingerprint: () => void;
 }
 
-export const UserFingerprint: FC<Props> = ({ fingerprint, deleteFingerprint }) => (
+export const UserFingerprint: FC<Props> = ({
+  fingerprint,
+  deleteFingerprint,
+}) => (
   <li>
-      <div key={fingerprint.hash}>
-        <b className="me-2">{fingerprint.algorithm}</b>
-        {fingerprint.hash} ({formatDuration(fingerprint.duration)})
-        <Button
-          className="text-danger ms-2"
-          title="Submitted by you - click to remove submission"
-          onClick={deleteFingerprint}
-          variant="link"
-        >
-          <Icon icon={faTimesCircle} />
-        </Button>
-      </div>
+    <div key={fingerprint.hash}>
+      <b className="me-2">{fingerprint.algorithm}</b>
+      {fingerprint.hash} ({formatDuration(fingerprint.duration)})
+      <Button
+        className="text-danger ms-2"
+        title="Submitted by you - click to remove submission"
+        onClick={deleteFingerprint}
+        variant="link"
+      >
+        <Icon icon={faTimesCircle} />
+      </Button>
+    </div>
   </li>
-)
+);
diff --git a/frontend/src/pages/users/UserFingerprintsList/UserFingerprintsList.tsx b/frontend/src/pages/users/UserFingerprintsList/UserFingerprintsList.tsx
@@ -34,13 +34,18 @@ const sortOptions = [
   { value: SceneSortEnum.UPDATED_AT, label: "Updated At" },
 ];
 
-export const UserFingerprintsList: FC<Props> = ({ perPage = PER_PAGE, filter }) => {
-  const [deletionCandidates, setDeletionCandidates] = useState<{
-    hash: string;
-    scene_id: string;
-    algorithm: FingerprintAlgorithm;
-    duration: number;
-  }[]>([]);
+export const UserFingerprintsList: FC<Props> = ({
+  perPage = PER_PAGE,
+  filter,
+}) => {
+  const [deletionCandidates, setDeletionCandidates] = useState<
+    {
+      hash: string;
+      scene_id: string;
+      algorithm: FingerprintAlgorithm;
+      duration: number;
+    }[]
+  >([]);
 
   const [showDelete, setShowDelete] = useState(false);
   const [deleteFingerprint] = useUnmatchFingerprint();
@@ -100,23 +105,25 @@ export const UserFingerprintsList: FC<Props> = ({ perPage = PER_PAGE, filter })
     </InputGroup>
   );
 
-  const deleteFingerprints = (fingerprints: {
-    scene_id: string,
-    hash: string,
-    algorithm: FingerprintAlgorithm,
-    duration: number
-  }[]) => {
+  const deleteFingerprints = (
+    fingerprints: {
+      scene_id: string;
+      hash: string;
+      algorithm: FingerprintAlgorithm;
+      duration: number;
+    }[]
+  ) => {
     setDeletionCandidates(fingerprints);
     setShowDelete(true);
   };
 
   const handleDelete = async (status: boolean) => {
     if (status && deletionCandidates.length) {
-        for (const candidate of deletionCandidates) {
-          await deleteFingerprint({
-            variables: candidate,
-          });
-        }
+      for (const candidate of deletionCandidates) {
+        await deleteFingerprint({
+          variables: candidate,
+        });
+      }
     }
     setDeletionCandidates([]);
     setShowDelete(false);
@@ -152,7 +159,8 @@ export const UserFingerprintsList: FC<Props> = ({ perPage = PER_PAGE, filter })
                 <th>Release Date</th>
               </tr>
             </thead>
-            <tbody>{ data?.queryScenes.scenes.map(scene => (
+            <tbody>
+              {data?.queryScenes.scenes.map((scene) => (
                 <UserSceneLine
                   key={scene.id}
                   scene={scene}

diff --git a/frontend/src/pages/users/UserFingerprintsList/UserSceneLine.tsx b/frontend/src/pages/users/UserFingerprintsList/UserSceneLine.tsx
@@ -1,31 +1,44 @@
 import { FC } from "react";
 
-import { FingerprintAlgorithm, ScenesWithFingerprintsQuery} from "src/graphql";
+import { FingerprintAlgorithm, ScenesWithFingerprintsQuery } from "src/graphql";
 import { Icon } from "src/components/fragments";
 import { Link } from "react-router-dom";
-import { Button } from 'react-bootstrap';
+import { Button } from "react-bootstrap";
 import { sceneHref, studioHref, formatDuration } from "src/utils";
-import {
-  faVideo,
-  faTrashCan,
-} from "@fortawesome/free-solid-svg-icons";
-import { UserFingerprint } from './UserFingerprint';
+import { faVideo, faTrashCan } from "@fortawesome/free-solid-svg-icons";
+import { UserFingerprint } from "./UserFingerprint";
 
 interface Props {
-  scene: ScenesWithFingerprintsQuery['queryScenes']['scenes'][number];
-  deleteFingerprints: (fingerprints: {
-    scene_id: string,
-    hash: string,
-    algorithm: FingerprintAlgorithm,
-    duration: number
-  }[]) => void;
+  scene: ScenesWithFingerprintsQuery["queryScenes"]["scenes"][number];
+  deleteFingerprints: (
+    fingerprints: {
+      scene_id: string;
+      hash: string;
+      algorithm: FingerprintAlgorithm;
+      duration: number;
+    }[]
+  ) => void;
 }
 
 const UserSceneLine: FC<Props> = ({ scene, deleteFingerprints }) => (
-    <>
+  <>
     <tr key={scene.id}>
       <td width="10">
-        <Button variant="link" className="text-danger" onClick={() => deleteFingerprints(scene.fingerprints.map(fp => ({ ...fp, scene_id: scene.id })))}><Icon icon={faTrashCan} className="me-1" title="Delete all of your submitted fingerprints for this scene" /></Button>
+        <Button
+          variant="link"
+          className="text-danger"
+          onClick={() =>
+            deleteFingerprints(
+              scene.fingerprints.map((fp) => ({ ...fp, scene_id: scene.id }))
+            )
+          }
+        >
+          <Icon
+            icon={faTrashCan}
+            className="me-1"
+            title="Delete all of your submitted fingerprints for this scene"
+          />
+        </Button>
       </td>
       <td>
         <Link className="text-truncate w-100" to={sceneHref(scene)}>
@@ -49,9 +62,15 @@ const UserSceneLine: FC<Props> = ({ scene, deleteFingerprints }) => (
     <tr key={`${scene}-fps`}>
       <td colSpan={4}>
         <ul>
-          { scene.fingerprints.map(fp => (
-            <UserFingerprint fingerprint={fp} deleteFingerprint={() => deleteFingerprints([{ ...fp, scene_id: scene.id }])} key={fp.hash} />
-          )) }
+          {scene.fingerprints.map((fp) => (
+            <UserFingerprint
+              fingerprint={fp}
+              deleteFingerprint={() =>
+                deleteFingerprints([{ ...fp, scene_id: scene.id }])
+              }
+              key={fp.hash}
+            />
+          ))}
         </ul>
       </td>
     </tr>

diff --git a/...ages/users/UserFingerprintsList/index.tsx → ...pages/users/UserFingerprintsList/index.ts b/...ages/users/UserFingerprintsList/index.tsx → ...pages/users/UserFingerprintsList/index.ts
diff --git a/frontend/src/pages/users/index.tsx b/frontend/src/pages/users/index.tsx
@@ -12,7 +12,7 @@ import UserAdd from "./UserAdd";
 import UserEdit from "./UserEdit";
 import UserPassword from "./UserPassword";
 import UserEdits from "./UserEdits";
-import UserScenes from "./UserScenes";
+import UserFingerprints from "./UserFingerprints";
 
 const UserLoader: FC = () => {
   const { name } = useParams<{ name: string }>();
@@ -90,11 +90,12 @@ const UserRoutes: FC = () => (
     <Route
       path="/fingerprints"
       element={
-      <>
-        <Title page={"My Fingerprints"} />
-        <UserScenes />
-      </>
-      } />
+        <>
+          <Title page={"My Fingerprints"} />
+          <UserFingerprints/>
+        </>
+      }
+    />
     <Route path="/:name/*" element={<UserLoader />} />
   </Routes>
 );