refactor: Removed all React.FC, allow typescript to infer return types

Keith-Web3 · Jul 25, 2023 · 09b9f1b · 09b9f1b
1 parent f61753f
commit 09b9f1b
Show file tree

Hide file tree

Showing 12 changed files with 62 additions and 37 deletions.
diff --git a/src/components/pages/Homepage.tsx b/src/components/pages/Homepage.tsx
@@ -22,7 +22,6 @@ const Homepage: React.FC = function () {
       <NavBar
         isNavOpened={isNavOpened}
         setIsSideBarHidden={setIsSideBarHidden}
-        key={nanoid()}
       />
       <Body setIsSideBarHidden={setIsSideBarHidden} />
     </div>

diff --git a/src/components/shared/Board.tsx b/src/components/shared/Board.tsx
@@ -1,11 +1,10 @@
-import React from 'react'
 import { motion } from 'framer-motion'
 import { Droppable, Draggable } from 'react-beautiful-dnd'
 
 import '../../sass/shared/board.scss'
 import useStore from '../store/store'
 
-const Board: React.FC<{
+interface BoardProps {
   name: string
   colorTag: string
   id: number
@@ -15,8 +14,11 @@ const Board: React.FC<{
     description: string
     subtasks: { task: string; completed: boolean }[]
   }[]
-}> = function ({ name, tasks, id, colorTag }) {
+}
+
+const Board = function ({ name, tasks, id, colorTag }: BoardProps) {
   const setModalType = useStore(state => state.setModalType)
+
   return (
     <Droppable droppableId={`${id}`}>
       {provided => (

diff --git a/src/components/shared/Body.tsx b/src/components/shared/Body.tsx
@@ -12,9 +12,11 @@ import eye from '../../assets/icon-show-sidebar.svg'
 import Board from './Board'
 import Modal from './Modal'
 
-const Body: React.FC<{
+const Body = function ({
+  setIsSideBarHidden,
+}: {
   setIsSideBarHidden: React.Dispatch<React.SetStateAction<boolean>>
-}> = function ({ setIsSideBarHidden }) {
+}) {
   const currentBoard = useStore(state => state.currentBoard())
   const reorderBoard = useStore(state => state.reorderBoard)
   const [modalType, setModalType] = useStore(state => [

diff --git a/src/components/shared/Delete.tsx b/src/components/shared/Delete.tsx
@@ -1,10 +1,8 @@
-import React from 'react'
-
 import useStore from '../store/store'
 import Button from '../ui/Button'
 import '../../sass/shared/delete.scss'
 
-const Delete: React.FC<{ isBoard: boolean }> = function ({ isBoard }) {
+const Delete = function ({ isBoard }: { isBoard: boolean }) {
   const [
     modalType,
     setModalType,

diff --git a/src/components/shared/Header.tsx b/src/components/shared/Header.tsx
@@ -9,10 +9,12 @@ import '../../sass/shared/header.scss'
 import Button from '../ui/Button'
 import useStore from '../store/store'
 
-const Header: React.FC<{
+interface HeaderProps {
   isNavOpened: boolean
   setIsNavOpened: React.Dispatch<React.SetStateAction<boolean>>
-}> = function ({ isNavOpened, setIsNavOpened }) {
+}
+
+const Header = function ({ isNavOpened, setIsNavOpened }: HeaderProps) {
   const variants = {
     initial: {
       rotate: 0,

diff --git a/src/components/shared/Modal.tsx b/src/components/shared/Modal.tsx
@@ -1,5 +1,4 @@
-import React from 'react'
-import { AnimatePresence, motion } from 'framer-motion'
+import { motion } from 'framer-motion'
 import { nanoid } from 'nanoid'
 
 import ModifyTask from './ModifyTask'
@@ -8,11 +7,12 @@ import useStore from '../store/store'
 import ModifyBoards from './ModifyBoards'
 import Delete from './Delete'
 
-const Modal: React.FC = function () {
+const Modal = function () {
   const [modalType, setModalType] = useStore(state => [
     state.modalType,
     state.setModalType,
   ])
+
   return (
     <>
       {modalType.modalType === 'task-info' && (

diff --git a/src/components/shared/ModifyBoards.tsx b/src/components/shared/ModifyBoards.tsx
@@ -1,17 +1,23 @@
-import React, { useEffect, useId, useRef, useState } from 'react'
-import { nanoid } from 'nanoid'
+import { useEffect, useId, useRef, useState } from 'react'
 import { motion, AnimatePresence } from 'framer-motion'
 
 import cancelImg from '../../assets/icon-cross.svg'
 import '../../sass/shared/modify-boards.scss'
 import useStore from '../store/store'
 
-const ModifyBoards: React.FC<{
+interface ModifyBoardsProps {
   title: string
   button: string
   editBoard?: boolean
   newColumn?: boolean
-}> = function ({ title, button, editBoard = false, newColumn = false }) {
+}
+
+const ModifyBoards = function ({
+  title,
+  button,
+  editBoard = false,
+  newColumn = false,
+}: ModifyBoardsProps) {
   const id = useId()
 
   const currentBoard = useStore(state => state.currentBoard)

diff --git a/src/components/shared/ModifyTask.tsx b/src/components/shared/ModifyTask.tsx
@@ -13,6 +13,13 @@ type Task = {
   subtasks: [string, string, boolean][]
   column: number
 }
+
+interface ModifyTaskProps {
+  title: string
+  button: string
+  editTask?: boolean
+}
+
 const modifyTaskReducer: (
   state: Task,
   action:
@@ -66,11 +73,11 @@ const modifyTaskReducer: (
     }
   }
 }
-const ModifyTask: React.FC<{
-  title: string
-  button: string
-  editTask?: boolean
-}> = function ({ title, button, editTask = false }) {
+const ModifyTask = function ({
+  title,
+  button,
+  editTask = false,
+}: ModifyTaskProps) {
   const id = useId()
   const [isStatusOpen, setIsStatusOpen] = useState(false)
 

diff --git a/src/components/shared/NavBar.tsx b/src/components/shared/NavBar.tsx
@@ -11,10 +11,12 @@ import lightTheme from '../../assets/icon-light-theme.svg'
 import eye from '../../assets/icon-hide-sidebar.svg'
 import '../../sass/shared/navbar.scss'
 
-const NavBar: React.FC<{
+interface NavBarProps {
   isNavOpened: boolean
   setIsSideBarHidden: React.Dispatch<React.SetStateAction<boolean>>
-}> = function ({ isNavOpened, setIsSideBarHidden }) {
+}
+
+const NavBar = function ({ isNavOpened, setIsSideBarHidden }: NavBarProps) {
   const boards = useStore(state => state.boards)
   const currentBoard = useStore(state => state.currentBoard())
   const setCurrentBoard = useStore(state => state.setCurrentBoard)

diff --git a/src/components/shared/ViewTask.tsx b/src/components/shared/ViewTask.tsx
@@ -7,7 +7,7 @@ import '../../sass/shared/viewtask.scss'
 import chevron from '../../assets/icon-chevron-down.svg'
 import useStore from '../store/store'
 
-const SubTask: React.FC<{
+interface SubTaskProps {
   idx: number
   subtasks: { task: string; completed: boolean }[]
   setSubtaskM: React.Dispatch<
@@ -18,11 +18,18 @@ const SubTask: React.FC<{
       }[]
     >
   >
-}> = function ({ idx, subtasks, setSubtaskM }) {
+}
+
+interface ViewTaskProps {
+  name: string
+  description?: string
+  subtasks: { task: string; completed: boolean }[]
+}
+
+const SubTask = function ({ idx, subtasks, setSubtaskM }: SubTaskProps) {
   const id = useId()
   const theme = useStore(state => state.theme())
   const tickVariants = {
-    // pressed: (isChecked: boolean) => ({ pathLength: isChecked ? 0.85 : 0.2 }),
     checked: { pathLength: 1 },
     unchecked: { pathLength: 0 },
   }
@@ -70,11 +77,7 @@ const SubTask: React.FC<{
     </label>
   )
 }
-const ViewTask: React.FC<{
-  name: string
-  description?: string
-  subtasks: { task: string; completed: boolean }[]
-}> = function ({ name, description, subtasks }) {
+const ViewTask = function ({ name, description, subtasks }: ViewTaskProps) {
   const currentBoard = useStore(state => state.currentBoard())
   const setModalType = useStore(state => state.setModalType)
   const modalType = useStore(state => state.modalType)

diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
@@ -1,14 +1,19 @@
 import React, { ReactNode } from 'react'
-import { motion } from 'framer-motion'
 
 import '../../sass/ui/button.scss'
 
-const Button: React.FC<{
+interface ButtonProps {
   children: ReactNode
   className: string
   onClick?: React.MouseEventHandler<HTMLButtonElement>
   disabled?: boolean
-}> = function ({ children, className, onClick, disabled = false }) {
+}
+const Button = function ({
+  children,
+  className,
+  onClick,
+  disabled = false,
+}: ButtonProps) {
   return (
     <button
       disabled={disabled}

diff --git a/src/main.tsx b/src/main.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import ReactDOM from 'react-dom/client'
 
 import './sass/index.scss'