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

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 () => {