♻️ Refactor and tweaks, rename UserCreateOpen to UserRegister and others (#1143)

2024-04-01 22:53:33 -05:00
parent aed4db7521
commit 4239d93ea6
45 changed files with 537 additions and 518 deletions
--- a/frontend/src/components/Admin/AddUser.tsx
+++ b/frontend/src/components/Admin/AddUser.tsx
@@ -53,24 +53,23 @@ const AddUser = ({ isOpen, onClose }: AddUserProps) => {
    },
  })

-  const addUser = async (data: UserCreate) => {
-    await UsersService.createUser({ requestBody: data })
-  }
-
-  const mutation = useMutation(addUser, {
-    onSuccess: () => {
-      showToast("Success!", "User created successfully.", "success")
-      reset()
-      onClose()
+  const mutation = useMutation(
+    (data: UserCreate) => UsersService.createUser({ requestBody: data }),
+    {
+      onSuccess: () => {
+        showToast("Success!", "User created successfully.", "success")
+        reset()
+        onClose()
+      },
+      onError: (err: ApiError) => {
+        const errDetail = err.body?.detail
+        showToast("Something went wrong.", `${errDetail}`, "error")
+      },
+      onSettled: () => {
+        queryClient.invalidateQueries("users")
+      },
    },
-    onError: (err: ApiError) => {
-      const errDetail = err.body?.detail
-      showToast("Something went wrong.", `${errDetail}`, "error")
-    },
-    onSettled: () => {
-      queryClient.invalidateQueries("users")
-    },
-  })
+  )

  const onSubmit: SubmitHandler<UserCreateForm> = (data) => {
    mutation.mutate(data)
--- a/frontend/src/components/Admin/EditUser.tsx
+++ b/frontend/src/components/Admin/EditUser.tsx
@@ -52,23 +52,23 @@ const EditUser = ({ user, isOpen, onClose }: EditUserProps) => {
    defaultValues: user,
  })

-  const updateUser = async (data: UserUpdateForm) => {
-    await UsersService.updateUser({ userId: user.id, requestBody: data })
-  }
-
-  const mutation = useMutation(updateUser, {
-    onSuccess: () => {
-      showToast("Success!", "User updated successfully.", "success")
-      onClose()
+  const mutation = useMutation(
+    (data: UserUpdateForm) =>
+      UsersService.updateUser({ userId: user.id, requestBody: data }),
+    {
+      onSuccess: () => {
+        showToast("Success!", "User updated successfully.", "success")
+        onClose()
+      },
+      onError: (err: ApiError) => {
+        const errDetail = err.body?.detail
+        showToast("Something went wrong.", `${errDetail}`, "error")
+      },
+      onSettled: () => {
+        queryClient.invalidateQueries("users")
+      },
    },
-    onError: (err: ApiError) => {
-      const errDetail = err.body?.detail
-      showToast("Something went wrong.", `${errDetail}`, "error")
-    },
-    onSettled: () => {
-      queryClient.invalidateQueries("users")
-    },
-  })
+  )

  const onSubmit: SubmitHandler<UserUpdateForm> = async (data) => {
    if (data.password === "") {
--- a/frontend/src/components/Common/Navbar.tsx
+++ b/frontend/src/components/Common/Navbar.tsx
@@ -18,7 +18,7 @@ const Navbar = ({ type }: NavbarProps) => {
        {/* TODO: Complete search functionality */}
        {/* <InputGroup w={{ base: '100%', md: 'auto' }}>
                    <InputLeftElement pointerEvents='none'>
-                        <Icon as={FaSearch} color='gray.400' />
+                        <Icon as={FaSearch} color='ui.dim' />
                    </InputLeftElement>
                    <Input type='text' placeholder='Search' fontSize={{ base: 'sm', md: 'inherit' }} borderRadius='8px' />
                </InputGroup> */}
--- a/frontend/src/components/Common/Sidebar.tsx
+++ b/frontend/src/components/Common/Sidebar.tsx
@@ -22,8 +22,8 @@ import SidebarItems from "./SidebarItems"

 const Sidebar = () => {
  const queryClient = useQueryClient()
-  const bgColor = useColorModeValue("ui.white", "ui.dark")
-  const textColor = useColorModeValue("ui.dark", "ui.white")
+  const bgColor = useColorModeValue("ui.light", "ui.dark")
+  const textColor = useColorModeValue("ui.dark", "ui.light")
  const secBgColor = useColorModeValue("ui.secondary", "ui.darkSlate")
  const currentUser = queryClient.getQueryData<UserOut>("currentUser")
  const { isOpen, onOpen, onClose } = useDisclosure()
--- a/frontend/src/components/Common/SidebarItems.tsx
+++ b/frontend/src/components/Common/SidebarItems.tsx
@@ -17,7 +17,7 @@ interface SidebarItemsProps {

 const SidebarItems = ({ onClose }: SidebarItemsProps) => {
  const queryClient = useQueryClient()
-  const textColor = useColorModeValue("ui.main", "ui.white")
+  const textColor = useColorModeValue("ui.main", "ui.light")
  const bgActive = useColorModeValue("#E2E8F0", "#4A5568")
  const currentUser = queryClient.getQueryData<UserOut>("currentUser")

@@ -25,13 +25,13 @@ const SidebarItems = ({ onClose }: SidebarItemsProps) => {
    ? [...items, { icon: FiUsers, title: "Admin", path: "/admin" }]
    : items

-  const listItems = finalItems.map((item) => (
+  const listItems = finalItems.map(({ icon, title, path }) => (
    <Flex
      as={Link}
-      to={item.path}
+      to={path}
      w="100%"
      p={2}
-      key={item.title}
+      key={title}
      activeProps={{
        style: {
          background: bgActive,
@@ -41,8 +41,8 @@ const SidebarItems = ({ onClose }: SidebarItemsProps) => {
      color={textColor}
      onClick={onClose}
    >
-      <Icon as={item.icon} alignSelf="center" />
-      <Text ml={2}>{item.title}</Text>
+      <Icon as={icon} alignSelf="center" />
+      <Text ml={2}>{title}</Text>
    </Flex>
  ))

--- a/frontend/src/components/Common/UserMenu.tsx
+++ b/frontend/src/components/Common/UserMenu.tsx
@@ -6,10 +6,10 @@ import {
  MenuItem,
  MenuList,
 } from "@chakra-ui/react"
+import { Link } from "@tanstack/react-router"
 import { FaUserAstronaut } from "react-icons/fa"
 import { FiLogOut, FiUser } from "react-icons/fi"

-import { Link } from "@tanstack/react-router"
 import useAuth from "../../hooks/useAuth"

 const UserMenu = () => {
--- a/frontend/src/components/Items/AddItem.tsx
+++ b/frontend/src/components/Items/AddItem.tsx
@@ -40,24 +40,23 @@ const AddItem = ({ isOpen, onClose }: AddItemProps) => {
    },
  })

-  const addItem = async (data: ItemCreate) => {
-    await ItemsService.createItem({ requestBody: data })
-  }
-
-  const mutation = useMutation(addItem, {
-    onSuccess: () => {
-      showToast("Success!", "Item created successfully.", "success")
-      reset()
-      onClose()
+  const mutation = useMutation(
+    (data: ItemCreate) => ItemsService.createItem({ requestBody: data }),
+    {
+      onSuccess: () => {
+        showToast("Success!", "Item created successfully.", "success")
+        reset()
+        onClose()
+      },
+      onError: (err: ApiError) => {
+        const errDetail = err.body?.detail
+        showToast("Something went wrong.", `${errDetail}`, "error")
+      },
+      onSettled: () => {
+        queryClient.invalidateQueries("items")
+      },
    },
-    onError: (err: ApiError) => {
-      const errDetail = err.body?.detail
-      showToast("Something went wrong.", `${errDetail}`, "error")
-    },
-    onSettled: () => {
-      queryClient.invalidateQueries("items")
-    },
-  })
+  )

  const onSubmit: SubmitHandler<ItemCreate> = (data) => {
    mutation.mutate(data)
--- a/frontend/src/components/Items/EditItem.tsx
+++ b/frontend/src/components/Items/EditItem.tsx
@@ -13,8 +13,8 @@ import {
  ModalOverlay,
 } from "@chakra-ui/react"
 import { type SubmitHandler, useForm } from "react-hook-form"
-
 import { useMutation, useQueryClient } from "react-query"
+
 import {
  type ApiError,
  type ItemOut,
@@ -43,23 +43,23 @@ const EditItem = ({ item, isOpen, onClose }: EditItemProps) => {
    defaultValues: item,
  })

-  const updateItem = async (data: ItemUpdate) => {
-    await ItemsService.updateItem({ id: item.id, requestBody: data })
-  }
-
-  const mutation = useMutation(updateItem, {
-    onSuccess: () => {
-      showToast("Success!", "Item updated successfully.", "success")
-      onClose()
+  const mutation = useMutation(
+    (data: ItemUpdate) =>
+      ItemsService.updateItem({ id: item.id, requestBody: data }),
+    {
+      onSuccess: () => {
+        showToast("Success!", "Item updated successfully.", "success")
+        onClose()
+      },
+      onError: (err: ApiError) => {
+        const errDetail = err.body?.detail
+        showToast("Something went wrong.", `${errDetail}`, "error")
+      },
+      onSettled: () => {
+        queryClient.invalidateQueries("items")
+      },
    },
-    onError: (err: ApiError) => {
-      const errDetail = err.body?.detail
-      showToast("Something went wrong.", `${errDetail}`, "error")
-    },
-    onSettled: () => {
-      queryClient.invalidateQueries("items")
-    },
-  })
+  )

  const onSubmit: SubmitHandler<ItemUpdate> = async (data) => {
    mutation.mutate(data)
--- a/frontend/src/components/UserSettings/ChangePassword.tsx
+++ b/frontend/src/components/UserSettings/ChangePassword.tsx
@@ -14,13 +14,14 @@ import { useMutation } from "react-query"

 import { type ApiError, type UpdatePassword, UsersService } from "../../client"
 import useCustomToast from "../../hooks/useCustomToast"
+import { confirmPasswordRules, passwordRules } from "../../utils"

 interface UpdatePasswordForm extends UpdatePassword {
  confirm_password: string
 }

 const ChangePassword = () => {
-  const color = useColorModeValue("inherit", "ui.white")
+  const color = useColorModeValue("inherit", "ui.light")
  const showToast = useCustomToast()
  const {
    register,
@@ -33,20 +34,20 @@ const ChangePassword = () => {
    criteriaMode: "all",
  })

-  const UpdatePassword = async (data: UpdatePassword) => {
-    await UsersService.updatePasswordMe({ requestBody: data })
-  }
-
-  const mutation = useMutation(UpdatePassword, {
-    onSuccess: () => {
-      showToast("Success!", "Password updated.", "success")
-      reset()
+  const mutation = useMutation(
+    (data: UpdatePassword) =>
+      UsersService.updatePasswordMe({ requestBody: data }),
+    {
+      onSuccess: () => {
+        showToast("Success!", "Password updated.", "success")
+        reset()
+      },
+      onError: (err: ApiError) => {
+        const errDetail = err.body?.detail
+        showToast("Something went wrong.", `${errDetail}`, "error")
+      },
    },
-    onError: (err: ApiError) => {
-      const errDetail = err.body?.detail
-      showToast("Something went wrong.", `${errDetail}`, "error")
-    },
-  })
+  )

  const onSubmit: SubmitHandler<UpdatePasswordForm> = async (data) => {
    mutation.mutate(data)
@@ -79,13 +80,7 @@ const ChangePassword = () => {
            <FormLabel htmlFor="password">Set Password</FormLabel>
            <Input
              id="password"
-              {...register("new_password", {
-                required: "Password is required",
-                minLength: {
-                  value: 8,
-                  message: "Password must be at least 8 characters",
-                },
-              })}
+              {...register("new_password", passwordRules())}
              placeholder="Password"
              type="password"
            />
@@ -97,12 +92,7 @@ const ChangePassword = () => {
            <FormLabel htmlFor="confirm_password">Confirm Password</FormLabel>
            <Input
              id="confirm_password"
-              {...register("confirm_password", {
-                required: "Please confirm your password",
-                validate: (value) =>
-                  value === getValues().new_password ||
-                  "The passwords do not match",
-              })}
+              {...register("confirm_password", confirmPasswordRules(getValues))}
              placeholder="Password"
              type="password"
            />
--- a/frontend/src/components/UserSettings/DeleteConfirmation.tsx
+++ b/frontend/src/components/UserSettings/DeleteConfirmation.tsx
@@ -31,28 +31,27 @@ const DeleteConfirmation = ({ isOpen, onClose }: DeleteProps) => {
  const currentUser = queryClient.getQueryData<UserOut>("currentUser")
  const { logout } = useAuth()

-  const deleteCurrentUser = async (id: number) => {
-    await UsersService.deleteUser({ userId: id })
-  }
-
-  const mutation = useMutation(deleteCurrentUser, {
-    onSuccess: () => {
-      showToast(
-        "Success",
-        "Your account has been successfully deleted.",
-        "success",
-      )
-      logout()
-      onClose()
+  const mutation = useMutation(
+    (id: number) => UsersService.deleteUser({ userId: id }),
+    {
+      onSuccess: () => {
+        showToast(
+          "Success",
+          "Your account has been successfully deleted.",
+          "success",
+        )
+        logout()
+        onClose()
+      },
+      onError: (err: ApiError) => {
+        const errDetail = err.body?.detail
+        showToast("Something went wrong.", `${errDetail}`, "error")
+      },
+      onSettled: () => {
+        queryClient.invalidateQueries("currentUser")
+      },
    },
-    onError: (err: ApiError) => {
-      const errDetail = err.body?.detail
-      showToast("Something went wrong.", `${errDetail}`, "error")
-    },
-    onSettled: () => {
-      queryClient.invalidateQueries("currentUser")
-    },
-  })
+  )

  const onSubmit = async () => {
    mutation.mutate(currentUser!.id)
--- a/frontend/src/components/UserSettings/UserInformation.tsx
+++ b/frontend/src/components/UserSettings/UserInformation.tsx
@@ -27,7 +27,7 @@ import { emailPattern } from "../../utils"

 const UserInformation = () => {
  const queryClient = useQueryClient()
-  const color = useColorModeValue("inherit", "ui.white")
+  const color = useColorModeValue("inherit", "ui.light")
  const showToast = useCustomToast()
  const [editMode, setEditMode] = useState(false)
  const { user: currentUser } = useAuth()
@@ -50,23 +50,22 @@ const UserInformation = () => {
    setEditMode(!editMode)
  }

-  const updateInfo = async (data: UserUpdateMe) => {
-    await UsersService.updateUserMe({ requestBody: data })
-  }
-
-  const mutation = useMutation(updateInfo, {
-    onSuccess: () => {
-      showToast("Success!", "User updated successfully.", "success")
+  const mutation = useMutation(
+    (data: UserUpdateMe) => UsersService.updateUserMe({ requestBody: data }),
+    {
+      onSuccess: () => {
+        showToast("Success!", "User updated successfully.", "success")
+      },
+      onError: (err: ApiError) => {
+        const errDetail = err.body?.detail
+        showToast("Something went wrong.", `${errDetail}`, "error")
+      },
+      onSettled: () => {
+        queryClient.invalidateQueries("users")
+        queryClient.invalidateQueries("currentUser")
+      },
    },
-    onError: (err: ApiError) => {
-      const errDetail = err.body?.detail
-      showToast("Something went wrong.", `${errDetail}`, "error")
-    },
-    onSettled: () => {
-      queryClient.invalidateQueries("users")
-      queryClient.invalidateQueries("currentUser")
-    },
-  })
+  )

  const onSubmit: SubmitHandler<UserUpdateMe> = async (data) => {
    mutation.mutate(data)
@@ -99,7 +98,7 @@ const UserInformation = () => {
              <Text
                size="md"
                py={2}
-                color={!currentUser?.full_name ? "gray.400" : "inherit"}
+                color={!currentUser?.full_name ? "ui.dim" : "inherit"}
              >
                {currentUser?.full_name || "N/A"}
              </Text>