refactor: tweaks in frontend

Includes pagination in admin, improve skeleton in admin, format and
improvements in UI.

Author: d4vidsha

frontend/src/components/Admin/AddUser.tsx

@@ -20,7 +20,7 @@ import { type SubmitHandler, useForm } from "react-hook-form"
 import { type UserCreate, UsersService } from "../../client"
 import type { ApiError } from "../../client/core/ApiError"
 import useCustomToast from "../../hooks/useCustomToast"
-import { emailPattern } from "../../utils"
+import { emailPattern, handleError } from "../../utils"
 
 interface AddUserProps {
   isOpen: boolean
@@ -62,8 +62,7 @@ const AddUser = ({ isOpen, onClose }: AddUserProps) => {
       onClose()
     },
     onError: (err: ApiError) => {
-      const errDetail = (err.body as any)?.detail
-      showToast("Something went wrong.", `${errDetail}`, "error")
+      handleError(err, showToast)
     },
     onSettled: () => {
       queryClient.invalidateQueries({ queryKey: ["users"] })

frontend/src/components/Admin/EditUser.tsx

@@ -24,7 +24,7 @@ import {
   UsersService,
 } from "../../client"
 import useCustomToast from "../../hooks/useCustomToast"
-import { emailPattern } from "../../utils"
+import { emailPattern, handleError } from "../../utils"
 
 interface EditUserProps {
   user: UserPublic
@@ -60,8 +60,7 @@ const EditUser = ({ user, isOpen, onClose }: EditUserProps) => {
       onClose()
     },
     onError: (err: ApiError) => {
-      const errDetail = (err.body as any)?.detail
-      showToast("Something went wrong.", `${errDetail}`, "error")
+      handleError(err, showToast)
     },
     onSettled: () => {
       queryClient.invalidateQueries({ queryKey: ["users"] })

frontend/src/components/Items/AddItem.tsx

@@ -17,6 +17,7 @@ import { type SubmitHandler, useForm } from "react-hook-form"
 
 import { type ApiError, type ItemCreate, ItemsService } from "../../client"
 import useCustomToast from "../../hooks/useCustomToast"
+import { handleError } from "../../utils"
 
 interface AddItemProps {
   isOpen: boolean
@@ -49,8 +50,7 @@ const AddItem = ({ isOpen, onClose }: AddItemProps) => {
       onClose()
     },
     onError: (err: ApiError) => {
-      const errDetail = (err.body as any)?.detail
-      showToast("Something went wrong.", `${errDetail}`, "error")
+      handleError(err, showToast)
     },
     onSettled: () => {
       queryClient.invalidateQueries({ queryKey: ["items"] })

frontend/src/components/Items/EditItem.tsx

@@ -22,6 +22,7 @@ import {
   ItemsService,
 } from "../../client"
 import useCustomToast from "../../hooks/useCustomToast"
+import { handleError } from "../../utils"
 
 interface EditItemProps {
   item: ItemPublic
@@ -51,8 +52,7 @@ const EditItem = ({ item, isOpen, onClose }: EditItemProps) => {
       onClose()
     },
     onError: (err: ApiError) => {
-      const errDetail = (err.body as any)?.detail
-      showToast("Something went wrong.", `${errDetail}`, "error")
+      handleError(err, showToast)
     },
     onSettled: () => {
       queryClient.invalidateQueries({ queryKey: ["items"] })

frontend/src/components/UserSettings/ChangePassword.tsx

@@ -14,7 +14,7 @@ import { type SubmitHandler, useForm } from "react-hook-form"
 
 import { type ApiError, type UpdatePassword, UsersService } from "../../client"
 import useCustomToast from "../../hooks/useCustomToast"
-import { confirmPasswordRules, passwordRules } from "../../utils"
+import { confirmPasswordRules, handleError, passwordRules } from "../../utils"
 
 interface UpdatePasswordForm extends UpdatePassword {
   confirm_password: string
@@ -42,8 +42,7 @@ const ChangePassword = () => {
       reset()
     },
     onError: (err: ApiError) => {
-      const errDetail = (err.body as any)?.detail
-      showToast("Something went wrong.", `${errDetail}`, "error")
+      handleError(err, showToast)
     },
   })
 

frontend/src/components/UserSettings/DeleteConfirmation.tsx

@@ -14,6 +14,7 @@ import { useForm } from "react-hook-form"
 import { type ApiError, UsersService } from "../../client"
 import useAuth from "../../hooks/useAuth"
 import useCustomToast from "../../hooks/useCustomToast"
+import { handleError } from "../../utils"
 
 interface DeleteProps {
   isOpen: boolean
@@ -42,8 +43,7 @@ const DeleteConfirmation = ({ isOpen, onClose }: DeleteProps) => {
       onClose()
     },
     onError: (err: ApiError) => {
-      const errDetail = (err.body as any)?.detail
-      showToast("Something went wrong.", `${errDetail}`, "error")
+      handleError(err, showToast)
     },
     onSettled: () => {
       queryClient.invalidateQueries({ queryKey: ["currentUser"] })

frontend/src/components/UserSettings/UserInformation.tsx

@@ -23,7 +23,7 @@ import {
 } from "../../client"
 import useAuth from "../../hooks/useAuth"
 import useCustomToast from "../../hooks/useCustomToast"
-import { emailPattern } from "../../utils"
+import { emailPattern, handleError } from "../../utils"
 
 const UserInformation = () => {
   const queryClient = useQueryClient()
@@ -57,13 +57,10 @@ const UserInformation = () => {
       showToast("Success!", "User updated successfully.", "success")
     },
     onError: (err: ApiError) => {
-      const errDetail = (err.body as any)?.detail
-      showToast("Something went wrong.", `${errDetail}`, "error")
+      handleError(err, showToast)
     },
     onSettled: () => {
-      // TODO: can we do just one call now?
-      queryClient.invalidateQueries({ queryKey: ["users"] })
-      queryClient.invalidateQueries({ queryKey: ["currentUser"] })
+      queryClient.invalidateQueries()
     },
   })
 
@@ -104,6 +101,8 @@ const UserInformation = () => {
                 size="md"
                 py={2}
                 color={!currentUser?.full_name ? "ui.dim" : "inherit"}
+                isTruncated
+                maxWidth="250px"
               >
                 {currentUser?.full_name || "N/A"}
               </Text>
@@ -125,7 +124,7 @@ const UserInformation = () => {
                 w="auto"
               />
             ) : (
-              <Text size="md" py={2}>
+              <Text size="md" py={2} isTruncated maxWidth="250px">
                 {currentUser?.email}
               </Text>
             )}

frontend/src/hooks/useAuth.ts

@@ -34,7 +34,11 @@ const useAuth = () => {
 
     onSuccess: () => {
       navigate({ to: "/login" })
-      showToast("Account created.", "Your account has been created successfully.", "success")
+      showToast(
+        "Account created.",
+        "Your account has been created successfully.",
+        "success",
+      )
     },
     onError: (err: ApiError) => {
       let errDetail = (err.body as any)?.detail
@@ -43,7 +47,7 @@ const useAuth = () => {
         errDetail = err.message
       }
 
-      showToast("Something went wrong.", `${errDetail}`, "error")
+      showToast("Something went wrong.", errDetail, "error")
     },
     onSettled: () => {
       queryClient.invalidateQueries({ queryKey: ["users"] })