remove unused react imports

client/src/components/copy/Copy.tsx

@@ -1,5 +1,6 @@
 import { IconButton, makeStyles } from '@material-ui/core';
-import React, { useState } from 'react';
+import { useState } from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { copyToCommand } from '../../utils/Common';
 import CustomToolTip from '../customToolTip/CustomToolTip';

client/src/components/customCard/CustomCard.tsx

@@ -10,7 +10,8 @@ import {
   Theme,
   Tooltip,
 } from '@material-ui/core';
-import React, { FC } from 'react';
+import { FC } from 'react';
+import * as React from 'react';
 import icons from '../icons/Icons';
 import { ICustomCardProps, IMenu } from './Types';
 

client/src/components/customDialog/CustomDialog.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 import {
   DialogActions,
   DialogContent,

client/src/components/customSelector/CustomGroupedSelect.tsx

@@ -7,7 +7,7 @@ import {
   Select,
   Theme,
 } from '@material-ui/core';
-import React, { FC } from 'react';
+import { FC } from 'react';
 import { GroupOption, ICustomGroupSelect } from './Types';
 
 const getStyles = makeStyles((theme: Theme) => ({

client/src/components/customSnackBar/CustomSnackBar.tsx

@@ -1,4 +1,4 @@
-import React, { FC, SyntheticEvent } from 'react';
+import { forwardRef, FC, SyntheticEvent } from 'react';
 import { CustomSnackBarType } from './Types';
 import MuiAlert from '@material-ui/lab/Alert';
 import { Snackbar, makeStyles, Theme, createStyles } from '@material-ui/core';
@@ -7,7 +7,7 @@ import { TransitionProps } from '@material-ui/core/transitions/transition';
 
 // if we need to use slide component
 // snackbar content must use forwardRef to wrapper it
-const Alert = React.forwardRef((props: { [x: string]: any }, ref) => {
+const Alert = forwardRef((props: { [x: string]: any }, ref) => {
   return <MuiAlert ref={ref} elevation={6} variant="filled" {...props} />;
 });
 

client/src/components/customTabList/CustomTabList.tsx

@@ -1,5 +1,5 @@
 import { Box, makeStyles, Tab, Tabs, Theme } from '@material-ui/core';
-import React, { FC, useState } from 'react';
+import { FC, useState } from 'react';
 import { ITabListProps, ITabPanel } from './Types';
 
 const useStyles = makeStyles((theme: Theme) => ({

client/src/components/filter/Filter.tsx

@@ -1,4 +1,5 @@
-import React, { FC, useState, useEffect } from 'react';
+import { FC, useState, useEffect } from 'react';
+import * as React from 'react';
 import CustomButton from '../customButton/CustomButton';
 import ICONS from '../icons/Icons';
 import {

client/src/components/grid/ActionBar.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 import { IconButton, makeStyles, Theme, createStyles } from '@material-ui/core';
 import Icons from '../icons/Icons';
 import { ActionBarType } from './Types';

client/src/components/grid/Table.tsx

@@ -1,4 +1,5 @@
-import React, { FC, useEffect, useRef, useState } from 'react';
+import { FC, useEffect, useRef, useState } from 'react';
+import * as React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';

client/src/components/grid/TableHead.tsx

@@ -1,4 +1,5 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
+import * as React from 'react';
 import { TableHeadType } from './Types';
 import {
   TableHead,

client/src/components/grid/TablePaginationActions.tsx

@@ -6,7 +6,7 @@ import {
   Typography,
 } from '@material-ui/core';
 import { KeyboardArrowLeft, KeyboardArrowRight } from '@material-ui/icons';
-import React from 'react';
+import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { TablePaginationActionsProps } from './Types';
 

client/src/components/grid/TableSwitch.tsx

@@ -1,5 +1,5 @@
 import { makeStyles, Theme, createStyles } from '@material-ui/core';
-import React, { FC, useState } from 'react';
+import { FC, useState } from 'react';
 import Icons from '../icons/Icons';
 import { TableSwitchType } from './Types';
 

client/src/components/grid/ToolBar.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useMemo } from 'react';
+import { FC, useMemo } from 'react';
 import {
   Grid,
   Typography,

client/src/components/grid/index.tsx

@@ -1,4 +1,5 @@
-import React, { FC, MouseEvent } from 'react';
+import { FC, MouseEvent } from 'react';
+import * as React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
 import Breadcrumbs from '@material-ui/core/Breadcrumbs';

client/src/components/icons/Icons.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { IconsType } from './Types';
 import SearchIcon from '@material-ui/icons/Search';
 import AddIcon from '@material-ui/icons/Add';

client/src/components/layout/GlobalEffect.tsx

@@ -1,4 +1,5 @@
-import React, { useContext } from 'react';
+import { useContext } from 'react';
+import * as React from 'react';
 import axiosInstance from '../../http/Axios';
 import { rootContext } from '../../context/Root';
 import { CODE_STATUS } from '../../consts/Http';

client/src/components/layout/GlobalToolbar.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 import {
   makeStyles,
   Theme,

client/src/components/layout/Header.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 import { makeStyles, Theme, createStyles } from '@material-ui/core';
 import { HeaderType } from './Types';
 // import { useTranslation } from 'react-i18next';

client/src/components/layout/UserContainer.tsx

@@ -1,5 +1,5 @@
 import { makeStyles, Theme } from '@material-ui/core';
-import React, { ReactElement } from 'react';
+import { ReactElement } from 'react';
 import backgroundPath from '../../assets/imgs/background.png';
 
 const getContainerStyles = makeStyles((theme: Theme) => ({

client/src/components/menu/NavMenu.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect } from 'react';
+import { useState, FC, useEffect } from 'react';
 import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
@@ -96,8 +96,8 @@ const useStyles = makeStyles((theme: Theme) =>
 const NavMenu: FC<NavMenuType> = props => {
   const { width, data, defaultActive = '', defaultOpen = {} } = props;
   const classes = useStyles({ width });
-  const [open, setOpen] = React.useState<{ [x: string]: boolean }>(defaultOpen);
-  const [active, setActive] = React.useState<string>(defaultActive);
+  const [open, setOpen] = useState<{ [x: string]: boolean }>(defaultOpen);
+  const [active, setActive] = useState<string>(defaultActive);
   const location = useLocation();
 
   const handleClick = (label: string) => {

client/src/components/menu/SimpleMenu.tsx

@@ -1,4 +1,5 @@
-import React, { FC, useMemo } from 'react';
+import { FC, useMemo } from 'react';
+import * as React from 'react';
 import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
 import { generateId } from '../../utils/Common';

client/src/components/status/Status.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useMemo } from 'react';
+import { FC, useMemo } from 'react';
 import { StatusType, StatusEnum } from './Types';
 import { useTranslation } from 'react-i18next';
 import { makeStyles, Theme, createStyles, Typography } from '@material-ui/core';

client/src/components/status/StatusIcon.tsx

@@ -1,5 +1,5 @@
 import { CircularProgress, makeStyles, Theme } from '@material-ui/core';
-import React, { FC, ReactElement } from 'react';
+import { FC, ReactElement } from 'react';
 import { getStatusType } from '../../utils/Status';
 import icons from '../icons/Icons';
 import { StatusEnum, StatusType } from './Types';

client/src/components/textField/CustomInput.tsx

@@ -12,7 +12,7 @@ import {
   TextField,
 } from '@material-ui/core';
 import Icons from '../icons/Icons';
-import React, { ReactElement } from 'react';
+import { ReactElement } from 'react';
 import {
   IAdornmentConfig,
   IIconConfig,

client/src/components/textField/SearchInput.tsx

@@ -1,5 +1,5 @@
 import { InputAdornment, makeStyles, TextField } from '@material-ui/core';
-import React, { FC, useState } from 'react';
+import { useRef, FC, useState } from 'react';
 import Icons from '../icons/Icons';
 import { SearchType } from './Types';
 
@@ -60,7 +60,7 @@ const SearchInput: FC<SearchType> = props => {
 
   const classes = useSearchStyles({ searched, showInput });
 
-  const inputRef = React.useRef<any>(null);
+  const inputRef = useRef<any>(null);
 
   const onIconClick = () => {
     setShowInput(true);

client/src/context/Root.tsx

@@ -1,4 +1,5 @@
-import React, { useState, useCallback } from 'react';
+import { useState, useCallback } from 'react';
+import * as React from 'react';
 import {
   // for strict mode
   unstable_createMuiStrictModeTheme as createMuiTheme,

client/src/index.tsx

@@ -1,13 +1,13 @@
-import React from 'react';
+import { StrictMode } from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
 ReactDOM.render(
-  <React.StrictMode>
+  <StrictMode>
     <App />
-  </React.StrictMode>,
+  </StrictMode>,
   document.getElementById('root')
 );
 

client/src/pages/connect/Connect.tsx

@@ -1,3 +1,5 @@
-const Connect = () => {};
+const Connect = () => {
+  return <section>connect</section>;
+};
 
 export default Connect;