Chore/ts (#199)

* chore: add typescript and dependencies * refactor: remove react imports * refactor: fix entrypoint * chore: upgrade chakra and deps * chore: configure eslint
2026-08-07 08:23:55 +00:00 · 2022-09-14 21:01:58 +02:00
parent e40d750673
commit b7e758bf24
114 changed files with 1216 additions and 743 deletions
@@ -0,0 +1,2 @@
+node_modules
+build
@@ -2,12 +2,15 @@
  "extends": [
    "react-app",
    "react-app/jest",
-    "plugin:react/recommended"
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended"
  ],
+  "parser": "@typescript-eslint/parser",
  "plugins": [
    "react",
    "testing-library",
-    "simple-import-sort"
+    "simple-import-sort",
+    "@typescript-eslint"
  ],
  "rules": {
    "jest/no-mocks-import": "warn",
@@ -41,6 +44,8 @@
    "react/no-deprecated": [
      "error"
    ],
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off",
    "react/jsx-no-undef": "error",
    "react/jsx-closing-tag-location": "warn",
    "react/jsx-no-useless-fragment": "warn",
@@ -1,6 +0,0 @@
-{
-  "compilerOptions": {
-    "baseUrl": "src"
-  },
-  "include": ["src"]
-}
@@ -3,19 +3,19 @@
  "version": "1.7.1",
  "private": true,
  "dependencies": {
-    "@chakra-ui/react": "^2.0.0-next.3",
+    "@chakra-ui/react": "^2.3.2",
    "@dnd-kit/core": "^6.0.5",
    "@dnd-kit/sortable": "^7.0.1",
    "@dnd-kit/utilities": "^3.2.0",
-    "@emotion/react": "^11.7.1",
-    "@emotion/styled": "^11.6.0",
+    "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4",
    "@react-icons/all-files": "^4.1.0",
    "@tanstack/react-query": "^4.1.3",
    "@tanstack/react-query-devtools": "^4.0.10",
    "autosize": "^5.0.1",
    "axios": "^0.27.2",
    "color": "^4.2.3",
-    "framer-motion": "^6.3.3",
+    "framer-motion": "^7.3.2",
    "jotai": "^1.7.8",
    "luxon": "^3.0.1",
    "react": "^18.1.0",
@@ -56,6 +56,12 @@
    "@testing-library/react": "^13.1.1",
    "@testing-library/react-hooks": "^8.0.0",
    "@testing-library/user-event": "^14.1.1",
+    "@types/jest": "^29.0.1",
+    "@types/node": "^18.7.16",
+    "@types/react": "^18.0.19",
+    "@types/react-dom": "^18.0.6",
+    "@typescript-eslint/eslint-plugin": "^5.37.0",
+    "@typescript-eslint/parser": "^5.37.0",
    "eslint-plugin-simple-import-sort": "^7.0.0",
    "prop-types": "^15.8.1",
    "react-scripts": "^5.0.1",
@@ -63,6 +69,7 @@
    "sass": "^1.51.0",
    "stylelint": "^14.9.1",
    "stylelint-config-prettier": "^9.0.3",
-    "stylelint-config-standard-scss": "^4.0.0"
+    "stylelint-config-standard-scss": "^4.0.0",
+    "typescript": "^4.8.3"
  }
 }
@@ -1,4 +1,4 @@
-import React, { Suspense, useCallback, useEffect } from 'react';
+import { Suspense, useCallback, useEffect } from 'react';
 import { BrowserRouter } from 'react-router-dom';
 import { ChakraProvider } from '@chakra-ui/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
@@ -1,4 +1,4 @@
-import React, { lazy, useEffect } from 'react';
+import { lazy, useEffect } from 'react';
 import { Route, Routes, useLocation, useNavigate } from 'react-router-dom';

 import { ALIASES } from './common/api/apiConstants';
@@ -1,4 +1,3 @@
-import React from 'react';
 import { IconButton } from '@chakra-ui/button';
 import { Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/menu';
 import { Tooltip } from '@chakra-ui/tooltip';
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Button } from '@chakra-ui/button';
 import { IoCheckmarkSharp } from '@react-icons/all-files/io5/IoCheckmarkSharp';
 import { IoCloseSharp } from '@react-icons/all-files/io5/IoCloseSharp';
@@ -1,4 +1,3 @@
-import React from 'react';
 import { IconButton } from '@chakra-ui/button';
 import { Tooltip } from '@chakra-ui/tooltip';
 import { IoPause } from '@react-icons/all-files/io5/IoPause';
@@ -1,4 +1,3 @@
-import React from 'react';
 import { IconButton } from '@chakra-ui/button';
 import { Tooltip } from '@chakra-ui/tooltip';
 import { FiUsers } from '@react-icons/all-files/fi/FiUsers';
@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { Button, IconButton } from '@chakra-ui/button';
 import {
  AlertDialog,
@@ -1,4 +1,3 @@
-import React from 'react';
 import { IconButton } from '@chakra-ui/button';
 import { Tooltip } from '@chakra-ui/tooltip';
 import { IoTimeOutline } from '@react-icons/all-files/io5/IoTimeOutline';
@@ -1,4 +1,3 @@
-import React from 'react';
 import { IconButton } from '@chakra-ui/button';
 import { Tooltip } from '@chakra-ui/tooltip';
 import { IoPlay } from '@react-icons/all-files/io5/IoPlay';
@@ -1,4 +1,3 @@
-import React from 'react';
 import { IconButton } from '@chakra-ui/button';
 import { Tooltip } from '@chakra-ui/tooltip';
 import PropTypes from 'prop-types';
@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { IconButton } from '@chakra-ui/button';
 import { Tooltip } from '@chakra-ui/tooltip';
 import PropTypes from 'prop-types';
@@ -1,4 +1,3 @@
-import React from 'react';
 import { IconButton } from '@chakra-ui/button';
 import { Tooltip } from '@chakra-ui/tooltip';
 import PropTypes from 'prop-types';
@@ -1,4 +1,3 @@
-import React from 'react';
 import { IconButton } from '@chakra-ui/button';
 import { Tooltip } from '@chakra-ui/tooltip';
 import { IoStop } from '@react-icons/all-files/io5/IoStop';
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon } from '@chakra-ui/react';
 import { FiChevronUp } from '@react-icons/all-files/fi/FiChevronUp';
 import PropTypes from 'prop-types';
@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import { memo } from 'react';
 import { formatDisplay } from 'common/utils/dateConfig';
 import PropTypes from 'prop-types';

@@ -4,6 +4,7 @@ import React from 'react';
 import { LoggingContext } from '../../context/LoggingContext';

 import style from './ErrorBoundary.module.scss';
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const appVersion = require('../../../../package.json').version;

 class ErrorBoundary extends React.Component {
@@ -1,4 +1,4 @@
-import React, { useCallback, useContext } from 'react';
+import { useCallback, useContext } from 'react';
 import EditableTimer from 'common/components/input/EditableTimer';
 import PropTypes from 'prop-types';

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext } from 'react';
+import { useCallback, useContext } from 'react';
 import PropTypes from 'prop-types';

 import { LoggingContext } from '../../context/LoggingContext';
@@ -1,9 +1,8 @@
-import React from 'react';
 import PropTypes from 'prop-types';

 import EditableTimer from '../input/EditableTimer';

-import style from './Times.module.scss'
+import style from './Times.module.scss';

 export default function Times(props) {
  const { handleValidate, actionHandler, timeStart, timeEnd, duration, previousEnd } = props;
@@ -39,7 +38,7 @@ export default function Times(props) {
      />
    </>
  );
-};
+}

 Times.propTypes = {
  handleValidate: PropTypes.func.isRequired,
@@ -1,10 +1,9 @@
-import React from 'react';
 import PropTypes from 'prop-types';

 import { stringFromMillis } from '../../utils/time';
 import EditableTimer from '../input/EditableTimer';

-import style from './Times.module.scss'
+import style from './Times.module.scss';

 export default function TimesDelayed(props) {
  const { handleValidate, actionHandler, delay, timeStart, timeEnd, duration, previousEnd } = props;
@@ -47,7 +46,7 @@ export default function TimesDelayed(props) {
      />
    </>
  );
-};
+}

 TimesDelayed.propTypes = {
  handleValidate: PropTypes.func.isRequired,
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { Textarea } from '@chakra-ui/react';
 import autosize from 'autosize/dist/autosize';

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { Editable, EditableInput, EditablePreview } from '@chakra-ui/react';
 import PropTypes from 'prop-types';

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { Editable, EditableInput, EditablePreview } from '@chakra-ui/editable';
 import PropTypes from 'prop-types';

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useEffect, useState } from 'react';
+import { useCallback, useContext, useEffect, useState } from 'react';
 import { Editable, EditableInput, EditablePreview } from '@chakra-ui/editable';
 import PropTypes from 'prop-types';

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';

@@ -1,4 +1,3 @@
-import React from 'react';
 import { clamp } from 'common/utils/math';
 import PropTypes from 'prop-types';

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { IconButton } from '@chakra-ui/button';
 import { Image } from '@chakra-ui/react';
@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useEffect, useState } from 'react';
+import { useCallback, useContext, useEffect, useState } from 'react';
 import { IconButton } from '@chakra-ui/button';
 import { HStack, PinInput, PinInputField } from '@chakra-ui/react';
 import { FiCheck } from '@react-icons/all-files/fi/FiCheck';
@@ -1,4 +1,3 @@
-import React from 'react';
 import { ReactComponent as Emptyimage } from 'assets/images/empty.svg';
 import PropTypes from 'prop-types';

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useInterval } from 'common/hooks/useInterval';
 import PropTypes from 'prop-types';

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';

 import style from './TitleCard.module.scss';
@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';

 import style from './TitleSide.module.scss';
@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';

 import { formatTime } from '../../utils/time';
@@ -1,4 +1,4 @@
-import React, { createContext, useCallback, useEffect, useState } from 'react';
+import { createContext, useCallback, useEffect, useState } from 'react';

 import { APP_SETTINGS } from '../api/apiConstants';
 import { getSettings } from '../api/ontimeApi';
@@ -1,4 +1,4 @@
-import React, { createContext, useCallback } from 'react';
+import { createContext, useCallback } from 'react';

 import { useLocalStorage } from '../hooks/useLocalStorage';

@@ -1,4 +1,4 @@
-import React, { createContext, useCallback, useMemo, useState } from 'react';
+import { createContext, useCallback, useMemo, useState } from 'react';

 import { useLocalStorage } from '../hooks/useLocalStorage';

@@ -1,4 +1,4 @@
-import React, { createContext, useCallback, useEffect, useState } from 'react';
+import { createContext, useCallback, useEffect, useState } from 'react';

 import { generateId } from '../utils/generate_id';
 import { nowInMillis, stringFromMillis } from '../utils/time';
@@ -1,4 +1,4 @@
-import React, { createContext, useCallback, useState } from 'react';
+import { createContext, useCallback, useState } from 'react';

 import { useLocalStorage } from '../hooks/useLocalStorage';

@@ -1,7 +1,8 @@
-import React, { createContext, useContext, useEffect, useState } from 'react';
+import { createContext, useContext, useEffect, useState } from 'react';
 import { serverURL } from 'common/api/apiConstants';
 import io from 'socket.io-client';

+// eslint-disable-next-line @typescript-eslint/no-empty-function
 const SocketContext = createContext([[], () => {}]);

 export const useSocket = () => {
@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';

 import ProtectRoute from '../common/components/protectRoute/ProtectRoute';
@@ -1,4 +1,3 @@
-import React from 'react';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { render, screen } from '@testing-library/react';
 import SocketProvider from 'common/context/socketContext';
@@ -1,4 +1,3 @@
-import React from 'react';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { render, screen } from '@testing-library/react';
 import SocketProvider from 'common/context/socketContext';
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { IconButton } from '@chakra-ui/button';
 import { Editable, EditableInput, EditablePreview } from '@chakra-ui/editable';
 import { Tooltip } from '@chakra-ui/tooltip';
@@ -1,4 +1,3 @@
-import React from 'react';
 import { IconButton } from '@chakra-ui/button';
 import { Tooltip } from '@chakra-ui/tooltip';
 import { IoMicOffOutline } from '@react-icons/all-files/io5/IoMicOffOutline';
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Box } from '@chakra-ui/layout';
 import { FiArrowUpRight } from '@react-icons/all-files/fi/FiArrowUpRight';

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';

 import PauseIconBtn from '../../../common/components/buttons/PauseIconBtn';
@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import { memo } from 'react';
 import PropTypes from 'prop-types';

 import Playback from './Playback';
@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { usePlaybackControlProvider } from '../../../common/hooks/useSocketProvider';

 import PlaybackButtons from './PlaybackButtons';
@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import { memo } from 'react';
 import { Button } from '@chakra-ui/button';
 import { Tooltip } from '@chakra-ui/react';
 import TimerDisplay from 'common/components/countdown/TimerDisplay';
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Box } from '@chakra-ui/layout';
 import { FiArrowUpRight } from '@react-icons/all-files/fi/FiArrowUpRight';

@@ -1,4 +1,3 @@
-import React from 'react';
 import { IoArrowUndo } from '@react-icons/all-files/io5/IoArrowUndo';
 import { IoPlaySkipBack } from '@react-icons/all-files/io5/IoPlaySkipBack';
 import { IoPlaySkipForward } from '@react-icons/all-files/io5/IoPlaySkipForward';
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Draggable } from 'react-beautiful-dnd';
 import { HStack } from '@chakra-ui/react';
 import { FiMoreVertical } from '@react-icons/all-files/fi/FiMoreVertical';
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import { Draggable } from 'react-beautiful-dnd';
 import { HStack } from '@chakra-ui/react';
 import { FiCheck } from '@react-icons/all-files/fi/FiCheck';
@@ -1,4 +1,4 @@
-import React, { lazy } from 'react';
+import { lazy } from 'react';
 import { useDisclosure } from '@chakra-ui/hooks';
 import { Box } from '@chakra-ui/layout';
 import ErrorBoundary from 'common/components/errorBoundary/ErrorBoundary';
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Checkbox } from '@chakra-ui/react';
 import { Tooltip } from '@chakra-ui/tooltip';
 import { useAtomValue } from 'jotai';
@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import { memo } from 'react';
 import { HStack } from '@chakra-ui/react';
 import { FiMoreVertical } from '@react-icons/all-files/fi/FiMoreVertical';
 import PropTypes from 'prop-types';
@@ -1,4 +1,4 @@
-import React, { useContext, useMemo } from 'react';
+import { useContext, useMemo } from 'react';
 import { Draggable } from 'react-beautiful-dnd';
 import Icon from '@chakra-ui/icon';
 import { FiChevronUp } from '@react-icons/all-files/fi/FiChevronUp';
@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import { memo } from 'react';
 import { VStack } from '@chakra-ui/react';
 import { FiMoreVertical } from '@react-icons/all-files/fi/FiMoreVertical';
 import { IoRemove } from '@react-icons/all-files/io5/IoRemove';
@@ -1,5 +1,3 @@
-import React from 'react';
-
 import ProtectRoute from '../../common/components/protectRoute/ProtectRoute';

 import Editor from './Editor';
@@ -1,4 +1,4 @@
-import React, { createRef, useCallback, useContext, useEffect } from 'react';
+import { createRef, useCallback, useContext, useEffect } from 'react';
 import { DragDropContext, Droppable } from 'react-beautiful-dnd';
 import Empty from 'common/components/state/Empty';
 import { useAtomValue } from 'jotai';
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Box } from '@chakra-ui/layout';
 import { FiArrowUpRight } from '@react-icons/all-files/fi/FiArrowUpRight';

@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useContext } from 'react';
+import { memo, useCallback, useContext } from 'react';
 import { useAtomValue } from 'jotai';
 import PropTypes from 'prop-types';

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useEffect, useState } from 'react';
+import { useCallback, useContext, useEffect, useState } from 'react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { EVENTS_TABLE } from 'common/api/apiConstants';
 import {
@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { useInfoProvider } from '../../common/hooks/useSocketProvider';

 import InfoLogger from './InfoLogger';
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Box } from '@chakra-ui/layout';
 import { FiArrowUpRight } from '@react-icons/all-files/fi/FiArrowUpRight';

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useEffect, useState } from 'react';
+import { useCallback, useContext, useEffect, useState } from 'react';

 import CollapseBar from '../../common/components/collapseBar/CollapseBar';
 import { LoggingContext } from '../../common/context/LoggingContext';
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { APP_TABLE } from 'common/api/apiConstants';
 import { getInfo, ontimePlaceholderInfo } from 'common/api/ontimeApi';
 import { useFetch } from 'common/hooks/useFetch';
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import PropTypes from 'prop-types';

 import CollapseBar from '../../common/components/collapseBar/CollapseBar';
@@ -1,4 +1,3 @@
-import React from 'react';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { render, screen } from '@testing-library/react';
 import SocketProvider from 'common/context/socketContext';
@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useContext } from 'react';
+import { memo, useCallback, useContext } from 'react';
 import { ButtonGroup, HStack } from '@chakra-ui/react';
 import { FiChevronsDown } from '@react-icons/all-files/fi/FiChevronsDown';
 import { FiChevronsUp } from '@react-icons/all-files/fi/FiChevronsUp';
@@ -1,4 +1,3 @@
-import React from 'react';
 import { IconButton } from '@chakra-ui/button';
 import { Divider } from '@chakra-ui/layout';
 import { Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/menu';
@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useEffect, useRef } from 'react';
+import { useCallback, useContext, useEffect, useRef } from 'react';
 import { VStack } from '@chakra-ui/react';
 import { FiDownload } from '@react-icons/all-files/fi/FiDownload';
 import { FiHelpCircle } from '@react-icons/all-files/fi/FiHelpCircle';
@@ -1,4 +1,3 @@
-import React from 'react';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { render, screen } from '@testing-library/react';

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';

 import MenuActionButtons from "../MenuActionButtons";
@@ -1,4 +1,3 @@
-import React from 'react';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { render, screen } from '@testing-library/react';

@@ -1,5 +1,5 @@
 /* eslint-disable jsx-a11y/anchor-has-content */
-import React, { useCallback, useContext, useEffect, useState } from 'react';
+import { useCallback, useContext, useEffect, useState } from 'react';
 import { Button, IconButton } from '@chakra-ui/button';
 import { ModalBody } from '@chakra-ui/modal';
 import { Input } from '@chakra-ui/react';
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { IconButton } from '@chakra-ui/button';
 import { ModalBody } from '@chakra-ui/modal';
 import {
@@ -26,6 +26,7 @@ import SubmitContainer from './SubmitContainer';

 import style from './Modals.module.scss';

+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const version = require('../../../package.json').version;

 export default function AppSettingsModal() {
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { ModalBody } from '@chakra-ui/modal';
 import { FormLabel, Input, Textarea } from '@chakra-ui/react';
 import { EVENT_TABLE } from 'common/api/apiConstants';
@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useEffect, useState } from 'react';
+import { useCallback, useContext, useEffect, useState } from 'react';
 import { ModalBody } from '@chakra-ui/modal';
 import { FormControl, FormLabel, Input, Switch } from '@chakra-ui/react';
 import { FiInfo } from '@react-icons/all-files/fi/FiInfo';
@@ -1,4 +1,3 @@
-import React from 'react';
 import {
  Modal,
  ModalCloseButton,
@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useEffect, useState } from 'react';
+import { useCallback, useContext, useEffect, useState } from 'react';
 import { ModalBody } from '@chakra-ui/modal';
 import { FormControl, FormLabel, Input } from '@chakra-ui/react';
 import { IoInformationCircleOutline } from '@react-icons/all-files/io5/IoInformationCircleOutline';
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Button } from '@chakra-ui/button';
 import PropTypes from 'prop-types';

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { ModalBody } from '@chakra-ui/modal';
 import { Input } from '@chakra-ui/react';
 import { IoInformationCircleOutline } from '@react-icons/all-files/io5/IoInformationCircleOutline';
@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useEffect, useMemo } from 'react';
+import { useCallback, useContext, useEffect, useMemo } from 'react';
 import { useBlockLayout, useColumnOrder, useResizeColumns, useTable } from 'react-table';
 import { Tooltip } from '@chakra-ui/tooltip';
 import {
@@ -1,5 +1,3 @@
-import React from 'react';
-
 import ProtectRoute from '../../common/components/protectRoute/ProtectRoute';
 import { TableSettingsProvider } from '../../common/context/TableSettingsContext';

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 import { Divider } from '@chakra-ui/layout';
 import { Tooltip } from '@chakra-ui/tooltip';
 import { FiSettings } from '@react-icons/all-files/fi/FiSettings';
@@ -1,4 +1,4 @@
-import React, { useCallback, useContext,useEffect } from 'react';
+import { useCallback, useContext,useEffect } from 'react';

 import { EVENTS_TABLE, USERFIELDS } from '../../common/api/apiConstants';
 import { fetchAllEvents, requestPatch } from '../../common/api/eventsApi';
@@ -1,4 +1,3 @@
-import React from 'react';
 import { FiCheck } from '@react-icons/all-files/fi/FiCheck';

 import { stringFromMillis } from '../../common/utils/time.js';
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';

 import { AutoTextArea } from '../../../common/components/input/AutoTextArea';
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Tooltip } from '@chakra-ui/tooltip';
 import { IoPause } from '@react-icons/all-files/io5/IoPause';
 import { IoPlay } from '@react-icons/all-files/io5/IoPlay';
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Tooltip } from '@chakra-ui/tooltip';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Button } from '@chakra-ui/button';
 import PropTypes from 'prop-types';

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';

 import style from '../Table.module.scss';
@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';

 import { millisToMinutes } from '../../../common/utils/dateConfig';
@@ -1,4 +1,3 @@
-import React from 'react';
 import Color from 'color';
 import PropTypes from 'prop-types';

@@ -1,5 +1,5 @@
 /* eslint-disable react/display-name */
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';

 import { EVENT_TABLE, EVENTS_TABLE } from '../../common/api/apiConstants';
 import { fetchEvent } from '../../common/api/eventApi';
--- a/Show More
+++ b/Show More