Refact/project (#189)

* refactor: cleanup project entry point
* refactor: remove unused
* refactor: folder restructure

client/src/App.jsx

@@ -1,46 +1,19 @@
-import React, { lazy, Suspense, useCallback, useEffect } from 'react';
+import React, { Suspense, useCallback, useEffect } from 'react';
-import { Route, Routes, useLocation, useNavigate } from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { BrowserRouter } from 'react-router-dom';
+import { ChakraProvider } from '@chakra-ui/react';
 import ErrorBoundary from 'common/components/errorBoundary/ErrorBoundary';
-import withSocket from 'features/viewers/ViewWrapper';
 
-import { ALIASES } from './app/api/apiConstants';
+import { AppContextProvider } from './common/context/AppContext';
-import { getAliases } from './app/api/ontimeApi';
+import SocketProvider from './common/context/socketContext';
-import { useFetch } from './app/hooks/useFetch';
+import theme from './theme/theme';
+import AppRouter from './AppRouter';
 
-import './App.scss';
+// Load Open Sans typeface
-
+require('typeface-open-sans');
-const Editor = lazy(() => import('features/editors/ProtectedEditor'));
+const queryClient = new QueryClient();
-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'));
-const Lower = lazy(() => import('features/viewers/production/lower/LowerWrapper'));
-const Pip = lazy(() => import('features/viewers/production/Pip'));
-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);
-const SPip = withSocket(Pip);
-const SStudio = withSocket(StudioClock);
-
-const FeatureWrapper = lazy(() => import('features/FeatureWrapper'));
-const EventList = lazy(() => import('features/editors/list/EventListExport'));
-const TimerControl = lazy(() => import('features/control/playback/TimerControlExport'));
-const MessageControl = lazy(() => import('features/control/message/MessageControlExport'));
-const Info = lazy(() => import('features/info/InfoExport'));
 
 function App() {
-  const { data } = useFetch(ALIASES, getAliases);
-  const location = useLocation();
-  const navigate = useNavigate();
 
   // Handle keyboard shortcuts
   const handleKeyPress = useCallback((e) => {
@@ -68,88 +41,26 @@ function App() {
     };
   }, [handleKeyPress]);
 
-  // navigate if is alias route
+
-  useEffect(() => {
-    if (data == null) return;
-    for (const d of data) {
-      if (`/${d.alias}` === location.pathname && d.enabled) {
-        navigate(`/${d.pathAndParams}`);
-        break;
-      }
-    }
-  }, [data, location, navigate]);
 
   return (
-    <div className='App'>
+    <ChakraProvider resetCSS theme={theme}>
-      <ErrorBoundary>
+      <SocketProvider>
-        <Suspense fallback={null}>
+        <QueryClientProvider client={queryClient}>
-          <Routes>
+          <AppContextProvider>
-            <Route path='/' element={<STimer />} />
+            <BrowserRouter>
-            <Route path='/speaker' element={<STimer />} />
+              <div className='App'>
-            <Route path='/presenter' element={<STimer />} />
+                <ErrorBoundary>
-            <Route path='/stage' element={<STimer />} />
+                  <Suspense fallback={null}>
-            <Route path='/timer' element={<STimer />} />
+                    <AppRouter />
-
+                  </Suspense>
-            <Route path='/minimal' element={<SMinimalTimer />} />
+                </ErrorBoundary>
-            <Route path='/minimalTimer' element={<SMinimalTimer />} />
+              </div>
-            <Route path='/simpleTimer' element={<SMinimalTimer />} />
+            </BrowserRouter>
-
+          </AppContextProvider>
-            <Route path='/countdown' element={<SCountdown />} />
+        </QueryClientProvider>
-
+      </SocketProvider>
-            <Route path='/sm' element={<SStageManager />} />
+    </ChakraProvider>
-            <Route path='/backstage' element={<SStageManager />} />
-
-            <Route path='/public' element={<SPublic />} />
-            <Route path='/pip' element={<SPip />} />
-            <Route path='/studio' element={<SStudio />} />
-            {/*/!* Lower cannot have fallback *!/*/}
-            <Route path='/lower' element={<SLowerThird />} />
-
-            {/*/!* Protected Routes *!/*/}
-            <Route path='/editor' element={<Editor />} />
-            <Route path='/cuesheet' element={<Table />} />
-            <Route path='/cuelist' element={<Table />} />
-            <Route path='/table' element={<Table />} />
-
-            {/*/!* Protected Routes - Elements *!/*/}
-            <Route
-              path='/eventlist'
-              element={
-                <FeatureWrapper>
-                  <EventList />
-                </FeatureWrapper>
-              }
-            />
-            <Route
-              path='/timercontrol'
-              element={
-                <FeatureWrapper>
-                  <TimerControl />
-                </FeatureWrapper>
-              }
-            />
-            <Route
-              path='/messagecontrol'
-              element={
-                <FeatureWrapper>
-                  <MessageControl />
-                </FeatureWrapper>
-              }
-            />
-            <Route
-              path='/info'
-              element={
-                <FeatureWrapper>
-                  <Info />
-                </FeatureWrapper>
-              }
-            />
-            {/* Send to default if nothing found */}
-            <Route path='*' element={<STimer />} />
-          </Routes>
-        </Suspense>
-      </ErrorBoundary>
-    </div>
   );
 }
 

client/src/App.scss

@@ -1,45 +0,0 @@
-* {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  scrollbar-color: rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.01);
-  scrollbar-width: thin;
-}
-
-body,
-html,
-.App {
-  margin: 0 auto;
-  overflow: hidden;
-  overflow: clip;
-  height: 100vh;
-  -webkit-user-select: none;
-  user-select: none;
-  -webkit-app-region: drag;
-}
-
-option {
-  color: black;
-}
-
-/* width */
-::-webkit-scrollbar {
-  width: 0.5rem;
-  height: 0.5rem;
-}
-
-/* Track */
-::-webkit-scrollbar-track {
-  background: rgba(255, 255, 255, 0.01);
-  border-radius: 4px;
-}
-
-/* Handle */
-::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.15);
-  border-radius: 4px;
-}
-
-/* Handle on hover */
-::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.35);
-}

client/src/AppRouter.jsx

@@ -0,0 +1,119 @@
+import React, { lazy, useEffect } from 'react';
+import { Route, Routes, useLocation, useNavigate } from 'react-router-dom';
+
+import { ALIASES } from './common/api/apiConstants';
+import { getAliases } from './common/api/ontimeApi';
+import { useFetch } from './common/hooks/useFetch';
+import withSocket from './features/viewers/ViewWrapper';
+
+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'));
+const Lower = lazy(() => import('features/viewers/production/lower/LowerWrapper'));
+const Pip = lazy(() => import('features/viewers/production/Pip'));
+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);
+const SPip = withSocket(Pip);
+const SStudio = withSocket(StudioClock);
+
+const FeatureWrapper = lazy(() => import('features/FeatureWrapper'));
+const EventList = lazy(() => import('features/editors/list/EventListExport'));
+const TimerControl = lazy(() => import('features/control/playback/TimerControlExport'));
+const MessageControl = lazy(() => import('features/control/message/MessageControlExport'));
+const Info = lazy(() => import('features/info/InfoExport'));
+
+export default function AppRouter() {
+  const { data } = useFetch(ALIASES, getAliases);
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  // navigate if is alias route
+  useEffect(() => {
+    if (!data) return;
+    for (const d of data) {
+      if (`/${d.alias}` === location.pathname && d.enabled) {
+        navigate(`/${d.pathAndParams}`);
+        break;
+      }
+    }
+  }, [data, location, navigate]);
+
+  return(
+    <Routes>
+      <Route path='/' element={<STimer />} />
+      <Route path='/speaker' element={<STimer />} />
+      <Route path='/presenter' element={<STimer />} />
+      <Route path='/stage' element={<STimer />} />
+      <Route path='/timer' element={<STimer />} />
+
+      <Route path='/minimal' element={<SMinimalTimer />} />
+      <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 />} />
+
+      <Route path='/public' element={<SPublic />} />
+      <Route path='/pip' element={<SPip />} />
+      <Route path='/studio' element={<SStudio />} />
+      {/*/!* Lower cannot have fallback *!/*/}
+      <Route path='/lower' element={<SLowerThird />} />
+
+      {/*/!* Protected Routes *!/*/}
+      <Route path='/editor' element={<Editor />} />
+      <Route path='/cuesheet' element={<Table />} />
+      <Route path='/cuelist' element={<Table />} />
+      <Route path='/table' element={<Table />} />
+
+      {/*/!* Protected Routes - Elements *!/*/}
+      <Route
+        path='/eventlist'
+        element={
+          <FeatureWrapper>
+            <EventList />
+          </FeatureWrapper>
+        }
+      />
+      <Route
+        path='/timercontrol'
+        element={
+          <FeatureWrapper>
+            <TimerControl />
+          </FeatureWrapper>
+        }
+      />
+      <Route
+        path='/messagecontrol'
+        element={
+          <FeatureWrapper>
+            <MessageControl />
+          </FeatureWrapper>
+        }
+      />
+      <Route
+        path='/info'
+        element={
+          <FeatureWrapper>
+            <Info />
+          </FeatureWrapper>
+        }
+      />
+      {/* Send to default if nothing found */}
+      <Route path='*' element={<STimer />} />
+    </Routes>
+  )
+}

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

@@ -12,7 +12,7 @@ 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';
+import { LoggingContext } from '../../context/LoggingContext';
 
 export default function QuitIconBtn(props) {
   const { clickHandler, size = 'lg', ...rest } = props;

client/src/common/components/collapseBar/CollapseBar.module.scss

@@ -1,4 +1,4 @@
-@use '../../../styles/main' as *;
+@use '../../../theme/main' as *;
 
 .header,
 .headerRoll {

client/src/common/components/countdown/TimerDisplay.module.scss

@@ -1,4 +1,4 @@
-@use '../../../styles/main' as *;
+@use '../../../theme/main' as *;
 
 /* Common */
 .countdownClock,

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

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

client/src/common/components/errorBoundary/ErrorBoundary.module.scss

@@ -1,4 +1,4 @@
-@use '../../../styles/main' as *;
+@use '../../../theme/main' as *;
 
 .errorContainer {
   width: 100%;

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

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

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

@@ -1,8 +1,8 @@
 import React, { useCallback, useContext } from 'react';
 import PropTypes from 'prop-types';
 
-import { LoggingContext } from '../../../app/context/LoggingContext';
+import { LoggingContext } from '../../context/LoggingContext';
-import { validateTimes } from '../../../app/entryValidator';
+import { validateTimes } from '../../utils/entryValidator';
 
 import Times from './Times';
 import TimesDelayed from './TimesDelayed';

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import EditableTimer from '../../input/EditableTimer';
+import EditableTimer from '../input/EditableTimer';
 
 import style from './Times.module.scss'
 

client/src/common/components/eventTimes/Times.module.scss

@@ -1,4 +1,4 @@
-@use '../../../styles/main' as *;
+@use '../../../theme/main' as *;
 
 .label {
   font-size: 0.75em;

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import EditableTimer from '../../input/EditableTimer';
 import { stringFromMillis } from '../../utils/time';
+import EditableTimer from '../input/EditableTimer';
 
 import style from './Times.module.scss'
 

client/src/common/components/input/DelayInput.jsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { Editable, EditableInput, EditablePreview } from '@chakra-ui/react';
 import PropTypes from 'prop-types';
 
-import { clamp } from '../../app/utils/math';
+import { clamp } from '../../utils/math';
 
 import style from './TimeInput.module.css';
 

client/src/common/components/input/EditableText.module.scss

@@ -1,4 +1,4 @@
-@use '../../styles/main' as *;
+@use '../../../theme/main' as *;
 
 .block {
   overflow: hidden;

client/src/common/components/input/EditableTimer.jsx

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

client/src/common/components/input/EditableTimer.module.scss

@@ -1,4 +1,4 @@
-@use '../../styles/main'as *;
+@use '../../../theme/main'as *;
 
 .editable,
 .delayedEditable {

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { clamp } from 'app/utils/math';
+import { clamp } from 'common/utils/math';
 import PropTypes from 'prop-types';
 
 import styles from './MyProgressBar.module.scss';

client/src/common/components/myProgressBar/MyProgressBar.module.scss

@@ -1,4 +1,4 @@
-@use '../../../styles/main' as *;
+@use '../../../theme/main' as *;
 
 .progress,
 .progressCountdown {

client/src/common/components/nav/NavLogo.module.scss

@@ -1,4 +1,4 @@
-@use '../../../styles/main' as *;
+@use '../../../theme/main' as *;
 
 .navContainer {
   position: absolute;

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

@@ -4,7 +4,7 @@ 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 { AppContext } from '../../context/AppContext';
 
 import style from './ProtectRoute.module.scss';
 

client/src/common/components/protectRoute/ProtectRoute.module.scss

@@ -1,5 +1,5 @@
-@use '../../../styles/main' as *;
+@use '../../../theme/main' as *;
-@use '../../../styles/mixins' as *;
+@use '../../../theme/mixins' as *;
 
 .container {
   background: $bg-black;

client/src/common/components/state/Empty.module.scss

@@ -1,4 +1,4 @@
-@use '../../styles/main' as *;
+@use '../../../theme/main' as *;
 
 .emptyContainer {
   width: 100%;

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

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react';
-import { useInterval } from 'app/hooks/useInterval';
+import { useInterval } from 'common/hooks/useInterval';
 import PropTypes from 'prop-types';
 
-import Empty from '../../state/Empty';
+import Empty from '../state/Empty';
 
 import TodayItem from './TodayItem';
 

client/src/common/components/views/Paginator.module.scss

@@ -1,4 +1,4 @@
-@use '../../../styles/main' as *;
+@use '../../../theme/main' as *;
 
 .entries {
   width: 100%;

client/src/common/components/views/TitleCard.module.scss

@@ -1,4 +1,4 @@
-@use '../../../styles/main' as *;
+@use '../../../theme/main' as *;
 
 .label {
   @include card-label;

client/src/common/components/views/TitleSide.module.scss

@@ -1,4 +1,4 @@
-@use '../../../styles/main' as *;
+@use '../../../theme/main' as *;
 
 .label {
   @include card-label;

client/src/common/context/LoggingContext.jsx

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

client/src/common/context/socketContext.jsx

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

client/src/features/FeatureWrapper.module.scss

@@ -1,4 +1,4 @@
-@use '../styles/main' as *;
+@use '../theme/main' as *;
 
 .wrapper {
   background: $bg-black;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import SocketProvider from 'app/context/socketContext';
+import SocketProvider from 'common/context/socketContext';
 
 import MessageControl from '../message/MessageControl';
 

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import SocketProvider from 'app/context/socketContext';
+import SocketProvider from 'common/context/socketContext';
 
 import PlaybackControl from '../playback/PlaybackControl';
 

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

@@ -3,7 +3,7 @@ import { IconButton } from '@chakra-ui/button';
 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 { useSocket } from 'common/context/socketContext';
 
 import InputRow from './InputRow';
 

client/src/features/control/message/MessageControl.module.scss

@@ -1,5 +1,5 @@
-@use '../../../styles/main' as *;
+@use '../../../theme/main' as *;
-@use '../../../styles/mixins' as *;
+@use '../../../theme/mixins' as *;
 
 .messageContainer,
 .onAirToggle {

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { useSocket } from 'app/context/socketContext';
+import { useSocket } from 'common/context/socketContext';
 
 import PlaybackButtons from './PlaybackButtons';
 import PlaybackTimer from './PlaybackTimer';

client/src/features/control/playback/PlaybackControl.module.scss

@@ -1,5 +1,5 @@
-@use '../../../styles/main' as *;
+@use '../../../theme/main' as *;
-@use '../../../styles/mixins' as *;
+@use '../../../theme/mixins' as *;
 
 .mainContainer {
   width: 100%;

client/src/features/editors/BlockBlock/BlockBlock.module.scss

@@ -1,4 +1,4 @@
-@use '../../../styles/main' as *;
+@use '../../../theme/main' as *;
 /* ============= COMMON ============= */
 
 .block {

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

@@ -4,7 +4,7 @@ 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 { IoRemove } from '@react-icons/all-files/io5/IoRemove';
-import DelayInput from 'common/input/DelayInput';
+import DelayInput from 'common/components/input/DelayInput';
 import { millisToMinutes } from 'common/utils/dateConfig';
 import PropTypes from 'prop-types';
 

client/src/features/editors/DelayBlock/DelayBlock.module.scss

@@ -1,4 +1,4 @@
-@use '../../../styles/main' as *;
+@use '../../../theme/main' as *;
 
 /* ============= COMMON ============= */
 

client/src/features/editors/Editor.jsx

@@ -4,8 +4,8 @@ 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 { LocalEventSettingsProvider } from '../../common/context/LocalEventSettingsContext';
-import { LoggingProvider } from '../../app/context/LoggingContext';
+import { LoggingProvider } from '../../common/context/LoggingContext';
 import MenuBar from '../menu/MenuBar';
 
 import styles from './Editor.module.scss';

client/src/features/editors/Editor.module.scss

@@ -1,4 +1,4 @@
-@use '../../styles/main' as *;
+@use '../../theme/main' as *;
 
 .corner {
   display: none;

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

@@ -3,7 +3,7 @@ import { Checkbox } from '@chakra-ui/react';
 import { Tooltip } from '@chakra-ui/tooltip';
 import PropTypes from 'prop-types';
 
-import { LocalEventSettingsContext } from '../../../app/context/LocalEventSettingsContext';
+import { LocalEventSettingsContext } from '../../../common/context/LocalEventSettingsContext';
 
 import style from './EntryBlock.module.scss';
 

client/src/features/editors/EntryBlock/EntryBlock.module.scss

@@ -1,4 +1,4 @@
-@use '../../../styles/main' as *;
+@use '../../../theme/main' as *;
 
 @mixin when-visible() {
   opacity: 1;

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

@@ -6,7 +6,7 @@ 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 EditableText from '../../../common/components/input/EditableText';
 
 import style from './EventBlock.module.scss';
 

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

@@ -5,7 +5,7 @@ import { FiChevronUp } from '@react-icons/all-files/fi/FiChevronUp';
 import { millisToMinutes } from 'common/utils/dateConfig';
 import PropTypes from 'prop-types';
 
-import { CollapseContext } from '../../../app/context/CollapseContext';
+import { CollapseContext } from '../../../common/context/CollapseContext';
 
 import CollapsedBlock from './CollapsedBlock';
 import ExpandedBlock from './ExpandedBlock';

client/src/features/editors/EventBlock/EventBlock.module.scss

@@ -1,4 +1,4 @@
-@use '../../../styles/main' as *;
+@use '../../../theme/main' as *;
 
 /* ============= COMMON ============= */
 .event {

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

@@ -8,7 +8,7 @@ import ActionButtons from '../../../common/components/buttons/ActionButtons';
 import PublicIconBtn from '../../../common/components/buttons/PublicIconBtn';
 import TooltipLoadingActionBtn from '../../../common/components/buttons/TooltipLoadingActionBtn';
 import EventTimesVertical from '../../../common/components/eventTimes/EventTimesVertical';
-import EditableText from '../../../common/input/EditableText';
+import EditableText from '../../../common/components/input/EditableText';
 
 import style from './EventBlock.module.scss';
 

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

@@ -1,10 +1,10 @@
 import React, { createRef, useCallback, useContext, useEffect, useState } from 'react';
 import { DragDropContext, Droppable } from 'react-beautiful-dnd';
-import { useSocket } from 'app/context/socketContext';
+import Empty from 'common/components/state/Empty';
-import Empty from 'common/state/Empty';
+import { useSocket } from 'common/context/socketContext';
 
-import { CursorContext } from '../../../app/context/CursorContext';
+import { CursorContext } from '../../../common/context/CursorContext';
-import { LocalEventSettingsContext } from '../../../app/context/LocalEventSettingsContext';
+import { LocalEventSettingsContext } from '../../../common/context/LocalEventSettingsContext';
 import EntryBlock from '../EntryBlock/EntryBlock';
 
 import EventListItem from './EventListItem';

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

@@ -2,9 +2,9 @@ import React from 'react';
 import { Box } from '@chakra-ui/layout';
 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 { CollapseProvider } from '../../../common/context/CollapseContext';
+import { CursorProvider } from '../../../common/context/CursorContext';
 import { handleLinks } from '../../../common/utils/linkUtils';
 
 import EventListWrapper from './EventListWrapper';

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

@@ -1,8 +1,8 @@
 import React, { memo, useCallback, useContext } from 'react';
 import PropTypes from 'prop-types';
 
-import { LocalEventSettingsContext } from '../../../app/context/LocalEventSettingsContext';
+import { LocalEventSettingsContext } from '../../../common/context/LocalEventSettingsContext';
-import { LoggingContext } from '../../../app/context/LoggingContext';
+import { LoggingContext } from '../../../common/context/LoggingContext';
 import BlockBlock from '../BlockBlock/BlockBlock';
 import DelayBlock from '../DelayBlock/DelayBlock';
 import EventBlock from '../EventBlock/EventBlock';

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

@@ -1,6 +1,6 @@
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { useMutation, useQueryClient } from 'react-query';
-import { EVENTS_TABLE } from 'app/api/apiConstants';
+import { EVENTS_TABLE } from 'common/api/apiConstants';
 import {
   fetchAllEvents,
   requestApplyDelay,
@@ -10,13 +10,13 @@ import {
   requestPost,
   requestPut,
   requestReorder,
-} from 'app/api/eventsApi.js';
+} from 'common/api/eventsApi.js';
-import { useFetch } from 'app/hooks/useFetch.js';
+import Empty from 'common/components/state/Empty';
-import Empty from 'common/state/Empty';
+import { useFetch } from 'common/hooks/useFetch.js';
 import EventListMenu from 'features/menu/EventListMenu.jsx';
 
-import { CollapseContext } from '../../../app/context/CollapseContext';
+import { CollapseContext } from '../../../common/context/CollapseContext';
-import { LoggingContext } from '../../../app/context/LoggingContext';
+import { LoggingContext } from '../../../common/context/LoggingContext';
 
 import EventList from './EventList';
 

client/src/features/editors/list/List.module.scss

@@ -1,5 +1,5 @@
-@use '../../../styles/main' as *;
+@use '../../../theme/main' as *;
-@use '../../../styles/mixins' as *;
+@use '../../../theme/mixins' as *;
 
 .eventContainer {
   @include second-container;

client/src/features/info/Info.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect,useState } from 'react';
-import { useSocket } from 'app/context/socketContext';
+import { useSocket } from 'common/context/socketContext';
 
 import InfoLogger from './InfoLogger';
 import InfoNif from './InfoNif';

client/src/features/info/Info.module.scss

@@ -1,5 +1,5 @@
-@use '../../styles/main' as *;
+@use '../../theme/main' as *;
-@use '../../styles/mixins' as *;
+@use '../../theme/mixins' as *;
 
 @mixin container {
   margin-top: 1em;

client/src/features/info/InfoLogger.jsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 
-import { LoggingContext } from '../../app/context/LoggingContext';
 import CollapseBar from '../../common/components/collapseBar/CollapseBar';
+import { LoggingContext } from '../../common/context/LoggingContext';
 
 import style from './InfoLogger.module.scss';
 

client/src/features/info/InfoLogger.module.scss

@@ -1,6 +1,6 @@
 @use 'Info.module' as *;
-@use '../../styles/main' as *;
+@use '../../theme/main' as *;
-@use '../../styles/mixins' as *;
+@use '../../theme/mixins' as *;
 
 .container,
 .container__expanded{

client/src/features/info/InfoNif.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
-import { APP_TABLE } from 'app/api/apiConstants';
+import { APP_TABLE } from 'common/api/apiConstants';
-import { getInfo, ontimePlaceholderInfo } from 'app/api/ontimeApi';
+import { getInfo, ontimePlaceholderInfo } from 'common/api/ontimeApi';
-import { useFetch } from 'app/hooks/useFetch';
+import { useFetch } from 'common/hooks/useFetch';
 
 import CollapseBar from '../../common/components/collapseBar/CollapseBar';
 import { openLink } from '../../common/utils/linkUtils';

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { render, screen } from '@testing-library/react';
-import SocketProvider from 'app/context/socketContext';
+import SocketProvider from 'common/context/socketContext';
 
 import Info from '../Info';
 

client/src/features/menu/EventListMenu.jsx

@@ -7,8 +7,8 @@ import { IoCaretDown } from '@react-icons/all-files/io5/IoCaretDown';
 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 { CursorContext } from '../../common/context/CursorContext';
 
 import MenuActionButtons from './MenuActionButtons';
 

client/src/features/menu/MenuBar.jsx

@@ -7,13 +7,13 @@ import { FiMaximize } from '@react-icons/all-files/fi/FiMaximize';
 import { FiMinimize } from '@react-icons/all-files/fi/FiMinimize';
 import { FiSettings } from '@react-icons/all-files/fi/FiSettings';
 import { FiUpload } from '@react-icons/all-files/fi/FiUpload';
-import { EVENTS_TABLE } from 'app/api/apiConstants';
+import { EVENTS_TABLE } from 'common/api/apiConstants';
-import { downloadEvents, uploadEvents } from 'app/api/ontimeApi';
+import { downloadEvents, uploadEvents } from 'common/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 { LoggingContext } from '../../common/context/LoggingContext';
 
 import style from './MenuBar.module.scss';
 

client/src/features/menu/MenuBar.module.scss

@@ -1,4 +1,4 @@
-@use '../../styles/main' as *;
+@use '../../theme/main' as *;
 
 .gap {
   height: 1em;

client/src/features/modals/AliasesModal.jsx

@@ -7,13 +7,13 @@ 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 { ALIASES } from 'app/api/apiConstants';
+import { ALIASES } from 'common/api/apiConstants';
-import { useFetch } from 'app/hooks/useFetch';
+import { useFetch } from 'common/hooks/useFetch';
 
-import { getAliases, postAliases } from '../../app/api/ontimeApi';
+import { viewerLocations } from '../../appConstants';
-import { viewerLocations } from '../../app/appConstants';
+import { getAliases, postAliases } from '../../common/api/ontimeApi';
-import { LoggingContext } from '../../app/context/LoggingContext';
+import { LoggingContext } from '../../common/context/LoggingContext';
-import { validateAlias } from '../../app/utils/aliases';
+import { validateAlias } from '../../common/utils/aliases';
 import { handleLinks, host } from '../../common/utils/linkUtils';
 
 import SubmitContainer from './SubmitContainer';

client/src/features/modals/AppSettingsModal.jsx

@@ -4,13 +4,13 @@ import { ModalBody } from '@chakra-ui/modal';
 import { Checkbox, FormControl, FormLabel, Input, PinInput, PinInputField } from '@chakra-ui/react';
 import { FiEye } from '@react-icons/all-files/fi/FiEye';
 import { FiX } from '@react-icons/all-files/fi/FiX';
-import { APP_SETTINGS } from 'app/api/apiConstants';
+import { APP_SETTINGS } from 'common/api/apiConstants';
-import { getSettings, ontimePlaceholderSettings, postSettings } from 'app/api/ontimeApi';
+import { getSettings, ontimePlaceholderSettings, postSettings } from 'common/api/ontimeApi';
-import { useFetch } from 'app/hooks/useFetch';
+import { useFetch } from 'common/hooks/useFetch';
 
-import { LocalEventSettingsContext } from '../../app/context/LocalEventSettingsContext';
-import { LoggingContext } from '../../app/context/LoggingContext';
 import TooltipActionBtn from '../../common/components/buttons/TooltipActionBtn';
+import { LocalEventSettingsContext } from '../../common/context/LocalEventSettingsContext';
+import { LoggingContext } from '../../common/context/LoggingContext';
 
 import { inputProps } from './modalHelper';
 import SubmitContainer from './SubmitContainer';

client/src/features/modals/EventSettingsModal.jsx

@@ -1,11 +1,11 @@
 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 { EVENT_TABLE } from 'common/api/apiConstants';
-import { fetchEvent, postEvent } from 'app/api/eventApi';
+import { fetchEvent, postEvent } from 'common/api/eventApi';
-import { useFetch } from 'app/hooks/useFetch';
+import { useFetch } from 'common/hooks/useFetch';
 
-import { eventPlaceholderSettings } from '../../app/api/ontimeApi';
+import { eventPlaceholderSettings } from '../../common/api/ontimeApi';
 
 import { inputProps } from './modalHelper';
 import SubmitContainer from './SubmitContainer';

client/src/features/modals/IntegrationSettingsModal.jsx

@@ -2,11 +2,11 @@ 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 { APP_TABLE } from 'common/api/apiConstants';
-import { getInfo, httpPlaceholder, ontimeVars, postInfo } from 'app/api/ontimeApi';
+import { getInfo, httpPlaceholder, ontimeVars, postInfo } from 'common/api/ontimeApi';
-import { useFetch } from 'app/hooks/useFetch';
+import { useFetch } from 'common/hooks/useFetch';
 
-import { LoggingContext } from '../../app/context/LoggingContext';
+import { LoggingContext } from '../../common/context/LoggingContext';
 
 import { inputProps } from './modalHelper';
 import SubmitContainer from './SubmitContainer';

client/src/features/modals/Modals.module.scss

@@ -1,4 +1,4 @@
-@use '../../styles/main' as *;
+@use '../../theme/main' as *;
 
 //////////////////////////////////// main
 

client/src/features/modals/OscSettingsModal.jsx

@@ -2,12 +2,12 @@ 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 { OSC_SETTINGS } from 'common/api/apiConstants';
-import { getOSC, oscPlaceholderSettings, postOSC } from 'app/api/ontimeApi';
+import { getOSC, oscPlaceholderSettings, postOSC } from 'common/api/ontimeApi';
-import { useFetch } from 'app/hooks/useFetch';
+import { useFetch } from 'common/hooks/useFetch';
 
-import { LoggingContext } from '../../app/context/LoggingContext';
 import EnableBtn from '../../common/components/buttons/EnableBtn';
+import { LoggingContext } from '../../common/context/LoggingContext';
 
 import { inputProps, portInputProps } from './modalHelper';
 import SubmitContainer from './SubmitContainer';

client/src/features/modals/TableOptionsModal.jsx

@@ -2,10 +2,10 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { ModalBody } from '@chakra-ui/modal';
 import { Input } from '@chakra-ui/react';
 import { IoInformationCircleOutline } from '@react-icons/all-files/io5/IoInformationCircleOutline';
-import { USERFIELDS } from 'app/api/apiConstants';
+import { USERFIELDS } from 'common/api/apiConstants';
-import { useFetch } from 'app/hooks/useFetch';
+import { useFetch } from 'common/hooks/useFetch';
 
-import { getUserFields, postUserFields, userFieldsPlaceholder } from '../../app/api/ontimeApi';
+import { getUserFields, postUserFields, userFieldsPlaceholder } from '../../common/api/ontimeApi';
 import { handleLinks, host } from '../../common/utils/linkUtils';
 
 import SubmitContainer from './SubmitContainer';

client/src/features/table/OntimeTable.jsx

@@ -17,8 +17,8 @@ import {
 } from '@dnd-kit/sortable';
 import PropTypes from 'prop-types';
 
-import { TableSettingsContext } from '../../app/context/TableSettingsContext';
+import { TableSettingsContext } from '../../common/context/TableSettingsContext';
-import { useLocalStorage } from '../../app/hooks/useLocalStorage';
+import { useLocalStorage } from '../../common/hooks/useLocalStorage';
 
 import SortableCell from './tableElements/SortableCell';
 import TableSettings from './tableElements/TableSettings';

client/src/features/table/ProtectedTable.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import { TableSettingsProvider } from '../../app/context/TableSettingsContext';
 import ProtectRoute from '../../common/components/protectRoute/ProtectRoute';
+import { TableSettingsProvider } from '../../common/context/TableSettingsContext';
 
 import TableWrapper from './TableWrapper';
 

client/src/features/table/Table.module.scss

@@ -1,4 +1,4 @@
-@use '../../styles/main' as *;
+@use '../../theme/main' as *;
 
 .tableWrapper,
 .tableWrapper__dark {

client/src/features/table/TableHeader.jsx

@@ -4,11 +4,11 @@ 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 { EVENT_TABLE } from '../../common/api/apiConstants';
-import { fetchEvent } from '../../app/api/eventApi';
+import { fetchEvent } from '../../common/api/eventApi';
-import { useSocket } from '../../app/context/socketContext';
+import { useSocket } from '../../common/context/socketContext';
-import { TableSettingsContext } from '../../app/context/TableSettingsContext';
+import { TableSettingsContext } from '../../common/context/TableSettingsContext';
-import { useFetch } from '../../app/hooks/useFetch';
+import { useFetch } from '../../common/hooks/useFetch';
 import { formatDisplay } from '../../common/utils/dateConfig';
 import { stringFromMillis } from '../../common/utils/time';
 

client/src/features/table/TableWrapper.jsx

@@ -1,12 +1,12 @@
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 
-import { EVENTS_TABLE, USERFIELDS } from '../../app/api/apiConstants';
+import { EVENTS_TABLE, USERFIELDS } from '../../common/api/apiConstants';
-import { fetchAllEvents, requestPatch } from '../../app/api/eventsApi';
+import { fetchAllEvents, requestPatch } from '../../common/api/eventsApi';
-import { getUserFields } from '../../app/api/ontimeApi';
+import { getUserFields } from '../../common/api/ontimeApi';
-import { useSocket } from '../../app/context/socketContext';
+import { useSocket } from '../../common/context/socketContext';
-import { TableSettingsContext } from '../../app/context/TableSettingsContext';
+import { TableSettingsContext } from '../../common/context/TableSettingsContext';
-import { useFetch } from '../../app/hooks/useFetch';
+import { useFetch } from '../../common/hooks/useFetch';
-import useMutateEvents from '../../app/hooks/useMutateEvents';
+import useMutateEvents from '../../common/hooks/useMutateEvents';
 
 import OntimeTable from './OntimeTable';
 import TableHeader from './TableHeader';

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

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 
-import { AutoTextArea } from '../../../common/input/AutoTextArea';
+import { AutoTextArea } from '../../../common/components/input/AutoTextArea';
 
 /**
  * Shamelessly copied from react-table docs

client/src/features/viewers/ViewWrapper.jsx

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