♻️ Refactor and remove React.FC (#1139)

frontend/src/components/Admin/AddUser.tsx

@@ -14,11 +14,10 @@ import {
   ModalHeader,
   ModalOverlay,
 } from "@chakra-ui/react"
-import type React from "react"
+import { useForm, type SubmitHandler } from "react-hook-form"
-import { type SubmitHandler, useForm } from "react-hook-form"
 import { useMutation, useQueryClient } from "react-query"
 
-import { type UserCreate, UsersService } from "../../client"
+import { UsersService, type UserCreate } from "../../client"
 import type { ApiError } from "../../client/core/ApiError"
 import useCustomToast from "../../hooks/useCustomToast"
 import { emailPattern } from "../../utils"
@@ -32,7 +31,7 @@ interface UserCreateForm extends UserCreate {
   confirm_password: string
 }
 
-const AddUser: React.FC<AddUserProps> = ({ isOpen, onClose }) => {
+const AddUser = ({ isOpen, onClose }: AddUserProps) => {
   const queryClient = useQueryClient()
   const showToast = useCustomToast()
   const {

frontend/src/components/Admin/EditUser.tsx

@@ -14,15 +14,14 @@ import {
   ModalHeader,
   ModalOverlay,
 } from "@chakra-ui/react"
-import type React from "react"
+import { useForm, type SubmitHandler } from "react-hook-form"
-import { type SubmitHandler, useForm } from "react-hook-form"
 import { useMutation, useQueryClient } from "react-query"
 
 import {
+  UsersService,
   type ApiError,
   type UserOut,
   type UserUpdate,
-  UsersService,
 } from "../../client"
 import useCustomToast from "../../hooks/useCustomToast"
 import { emailPattern } from "../../utils"
@@ -37,7 +36,7 @@ interface UserUpdateForm extends UserUpdate {
   confirm_password: string
 }
 
-const EditUser: React.FC<EditUserProps> = ({ user, isOpen, onClose }) => {
+const EditUser = ({ user, isOpen, onClose }: EditUserProps) => {
   const queryClient = useQueryClient()
   const showToast = useCustomToast()
 

frontend/src/components/Common/ActionsMenu.tsx

@@ -6,7 +6,6 @@ import {
   MenuList,
   useDisclosure,
 } from "@chakra-ui/react"
-import type React from "react"
 import { BsThreeDotsVertical } from "react-icons/bs"
 import { FiEdit, FiTrash } from "react-icons/fi"
 
@@ -21,7 +20,7 @@ interface ActionsMenuProps {
   disabled?: boolean
 }
 
-const ActionsMenu: React.FC<ActionsMenuProps> = ({ type, value, disabled }) => {
+const ActionsMenu = ({ type, value, disabled }: ActionsMenuProps) => {
   const editUserModal = useDisclosure()
   const deleteModal = useDisclosure()
 

frontend/src/components/Common/DeleteAlert.tsx

@@ -21,7 +21,7 @@ interface DeleteProps {
   onClose: () => void
 }
 
-const Delete: React.FC<DeleteProps> = ({ type, id, isOpen, onClose }) => {
+const Delete = ({ type, id, isOpen, onClose }: DeleteProps) => {
   const queryClient = useQueryClient()
   const showToast = useCustomToast()
   const cancelRef = React.useRef<HTMLButtonElement | null>(null)

frontend/src/components/Common/Navbar.tsx

@@ -1,5 +1,4 @@
 import { Button, Flex, Icon, useDisclosure } from "@chakra-ui/react"
-import type React from "react"
 import { FaPlus } from "react-icons/fa"
 
 import AddUser from "../Admin/AddUser"
@@ -9,7 +8,7 @@ interface NavbarProps {
   type: string
 }
 
-const Navbar: React.FC<NavbarProps> = ({ type }) => {
+const Navbar = ({ type }: NavbarProps) => {
   const addUserModal = useDisclosure()
   const addItemModal = useDisclosure()
 

frontend/src/components/Common/NotFound.tsx

@@ -1,8 +1,7 @@
 import { Button, Container, Text } from "@chakra-ui/react"
 import { Link } from "@tanstack/react-router"
-import type React from "react"
 
-const NotFound: React.FC = () => {
+const NotFound = () => {
   return (
     <>
       <Container

frontend/src/components/Common/Sidebar.tsx

@@ -12,7 +12,6 @@ import {
   useColorModeValue,
   useDisclosure,
 } from "@chakra-ui/react"
-import type React from "react"
 import { FiLogOut, FiMenu } from "react-icons/fi"
 import { useQueryClient } from "react-query"
 
@@ -21,7 +20,7 @@ import type { UserOut } from "../../client"
 import useAuth from "../../hooks/useAuth"
 import SidebarItems from "./SidebarItems"
 
-const Sidebar: React.FC = () => {
+const Sidebar = () => {
   const queryClient = useQueryClient()
   const bgColor = useColorModeValue("ui.white", "ui.dark")
   const textColor = useColorModeValue("ui.dark", "ui.white")

frontend/src/components/Common/SidebarItems.tsx

@@ -1,6 +1,5 @@
 import { Box, Flex, Icon, Text, useColorModeValue } from "@chakra-ui/react"
 import { Link } from "@tanstack/react-router"
-import type React from "react"
 import { FiBriefcase, FiHome, FiSettings, FiUsers } from "react-icons/fi"
 import { useQueryClient } from "react-query"
 
@@ -16,7 +15,7 @@ interface SidebarItemsProps {
   onClose?: () => void
 }
 
-const SidebarItems: React.FC<SidebarItemsProps> = ({ onClose }) => {
+const SidebarItems = ({ onClose }: SidebarItemsProps) => {
   const queryClient = useQueryClient()
   const textColor = useColorModeValue("ui.main", "ui.white")
   const bgActive = useColorModeValue("#E2E8F0", "#4A5568")

frontend/src/components/Common/UserMenu.tsx

@@ -6,14 +6,13 @@ import {
   MenuItem,
   MenuList,
 } from "@chakra-ui/react"
-import type React from "react"
 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: React.FC = () => {
+const UserMenu = () => {
   const { logout } = useAuth()
 
   const handleLogout = async () => {

frontend/src/components/Items/AddItem.tsx

@@ -12,11 +12,10 @@ import {
   ModalHeader,
   ModalOverlay,
 } from "@chakra-ui/react"
-import type React from "react"
+import { useForm, type SubmitHandler } from "react-hook-form"
-import { type SubmitHandler, useForm } from "react-hook-form"
 import { useMutation, useQueryClient } from "react-query"
 
-import { type ApiError, type ItemCreate, ItemsService } from "../../client"
+import { ItemsService, type ApiError, type ItemCreate } from "../../client"
 import useCustomToast from "../../hooks/useCustomToast"
 
 interface AddItemProps {
@@ -24,7 +23,7 @@ interface AddItemProps {
   onClose: () => void
 }
 
-const AddItem: React.FC<AddItemProps> = ({ isOpen, onClose }) => {
+const AddItem = ({ isOpen, onClose }: AddItemProps) => {
   const queryClient = useQueryClient()
   const showToast = useCustomToast()
   const {

frontend/src/components/Items/EditItem.tsx

@@ -12,15 +12,14 @@ import {
   ModalHeader,
   ModalOverlay,
 } from "@chakra-ui/react"
-import type React from "react"
+import { useForm, type SubmitHandler } from "react-hook-form"
-import { type SubmitHandler, useForm } from "react-hook-form"
 
 import { useMutation, useQueryClient } from "react-query"
 import {
+  ItemsService,
   type ApiError,
   type ItemOut,
   type ItemUpdate,
-  ItemsService,
 } from "../../client"
 import useCustomToast from "../../hooks/useCustomToast"
 
@@ -30,7 +29,7 @@ interface EditItemProps {
   onClose: () => void
 }
 
-const EditItem: React.FC<EditItemProps> = ({ item, isOpen, onClose }) => {
+const EditItem = ({ item, isOpen, onClose }: EditItemProps) => {
   const queryClient = useQueryClient()
   const showToast = useCustomToast()
   const {

frontend/src/components/UserSettings/Appearance.tsx

@@ -7,9 +7,8 @@ import {
   Stack,
   useColorMode,
 } from "@chakra-ui/react"
-import type React from "react"
 
-const Appearance: React.FC = () => {
+const Appearance = () => {
   const { colorMode, toggleColorMode } = useColorMode()
 
   return (

frontend/src/components/UserSettings/ChangePassword.tsx

@@ -9,18 +9,17 @@ import {
   Input,
   useColorModeValue,
 } from "@chakra-ui/react"
-import type React from "react"
+import { useForm, type SubmitHandler } from "react-hook-form"
-import { type SubmitHandler, useForm } from "react-hook-form"
 import { useMutation } from "react-query"
 
-import { type ApiError, type UpdatePassword, UsersService } from "../../client"
+import { UsersService, type ApiError, type UpdatePassword } from "../../client"
 import useCustomToast from "../../hooks/useCustomToast"
 
 interface UpdatePasswordForm extends UpdatePassword {
   confirm_password: string
 }
 
-const ChangePassword: React.FC = () => {
+const ChangePassword = () => {
   const color = useColorModeValue("inherit", "ui.white")
   const showToast = useCustomToast()
   const {

frontend/src/components/UserSettings/DeleteAccount.tsx

@@ -5,11 +5,10 @@ import {
   Text,
   useDisclosure,
 } from "@chakra-ui/react"
-import type React from "react"
 
 import DeleteConfirmation from "./DeleteConfirmation"
 
-const DeleteAccount: React.FC = () => {
+const DeleteAccount = () => {
   const confirmationModal = useDisclosure()
 
   return (

frontend/src/components/UserSettings/DeleteConfirmation.tsx

@@ -11,7 +11,7 @@ import React from "react"
 import { useForm } from "react-hook-form"
 import { useMutation, useQueryClient } from "react-query"
 
-import { type ApiError, type UserOut, UsersService } from "../../client"
+import { UsersService, type ApiError, type UserOut } from "../../client"
 import useAuth from "../../hooks/useAuth"
 import useCustomToast from "../../hooks/useCustomToast"
 
@@ -20,7 +20,7 @@ interface DeleteProps {
   onClose: () => void
 }
 
-const DeleteConfirmation: React.FC<DeleteProps> = ({ isOpen, onClose }) => {
+const DeleteConfirmation = ({ isOpen, onClose }: DeleteProps) => {
   const queryClient = useQueryClient()
   const showToast = useCustomToast()
   const cancelRef = React.useRef<HTMLButtonElement | null>(null)

frontend/src/components/UserSettings/UserInformation.tsx

@@ -11,22 +11,21 @@ import {
   Text,
   useColorModeValue,
 } from "@chakra-ui/react"
-import type React from "react"
 import { useState } from "react"
-import { type SubmitHandler, useForm } from "react-hook-form"
+import { useForm, type SubmitHandler } from "react-hook-form"
 import { useMutation, useQueryClient } from "react-query"
 
 import {
+  UsersService,
   type ApiError,
   type UserOut,
   type UserUpdateMe,
-  UsersService,
 } from "../../client"
 import useAuth from "../../hooks/useAuth"
 import useCustomToast from "../../hooks/useCustomToast"
 import { emailPattern } from "../../utils"
 
-const UserInformation: React.FC = () => {
+const UserInformation = () => {
   const queryClient = useQueryClient()
   const color = useColorModeValue("inherit", "ui.white")
   const showToast = useCustomToast()

frontend/src/hooks/useAuth.ts

@@ -2,10 +2,10 @@ import { useNavigate } from "@tanstack/react-router"
 import { useQuery } from "react-query"
 
 import {
-  type Body_login_login_access_token as AccessToken,
   LoginService,
-  type UserOut,
   UsersService,
+  type Body_login_login_access_token as AccessToken,
+  type UserOut,
 } from "../client"
 
 const isLoggedIn = () => {