🚚 Move new-frontend to frontend (#652)

2024-03-08 19:23:54 +01:00
parent 3b44537361
commit 9d703df254
97 changed files with 8 additions and 8 deletions
--- a/frontend/src/components/Common/DeleteAlert.tsx
+++ b/frontend/src/components/Common/DeleteAlert.tsx
@@ -0,0 +1,116 @@
+import React from 'react'
+import {
+  AlertDialog,
+  AlertDialogBody,
+  AlertDialogContent,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  Button,
+} from '@chakra-ui/react'
+import { useForm } from 'react-hook-form'
+import { useMutation, useQueryClient } from 'react-query'
+
+import { ItemsService, UsersService } from '../../client'
+import useCustomToast from '../../hooks/useCustomToast'
+
+interface DeleteProps {
+  type: string
+  id: number
+  isOpen: boolean
+  onClose: () => void
+}
+
+const Delete: React.FC<DeleteProps> = ({ type, id, isOpen, onClose }) => {
+  const queryClient = useQueryClient()
+  const showToast = useCustomToast()
+  const cancelRef = React.useRef<HTMLButtonElement | null>(null)
+  const {
+    handleSubmit,
+    formState: { isSubmitting },
+  } = useForm()
+
+  const deleteEntity = async (id: number) => {
+    if (type === 'Item') {
+      await ItemsService.deleteItem({ id: id })
+    } else if (type === 'User') {
+      await UsersService.deleteUser({ userId: id })
+    } else {
+      throw new Error(`Unexpected type: ${type}`)
+    }
+  }
+
+  const mutation = useMutation(deleteEntity, {
+    onSuccess: () => {
+      showToast(
+        'Success',
+        `The ${type.toLowerCase()} was deleted successfully.`,
+        'success',
+      )
+      onClose()
+    },
+    onError: () => {
+      showToast(
+        'An error occurred.',
+        `An error occurred while deleting the ${type.toLowerCase()}.`,
+        'error',
+      )
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries(type === 'Item' ? 'items' : 'users')
+    },
+  })
+
+  const onSubmit = async () => {
+    mutation.mutate(id)
+  }
+
+  return (
+    <>
+      <AlertDialog
+        isOpen={isOpen}
+        onClose={onClose}
+        leastDestructiveRef={cancelRef}
+        size={{ base: 'sm', md: 'md' }}
+        isCentered
+      >
+        <AlertDialogOverlay>
+          <AlertDialogContent as="form" onSubmit={handleSubmit(onSubmit)}>
+            <AlertDialogHeader>Delete {type}</AlertDialogHeader>
+
+            <AlertDialogBody>
+              {type === 'User' && (
+                <span>
+                  All items associated with this user will also be{' '}
+                  <strong>permantly deleted. </strong>
+                </span>
+              )}
+              Are you sure? You will not be able to undo this action.
+            </AlertDialogBody>
+
+            <AlertDialogFooter gap={3}>
+              <Button
+                bg="ui.danger"
+                color="white"
+                _hover={{ opacity: 0.8 }}
+                type="submit"
+                isLoading={isSubmitting}
+              >
+                Delete
+              </Button>
+              <Button
+                ref={cancelRef}
+                onClick={onClose}
+                isDisabled={isSubmitting}
+              >
+                Cancel
+              </Button>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialogOverlay>
+      </AlertDialog>
+    </>
+  )
+}
+
+export default Delete