diff --git a/client/jsconfig.json b/client/jsconfig.json new file mode 100644 index 000000000..ec9aa3f73 --- /dev/null +++ b/client/jsconfig.json @@ -0,0 +1,6 @@ +{ + "compilerOptions": { + "baseUrl": "src" + }, + "include": ["src"] +} \ No newline at end of file diff --git a/client/src/App.jsx b/client/src/App.jsx index f69127e74..1d009bcba 100644 --- a/client/src/App.jsx +++ b/client/src/App.jsx @@ -2,26 +2,26 @@ import { lazy, Suspense } from 'react'; import { Route, Switch } from 'react-router-dom'; import './App.css'; import { QueryClient, QueryClientProvider } from 'react-query'; -import SocketProvider from './app/context/socketContext'; -import withSocket from './features/viewers/ViewWrapper'; +import SocketProvider from 'app/context/socketContext'; +import withSocket from 'features/viewers/ViewWrapper'; import { ReactQueryDevtools } from 'react-query/devtools'; -import Empty from './common/state/Empty'; +import Empty from 'common/state/Empty'; -const Editor = lazy(() => import('./features/editors/Editor')); +const Editor = lazy(() => import('features/editors/Editor')); const PresenterView = lazy(() => - import('./features/viewers/presenter/PresenterView') + import('features/viewers/presenter/PresenterView') ); const PresenterSimple = lazy(() => - import('./features/viewers/presenter/PresenterSimple') + import('features/viewers/presenter/PresenterSimple') ); const StageManager = lazy(() => - import('./features/viewers/backstage/StageManager') + import('features/viewers/backstage/StageManager') ); -const Public = lazy(() => import('./features/viewers/foh/Public')); +const Public = lazy(() => import('features/viewers/foh/Public')); const Lower = lazy(() => - import('./features/viewers/production/lower/LowerWrapper') + import('features/viewers/production/lower/LowerWrapper') ); -const Pip = lazy(() => import('./features/viewers/production/Pip')); +const Pip = lazy(() => import('features/viewers/production/Pip')); const queryClient = new QueryClient(); // Seemed to cause issues diff --git a/client/src/common/components/countdown/Countdown.jsx b/client/src/common/components/countdown/Countdown.jsx index 552294d2a..a6b42b29b 100644 --- a/client/src/common/components/countdown/Countdown.jsx +++ b/client/src/common/components/countdown/Countdown.jsx @@ -1,5 +1,5 @@ import { memo } from 'react'; -import { formatDisplay } from '../../dateConfig'; +import { formatDisplay } from 'common/dateConfig'; import styles from './Countdown.module.css'; const Countdown = ({ time, small, negative, hideZeroHours }) => { diff --git a/client/src/common/components/eventTimes/EventTimes.jsx b/client/src/common/components/eventTimes/EventTimes.jsx index 568b40b2e..0b7b66fd1 100644 --- a/client/src/common/components/eventTimes/EventTimes.jsx +++ b/client/src/common/components/eventTimes/EventTimes.jsx @@ -1,5 +1,5 @@ -import EditableTimer from '../../input/EditableTimer'; -import { showWarningToast } from '../../helpers/toastManager'; +import EditableTimer from 'common/input/EditableTimer'; +import { showWarningToast } from 'common/helpers/toastManager'; export default function EventTimes(props) { const { actionHandler, delay, timeStart, timeEnd } = props; diff --git a/client/src/common/components/eventTimes/EventTimesVertical.jsx b/client/src/common/components/eventTimes/EventTimesVertical.jsx index 5528ebf25..2944de8aa 100644 --- a/client/src/common/components/eventTimes/EventTimesVertical.jsx +++ b/client/src/common/components/eventTimes/EventTimesVertical.jsx @@ -1,6 +1,6 @@ -import EditableTimer from '../../input/EditableTimer'; -import { showWarningToast } from '../../helpers/toastManager'; -import { stringFromMillis } from '../../dateConfig'; +import EditableTimer from 'common/input/EditableTimer'; +import { showWarningToast } from 'common/helpers/toastManager'; +import { stringFromMillis } from 'common/dateConfig'; const label = { fontSize: '0.75em', diff --git a/client/src/common/components/myProgressBar/MyProgressBar.jsx b/client/src/common/components/myProgressBar/MyProgressBar.jsx index 88b018cbd..dda5e48c6 100644 --- a/client/src/common/components/myProgressBar/MyProgressBar.jsx +++ b/client/src/common/components/myProgressBar/MyProgressBar.jsx @@ -1,4 +1,4 @@ -import { clamp } from '../../../app/utils'; +import { clamp } from 'app/utils'; import styles from './MyProgressBar.module.css'; export default function MyProgressBar(props) { diff --git a/client/src/common/components/nav/NavLogo.jsx b/client/src/common/components/nav/NavLogo.jsx index 6ed8310d1..754061ee6 100644 --- a/client/src/common/components/nav/NavLogo.jsx +++ b/client/src/common/components/nav/NavLogo.jsx @@ -3,7 +3,7 @@ import { Image } from '@chakra-ui/react'; import { AnimatePresence, motion } from 'framer-motion'; import { useState, useEffect } from 'react'; import tinykeys from 'tinykeys'; -import navlogo from '../../../assets/images/logos/LOGO-72.png'; +import navlogo from 'assets/images/logos/LOGO-72.png'; import style from './NavLogo.module.css'; export default function NavLogo() { diff --git a/client/src/common/components/views/Paginator.jsx b/client/src/common/components/views/Paginator.jsx index a6207a0f6..540fddf4f 100644 --- a/client/src/common/components/views/Paginator.jsx +++ b/client/src/common/components/views/Paginator.jsx @@ -1,7 +1,7 @@ import TodayItem from './TodayItem'; import style from './Paginator.module.css'; import { useEffect, useState } from 'react'; -import { useInterval } from '../../../app/hooks/useInterval'; +import { useInterval } from 'app/hooks/useInterval'; export default function Paginator(props) { const { events, selectedId } = props; diff --git a/client/src/common/components/views/TodayItem.jsx b/client/src/common/components/views/TodayItem.jsx index f8b2b59ba..04848cb9d 100644 --- a/client/src/common/components/views/TodayItem.jsx +++ b/client/src/common/components/views/TodayItem.jsx @@ -1,4 +1,4 @@ -import { stringFromMillis } from '../../../common/dateConfig'; +import { stringFromMillis } from 'common/dateConfig'; import style from './Paginator.module.css'; export default function TodayItem(props) { const { selected, timeStart, timeEnd, title } = props; diff --git a/client/src/common/state/Empty.jsx b/client/src/common/state/Empty.jsx index f76965d63..9bf16e030 100644 --- a/client/src/common/state/Empty.jsx +++ b/client/src/common/state/Empty.jsx @@ -1,4 +1,4 @@ -import { ReactComponent as Emptyimage } from '../../assets/images/empty.svg'; +import { ReactComponent as Emptyimage } from 'assets/images/empty.svg'; import style from './Empty.module.css'; export default function Empty(props) { diff --git a/client/src/features/control/MessageControl.jsx b/client/src/features/control/MessageControl.jsx index fafbc5899..9d66ad89a 100644 --- a/client/src/features/control/MessageControl.jsx +++ b/client/src/features/control/MessageControl.jsx @@ -1,7 +1,7 @@ import { Editable, EditableInput, EditablePreview } from '@chakra-ui/editable'; import { useEffect, useState } from 'react'; -import { useSocket } from '../../app/context/socketContext'; -import VisibleIconBtn from '../../common/components/buttons/VisibleIconBtn'; +import { useSocket } from 'app/context/socketContext'; +import VisibleIconBtn from 'common/components/buttons/VisibleIconBtn'; import style from './MessageControl.module.css'; const inputProps = { diff --git a/client/src/features/control/PlaybackButtons.jsx b/client/src/features/control/PlaybackButtons.jsx index a25a783da..4b46ab07b 100644 --- a/client/src/features/control/PlaybackButtons.jsx +++ b/client/src/features/control/PlaybackButtons.jsx @@ -1,12 +1,12 @@ import { memo } from 'react'; import style from './PlaybackControl.module.css'; -import StartIconBtn from '../../common/components/buttons/StartIconBtn'; -import PauseIconBtn from '../../common/components/buttons/PauseIconBtn'; -import PrevIconBtn from '../../common/components/buttons/PrevIconBtn'; -import NextIconBtn from '../../common/components/buttons/NextIconBtn'; -import RollIconBtn from '../../common/components/buttons/RollIconBtn'; -import UnloadIconBtn from '../../common/components/buttons/UnloadIconBtn'; -import ReloadIconButton from '../../common/components/buttons/ReloadIconBtn'; +import StartIconBtn from 'common/components/buttons/StartIconBtn'; +import PauseIconBtn from 'common/components/buttons/PauseIconBtn'; +import PrevIconBtn from 'common/components/buttons/PrevIconBtn'; +import NextIconBtn from 'common/components/buttons/NextIconBtn'; +import RollIconBtn from 'common/components/buttons/RollIconBtn'; +import UnloadIconBtn from 'common/components/buttons/UnloadIconBtn'; +import ReloadIconButton from 'common/components/buttons/ReloadIconBtn'; const areEqual = (prevProps, nextProps) => { return ( diff --git a/client/src/features/control/PlaybackControl.jsx b/client/src/features/control/PlaybackControl.jsx index 68ba424ea..d5881f9a2 100644 --- a/client/src/features/control/PlaybackControl.jsx +++ b/client/src/features/control/PlaybackControl.jsx @@ -1,6 +1,6 @@ import style from './PlaybackControl.module.css'; import { useEffect, useState } from 'react'; -import { useSocket } from '../../app/context/socketContext'; +import { useSocket } from 'app/context/socketContext'; import PlaybackButtons from './PlaybackButtons'; import PlaybackTimer from './PlaybackTimer'; diff --git a/client/src/features/control/PlaybackTimer.jsx b/client/src/features/control/PlaybackTimer.jsx index f9dd128e2..58d979762 100644 --- a/client/src/features/control/PlaybackTimer.jsx +++ b/client/src/features/control/PlaybackTimer.jsx @@ -1,6 +1,6 @@ import style from './PlaybackControl.module.css'; -import Countdown from '../../common/components/countdown/Countdown'; -import { stringFromMillis } from '../../common/dateConfig'; +import Countdown from 'common/components/countdown/Countdown'; +import { stringFromMillis } from 'common/dateConfig'; import { Button } from '@chakra-ui/button'; import { memo } from 'react'; diff --git a/client/src/features/editors/Editor.jsx b/client/src/features/editors/Editor.jsx index 2b89b8d4e..bc727071b 100644 --- a/client/src/features/editors/Editor.jsx +++ b/client/src/features/editors/Editor.jsx @@ -1,13 +1,13 @@ import { Heading } from '@chakra-ui/layout'; import { Box } from '@chakra-ui/layout'; -import NumberedText from '../../common/components/text/NumberedText'; +import NumberedText from 'common/components/text/NumberedText'; import PlaybackControl from '../control/PlaybackControl'; import MessageControl from '../control/MessageControl'; import styles from './Editor.module.css'; import EventListWrapper from './list/EventListWrapper'; import { useDisclosure } from '@chakra-ui/hooks'; import SettingsModal from '../modals/SettingsModal'; -import SettingsIconBtn from '../../common/components/buttons/SettingsIconBtn'; +import SettingsIconBtn from 'common/components/buttons/SettingsIconBtn'; import { useEffect } from 'react'; export default function Editor() { diff --git a/client/src/features/editors/list/BlockBlock.jsx b/client/src/features/editors/list/BlockBlock.jsx index 83851ba2e..35c717636 100644 --- a/client/src/features/editors/list/BlockBlock.jsx +++ b/client/src/features/editors/list/BlockBlock.jsx @@ -1,6 +1,6 @@ import { Draggable } from 'react-beautiful-dnd'; import { FiMoreVertical } from 'react-icons/fi'; -import DeleteIconBtn from '../../../common/components/buttons/DeleteIconBtn'; +import DeleteIconBtn from 'common/components/buttons/DeleteIconBtn'; import ActionButtons from './ActionButtons'; import style from './BlockBlock.module.css'; diff --git a/client/src/features/editors/list/DelayBlock.jsx b/client/src/features/editors/list/DelayBlock.jsx index cfb865729..a2b9e7bfe 100644 --- a/client/src/features/editors/list/DelayBlock.jsx +++ b/client/src/features/editors/list/DelayBlock.jsx @@ -1,10 +1,10 @@ import { Draggable } from 'react-beautiful-dnd'; import { FiMoreVertical } from 'react-icons/fi'; -import { millisToMinutes } from '../../../common/dateConfig'; +import { millisToMinutes } from 'common/dateConfig'; import ActionButtons from './ActionButtons'; -import DeleteIconBtn from '../../../common/components/buttons/DeleteIconBtn'; -import ApplyIconBtn from '../../../common/components/buttons/ApplyIconBtn'; -import DelayInput from '../../../common/input/DelayInput'; +import DeleteIconBtn from 'common/components/buttons/DeleteIconBtn'; +import ApplyIconBtn from 'common/components/buttons/ApplyIconBtn'; +import DelayInput from 'common/input/DelayInput'; import style from './DelayBlock.module.css'; export default function DelayBlock(props) { diff --git a/client/src/features/editors/list/EventBlock.jsx b/client/src/features/editors/list/EventBlock.jsx index b6b17d4db..dc1b332c4 100644 --- a/client/src/features/editors/list/EventBlock.jsx +++ b/client/src/features/editors/list/EventBlock.jsx @@ -2,13 +2,13 @@ import Icon from '@chakra-ui/icon'; import { FiChevronDown, FiChevronUp, FiMoreVertical } from 'react-icons/fi'; import { useState } from 'react'; import { Draggable } from 'react-beautiful-dnd'; -import EventTimes from '../../../common/components/eventTimes/EventTimes'; -import EventTimesVertical from '../../../common/components/eventTimes/EventTimesVertical'; -import EditableText from '../../../common/input/EditableText'; +import EventTimes from 'common/components/eventTimes/EventTimes'; +import EventTimesVertical from 'common/components/eventTimes/EventTimesVertical'; +import EditableText from 'common/input/EditableText'; import ActionButtons from './ActionButtons'; -import VisibleIconBtn from '../../../common/components/buttons/VisibleIconBtn'; -import DeleteIconBtn from '../../../common/components/buttons/DeleteIconBtn'; -import { millisToMinutes } from '../../../common/dateConfig'; +import VisibleIconBtn from 'common/components/buttons/VisibleIconBtn'; +import DeleteIconBtn from 'common/components/buttons/DeleteIconBtn'; +import { millisToMinutes } from 'common/dateConfig'; import style from './EventBlock.module.css'; const ExpandedBlock = (props) => { diff --git a/client/src/features/editors/list/EventList.jsx b/client/src/features/editors/list/EventList.jsx index d5d5e2e99..51c582c90 100644 --- a/client/src/features/editors/list/EventList.jsx +++ b/client/src/features/editors/list/EventList.jsx @@ -1,8 +1,8 @@ import style from './List.module.css'; import { Fragment, useEffect, useState } from 'react'; -import { useSocket } from '../../../app/context/socketContext'; +import { useSocket } from 'app/context/socketContext'; import tinykeys from 'tinykeys'; -import Empty from '../../../common/state/Empty'; +import Empty from 'common/state/Empty'; import EventListItem from './EventListItem'; import { AnimatePresence, motion } from 'framer-motion'; import { DragDropContext, Droppable } from 'react-beautiful-dnd'; @@ -45,7 +45,7 @@ export default function EventList(props) { return () => { unsubscribe(); }; - }, [cursor, events, eventsHandler]); + }, [cursor, events.length, eventsHandler]); // handle incoming messages useEffect(() => { diff --git a/client/src/features/editors/list/EventListItem.jsx b/client/src/features/editors/list/EventListItem.jsx index 345403b22..1517850e7 100644 --- a/client/src/features/editors/list/EventListItem.jsx +++ b/client/src/features/editors/list/EventListItem.jsx @@ -1,7 +1,7 @@ import DelayBlock from './DelayBlock'; import BlockBlock from './BlockBlock'; import EventBlock from './EventBlock'; -import { showErrorToast } from '../../../common/helpers/toastManager'; +import { showErrorToast } from 'common/helpers/toastManager'; import { memo } from 'react'; const areEqual = (prevProps, nextProps) => { diff --git a/client/src/features/editors/list/EventListWrapper.jsx b/client/src/features/editors/list/EventListWrapper.jsx index 5d5ab369d..a61c6f44f 100644 --- a/client/src/features/editors/list/EventListWrapper.jsx +++ b/client/src/features/editors/list/EventListWrapper.jsx @@ -9,12 +9,12 @@ import { requestDelete, requestReorder, requestApplyDelay, -} from '../../../app/api/eventsApi.js'; +} from 'app/api/eventsApi.js'; import EventList from './EventList'; -import EventListMenu from '../../menu/EventListMenu.jsx'; -import { showErrorToast } from '../../../common/helpers/toastManager'; -import { useFetch } from '../../../app/hooks/useFetch.js'; -import Empty from '../../../common/state/Empty'; +import EventListMenu from 'features/menu/EventListMenu.jsx'; +import { showErrorToast } from 'common/helpers/toastManager'; +import { useFetch } from 'app/hooks/useFetch.js'; +import Empty from 'common/state/Empty'; export default function EventListWrapper() { const queryClient = useQueryClient(); diff --git a/client/src/features/editors/list/listUtils.js b/client/src/features/editors/list/listUtils.js deleted file mode 100644 index 36e32cddd..000000000 --- a/client/src/features/editors/list/listUtils.js +++ /dev/null @@ -1,6 +0,0 @@ -export const sortByDate = (arr) => { - const sorter = (a, b) => { - return new Date(a.timeStart).getTime() - new Date(b.timeStart).getTime(); - }; - return arr.sort(sorter); -}; \ No newline at end of file diff --git a/client/src/features/editors/skeletons/EventListSkeleton.jsx b/client/src/features/editors/skeletons/EventListSkeleton.jsx deleted file mode 100644 index 1c98c54d5..000000000 --- a/client/src/features/editors/skeletons/EventListSkeleton.jsx +++ /dev/null @@ -1,112 +0,0 @@ -import { Skeleton } from '@chakra-ui/skeleton'; - -import style from '../list/List.module.css'; - -export default function EventListSkeleton() { - return ( -