From a6240e822371f518c363eccbe8cdad84babb7128 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 6 Sep 2023 14:49:18 +0800
Subject: [PATCH 1/3] Return of the bulk tool

---
 packages/web/pages/tools/bulk.tsx | 221 ++++++++++++++++++++++++++++++
 1 file changed, 221 insertions(+)
 create mode 100644 packages/web/pages/tools/bulk.tsx

diff --git a/packages/web/pages/tools/bulk.tsx b/packages/web/pages/tools/bulk.tsx
new file mode 100644
index 000000000..78dbc9cd0
--- /dev/null
+++ b/packages/web/pages/tools/bulk.tsx
@@ -0,0 +1,221 @@
+import { useCallback, useEffect, useState } from 'react'
+import { applyStoredTheme } from '../../lib/themeUpdater'
+
+import {
+  Box,
+  SpanBox,
+  VStack,
+} from '../../components/elements/LayoutPrimitives'
+
+import { StyledText } from '../../components/elements/StyledText'
+import { ProfileLayout } from '../../components/templates/ProfileLayout'
+import {
+  BulkAction,
+  bulkActionMutation,
+} from '../../lib/networking/mutations/bulkActionMutation'
+import { Button } from '../../components/elements/Button'
+import { theme } from '../../components/tokens/stitches.config'
+import { ConfirmationModal } from '../../components/patterns/ConfirmationModal'
+import * as Select from '@radix-ui/react-select'
+
+import { showErrorToast, showSuccessToast } from '../../lib/toastHelpers'
+import { useRouter } from 'next/router'
+import { useGetLibraryItemsQuery } from '../../lib/networking/queries/useGetLibraryItemsQuery'
+import {
+  BorderedFormInput,
+  FormInput,
+  FormLabel,
+} from '../../components/elements/FormElements'
+
+type RunningState = 'none' | 'confirming' | 'running' | 'completed'
+
+export default function BulkPerformer(): JSX.Element {
+  const router = useRouter()
+
+  applyStoredTheme(false)
+
+  const [action, setAction] = useState<BulkAction | undefined>()
+  const [query, setQuery] = useState<string>('in:all')
+  const [expectedCount, setExpectedCount] = useState<number | undefined>()
+  const [errorMessage, setErrorMessage] = useState<string | undefined>()
+  const [runningState, setRunningState] = useState<RunningState>('none')
+
+  const { itemsPages, isValidating } = useGetLibraryItemsQuery({
+    searchQuery: query,
+    limit: 1,
+    sortDescending: false,
+  })
+
+  useEffect(() => {
+    console.log('itemsPages: ', itemsPages)
+    setExpectedCount(itemsPages?.find(() => true)?.search.pageInfo.totalCount)
+  }, [itemsPages])
+
+  const performAction = useCallback(() => {
+    ;(async () => {
+      console.log('performing action: ', action)
+      if (!action) {
+        showErrorToast('Unable to run action, no action set.')
+        return
+      }
+      try {
+        // action: BulkAction,
+        // query: string,
+        // expectedCount: number,
+        // labelIds?: string[]
+        const success = await bulkActionMutation(action, query, size)
+        if (!success) {
+          throw 'Success not returned'
+        }
+        showSuccessToast('Bulk action is being performed.')
+        setRunningState('completed')
+      } catch (err) {
+        showErrorToast('Error performing bulk action.')
+      }
+    })()
+  }, [action])
+
+  return (
+    <ProfileLayout logoDestination="/home">
+      <VStack
+        alignment="start"
+        css={{
+          padding: '16px',
+          background: 'white',
+          minWidth: '340px',
+          width: '70vw',
+          maxWidth: '576px',
+          borderRadius: '8px',
+          border: '1px solid #3D3D3D',
+          boxShadow: '#B1B1B1 9px 9px 9px -9px',
+        }}
+      >
+        <StyledText
+          style="modalHeadline"
+          css={{
+            color: theme.colors.omnivoreGray.toString(),
+          }}
+        >
+          Perform a Bulk Action
+        </StyledText>
+        <StyledText
+          style="caption"
+          css={{ pt: '10px', color: theme.colors.omnivoreGray.toString() }}
+        >
+          Use this tool to perform a bulk operation on all the items in your
+          library.<br></br>
+        </StyledText>
+        <StyledText
+          style="caption"
+          css={{ pt: '0px', color: theme.colors.omnivoreGray.toString() }}
+        >
+          <b>Note:</b> This operation can not be undone.
+        </StyledText>
+        <VStack css={{ pt: '36px', width: '100%' }}>
+          {runningState == 'completed' ? (
+            <StyledText
+              style="caption"
+              css={{
+                pt: '10px',
+                pb: '20px',
+                color: theme.colors.omnivoreGray.toString(),
+              }}
+            >
+              Your bulk action has started. Please note that it can take some
+              time for these actions to complete. During this time, we recommend
+              not modifying your library as new items could be updated by the
+              action.
+            </StyledText>
+          ) : (
+            <>
+              <VStack css={{ width: '100%', gap: '15px' }}>
+                <FormLabel className="required">Search Query</FormLabel>
+                <BorderedFormInput
+                  key="fullname"
+                  type="text"
+                  name="name"
+                  defaultValue={query}
+                  placeholder="Enter your query"
+                  css={{ bg: 'white', color: 'black' }}
+                  onChange={(e) => setQuery(e.target.value)}
+                  required
+                />
+                <StyledText style="footnote" css={{ mt: '5px' }}>
+                  Matches {expectedCount} items.
+                </StyledText>
+
+                <FormLabel className="required">Action</FormLabel>
+                <select
+                  disabled={runningState == 'running'}
+                  onChange={(event) => {
+                    const updatedAction: BulkAction =
+                      BulkAction[
+                        event.currentTarget.value as keyof typeof BulkAction
+                      ]
+                    setAction(updatedAction)
+                  }}
+                  style={{
+                    margin: '0px',
+                    padding: '8px',
+                    height: '38px',
+                    borderRadius: '6px',
+                    minWidth: '196px',
+                    color: theme.colors.omnivoreGray.toString(),
+                  }}
+                >
+                  <option value="none">Choose bulk action</option>
+                  <option value="ARCHIVE">Archive All</option>
+                  <option value="DELETE">Delete All</option>
+                </select>
+
+                <Button
+                  onClick={(e) => {
+                    if (!expectedCount) {
+                      alert(
+                        'No items matching this query or query still running.'
+                      )
+                      return
+                    }
+                    if (!action) {
+                      alert('No action selected')
+                      return
+                    }
+                    setRunningState('confirming')
+                  }}
+                  style="ctaDarkYellow"
+                >
+                  Perform Action
+                </Button>
+              </VStack>
+            </>
+          )}
+
+          {runningState == 'confirming' && (
+            <ConfirmationModal
+              message={`Are you sure you want to ${action} the ${expectedCount} items matching this query? This operation can not be undone.`}
+              onAccept={performAction}
+              onOpenChange={() => setRunningState('none')}
+            />
+          )}
+          {runningState == 'completed' && (
+            <VStack css={{ width: '100%' }} alignment="center">
+              <Button
+                onClick={(e) => {
+                  window.location.href = '/home'
+                  e.preventDefault()
+                }}
+                style="ctaDarkYellow"
+              >
+                Return to Library
+              </Button>
+            </VStack>
+          )}
+
+          {errorMessage && (
+            <StyledText style="error">{errorMessage}</StyledText>
+          )}
+        </VStack>
+      </VStack>
+    </ProfileLayout>
+  )
+}

From 9e99a9a3d81f7315522c082c734fc26305c55eb9 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 6 Sep 2023 15:27:56 +0800
Subject: [PATCH 2/3] Fix imports

---
 packages/web/pages/tools/bulk.tsx | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/packages/web/pages/tools/bulk.tsx b/packages/web/pages/tools/bulk.tsx
index 78dbc9cd0..9779f0cda 100644
--- a/packages/web/pages/tools/bulk.tsx
+++ b/packages/web/pages/tools/bulk.tsx
@@ -1,11 +1,7 @@
 import { useCallback, useEffect, useState } from 'react'
 import { applyStoredTheme } from '../../lib/themeUpdater'
 
-import {
-  Box,
-  SpanBox,
-  VStack,
-} from '../../components/elements/LayoutPrimitives'
+import { VStack } from '../../components/elements/LayoutPrimitives'
 
 import { StyledText } from '../../components/elements/StyledText'
 import { ProfileLayout } from '../../components/templates/ProfileLayout'
@@ -16,14 +12,11 @@ import {
 import { Button } from '../../components/elements/Button'
 import { theme } from '../../components/tokens/stitches.config'
 import { ConfirmationModal } from '../../components/patterns/ConfirmationModal'
-import * as Select from '@radix-ui/react-select'
-
 import { showErrorToast, showSuccessToast } from '../../lib/toastHelpers'
 import { useRouter } from 'next/router'
 import { useGetLibraryItemsQuery } from '../../lib/networking/queries/useGetLibraryItemsQuery'
 import {
   BorderedFormInput,
-  FormInput,
   FormLabel,
 } from '../../components/elements/FormElements'
 

From f0fcc90bb299f9a1454b09078d2829f94df65793 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 6 Sep 2023 15:50:21 +0800
Subject: [PATCH 3/3] Add validation check to bulk action

---
 packages/web/pages/tools/bulk.tsx | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/web/pages/tools/bulk.tsx b/packages/web/pages/tools/bulk.tsx
index 9779f0cda..ab74aed27 100644
--- a/packages/web/pages/tools/bulk.tsx
+++ b/packages/web/pages/tools/bulk.tsx
@@ -47,16 +47,24 @@ export default function BulkPerformer(): JSX.Element {
   const performAction = useCallback(() => {
     ;(async () => {
       console.log('performing action: ', action)
+      if (isValidating) {
+        showErrorToast('Query still being validated.')
+        return
+      }
       if (!action) {
         showErrorToast('Unable to run action, no action set.')
         return
       }
+      if (!expectedCount) {
+        showErrorToast('No items matching this query or query still running.')
+        return
+      }
+      if (!action) {
+        showErrorToast('No action selected')
+        return
+      }
       try {
-        // action: BulkAction,
-        // query: string,
-        // expectedCount: number,
-        // labelIds?: string[]
-        const success = await bulkActionMutation(action, query, size)
+        const success = await bulkActionMutation(action, query, expectedCount)
         if (!success) {
           throw 'Success not returned'
         }
@@ -66,7 +74,7 @@ export default function BulkPerformer(): JSX.Element {
         showErrorToast('Error performing bulk action.')
       }
     })()
-  }, [action])
+  }, [action, query, expectedCount])
 
   return (
     <ProfileLayout logoDestination="/home">