Refactor imports

* refactor: implement import lint

client/.eslintrc

@@ -7,7 +7,8 @@
   "plugins": [
     "react",
     "testing-library",
-    "jest"
+    "jest",
+    "simple-import-sort"
   ],
   "rules": {
     "jest/no-mocks-import": "warn",
@@ -77,6 +78,57 @@
         "customValidators": [],
         "skipUndeclared": true
       }
-    ]
-  }
+    ],
+    "simple-import-sort/imports": "warn",
+    "simple-import-sort/exports": "warn",
+    "import/no-duplicates": "error"
+  },
+  "overrides": [
+    // override "simple-import-sort" config
+    {
+      "files": [
+        "*.js",
+        "*.jsx",
+        "*.ts",
+        "*.tsx"
+      ],
+      "rules": {
+        "simple-import-sort/imports": [
+          "error",
+          {
+            "groups": [
+              // Packages `react` related packages come first.
+              [
+                "^react",
+                "^@?\\w"
+              ],
+              // Internal packages.
+              [
+                "^(@|components)(/.*|$)"
+              ],
+              // Side effect imports.
+              [
+                "^\\u0000"
+              ],
+              // Parent imports. Put `..` last.
+              [
+                "^\\.\\.(?!/?$)",
+                "^\\.\\./?$"
+              ],
+              // Other relative imports. Put same-folder imports and `.` last.
+              [
+                "^\\./(?=.*/)(?!/?$)",
+                "^\\.(?!/?$)",
+                "^\\./?$"
+              ],
+              // Style imports.
+              [
+                "^.+\\.?(css)$"
+              ]
+            ]
+          }
+        ]
+      }
+    }
+  ]
 }

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ontime-ui",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "private": true,
   "dependencies": {
     "@chakra-ui/react": "^2.0.0-next.3",
@@ -30,6 +30,7 @@
   "scripts": {
     "start": "set BROWSER=none&&react-scripts start",
     "build": "react-scripts build",
+    "lint": "eslint .",
     "test": "react-scripts test",
     "test:pipeline": "react-scripts test --watchAll=false --runInBand --detectOpenHandles --forceExit ",
     "eject": "react-scripts eject"
@@ -51,6 +52,7 @@
     "@testing-library/react": "^13.1.1",
     "@testing-library/react-hooks": "^8.0.0",
     "@testing-library/user-event": "^14.1.1",
+    "eslint-plugin-simple-import-sort": "^7.0.0",
     "prop-types": "^15.8.1",
     "react-scripts": "^5.0.1",
     "react-test-renderer": "^18.1.0",

client/src/App.jsx

@@ -1,17 +1,20 @@
 import React, { lazy, Suspense, useCallback, useEffect } from 'react';
 import { Route, Routes, useLocation, useNavigate } from 'react-router-dom';
-import './App.scss';
-import withSocket from 'features/viewers/ViewWrapper';
 import ErrorBoundary from 'common/components/errorBoundary/ErrorBoundary';
-import { useFetch } from './app/hooks/useFetch';
+import withSocket from 'features/viewers/ViewWrapper';
+
 import { ALIASES } from './app/api/apiConstants';
 import { getAliases } from './app/api/ontimeApi';
+import { useFetch } from './app/hooks/useFetch';
+
+import './App.scss';
 
 const Editor = lazy(() => import('features/editors/ProtectedEditor'));
 const Table = lazy(() => import('features/table/ProtectedTable'));
 
 const TimerView = lazy(() => import('features/viewers/timer/Timer'));
 const MinimalTimerView = lazy(() => import('features/viewers/timer/MinimalTimer'));
+const Countdown = lazy(() => import('features/viewers/countdown/Countdown'));
 
 const StageManager = lazy(() => import('features/viewers/backstage/StageManager'));
 const Public = lazy(() => import('features/viewers/foh/Public'));
@@ -21,6 +24,7 @@ const StudioClock = lazy(() => import('features/viewers/studio/StudioClock'));
 
 const STimer = withSocket(TimerView);
 const SMinimalTimer = withSocket(MinimalTimerView);
+const SCountdown = withSocket(Countdown);
 const SStageManager = withSocket(StageManager);
 const SPublic = withSocket(Public);
 const SLowerThird = withSocket(Lower);
@@ -90,6 +94,8 @@ function App() {
             <Route path='/minimalTimer' element={<SMinimalTimer />} />
             <Route path='/simpleTimer' element={<SMinimalTimer />} />
 
+            <Route path='/countdown' element={<SCountdown />} />
+
             <Route path='/sm' element={<SStageManager />} />
             <Route path='/backstage' element={<SStageManager />} />
 

client/src/app/api/eventApi.js

@@ -1,4 +1,5 @@
 import axios from 'axios';
+
 import { eventURL } from './apiConstants';
 
 /**

client/src/app/api/eventsApi.js

@@ -1,4 +1,5 @@
 import axios from 'axios';
+
 import { eventsURL } from './apiConstants';
 
 /**

client/src/app/api/ontimeApi.js

@@ -1,4 +1,5 @@
 import axios from 'axios';
+
 import { ontimeURL } from './apiConstants';
 
 /**

client/src/app/api/playbackApi.js

@@ -1,4 +1,5 @@
 import axios from 'axios';
+
 import { playbackURL } from './apiConstants';
 
 /**

client/src/app/context/AppContext.jsx

@@ -1,7 +1,8 @@
 import React, { createContext, useCallback, useEffect, useState } from 'react';
-import { useFetch } from '../hooks/useFetch';
+
 import { APP_SETTINGS } from '../api/apiConstants';
 import { getSettings } from '../api/ontimeApi';
+import { useFetch } from '../hooks/useFetch';
 
 export const AppContext = createContext({
   auth: false,

client/src/app/context/CollapseContext.jsx

@@ -1,4 +1,5 @@
 import React, { createContext, useCallback } from 'react';
+
 import { useLocalStorage } from '../hooks/useLocalStorage';
 
 export const CollapseContext = createContext({

client/src/app/context/CursorContext.jsx

@@ -1,4 +1,5 @@
 import React, { createContext, useCallback, useMemo, useState } from 'react';
+
 import { useLocalStorage } from '../hooks/useLocalStorage';
 
 export const CursorContext = createContext({

client/src/app/context/LoggingContext.jsx

@@ -1,8 +1,10 @@
 import React, { createContext, useCallback, useEffect, useState } from 'react';
-import { useSocket } from './socketContext';
+
 import { generateId } from '../../common/utils/generate_id';
 import { nowInMillis, stringFromMillis } from '../../common/utils/time';
 
+import { useSocket } from './socketContext';
+
 export const LoggingContext = createContext({
   logData: [],
   emitInfo: () => undefined,

client/src/app/context/TableSettingsContext.jsx

@@ -1,4 +1,5 @@
 import React, { createContext, useCallback, useState } from 'react';
+
 import { useLocalStorage } from '../hooks/useLocalStorage';
 
 export const TableSettingsContext = createContext({

client/src/app/context/socketContext.jsx

@@ -1,6 +1,6 @@
 import React, { createContext, useContext, useEffect, useState } from 'react';
-import io from 'socket.io-client';
 import { serverURL } from 'app/api/apiConstants';
+import io from 'socket.io-client';
 
 const SocketContext = createContext([[], () => {}]);
 

client/src/app/hooks/useMutateEvents.js

@@ -1,4 +1,5 @@
 import { useMutation, useQueryClient } from 'react-query';
+
 import { EVENTS_TABLE } from '../api/apiConstants';
 
 /**

client/src/app/sampleData.js

@@ -1,52 +0,0 @@
-const dummy = new Date();
-
-export const sampleData = {
-  presenterMessage: {
-    text: 'Only the timer sees this',
-    active: false,
-  },
-  publicMessage: {
-    text: 'Everyone sees this',
-    active: false,
-  },
-  events: [
-    {
-      id: '1',
-      title: 'Is the internet a fad?',
-      subtitle: 'It is',
-      presenter: 'Carlos Valente',
-      timeStart: 37800000,
-      timeEnd: 39600000,
-      clockStarted: dummy,
-      timerDuration: 60,
-      type: 'event',
-    },
-    {
-      id: 0.4849093424577693,
-      duration: 25*60000,
-      type: 'delay',
-    },
-    {
-      id: '2',
-      title: 'Is reddit a dictatorship?',
-      subtitle: 'It is',
-      presenter: 'Carlos Valente',
-      timeStart: 39600000,
-      timeEnd: 40320000,
-      clockStarted: dummy,
-      timerDuration: 60*60000,
-      type: 'event',
-    },
-    {
-      id: '3',
-      title: 'Out of words',
-      subtitle: '',
-      presenter: 'Carlos Valente',
-      timeStart: 41400000,
-      timeEnd: 43200000,
-      clockStarted: dummy,
-      timerDuration: 60,
-      type: 'event',
-    },
-  ],
-};

client/src/common/components/buttons/ActionButtons.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/menu';
 import { IconButton } from '@chakra-ui/button';
+import { Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/menu';
+import { Tooltip } from '@chakra-ui/tooltip';
 import { FiClock } from '@react-icons/all-files/fi/FiClock';
 import { FiMinusCircle } from '@react-icons/all-files/fi/FiMinusCircle';
 import { FiPlus } from '@react-icons/all-files/fi/FiPlus';
-import { Tooltip } from '@chakra-ui/tooltip';
 import PropTypes from 'prop-types';
 
 export default function ActionButtons(props) {

client/src/common/components/buttons/EnableBtn.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { IoCloseSharp } from '@react-icons/all-files/io5/IoCloseSharp';
-import { IoCheckmarkSharp } from '@react-icons/all-files/io5/IoCheckmarkSharp';
 import { Button } from '@chakra-ui/button';
+import { IoCheckmarkSharp } from '@react-icons/all-files/io5/IoCheckmarkSharp';
+import { IoCloseSharp } from '@react-icons/all-files/io5/IoCloseSharp';
 import PropTypes from 'prop-types';
 
 export default function EnableBtn(props) {

client/src/common/components/buttons/PauseIconBtn.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { IconButton } from '@chakra-ui/button';
-import { IoPause } from '@react-icons/all-files/io5/IoPause';
 import { Tooltip } from '@chakra-ui/tooltip';
+import { IoPause } from '@react-icons/all-files/io5/IoPause';
 import PropTypes from 'prop-types';
 
 export default function PauseIconBtn(props) {

client/src/common/components/buttons/QuitIconBtn.jsx

@@ -11,6 +11,7 @@ import {
 import { Tooltip } from '@chakra-ui/tooltip';
 import { FiPower } from '@react-icons/all-files/fi/FiPower';
 import PropTypes from 'prop-types';
+
 import { LoggingContext } from '../../../app/context/LoggingContext';
 
 export default function QuitIconBtn(props) {

client/src/common/components/buttons/RollIconBtn.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { IconButton } from '@chakra-ui/button';
-import { IoTimeOutline } from '@react-icons/all-files/io5/IoTimeOutline';
 import { Tooltip } from '@chakra-ui/tooltip';
+import { IoTimeOutline } from '@react-icons/all-files/io5/IoTimeOutline';
 import PropTypes from 'prop-types';
 
 export default function RollIconBtn(props) {

client/src/common/components/buttons/StartIconBtn.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { IconButton } from '@chakra-ui/button';
-import { IoPlay } from '@react-icons/all-files/io5/IoPlay';
 import { Tooltip } from '@chakra-ui/tooltip';
+import { IoPlay } from '@react-icons/all-files/io5/IoPlay';
 import PropTypes from 'prop-types';
 
 export default function StartIconBtn(props) {

client/src/common/components/buttons/UnloadIconBtn.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { IconButton } from '@chakra-ui/button';
-import { IoStop } from '@react-icons/all-files/io5/IoStop';
 import { Tooltip } from '@chakra-ui/tooltip';
+import { IoStop } from '@react-icons/all-files/io5/IoStop';
 import PropTypes from 'prop-types';
 
 export default function UnloadIconBtn(props) {

client/src/common/components/collapseBar/CollapseBar.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Icon } from '@chakra-ui/react';
 import { FiChevronUp } from '@react-icons/all-files/fi/FiChevronUp';
+import PropTypes from 'prop-types';
+
 import style from './CollapseBar.module.scss';
 
 export default function CollapseBar(props) {

client/src/common/components/countdown/Countdown.jsx

@@ -1,6 +1,7 @@
 import React, { memo } from 'react';
 import { formatDisplay } from 'common/utils/dateConfig';
 import PropTypes from 'prop-types';
+
 import styles from './Countdown.module.scss';
 
 const Countdown = ({ time, small, isNegative, hideZeroHours }) => {

client/src/common/components/errorBoundary/ErrorBoundary.jsx

@@ -1,6 +1,8 @@
 /* eslint-disable react/destructuring-assignment */
 import React from 'react';
+
 import { LoggingContext } from '../../../app/context/LoggingContext';
+
 import style from './ErrorBoundary.module.scss';
 const appVersion = require('../../../../package.json').version;
 

client/src/common/components/eventTimes/EventTimes.jsx

@@ -1,8 +1,9 @@
 import React, { useCallback, useContext } from 'react';
 import EditableTimer from 'common/input/EditableTimer';
+import PropTypes from 'prop-types';
+
 import { LoggingContext } from '../../../app/context/LoggingContext';
 import { validateTimes } from '../../../app/entryValidator';
-import PropTypes from 'prop-types';
 
 export default function EventTimes(props) {
   const { actionHandler, delay, timeStart, timeEnd, previousEnd } = props;

client/src/common/components/eventTimes/EventTimesVertical.jsx

@@ -1,9 +1,11 @@
 import React, { useCallback, useContext } from 'react';
+import PropTypes from 'prop-types';
+
 import { LoggingContext } from '../../../app/context/LoggingContext';
 import { validateTimes } from '../../../app/entryValidator';
-import PropTypes from 'prop-types';
-import TimesDelayed from './TimesDelayed';
+
 import Times from './Times';
+import TimesDelayed from './TimesDelayed';
 
 export default function EventTimesVertical(props) {
   const { delay, timeStart, timeEnd, duration, previousEnd, actionHandler } = props;

client/src/common/components/eventTimes/Times.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
-import EditableTimer from '../../input/EditableTimer';
 import PropTypes from 'prop-types';
+
+import EditableTimer from '../../input/EditableTimer';
+
 import style from './Times.module.scss'
 
 export default function Times(props) {

client/src/common/components/eventTimes/TimesDelayed.jsx

@@ -1,7 +1,9 @@
 import React from 'react';
-import EditableTimer from '../../input/EditableTimer';
 import PropTypes from 'prop-types';
+
+import EditableTimer from '../../input/EditableTimer';
 import { stringFromMillis } from '../../utils/time';
+
 import style from './Times.module.scss'
 
 export default function TimesDelayed(props) {

client/src/common/components/myProgressBar/MyProgressBar.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { clamp } from 'app/utils/math';
 import PropTypes from 'prop-types';
+
 import styles from './MyProgressBar.module.scss';
 
 export default function MyProgressBar(props) {

client/src/common/components/nav/NavLogo.jsx

@@ -1,12 +1,15 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
-import { Image } from '@chakra-ui/react';
-import { AnimatePresence, motion } from 'framer-motion';
-import navlogo from 'assets/images/logos/LOGO-72.png';
-import style from './NavLogo.module.scss';
 import { IconButton } from '@chakra-ui/button';
+import { Image } from '@chakra-ui/react';
 import { IoExpand } from '@react-icons/all-files/io5/IoExpand';
+import navlogo from 'assets/images/logos/LOGO-72.png';
+import { AnimatePresence, motion } from 'framer-motion';
+import PropTypes from 'prop-types';
+
+import navigatorConstants from './navigatorConstants';
+
+import style from './NavLogo.module.scss';
 
 /* Styling for action buttons */
 const navButtonStyle = {
@@ -91,27 +94,14 @@ export default function NavLogo(props) {
               exit={{ opacity: 0, scaleY: 0, y: -50 }}
               className={style.nav}
             >
-              <Link to='/timer' {...tabProps}>
-                Timer
-              </Link>
-              <Link to='/minimal' {...tabProps}>
-                Minimal Timer
-              </Link>
-              <Link to='/sm' {...tabProps}>
-                Backstage
-              </Link>
-              <Link to='/public' {...tabProps}>
-                Public
-              </Link>
-              <Link to='/lower' {...tabProps}>
-                Lower Thirds
-              </Link>
-              <Link to='/pip' {...tabProps}>
-                PIP
-              </Link>
-              <Link to='/studio' {...tabProps}>
-                Studio Clock
-              </Link>
+              {navigatorConstants.map((route) => (
+                <Link
+                  to={route.url}
+                  key={route.url}
+                  {...tabProps}>
+                  {route.label}
+                </Link>
+              ))}
             </motion.div>
           </>
         )}

client/src/common/components/nav/navigatorConstants.js

@@ -0,0 +1,11 @@
+const navigatorConstants = [
+  { url: '/timer', label: 'Timer' },
+  { url: '/minimal', label: 'Minimal Timer' },
+  { url: '/sm', label: 'Backstage' },
+  { url: '/public', label: 'Public' },
+  { url: '/lower', label: 'Lower Thirds' },
+  { url: '/pip', label: 'PiP' },
+  { url: '/studio', label: 'Studio Clock' },
+];
+
+export default navigatorConstants;

client/src/common/components/protectRoute/ProtectRoute.jsx

@@ -1,9 +1,11 @@
 import React, { useCallback, useContext, useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import { HStack, PinInput, PinInputField } from '@chakra-ui/react';
 import { IconButton } from '@chakra-ui/button';
+import { HStack, PinInput, PinInputField } from '@chakra-ui/react';
 import { FiCheck } from '@react-icons/all-files/fi/FiCheck';
+import PropTypes from 'prop-types';
+
 import { AppContext } from '../../../app/context/AppContext';
+
 import style from './ProtectRoute.module.scss';
 
 export default function ProtectRoute({ children }) {

client/src/common/components/views/Paginator.jsx

@@ -1,8 +1,11 @@
 import React, { useEffect, useState } from 'react';
-import TodayItem from './TodayItem';
 import { useInterval } from 'app/hooks/useInterval';
 import PropTypes from 'prop-types';
+
 import Empty from '../../state/Empty';
+
+import TodayItem from './TodayItem';
+
 import style from './Paginator.module.scss';
 
 export default function Paginator(props) {

client/src/common/components/views/TitleCard.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+
 import style from './TitleCard.module.scss';
 
 export default function TitleCard(props) {

client/src/common/components/views/TitleSide.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+
 import style from './TitleSide.module.scss';
 
 export default function TitleSide(props) {

client/src/common/components/views/TodayItem.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+
 import { stringFromMillis } from '../../utils/time';
+
 import style from './Paginator.module.scss';
 
 export default function TodayItem(props) {

client/src/common/input/DelayInput.jsx

@@ -1,9 +1,11 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { Editable, EditableInput, EditablePreview } from '@chakra-ui/react';
-import { clamp } from '../../app/utils/math';
-import style from './TimeInput.module.css';
 import PropTypes from 'prop-types';
 
+import { clamp } from '../../app/utils/math';
+
+import style from './TimeInput.module.css';
+
 const inputProps = {
   width: 20,
   fontWeight: 400,

client/src/common/input/EditableText.jsx

@@ -1,8 +1,9 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { Editable, EditableInput, EditablePreview } from '@chakra-ui/editable';
-import style from './EditableText.module.scss';
 import PropTypes from 'prop-types';
 
+import style from './EditableText.module.scss';
+
 export default function EditableText(props) {
   const { label, defaultValue, placeholder, submitHandler, maxchar = 40, ...rest } = props;
   const [text, setText] = useState(defaultValue || '');

client/src/common/input/EditableTimer.jsx

@@ -1,9 +1,11 @@
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { Editable, EditableInput, EditablePreview } from '@chakra-ui/editable';
-import { forgivingStringToMillis } from '../utils/dateConfig';
-import { LoggingContext } from '../../app/context/LoggingContext';
 import PropTypes from 'prop-types';
+
+import { LoggingContext } from '../../app/context/LoggingContext';
+import { forgivingStringToMillis } from '../utils/dateConfig';
 import { stringFromMillis } from '../utils/time';
+
 import style from './EditableTimer.module.scss';
 
 export default function EditableTimer(props) {

client/src/common/input/__tests__/EditableTimer.test.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+
 import EditableTimer from '../EditableTimer';
 
 const renderEditableTimer = (

client/src/common/state/Empty.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ReactComponent as Emptyimage } from 'assets/images/empty.svg';
 import PropTypes from 'prop-types';
+
 import style from './Empty.module.scss';
 
 export default function Empty(props) {

client/src/features/FeatureWrapper.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
-import ProtectRoute from '../common/components/protectRoute/ProtectRoute';
 import PropTypes from 'prop-types';
+
+import ProtectRoute from '../common/components/protectRoute/ProtectRoute';
+
 import style from './FeatureWrapper.module.scss';
 
 export default function FeatureWrapper({ children }) {

client/src/features/control/__tests__/MessageControl.test.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import SocketProvider from 'app/context/socketContext';
+
 import MessageControl from '../message/MessageControl';
 
 // need to inject the socket provider to make component

client/src/features/control/__tests__/PlaybackControl.test.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import SocketProvider from 'app/context/socketContext';
+
 import PlaybackControl from '../playback/PlaybackControl';
 
 test('check that playback control renders', async () => {

client/src/features/control/message/InputRow.jsx

@@ -1,9 +1,10 @@
 import React from 'react';
+import { IconButton } from '@chakra-ui/button';
 import { Editable, EditableInput, EditablePreview } from '@chakra-ui/editable';
 import { Tooltip } from '@chakra-ui/tooltip';
-import { IconButton } from '@chakra-ui/button';
 import { IoSunny } from '@react-icons/all-files/io5/IoSunny';
 import PropTypes from 'prop-types';
+
 import style from './MessageControl.module.scss';
 
 export default function InputRow(props) {

client/src/features/control/message/MessageControl.jsx

@@ -1,10 +1,12 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { useSocket } from 'app/context/socketContext';
-import InputRow from './InputRow';
-import { Tooltip } from '@chakra-ui/tooltip';
 import { IconButton } from '@chakra-ui/button';
-import { IoMicSharp } from '@react-icons/all-files/io5/IoMicSharp';
+import { Tooltip } from '@chakra-ui/tooltip';
 import { IoMicOffOutline } from '@react-icons/all-files/io5/IoMicOffOutline';
+import { IoMicSharp } from '@react-icons/all-files/io5/IoMicSharp';
+import { useSocket } from 'app/context/socketContext';
+
+import InputRow from './InputRow';
+
 import style from './MessageControl.module.scss';
 
 export default function MessageControl() {

client/src/features/control/message/MessageControlExport.jsx

@@ -1,11 +1,14 @@
 import React from 'react';
 import { Box } from '@chakra-ui/layout';
-import ErrorBoundary from '../../../common/components/errorBoundary/ErrorBoundary';
-import MessageControl from './MessageControl';
-import style from '../../editors/Editor.module.scss';
 import { FiArrowUpRight } from '@react-icons/all-files/fi/FiArrowUpRight';
+
+import ErrorBoundary from '../../../common/components/errorBoundary/ErrorBoundary';
 import { handleLinks } from '../../../common/utils/linkUtils';
 
+import MessageControl from './MessageControl';
+
+import style from '../../editors/Editor.module.scss';
+
 export default function MessageControlExport() {
   return (
     <Box className={style.messages}>

client/src/features/control/playback/Playback.jsx

@@ -1,8 +1,10 @@
 import React from 'react';
-import StartIconBtn from '../../../common/components/buttons/StartIconBtn';
+import PropTypes from 'prop-types';
+
 import PauseIconBtn from '../../../common/components/buttons/PauseIconBtn';
 import RollIconBtn from '../../../common/components/buttons/RollIconBtn';
-import PropTypes from 'prop-types';
+import StartIconBtn from '../../../common/components/buttons/StartIconBtn';
+
 import style from './PlaybackControl.module.scss';
 
 export default function Playback(props) {

client/src/features/control/playback/PlaybackButtons.jsx

@@ -1,7 +1,8 @@
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
-import Transport from './Transport';
+
 import Playback from './Playback';
+import Transport from './Transport';
 
 const areEqual = (prevProps, nextProps) => {
   return (

client/src/features/control/playback/PlaybackControl.jsx

@@ -1,9 +1,11 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import style from './PlaybackControl.module.scss';
 import { useSocket } from 'app/context/socketContext';
+
 import PlaybackButtons from './PlaybackButtons';
 import PlaybackTimer from './PlaybackTimer';
 
+import style from './PlaybackControl.module.scss';
+
 export default function PlaybackControl() {
   const socket = useSocket();
   const [playback, setPlayback] = useState(null);

client/src/features/control/playback/PlaybackTimer.jsx

@@ -1,9 +1,11 @@
 import React, { memo } from 'react';
-import Countdown from 'common/components/countdown/Countdown';
-import { Tooltip } from '@chakra-ui/react';
 import { Button } from '@chakra-ui/button';
+import { Tooltip } from '@chakra-ui/react';
+import Countdown from 'common/components/countdown/Countdown';
 import PropTypes from 'prop-types';
+
 import { stringFromMillis } from '../../../common/utils/time';
+
 import style from './PlaybackControl.module.scss';
 
 const areEqual = (prevProps, nextProps) => {

client/src/features/control/playback/TimerControlExport.jsx

@@ -1,18 +1,20 @@
 import React from 'react';
 import { Box } from '@chakra-ui/layout';
-import ErrorBoundary from '../../../common/components/errorBoundary/ErrorBoundary';
-import PlaybackControl from './PlaybackControl';
-import styles from '../../editors/Editor.module.scss';
-import style from '../../editors/Editor.module.scss';
 import { FiArrowUpRight } from '@react-icons/all-files/fi/FiArrowUpRight';
+
+import ErrorBoundary from '../../../common/components/errorBoundary/ErrorBoundary';
 import { handleLinks } from '../../../common/utils/linkUtils';
 
+import PlaybackControl from './PlaybackControl';
+
+import style from '../../editors/Editor.module.scss';
+
 export default function TimerControlExport() {
   return (
-    <Box className={styles.playback}>
+    <Box className={style.playback}>
       <h1>Timer Control</h1>
       <FiArrowUpRight className={style.corner} onClick={(event) => handleLinks(event, 'timercontrol')} />
-      <div className={styles.content}>
+      <div className={style.content}>
         <ErrorBoundary>
           <PlaybackControl />
         </ErrorBoundary>

client/src/features/control/playback/Transport.jsx

@@ -1,11 +1,13 @@
 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';
-import { IoArrowUndo } from '@react-icons/all-files/io5/IoArrowUndo';
-import UnloadIconBtn from '../../../common/components/buttons/UnloadIconBtn';
 import PropTypes from 'prop-types';
-import style from './PlaybackControl.module.scss';
+
 import TransportIconBtn from '../../../common/components/buttons/TransportIconBtn';
+import UnloadIconBtn from '../../../common/components/buttons/UnloadIconBtn';
+
+import style from './PlaybackControl.module.scss';
 
 export default function Transport(props) {
   const { playback, selectedId, playbackControl, noEvents } = props;

client/src/features/editors/BlockBlock/BlockBlock.jsx

@@ -1,11 +1,13 @@
 import React from 'react';
-import { HStack } from '@chakra-ui/react';
 import { Draggable } from 'react-beautiful-dnd';
-import { IoRemove } from '@react-icons/all-files/io5/IoRemove';
+import { HStack } from '@chakra-ui/react';
 import { FiMoreVertical } from '@react-icons/all-files/fi/FiMoreVertical';
+import { IoRemove } from '@react-icons/all-files/io5/IoRemove';
+import PropTypes from 'prop-types';
+
 import ActionButtons from '../../../common/components/buttons/ActionButtons';
 import TooltipLoadingActionBtn from '../../../common/components/buttons/TooltipLoadingActionBtn';
-import PropTypes from 'prop-types';
+
 import style from './BlockBlock.module.scss';
 
 export default function BlockBlock(props) {

client/src/features/editors/DelayBlock/DelayBlock.jsx

@@ -1,16 +1,18 @@
 import React, { useCallback } from 'react';
-import { HStack } from '@chakra-ui/react';
 import { Draggable } from 'react-beautiful-dnd';
-import { millisToMinutes } from 'common/utils/dateConfig';
-import { IoRemove } from '@react-icons/all-files/io5/IoRemove';
+import { HStack } from '@chakra-ui/react';
 import { FiCheck } from '@react-icons/all-files/fi/FiCheck';
 import { FiMoreVertical } from '@react-icons/all-files/fi/FiMoreVertical';
-import ActionButtons from '../../../common/components/buttons/ActionButtons';
+import { IoRemove } from '@react-icons/all-files/io5/IoRemove';
 import DelayInput from 'common/input/DelayInput';
+import { millisToMinutes } from 'common/utils/dateConfig';
+import PropTypes from 'prop-types';
+
+import ActionButtons from '../../../common/components/buttons/ActionButtons';
 import TooltipActionBtn from '../../../common/components/buttons/TooltipActionBtn';
 import TooltipLoadingActionBtn from '../../../common/components/buttons/TooltipLoadingActionBtn';
+
 import style from './DelayBlock.module.scss';
-import PropTypes from 'prop-types';
 
 export default function DelayBlock(props) {
   const { eventsHandler, data, index, actionHandler } = props;

client/src/features/editors/Editor.jsx

@@ -1,11 +1,13 @@
 import React, { lazy, useEffect } from 'react';
 import { useDisclosure } from '@chakra-ui/hooks';
-import ModalManager from 'features/modals/ModalManager';
-import ErrorBoundary from 'common/components/errorBoundary/ErrorBoundary';
-import { LoggingProvider } from '../../app/context/LoggingContext';
-import { LocalEventSettingsProvider } from '../../app/context/LocalEventSettingsContext';
 import { Box } from '@chakra-ui/layout';
+import ErrorBoundary from 'common/components/errorBoundary/ErrorBoundary';
+import ModalManager from 'features/modals/ModalManager';
+
+import { LocalEventSettingsProvider } from '../../app/context/LocalEventSettingsContext';
+import { LoggingProvider } from '../../app/context/LoggingContext';
 import MenuBar from '../menu/MenuBar';
+
 import styles from './Editor.module.scss';
 
 const EventList = lazy(() => import('features/editors/list/EventListExport'));

client/src/features/editors/EntryBlock/EntryBlock.jsx

@@ -1,8 +1,10 @@
 import React, { useContext, useEffect, useState } from 'react';
-import { Tooltip } from '@chakra-ui/tooltip';
 import { Checkbox } from '@chakra-ui/react';
-import { LocalEventSettingsContext } from '../../../app/context/LocalEventSettingsContext';
+import { Tooltip } from '@chakra-ui/tooltip';
 import PropTypes from 'prop-types';
+
+import { LocalEventSettingsContext } from '../../../app/context/LocalEventSettingsContext';
+
 import style from './EntryBlock.module.scss';
 
 export default function EntryBlock(props) {

client/src/features/editors/EventBlock/CollapsedBlock.jsx

@@ -1,11 +1,13 @@
 import React, { memo } from 'react';
 import { HStack } from '@chakra-ui/react';
 import { FiMoreVertical } from '@react-icons/all-files/fi/FiMoreVertical';
+import PropTypes from 'prop-types';
+
 import ActionButtons from '../../../common/components/buttons/ActionButtons';
+import PublicIconBtn from '../../../common/components/buttons/PublicIconBtn';
 import EventTimes from '../../../common/components/eventTimes/EventTimes';
 import EditableText from '../../../common/input/EditableText';
-import PublicIconBtn from '../../../common/components/buttons/PublicIconBtn';
-import PropTypes from 'prop-types';
+
 import style from './EventBlock.module.scss';
 
 const areEqual = (prevProps, nextProps) => {

client/src/features/editors/EventBlock/EventBlock.jsx

@@ -1,12 +1,15 @@
 import React, { 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';
-import { Draggable } from 'react-beautiful-dnd';
 import { millisToMinutes } from 'common/utils/dateConfig';
 import PropTypes from 'prop-types';
+
 import { CollapseContext } from '../../../app/context/CollapseContext';
+
 import CollapsedBlock from './CollapsedBlock';
 import ExpandedBlock from './ExpandedBlock';
+
 import style from './EventBlock.module.scss';
 
 export default function EventBlock(props) {

client/src/features/editors/EventBlock/ExpandedBlock.jsx

@@ -1,13 +1,15 @@
 import React, { memo } from 'react';
 import { VStack } from '@chakra-ui/react';
-import { IoRemove } from '@react-icons/all-files/io5/IoRemove';
 import { FiMoreVertical } from '@react-icons/all-files/fi/FiMoreVertical';
+import { IoRemove } from '@react-icons/all-files/io5/IoRemove';
+import PropTypes from 'prop-types';
+
 import ActionButtons from '../../../common/components/buttons/ActionButtons';
-import EventTimesVertical from '../../../common/components/eventTimes/EventTimesVertical';
-import EditableText from '../../../common/input/EditableText';
 import PublicIconBtn from '../../../common/components/buttons/PublicIconBtn';
 import TooltipLoadingActionBtn from '../../../common/components/buttons/TooltipLoadingActionBtn';
-import PropTypes from 'prop-types';
+import EventTimesVertical from '../../../common/components/eventTimes/EventTimesVertical';
+import EditableText from '../../../common/input/EditableText';
+
 import style from './EventBlock.module.scss';
 
 const areEqual = (prevProps, nextProps) => {

client/src/features/editors/ProtectedEditor.jsx

@@ -1,5 +1,7 @@
 import React from 'react';
+
 import ProtectRoute from '../../common/components/protectRoute/ProtectRoute';
+
 import Editor from './Editor';
 
 export default function ProtectedEditor() {

client/src/features/editors/list/EventList.jsx

@@ -1,12 +1,15 @@
 import React, { createRef, useCallback, useContext, useEffect, useState } from 'react';
-import style from './List.module.scss';
+import { DragDropContext, Droppable } from 'react-beautiful-dnd';
 import { useSocket } from 'app/context/socketContext';
 import Empty from 'common/state/Empty';
-import EventListItem from './EventListItem';
-import { DragDropContext, Droppable } from 'react-beautiful-dnd';
-import EntryBlock from '../EntryBlock/EntryBlock';
+
 import { CursorContext } from '../../../app/context/CursorContext';
 import { LocalEventSettingsContext } from '../../../app/context/LocalEventSettingsContext';
+import EntryBlock from '../EntryBlock/EntryBlock';
+
+import EventListItem from './EventListItem';
+
+import style from './List.module.scss';
 
 export default function EventList(props) {
   const { events, eventsHandler } = props;

client/src/features/editors/list/EventListExport.jsx

@@ -1,11 +1,14 @@
 import React from 'react';
-import { CursorProvider } from '../../../app/context/CursorContext';
-import { CollapseProvider } from '../../../app/context/CollapseContext';
 import { Box } from '@chakra-ui/layout';
-import ErrorBoundary from '../../../common/components/errorBoundary/ErrorBoundary';
-import EventListWrapper from './EventListWrapper';
 import { FiArrowUpRight } from '@react-icons/all-files/fi/FiArrowUpRight';
+
+import { CollapseProvider } from '../../../app/context/CollapseContext';
+import { CursorProvider } from '../../../app/context/CursorContext';
+import ErrorBoundary from '../../../common/components/errorBoundary/ErrorBoundary';
 import { handleLinks } from '../../../common/utils/linkUtils';
+
+import EventListWrapper from './EventListWrapper';
+
 import style from '../Editor.module.scss';
 
 export default function EventListExport() {

client/src/features/editors/list/EventListItem.jsx

@@ -1,11 +1,12 @@
 import React, { memo, useCallback, useContext } from 'react';
-import DelayBlock from '../DelayBlock/DelayBlock';
-import BlockBlock from '../BlockBlock/BlockBlock';
-import EventBlock from '../EventBlock/EventBlock';
-import { LoggingContext } from '../../../app/context/LoggingContext';
-import { LocalEventSettingsContext } from '../../../app/context/LocalEventSettingsContext';
 import PropTypes from 'prop-types';
 
+import { LocalEventSettingsContext } from '../../../app/context/LocalEventSettingsContext';
+import { LoggingContext } from '../../../app/context/LoggingContext';
+import BlockBlock from '../BlockBlock/BlockBlock';
+import DelayBlock from '../DelayBlock/DelayBlock';
+import EventBlock from '../EventBlock/EventBlock';
+
 const areEqual = (prevProps, nextProps) => {
   return (
     prevProps.data.revision === nextProps.data.revision &&

client/src/features/editors/list/EventListWrapper.jsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { useMutation, useQueryClient } from 'react-query';
 import { EVENTS_TABLE } from 'app/api/apiConstants';
-import { LoggingContext } from '../../../app/context/LoggingContext';
 import {
   fetchAllEvents,
   requestApplyDelay,
@@ -13,10 +12,14 @@ import {
   requestReorder,
 } from 'app/api/eventsApi.js';
 import { useFetch } from 'app/hooks/useFetch.js';
-import EventList from './EventList';
-import EventListMenu from 'features/menu/EventListMenu.jsx';
 import Empty from 'common/state/Empty';
+import EventListMenu from 'features/menu/EventListMenu.jsx';
+
 import { CollapseContext } from '../../../app/context/CollapseContext';
+import { LoggingContext } from '../../../app/context/LoggingContext';
+
+import EventList from './EventList';
+
 import styles from '../Editor.module.scss';
 
 export default function EventListWrapper() {

client/src/features/info/Info.jsx

@@ -1,9 +1,11 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect,useState } from 'react';
 import { useSocket } from 'app/context/socketContext';
-import style from './Info.module.scss';
-import InfoTitle from './InfoTitle';
+
 import InfoLogger from './InfoLogger';
 import InfoNif from './InfoNif';
+import InfoTitle from './InfoTitle';
+
+import style from './Info.module.scss';
 
 export default function Info() {
   const socket = useSocket();

client/src/features/info/InfoExport.jsx

@@ -1,11 +1,14 @@
 import React from 'react';
 import { Box } from '@chakra-ui/layout';
 import { FiArrowUpRight } from '@react-icons/all-files/fi/FiArrowUpRight';
+
 import ErrorBoundary from '../../common/components/errorBoundary/ErrorBoundary';
-import Info from './Info';
-import style from '../editors/Editor.module.scss';
 import { handleLinks } from '../../common/utils/linkUtils';
 
+import Info from './Info';
+
+import style from '../editors/Editor.module.scss';
+
 export default function InfoExport() {
   return (
     <Box className={style.info}>

client/src/features/info/InfoLogger.jsx

@@ -1,6 +1,8 @@
 import React, { useCallback, useContext, useEffect, useState } from 'react';
-import CollapseBar from '../../common/components/collapseBar/CollapseBar';
+
 import { LoggingContext } from '../../app/context/LoggingContext';
+import CollapseBar from '../../common/components/collapseBar/CollapseBar';
+
 import style from './InfoLogger.module.scss';
 
 export default function InfoLogger() {

client/src/features/info/InfoNif.jsx

@@ -2,8 +2,10 @@ import React, { useState } from 'react';
 import { APP_TABLE } from 'app/api/apiConstants';
 import { getInfo, ontimePlaceholderInfo } from 'app/api/ontimeApi';
 import { useFetch } from 'app/hooks/useFetch';
+
 import CollapseBar from '../../common/components/collapseBar/CollapseBar';
 import { openLink } from '../../common/utils/linkUtils';
+
 import style from './Info.module.scss';
 
 export default function InfoNif() {

client/src/features/info/InfoTitle.jsx

@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
+
 import CollapseBar from '../../common/components/collapseBar/CollapseBar';
+
 import style from './Info.module.scss';
 
 export default function InfoTitle(props) {

client/src/features/info/__tests__/Info.test.js

@@ -1,7 +1,8 @@
 import React from 'react';
+import { QueryClient, QueryClientProvider } from 'react-query';
 import { render, screen } from '@testing-library/react';
 import SocketProvider from 'app/context/socketContext';
-import { QueryClient, QueryClientProvider } from 'react-query';
+
 import Info from '../Info';
 
 const queryClient = new QueryClient();

client/src/features/menu/EventListMenu.jsx

@@ -1,14 +1,17 @@
 import React, { memo, useCallback, useContext } from 'react';
 import { ButtonGroup, HStack } from '@chakra-ui/react';
-import { CursorContext } from '../../app/context/CursorContext';
-import { FiChevronsUp } from '@react-icons/all-files/fi/FiChevronsUp';
 import { FiChevronsDown } from '@react-icons/all-files/fi/FiChevronsDown';
+import { FiChevronsUp } from '@react-icons/all-files/fi/FiChevronsUp';
 import { FiTarget } from '@react-icons/all-files/fi/FiTarget';
-import { IoCaretUp } from '@react-icons/all-files/io5/IoCaretUp';
 import { IoCaretDown } from '@react-icons/all-files/io5/IoCaretDown';
-import TooltipActionBtn from '../../common/components/buttons/TooltipActionBtn';
-import MenuActionButtons from './MenuActionButtons';
+import { IoCaretUp } from '@react-icons/all-files/io5/IoCaretUp';
 import PropTypes from 'prop-types';
+
+import { CursorContext } from '../../app/context/CursorContext';
+import TooltipActionBtn from '../../common/components/buttons/TooltipActionBtn';
+
+import MenuActionButtons from './MenuActionButtons';
+
 import style from './EventListMenu.module.css';
 
 const EventListMenu = ({ eventsHandler }) => {

client/src/features/menu/MenuActionButtons.jsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import { Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/menu';
 import { IconButton } from '@chakra-ui/button';
+import { Divider } from '@chakra-ui/layout';
+import { Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/menu';
+import { Tooltip } from '@chakra-ui/tooltip';
 import { FiClock } from '@react-icons/all-files/fi/FiClock';
 import { FiMinusCircle } from '@react-icons/all-files/fi/FiMinusCircle';
 import { FiPlus } from '@react-icons/all-files/fi/FiPlus';
 import { FiTrash2 } from '@react-icons/all-files/fi/FiTrash2';
-import { Divider } from '@chakra-ui/layout';
-import { Tooltip } from '@chakra-ui/tooltip';
 import PropTypes from 'prop-types';
 
 export default function MenuActionButtons(props) {

client/src/features/menu/MenuBar.jsx

@@ -1,18 +1,20 @@
 import React, { useCallback, useContext, useEffect, useRef } from 'react';
 import { useMutation, useQueryClient } from 'react-query';
 import { VStack } from '@chakra-ui/react';
-import { downloadEvents, uploadEvents } from 'app/api/ontimeApi';
+import { FiDownload } from '@react-icons/all-files/fi/FiDownload';
+import { FiHelpCircle } from '@react-icons/all-files/fi/FiHelpCircle';
 import { FiMaximize } from '@react-icons/all-files/fi/FiMaximize';
 import { FiMinimize } from '@react-icons/all-files/fi/FiMinimize';
-import { FiHelpCircle } from '@react-icons/all-files/fi/FiHelpCircle';
 import { FiSettings } from '@react-icons/all-files/fi/FiSettings';
 import { FiUpload } from '@react-icons/all-files/fi/FiUpload';
-import { FiDownload } from '@react-icons/all-files/fi/FiDownload';
 import { EVENTS_TABLE } from 'app/api/apiConstants';
-import { LoggingContext } from '../../app/context/LoggingContext';
-import TooltipActionBtn from '../../common/components/buttons/TooltipActionBtn';
-import QuitIconBtn from '../../common/components/buttons/QuitIconBtn';
+import { downloadEvents, uploadEvents } from 'app/api/ontimeApi';
 import PropTypes from 'prop-types';
+
+import { LoggingContext } from '../../app/context/LoggingContext';
+import QuitIconBtn from '../../common/components/buttons/QuitIconBtn';
+import TooltipActionBtn from '../../common/components/buttons/TooltipActionBtn';
+
 import style from './MenuBar.module.scss';
 
 export default function MenuBar(props) {

client/src/features/menu/__tests__/EventListMenu.test.js

@@ -1,8 +1,9 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
-import MenuBar from '../MenuBar';
-import { queryClientMock } from '../../../__mocks__/QueryClient.mock';
 import { QueryClientProvider } from 'react-query';
+import { render, screen } from '@testing-library/react';
+
+import { queryClientMock } from '../../../__mocks__/QueryClient.mock';
+import MenuBar from '../MenuBar';
 
 const onOpenHandler = jest.fn();
 const onCloseHandler = jest.fn();

client/src/features/menu/__tests__/MenuActionButtons.test.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
+
 import MenuActionButtons from "../MenuActionButtons";
 
 const actionHandler = jest.fn();

client/src/features/menu/__tests__/MenuBar.test.js

@@ -1,8 +1,9 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
-import MenuBar from '../MenuBar';
-import { queryClientMock } from '../../../__mocks__/QueryClient.mock';
 import { QueryClientProvider } from 'react-query';
+import { render, screen } from '@testing-library/react';
+
+import { queryClientMock } from '../../../__mocks__/QueryClient.mock';
+import MenuBar from '../MenuBar';
 
 const onOpenHandler = jest.fn();
 const onCloseHandler = jest.fn();

client/src/features/modals/AliasesModal.jsx

@@ -1,20 +1,23 @@
 /* eslint-disable jsx-a11y/anchor-has-content */
 import React, { 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';
+import { Tooltip } from '@chakra-ui/tooltip';
 import { IoInformationCircleOutline } from '@react-icons/all-files/io5/IoInformationCircleOutline';
 import { IoRemove } from '@react-icons/all-files/io5/IoRemove';
 import { IoSunny } from '@react-icons/all-files/io5/IoSunny';
-import { ModalBody } from '@chakra-ui/modal';
-import { Tooltip } from '@chakra-ui/tooltip';
-import { Input } from '@chakra-ui/react';
-import { getAliases, postAliases } from '../../app/api/ontimeApi';
-import { useFetch } from 'app/hooks/useFetch';
 import { ALIASES } from 'app/api/apiConstants';
+import { useFetch } from 'app/hooks/useFetch';
+
+import { getAliases, postAliases } from '../../app/api/ontimeApi';
 import { viewerLocations } from '../../app/appConstants';
 import { LoggingContext } from '../../app/context/LoggingContext';
 import { validateAlias } from '../../app/utils/aliases';
-import SubmitContainer from './SubmitContainer';
 import { handleLinks, host } from '../../common/utils/linkUtils';
+
+import SubmitContainer from './SubmitContainer';
+
 import style from './Modals.module.scss';
 
 export default function AliasesModal() {

client/src/features/modals/AppSettingsModal.jsx

@@ -1,18 +1,21 @@
 import React, { useCallback, useContext, useEffect, useState } from 'react';
+import { IconButton } from '@chakra-ui/button';
 import { ModalBody } from '@chakra-ui/modal';
 import { Checkbox, FormControl, FormLabel, Input, PinInput, PinInputField } from '@chakra-ui/react';
-import { getSettings, ontimePlaceholderSettings, postSettings } from 'app/api/ontimeApi';
-import { useFetch } from 'app/hooks/useFetch';
-import { APP_SETTINGS } from 'app/api/apiConstants';
-import style from './Modals.module.scss';
-import { LoggingContext } from '../../app/context/LoggingContext';
-import { IconButton } from '@chakra-ui/button';
 import { FiEye } from '@react-icons/all-files/fi/FiEye';
 import { FiX } from '@react-icons/all-files/fi/FiX';
-import SubmitContainer from './SubmitContainer';
-import { inputProps } from './modalHelper';
+import { APP_SETTINGS } from 'app/api/apiConstants';
+import { getSettings, ontimePlaceholderSettings, postSettings } from 'app/api/ontimeApi';
+import { useFetch } from 'app/hooks/useFetch';
+
 import { LocalEventSettingsContext } from '../../app/context/LocalEventSettingsContext';
+import { LoggingContext } from '../../app/context/LoggingContext';
 import TooltipActionBtn from '../../common/components/buttons/TooltipActionBtn';
+
+import { inputProps } from './modalHelper';
+import SubmitContainer from './SubmitContainer';
+
+import style from './Modals.module.scss';
 const version = require('../../../package.json').version
 
 export default function AppSettingsModal() {

client/src/features/modals/EventSettingsModal.jsx

@@ -1,13 +1,16 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { ModalBody } from '@chakra-ui/modal';
 import { FormLabel, Input, Textarea } from '@chakra-ui/react';
+import { EVENT_TABLE } from 'app/api/apiConstants';
 import { fetchEvent, postEvent } from 'app/api/eventApi';
 import { useFetch } from 'app/hooks/useFetch';
-import { EVENT_TABLE } from 'app/api/apiConstants';
-import style from './Modals.module.scss';
+
 import { eventPlaceholderSettings } from '../../app/api/ontimeApi';
-import SubmitContainer from './SubmitContainer';
+
 import { inputProps } from './modalHelper';
+import SubmitContainer from './SubmitContainer';
+
+import style from './Modals.module.scss';
 
 export default function SettingsModal() {
   const { data, status, refetch } = useFetch(EVENT_TABLE, fetchEvent);

client/src/features/modals/IntegrationSettingsModal.jsx

@@ -1,14 +1,17 @@
 import React, { 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';
+import { APP_TABLE } from 'app/api/apiConstants';
 import { getInfo, httpPlaceholder, ontimeVars, postInfo } from 'app/api/ontimeApi';
 import { useFetch } from 'app/hooks/useFetch';
-import { APP_TABLE } from 'app/api/apiConstants';
-import style from './Modals.module.scss';
+
 import { LoggingContext } from '../../app/context/LoggingContext';
-import { FiInfo } from '@react-icons/all-files/fi/FiInfo';
-import SubmitContainer from './SubmitContainer';
+
 import { inputProps } from './modalHelper';
+import SubmitContainer from './SubmitContainer';
+
+import style from './Modals.module.scss';
 
 export default function IntegrationSettingsModal() {
   const { data, status, refetch } = useFetch(APP_TABLE, getInfo);

client/src/features/modals/ModalManager.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import {
   Modal,
   ModalCloseButton,
@@ -8,12 +7,14 @@ import {
   ModalOverlay,
 } from '@chakra-ui/modal';
 import { Tab, TabList, TabPanel, TabPanels, Tabs } from '@chakra-ui/tabs';
-import EventSettingsModal from './EventSettingsModal';
-import OscSettingsModal from './OscSettingsModal';
+import PropTypes from 'prop-types';
+
 import AliasesModal from './AliasesModal';
 import AppSettingsModal from './AppSettingsModal';
-import TableOptionsModal from './TableOptionsModal';
+import EventSettingsModal from './EventSettingsModal';
 import IntegrationSettingsModal from './IntegrationSettingsModal';
+import OscSettingsModal from './OscSettingsModal';
+import TableOptionsModal from './TableOptionsModal';
 
 export default function ModalManager(props) {
   const { isOpen, onClose } = props;

client/src/features/modals/OscSettingsModal.jsx

@@ -1,16 +1,19 @@
 import React, { 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';
+import { OSC_SETTINGS } from 'app/api/apiConstants';
 import { getOSC, oscPlaceholderSettings, postOSC } from 'app/api/ontimeApi';
 import { useFetch } from 'app/hooks/useFetch';
-import { OSC_SETTINGS } from 'app/api/apiConstants';
-import style from './Modals.module.scss';
+
 import { LoggingContext } from '../../app/context/LoggingContext';
-import SubmitContainer from './SubmitContainer';
-import { inputProps, portInputProps } from './modalHelper';
-import { IoInformationCircleOutline } from '@react-icons/all-files/io5/IoInformationCircleOutline';
 import EnableBtn from '../../common/components/buttons/EnableBtn';
 
+import { inputProps, portInputProps } from './modalHelper';
+import SubmitContainer from './SubmitContainer';
+
+import style from './Modals.module.scss';
+
 // currently defined endpoints
 // temporary
 const oscCycleEndpoints = [

client/src/features/modals/SubmitContainer.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
-import style from './Modals.module.scss';
 import { Button } from '@chakra-ui/button';
 import PropTypes from 'prop-types';
 
+import style from './Modals.module.scss';
+
 export default function SubmitContainer(props) {
   const { submitting, changed, revert, status } = props;
 

client/src/features/modals/TableOptionsModal.jsx

@@ -1,14 +1,17 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { ModalBody } from '@chakra-ui/modal';
 import { Input } from '@chakra-ui/react';
-import { getUserFields, postUserFields, userFieldsPlaceholder } from '../../app/api/ontimeApi';
-import { useFetch } from 'app/hooks/useFetch';
-import { USERFIELDS } from 'app/api/apiConstants';
-import SubmitContainer from './SubmitContainer';
-import style from './Modals.module.scss';
 import { IoInformationCircleOutline } from '@react-icons/all-files/io5/IoInformationCircleOutline';
+import { USERFIELDS } from 'app/api/apiConstants';
+import { useFetch } from 'app/hooks/useFetch';
+
+import { getUserFields, postUserFields, userFieldsPlaceholder } from '../../app/api/ontimeApi';
 import { handleLinks, host } from '../../common/utils/linkUtils';
 
+import SubmitContainer from './SubmitContainer';
+
+import style from './Modals.module.scss';
+
 export default function TableOptionsModal() {
   const { data, status, refetch } = useFetch(USERFIELDS, getUserFields);
   const [changed, setChanged] = useState(false);

client/src/features/table/OntimeTable.jsx

@@ -1,8 +1,6 @@
 import React, { useCallback, useContext, useEffect, useMemo } from 'react';
-import { TableSettingsContext } from '../../app/context/TableSettingsContext';
 import { useBlockLayout, useColumnOrder, useResizeColumns, useTable } from 'react-table';
 import { Tooltip } from '@chakra-ui/tooltip';
-import PropTypes from 'prop-types';
 import {
   closestCenter,
   DndContext,
@@ -17,14 +15,19 @@ import {
   SortableContext,
   sortableKeyboardCoordinates,
 } from '@dnd-kit/sortable';
+import PropTypes from 'prop-types';
+
+import { TableSettingsContext } from '../../app/context/TableSettingsContext';
 import { useLocalStorage } from '../../app/hooks/useLocalStorage';
-import { defaultColumnOrder, defaultHiddenColumns } from './defaults';
-import { makeColumns } from './columns';
-import EventRow from './tableRows/EventRow';
-import DelayRow from './tableRows/DelayRow';
-import BlockRow from './tableRows/BlockRow';
+
 import SortableCell from './tableElements/SortableCell';
 import TableSettings from './tableElements/TableSettings';
+import BlockRow from './tableRows/BlockRow';
+import DelayRow from './tableRows/DelayRow';
+import EventRow from './tableRows/EventRow';
+import { makeColumns } from './columns';
+import { defaultColumnOrder, defaultHiddenColumns } from './defaults';
+
 import style from './Table.module.scss';
 
 export default function OntimeTable({ tableData, userFields, handleUpdate, selectedId }) {

client/src/features/table/ProtectedTable.jsx

@@ -1,7 +1,9 @@
 import React from 'react';
-import ProtectRoute from '../../common/components/protectRoute/ProtectRoute';
-import TableWrapper from './TableWrapper';
+
 import { TableSettingsProvider } from '../../app/context/TableSettingsContext';
+import ProtectRoute from '../../common/components/protectRoute/ProtectRoute';
+
+import TableWrapper from './TableWrapper';
 
 export default function ProtectedTable() {
   return (

client/src/features/table/TableHeader.jsx

@@ -1,16 +1,19 @@
 import React, { useContext, useEffect, useState } from 'react';
-import { useFetch } from '../../app/hooks/useFetch';
-import { TableSettingsContext } from '../../app/context/TableSettingsContext';
+import { Tooltip } from '@chakra-ui/tooltip';
+import { FiSettings } from '@react-icons/all-files/fi/FiSettings';
+import { FiTarget } from '@react-icons/all-files/fi/FiTarget';
+import { IoMoon } from '@react-icons/all-files/io5/IoMoon';
+
 import { EVENT_TABLE } from '../../app/api/apiConstants';
 import { fetchEvent } from '../../app/api/eventApi';
-import { FiSettings } from '@react-icons/all-files/fi/FiSettings';
-import { IoMoon } from '@react-icons/all-files/io5/IoMoon';
-import { FiTarget } from '@react-icons/all-files/fi/FiTarget';
 import { useSocket } from '../../app/context/socketContext';
+import { TableSettingsContext } from '../../app/context/TableSettingsContext';
+import { useFetch } from '../../app/hooks/useFetch';
 import { formatDisplay } from '../../common/utils/dateConfig';
-import { Tooltip } from '@chakra-ui/tooltip';
-import PlaybackIcon from './tableElements/PlaybackIcon';
 import { stringFromMillis } from '../../common/utils/time';
+
+import PlaybackIcon from './tableElements/PlaybackIcon';
+
 import style from './Table.module.scss';
 
 export default function TableHeader() {

client/src/features/table/TableWrapper.jsx

@@ -1,13 +1,16 @@
 import React, { useCallback, useContext, useEffect, useState } from 'react';
-import { useFetch } from '../../app/hooks/useFetch';
-import { useSocket } from '../../app/context/socketContext';
-import { TableSettingsContext } from '../../app/context/TableSettingsContext';
+
 import { EVENTS_TABLE, USERFIELDS } from '../../app/api/apiConstants';
 import { fetchAllEvents, requestPatch } from '../../app/api/eventsApi';
-import TableHeader from './TableHeader';
-import OntimeTable from './OntimeTable';
-import useMutateEvents from '../../app/hooks/useMutateEvents';
 import { getUserFields } from '../../app/api/ontimeApi';
+import { useSocket } from '../../app/context/socketContext';
+import { TableSettingsContext } from '../../app/context/TableSettingsContext';
+import { useFetch } from '../../app/hooks/useFetch';
+import useMutateEvents from '../../app/hooks/useMutateEvents';
+
+import OntimeTable from './OntimeTable';
+import TableHeader from './TableHeader';
+
 import style from './Table.module.scss';
 
 export default function TableWrapper() {

client/src/features/table/columns.jsx

@@ -1,7 +1,10 @@
 import React from 'react';
 import { FiCheck } from '@react-icons/all-files/fi/FiCheck';
-import EditableCell from './tableElements/EditableCell';
+
 import { stringFromMillis } from '../../common/utils/time.js';
+
+import EditableCell from './tableElements/EditableCell';
+
 import style from './Table.module.scss';
 
 /**

client/src/features/table/tableElements/EditableCell.jsx

@@ -1,7 +1,8 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { AutoTextArea } from '../../../common/input/AutoTextArea';
 import PropTypes from 'prop-types';
 
+import { AutoTextArea } from '../../../common/input/AutoTextArea';
+
 /**
  * Shamelessly copied from react-table docs
  * Plugged into chakra-ui editable component

client/src/features/table/tableElements/PlaybackIcon.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { IoPlay } from '@react-icons/all-files/io5/IoPlay';
-import { IoTimeOutline } from '@react-icons/all-files/io5/IoTimeOutline';
-import { IoPause } from '@react-icons/all-files/io5/IoPause';
-import { IoStop } from '@react-icons/all-files/io5/IoStop';
 import { Tooltip } from '@chakra-ui/tooltip';
+import { IoPause } from '@react-icons/all-files/io5/IoPause';
+import { IoPlay } from '@react-icons/all-files/io5/IoPlay';
+import { IoStop } from '@react-icons/all-files/io5/IoStop';
+import { IoTimeOutline } from '@react-icons/all-files/io5/IoTimeOutline';
+import PropTypes from 'prop-types';
 
 export default function PlaybackIcon(props) {
   const { state } = props;

client/src/features/table/tableElements/SortableCell.jsx

@@ -3,6 +3,7 @@ import { Tooltip } from '@chakra-ui/tooltip';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import PropTypes from 'prop-types';
+
 import styles from '../Table.module.scss';
 
 export default function SortableCell({ column }) {

client/src/features/table/tableElements/TableSettings.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Button } from '@chakra-ui/button';
 import PropTypes from 'prop-types';
+
 import style from '../Table.module.scss';
 
 // reusable button styles

client/src/features/table/tableRows/BlockRow.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+
 import style from '../Table.module.scss';
 
 export default function BlockRow(props) {

client/src/features/table/tableRows/DelayRow.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+
 import { millisToMinutes } from '../../../common/utils/dateConfig';
+
 import style from '../Table.module.scss';
 
 export default function DelayRow(props) {

client/src/features/table/tableRows/EventRow.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import Color from 'color';
+import PropTypes from 'prop-types';
+
 import style from '../Table.module.scss';
 
 /**

client/src/features/viewers/ViewWrapper.jsx

@@ -1,10 +1,11 @@
 /* eslint-disable react/display-name */
 import React, { useEffect, useState } from 'react';
-import { fetchAllEvents } from 'app/api/eventsApi';
+import { EVENT_TABLE, EVENTS_TABLE } from 'app/api/apiConstants';
 import { fetchEvent } from 'app/api/eventApi';
+import { fetchAllEvents } from 'app/api/eventsApi';
 import { useSocket } from 'app/context/socketContext';
 import { useFetch } from 'app/hooks/useFetch';
-import { EVENT_TABLE, EVENTS_TABLE } from 'app/api/apiConstants';
+
 import { stringFromMillis } from '../../common/utils/time';
 
 const withSocket = (Component) => {

client/src/features/viewers/backstage/StageManager.jsx

@@ -1,13 +1,15 @@
 import React, { useEffect, useState } from 'react';
 import QRCode from 'react-qr-code';
-import { AnimatePresence, motion } from 'framer-motion';
-import { formatDisplay } from 'common/utils/dateConfig';
-import Paginator from 'common/components/views/Paginator';
 import NavLogo from 'common/components/nav/NavLogo';
+import Paginator from 'common/components/views/Paginator';
 import TitleSide from 'common/components/views/TitleSide';
+import { formatDisplay } from 'common/utils/dateConfig';
+import { AnimatePresence, motion } from 'framer-motion';
+import PropTypes from 'prop-types';
+
 import { getEventsWithDelay } from '../../../common/utils/eventsManager';
 import { titleVariants } from '../common/animation';
-import PropTypes from 'prop-types';
+
 import style from './StageManager.module.scss';
 
 export default function StageManager(props) {