refactor: FC -> FunctionComponent

karpolan · karpolan · commit 304a243636b0 · 2022-12-03T06:06:56.000+01:00
diff --git a/src/components/AppAlert/AppAlert.tsx b/src/components/AppAlert/AppAlert.tsx
@@ -1,3 +1,4 @@
+import { FunctionComponent } from 'react';
 import clsx from 'clsx';
 import { Theme } from '@mui/material/styles';
 import makeStyles from '@mui/styles/makeStyles';
@@ -20,7 +21,7 @@ const useStyles = makeStyles((theme: Theme) => ({
 /**
  * Application styled Alert component
  */
-const AppAlert: React.FC<MuiAlertProps> = ({
+const AppAlert: FunctionComponent<MuiAlertProps> = ({
   severity = APP_ALERT_SEVERITY,
   variant = APP_ALERT_VARIANT,
   elevation = APP_ALERT_ELEVATION,
diff --git a/src/components/AppButton/AppButton.tsx b/src/components/AppButton/AppButton.tsx
@@ -1,3 +1,4 @@
+import { FunctionComponent } from 'react';
 import clsx from 'clsx';
 import { Theme } from '@mui/material/styles';
 import makeStyles from '@mui/styles/makeStyles';
@@ -43,7 +44,7 @@ interface Props extends Omit<ButtonProps, 'color'> {
  * @param {string} [label] - text to render, alternate to .text
  * @param {string} [text] - text to render, alternate to .label
  */
-const AppButton: React.FC<Props> = ({
+const AppButton: FunctionComponent<Props> = ({
   children,
   className,
   color = 'default',
diff --git a/src/components/AppForm/AppForm.tsx b/src/components/AppForm/AppForm.tsx
@@ -1,4 +1,4 @@
-import { ReactNode, FormHTMLAttributes } from 'react';
+import { ReactNode, FormHTMLAttributes, FunctionComponent } from 'react';
 import { Box, Grid } from '@mui/material';
 import { Theme } from '@mui/material/styles';
 import makeStyles from '@mui/styles/makeStyles';
@@ -17,7 +17,7 @@ interface Props extends FormHTMLAttributes<HTMLFormElement> {
 /**
  * Application styled Form container
  */
-const AppForm: React.FC<Props> = ({ children, ...resOfProps }) => {
+const AppForm: FunctionComponent<Props> = ({ children, ...resOfProps }) => {
   const classes = useStyles();
   return (
     <form {...resOfProps}>
diff --git a/src/components/AppIcon/AppIcon.tsx b/src/components/AppIcon/AppIcon.tsx
@@ -1,3 +1,4 @@
+import { FunctionComponent } from 'react';
 import { SvgIcon } from '@mui/material';
 // SVG assets
 import { ReactComponent as LogoIcon } from './logo.svg';
@@ -53,16 +54,17 @@ const ICONS: Record<string, React.ComponentType> = {
   notifications: NotificationsIcon,
 };
 
+interface Props {
+  name?: string; // Icon's name
+  icon?: string; // Icon's name alternate prop
+}
+
 /**
  * Renders SVG icon by given Icon name
  * @param {string} [props.name] - name of the Icon to render
  * @param {string} [props.icon] - name of the Icon to render
  */
-interface Props {
-  name?: string; // Icon's name
-  icon?: string; // Icon's name alternate prop
-}
-const AppIcon: React.FC<Props> = ({ name, icon, ...restOfProps }) => {
+const AppIcon: FunctionComponent<Props> = ({ name, icon, ...restOfProps }) => {
   const iconName = (name || icon || 'default').trim().toLowerCase();
   const ComponentToRender = ICONS[iconName] || DefaultIcon;
   return <ComponentToRender {...restOfProps} />;
diff --git a/src/components/AppIconButton/AppIconButton.tsx b/src/components/AppIconButton/AppIconButton.tsx
@@ -1,3 +1,4 @@
+import { FunctionComponent } from 'react';
 import clsx from 'clsx';
 import { Theme } from '@mui/material/styles';
 import makeStyles from '@mui/styles/makeStyles';
@@ -19,10 +20,6 @@ function getValidMuiColor(color: string | undefined): PropTypes.Color | undefine
   }
 }
 
-/**
- * Renders Material UI IconButton with SVG icon by given Name
- * @param {string} [props.icon] - name of Icon to render inside the IconButton
- */
 interface Props extends Omit<IconButtonProps, 'color'> {
   color?: ColorName | 'inherit';
   icon?: string;
@@ -31,7 +28,20 @@ interface Props extends Omit<IconButtonProps, 'color'> {
   to?: string; // Link prop
   href?: string; // Link prop
 }
-const AppIconButton: React.FC<Props> = ({ color, className, children, disabled, icon, title, ...restOfProps }) => {
+
+/**
+ * Renders Material UI IconButton with SVG icon by given Name
+ * @param {string} [props.icon] - name of Icon to render inside the IconButton
+ */
+const AppIconButton: FunctionComponent<Props> = ({
+  color,
+  className,
+  children,
+  disabled,
+  icon,
+  title,
+  ...restOfProps
+}) => {
   const classes = useStyles();
   const classButton = clsx(classes[color as ColorName], className);
   const colorButton = getValidMuiColor(color);
diff --git a/src/components/SideBar/SideBar.tsx b/src/components/SideBar/SideBar.tsx
@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { FunctionComponent, useCallback } from 'react';
 import clsx from 'clsx';
 import Divider from '@mui/material/Divider';
 import Drawer, { DrawerProps } from '@mui/material/Drawer';
@@ -42,19 +42,19 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
 }));
 
+interface Props extends Pick<DrawerProps, 'anchor' | 'className' | 'open' | 'variant' | 'onClose'> {
+  items: Array<LinkToPage>;
+}
 /**
  * Renders SideBar with Menu and User details
  * Actually for Authenticated users only, rendered in "Private Layout"
  * @param {string} [prop.anchor] - 'left' or 'right'
  * @param {string} [prop.className] - optional className for <div> tag
  * @param {boolean} props.open - the Drawer is visible when true
  * @param {string} props.variant - variant of the Drawer, one of 'permanent', 'persistent', 'temporary'
- * @param {func} [props.onClose] - called when the Drawer is closing
+ * @param {function} [props.onClose] - called when the Drawer is closing
  */
-interface Props extends Pick<DrawerProps, 'anchor' | 'className' | 'open' | 'variant' | 'onClose'> {
-  items: Array<LinkToPage>;
-}
-const SideBar: React.FC<Props> = ({ anchor, className, open, variant, items, onClose, ...restOfProps }) => {
+const SideBar: FunctionComponent<Props> = ({ anchor, className, open, variant, items, onClose, ...restOfProps }) => {
   const [state, dispatch] = useAppStore();
   const classes = useStyles();
 
diff --git a/src/components/SideBar/SideBarNavigation.tsx b/src/components/SideBar/SideBarNavigation.tsx
@@ -7,6 +7,7 @@ import makeStyles from '@mui/styles/makeStyles';
 import AppIcon from '../AppIcon';
 import SideBarLink from './SideBarLink';
 import { LinkToPage } from '../../utils/type';
+import { FunctionComponent } from 'react';
 
 const useStyles = makeStyles((theme: Theme) => ({
   root: {},
@@ -35,20 +36,21 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
 }));
 
-/**
- * Renders list of Navigation Items inside SideBar
- * @param {string} [prop.className] - optional className for styling
- * @param {array} props.items - list of objects to render as navigation links
- * @param {boolean} [props.showIcons] - icons in links are visible when true
- * @param {func} [props.afterLinkClink] - optional callback called when some link was clicked
- */
 interface Props {
   className?: string;
   items: Array<LinkToPage>;
   showIcons?: boolean;
   afterLinkClick?: React.MouseEventHandler;
 }
-const SideBarNavigation: React.FC<Props> = ({
+
+/**
+ * Renders list of Navigation Items inside SideBar
+ * @param {string} [prop.className] - optional className for styling
+ * @param {array} props.items - list of objects to render as navigation links
+ * @param {boolean} [props.showIcons] - icons in links are visible when true
+ * @param {function} [props.afterLinkClink] - optional callback called when some link was clicked
+ */
+const SideBarNavigation: FunctionComponent<Props> = ({
   className,
   items,
   showIcons = false,
diff --git a/src/components/TopBar/TopBar.tsx b/src/components/TopBar/TopBar.tsx
@@ -1,3 +1,4 @@
+import { FunctionComponent } from 'react';
 import clsx from 'clsx';
 import { Theme, AppBar, Toolbar, Typography } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
@@ -26,17 +27,18 @@ const useStyles = makeStyles((theme: Theme) => ({
   buttons: {},
 }));
 
-/**
- * Renders TopBar composition
- */
 interface Props {
   className?: string;
   title?: string;
   isAuthenticated?: boolean;
   onMenu?: () => void;
   onNotifications?: () => void;
 }
-const TopBar: React.FC<Props> = ({
+
+/**
+ * Renders TopBar composition
+ */
+const TopBar: FunctionComponent<Props> = ({
   className,
   title = '',
   isAuthenticated,
diff --git a/src/components/dialogs/CommonDialog.tsx b/src/components/dialogs/CommonDialog.tsx
@@ -1,4 +1,4 @@
-import { ReactNode, useCallback } from 'react';
+import { FunctionComponent, ReactNode, useCallback } from 'react';
 import { Dialog, DialogActions, DialogContent, DialogProps } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 import createStyles from '@mui/styles/createStyles';
@@ -13,11 +13,6 @@ const useStyles = makeStyles((theme) =>
   })
 );
 
-/**
- * Shows generic "Common" dialog
- * @param {function} props.onConfirm - event for Confirm button, called as onConfirm(data)
- * @param {function} props.onClose - event for Close and Cancel buttons and the backdrop
- */
 interface Props extends DialogProps {
   data?: unknown;
   title?: string;
@@ -29,7 +24,13 @@ interface Props extends DialogProps {
   onConfirm?: (data: unknown) => void;
   onClose?: (event: {}) => void;
 }
-const CommonDialog: React.FC<Props> = ({
+
+/**
+ * Shows generic "Common" dialog
+ * @param {function} props.onConfirm - event for Confirm button, called as onConfirm(data)
+ * @param {function} props.onClose - event for Close and Cancel buttons and the backdrop
+ */
+const CommonDialog: FunctionComponent<Props> = ({
   open = false, // Don't show dialog by default
   data, // optional data passed to onConfirm callback
   title = 'Missing title...',
diff --git a/src/components/dialogs/CompositionDialog.tsx b/src/components/dialogs/CompositionDialog.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { FunctionComponent, ReactNode } from 'react';
 import { Box, Dialog, DialogActions, DialogContent, DialogProps } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 import createStyles from '@mui/styles/createStyles';
@@ -11,16 +11,17 @@ const useStyles = makeStyles((theme) =>
   })
 );
 
-/**
- * Makes composition of Content and Actions inside the Dialog.
- */
 interface Props extends DialogProps {
   title?: string;
   content?: ReactNode;
   actions?: ReactNode;
   onClose?: (event: {}) => void;
 }
-const CompositionDialog: React.FC<Props> = ({
+
+/**
+ * Makes composition of Content and Actions inside the Dialog.
+ */
+const CompositionDialog: FunctionComponent<Props> = ({
   actions,
   open = false, // Don't show dialog by default
   children = null,
diff --git a/src/components/dialogs/components/AppDialogTitle.tsx b/src/components/dialogs/components/AppDialogTitle.tsx
@@ -1,3 +1,4 @@
+import { FunctionComponent } from 'react';
 import { DialogTitle, Theme, DialogTitleProps } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 import createStyles from '@mui/styles/createStyles';
@@ -19,14 +20,15 @@ const useStyles = makeStyles((theme: Theme) =>
   })
 );
 
+interface Props extends DialogTitleProps {
+  onClose?: (event: {}) => void;
+}
+
 /**
  * Renders Material UI Dialog Title with optional (x) button to close the dialog
  * @param {function} [onClose] - when set the (x) button added to Dialog Title and event called on button click
  */
-interface Props extends DialogTitleProps {
-  onClose?: (event: {}) => void;
-}
-const AppDialogTitle: React.FC<Props> = ({ children, onClose, ...props }) => {
+const AppDialogTitle: FunctionComponent<Props> = ({ children, onClose, ...props }) => {
   const classes = useStyles();
   return (
     <DialogTitle {...props}>
diff --git a/src/store/AppReducer.ts b/src/store/AppReducer.ts
@@ -1,13 +1,13 @@
 import { localStorageSet } from '../utils/localStorage';
-import { IAppState } from './AppStore';
+import { AppStoreState } from './AppStore';
 
 /**
  * Reducer for global AppStore using "Redux styled" actions
  * @param {object} state - current/default state
  * @param {string} action.type - unique name of the action
  * @param {*} [action.payload] - optional data object or the function to get data object
  */
-const AppReducer: React.Reducer<IAppState, any> = (state, action) => {
+const AppReducer: React.Reducer<AppStoreState, any> = (state, action) => {
   // console.log('AppReducer() - action:', action);
   switch (action.type || action.action) {
     case 'CURRENT_USER':
diff --git a/src/store/AppStore.tsx b/src/store/AppStore.tsx
@@ -1,47 +1,55 @@
-import React, { createContext, useReducer, useContext, FunctionComponent, PropsWithChildren } from 'react';
+import {
+  createContext,
+  useReducer,
+  useContext,
+  FunctionComponent,
+  PropsWithChildren,
+  Dispatch,
+  ComponentType,
+} from 'react';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import AppReducer from './AppReducer';
 import { localStorageGet } from '../utils/localStorage';
 
 /**
  * AppState structure and initial values
  */
-export interface IAppState {
+export interface AppStoreState {
   darkMode: boolean;
   isAuthenticated: boolean;
   currentUser?: object | undefined;
 }
-const initialAppState: IAppState = {
+const INITIAL_APP_STATE: AppStoreState = {
   darkMode: false, // Overridden by useMediaQuery('(prefers-color-scheme: dark)') in AppStore
   isAuthenticated: false, // Overridden in AppStore by checking auth token
 };
 
 /**
  * Instance of React Context for global AppStore
  */
-type IAppContext = [IAppState, React.Dispatch<any>];
-const AppContext = createContext<IAppContext>([initialAppState, () => null]);
+type AppContextReturningType = [AppStoreState, Dispatch<any>];
+const AppContext = createContext<AppContextReturningType>([INITIAL_APP_STATE, () => null]);
 
 /**
  * Main global Store as HOC with React Context API
  *
- * import {AppStore} from './store'
+ * import {AppStoreProvider} from './store'
  * ...
- * <AppStore>
+ * <AppStoreProvider>
  *  <App/>
- * </AppStore>
+ * </AppStoreProvider>
  */
 const AppStoreProvider: FunctionComponent<PropsWithChildren<{}>> = ({ children }) => {
   const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
   const previousDarkMode = Boolean(localStorageGet('darkMode'));
   // const tokenExists = Boolean(loadToken());
 
-  const initialState: IAppState = {
-    ...initialAppState,
+  const initialState: AppStoreState = {
+    ...INITIAL_APP_STATE,
     darkMode: previousDarkMode || prefersDarkMode,
     // isAuthenticated: tokenExists,
   };
-  const value: IAppContext = useReducer(AppReducer, initialState);
+  const value: AppContextReturningType = useReducer(AppReducer, initialState);
 
   return <AppContext.Provider value={value}>{children}</AppContext.Provider>;
 };
@@ -53,7 +61,7 @@ const AppStoreProvider: FunctionComponent<PropsWithChildren<{}>> = ({ children }
  * ...
  * const [state, dispatch] = useAppStore();
  */
-const useAppStore = (): IAppContext => useContext(AppContext);
+const useAppStore = (): AppContextReturningType => useContext(AppContext);
 
 /**
  * HOC to inject the ApStore to class component, also works for functional components
@@ -68,7 +76,7 @@ interface WithAppStoreProps {
   store: object;
 }
 const withAppStore =
-  (Component: React.ComponentType<WithAppStoreProps>): React.FC =>
+  (Component: ComponentType<WithAppStoreProps>): FunctionComponent =>
   (props) => {
     return <Component {...props} store={useAppStore()} />;
   };
