Refactor imports

* refactor: implement import lint

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