refactor(Previous List): add more info to each item

src/db/actions.ts

@@ -82,32 +82,35 @@ export const updateScanById = async (
 }
 
 export const getScansList = (): Promise<
-  DatabaseOperationResult<Pick<Scan, 'id' | 'createdAt' | 'status'>[]>
+  DatabaseOperationResult<Pick<Scan, 'id' | 'createdAt' | 'status' | 'configuration'>[]>
 > => {
-  return performDatabaseOperation<Pick<Scan, 'id' | 'createdAt' | 'status'>[]>(() =>
-    prisma.scan.findMany({
-      where: {
-        status: 'completed'
-      },
-      select: {
-        id: true,
-        createdAt: true,
-        status: true,
-        deletedFiles: {
-          select: {
-            id: true,
-            count: true,
-            status: true,
-            errors: true,
-            success: true,
-            scanId: true
+  return performDatabaseOperation<Pick<Scan, 'id' | 'createdAt' | 'status' | 'configuration'>[]>(
+    () =>
+      prisma.scan.findMany({
+        where: {
+          status: 'completed'
+        },
+        select: {
+          id: true,
+          createdAt: true,
+          status: true,
+          configuration: true,
+          deletedFiles: {
+            select: {
+              id: true,
+              count: true,
+              status: true,
+              errors: true,
+              success: true,
+              scanId: true
+            }
           }
-        }
-      },
-      orderBy: {
-        createdAt: 'desc'
-      }
-    })
+        },
+        orderBy: {
+          createdAt: 'desc'
+        },
+        take: 10
+      })
   )
 }
 

src/renderer/src/actions/ipc.ts

@@ -107,9 +107,9 @@ export const insertScan = (
 }
 
 export const getScansList = (): Promise<
-  DatabaseOperationResult<Pick<Scan, 'id' | 'createdAt' | 'status'>[]>
+  DatabaseOperationResult<Pick<Scan, 'id' | 'createdAt' | 'status' | 'configuration'>[]>
 > => {
-  return invokeIPC<Pick<Scan, 'id' | 'createdAt' | 'status'>[]>(GET_SCANS_LIST)
+  return invokeIPC<Pick<Scan, 'id' | 'createdAt' | 'status' | 'configuration'>[]>(GET_SCANS_LIST)
 }
 
 export const deleteFiles = (

src/renderer/src/actions/types.ts

@@ -22,7 +22,7 @@ export type MainState = {
   directorySrcs: FilesDirectory[]
   error: string | null
   scans: Record<string, ExtendedScan>
-  allScans: Pick<Scan, 'id' | 'createdAt' | 'status'>[]
+  allScans: Pick<Scan, 'id' | 'createdAt' | 'status' | 'configuration'>[]
   scanConfiguration: {
     type: 'audio' | 'image'
     includeCrates: boolean

src/renderer/src/components/PreviousResults.tsx

@@ -1,7 +1,9 @@
+import { Scan } from '@prisma/client'
 import useMain from '@renderer/context/hooks/useMain'
 import useScansList from '@renderer/hooks/useScansList'
 import { UPDATE_ACTIVE_TAB } from '@src/constants'
-import { format } from 'date-fns'
+import { ScanConfigurationSchema } from '@src/types'
+import { formatDistanceToNow } from 'date-fns'
 import { useMemo } from 'react'
 
 const classNames = {
@@ -10,10 +12,80 @@ const classNames = {
   ul: 'dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52  max-h-80 flex-nowrap overflow-y-auto'
 }
 
+const SCAN_TYPE = {
+  duplicate: 'Duplicate',
+  not_crated: 'Not in Crate'
+}
+
+const TYPE = {
+  audio: 'Audio',
+  image: 'Image'
+}
+
+const ResultItem = ({
+  scan
+}: {
+  scan: Pick<Scan, 'id' | 'createdAt' | 'status' | 'configuration'>
+}): JSX.Element => {
+  const { dispatch } = useMain()
+
+  const configuration = useMemo(() => {
+    const configurationRes = ScanConfigurationSchema.safeParse(JSON.parse(scan.configuration))
+
+    return configurationRes.success ? configurationRes.data : null
+  }, [scan.configuration])
+
+  return (
+    <li
+      key={scan.id}
+      onClick={(): void => {
+        dispatch({
+          type: 'ADD_NEW_SCAN',
+          payload: {
+            id: scan.id,
+            scan: {
+              ...scan,
+              status: 'ready',
+              createdAt: new Date(),
+              updatedAt: new Date(),
+              results: { files: {} },
+              configuration: configuration ?? {
+                directoryPaths: [],
+                type: 'audio',
+                matchType: 'name',
+                includeCrates: false,
+                scanType: 'duplicate'
+              },
+              deletedFiles: []
+            }
+          }
+        })
+
+        dispatch({
+          type: UPDATE_ACTIVE_TAB,
+          payload: {
+            activeTab: scan.id
+          }
+        })
+      }}
+    >
+      <a className="grid grid-flow-row gap-0">
+        <span className="text-md">
+          {SCAN_TYPE[configuration?.scanType as keyof typeof SCAN_TYPE]}{' '}
+          {TYPE[configuration?.type as keyof typeof TYPE]}
+        </span>
+        <span className="text-xs text-info-content">
+          ({formatDistanceToNow(scan.createdAt, { addSuffix: true })})
+        </span>
+      </a>
+    </li>
+  )
+}
+
 export default function PreviousResults(): JSX.Element {
   // fetch previous results
   useScansList()
-  const { state, dispatch } = useMain()
+  const { state } = useMain()
   const list = useMemo(() => state.allScans, [state.allScans])
 
   return (
@@ -26,41 +98,7 @@ export default function PreviousResults(): JSX.Element {
       </label>
       <ul tabIndex={0} className={classNames.ul}>
         {list.map((scan) => (
-          <li
-            key={scan.id}
-            onClick={(): void => {
-              dispatch({
-                type: 'ADD_NEW_SCAN',
-                payload: {
-                  id: scan.id,
-                  scan: {
-                    ...scan,
-                    status: 'ready',
-                    createdAt: new Date(),
-                    updatedAt: new Date(),
-                    results: { files: {} },
-                    configuration: {
-                      directoryPaths: [],
-                      type: 'audio',
-                      matchType: 'name',
-                      includeCrates: false,
-                      scanType: 'duplicate'
-                    },
-                    deletedFiles: []
-                  }
-                }
-              })
-
-              dispatch({
-                type: UPDATE_ACTIVE_TAB,
-                payload: {
-                  activeTab: scan.id
-                }
-              })
-            }}
-          >
-            <a>{format(new Date(scan.createdAt), 'MMM dd, yy h:mma')}</a>
-          </li>
+          <ResultItem key={scan.id} scan={scan} />
         ))}
       </ul>
     </div>

src/renderer/src/hooks/useScansList.ts

@@ -8,7 +8,9 @@ import { useEffect } from 'react'
 export default function useScansList(): void {
   const { dispatch } = useMain()
 
-  const { data } = useQuery<DatabaseOperationResult<Pick<Scan, 'id' | 'createdAt' | 'status'>[]>>({
+  const { data } = useQuery<
+    DatabaseOperationResult<Pick<Scan, 'id' | 'createdAt' | 'status' | 'configuration'>[]>
+  >({
     queryKey: ['scansList'],
     queryFn: getScansList
   })