Refactor imports

* refactor: implement import lint

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) {

client/src/features/viewers/countdown/Countdown.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export default function Countdown(props) {
+  return (
+    <div>
+      Countdown
+    </div>
+  )
+}
+
+Countdown.propTypes={
+
+}

client/src/features/viewers/foh/Public.jsx

@@ -1,11 +1,13 @@
 import React, { useEffect, useState } from 'react';
 import QRCode from 'react-qr-code';
-import { AnimatePresence, motion } from 'framer-motion';
-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 { titleVariants } from '../common/animation';
+import { AnimatePresence, motion } from 'framer-motion';
 import PropTypes from 'prop-types';
+
+import { titleVariants } from '../common/animation';
+
 import style from './Public.module.scss';
 
 export default function Public(props) {

client/src/features/viewers/production/Pip.jsx

@@ -1,11 +1,12 @@
 import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import QRCode from 'react-qr-code';
-import { AnimatePresence, motion } from 'framer-motion';
-import Paginator from 'common/components/views/Paginator';
-import NavLogo from 'common/components/nav/NavLogo';
-import { formatDisplay } from 'common/utils/dateConfig';
 import { ReactComponent as Emptyimage } from 'assets/images/empty.svg';
+import NavLogo from 'common/components/nav/NavLogo';
+import Paginator from 'common/components/views/Paginator';
+import { formatDisplay } from 'common/utils/dateConfig';
+import { AnimatePresence, motion } from 'framer-motion';
 import PropTypes from 'prop-types';
+
 import style from './Pip.module.scss';
 
 export default function Pip(props) {

client/src/features/viewers/production/lower/LowerClean.jsx

@@ -1,8 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
-import style from './LowerClean.module.css';
+
 import NavLogo from "../../../../common/components/nav/NavLogo";
 
+import style from './LowerClean.module.css';
+
 export default function LowerClean(props) {
   const { lower, title, options } = props;
   const defaults = {

client/src/features/viewers/production/lower/LowerLines.jsx

@@ -1,8 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
-import style from './LowerLines.module.css';
+
 import NavLogo from "../../../../common/components/nav/NavLogo";
 
+import style from './LowerLines.module.css';
+
 export default function LowerLines(props) {
   const { lower, title, options } = props;
   const defaults = {

client/src/features/viewers/production/lower/LowerWrapper.jsx

@@ -1,7 +1,8 @@
 import React, { memo, useEffect, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
+
 import LowerClean from './LowerClean';
 import LowerLines from './LowerLines';
-import { useSearchParams } from 'react-router-dom';
 const isEqual = require('react-fast-compare');
 
 const areEqual = (prevProps, nextProps) => {

client/src/features/viewers/studio/StudioClock.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
-import style from './StudioClock.module.scss';
+import PropTypes from 'prop-types';
 import useFitText from 'use-fit-text';
+
 import NavLogo from '../../../common/components/nav/NavLogo';
 import { formatDisplay } from '../../../common/utils/dateConfig';
 import {
@@ -8,7 +9,8 @@ import {
   getEventsWithDelay,
   trimEventlist,
 } from '../../../common/utils/eventsManager';
-import PropTypes from 'prop-types';
+
+import style from './StudioClock.module.scss';
 
 export default function StudioClock(props) {
   const { title, time, backstageEvents, selectedId, nextId, onAir } = props;

client/src/features/viewers/timer/MinimalTimer.jsx

@@ -1,7 +1,9 @@
 import React, { useEffect } from 'react';
-import { formatDisplay } from '../../../common/utils/dateConfig';
-import NavLogo from '../../../common/components/nav/NavLogo';
 import PropTypes from 'prop-types';
+
+import NavLogo from '../../../common/components/nav/NavLogo';
+import { formatDisplay } from '../../../common/utils/dateConfig';
+
 import style from './MinimalTimer.module.scss';
 
 export default function MinimalTimer(props) {

client/src/features/viewers/timer/Timer.jsx

@@ -1,11 +1,12 @@
 import React, { useEffect, useState } from 'react';
-import { AnimatePresence, motion } from 'framer-motion';
 import { useSearchParams } from 'react-router-dom';
 import Countdown from 'common/components/countdown/Countdown';
 import MyProgressBar from 'common/components/myProgressBar/MyProgressBar';
 import NavLogo from 'common/components/nav/NavLogo';
 import TitleCard from 'common/components/views/TitleCard';
+import { AnimatePresence, motion } from 'framer-motion';
 import PropTypes from 'prop-types';
+
 import style from './Timer.module.scss';
 
 export default function Timer(props) {