diff --git a/client/src/app/api/apiConstants.js b/client/src/app/api/apiConstants.js index 26f818293..33a92277f 100644 --- a/client/src/app/api/apiConstants.js +++ b/client/src/app/api/apiConstants.js @@ -1,7 +1,12 @@ export const NODE_PORT = 4001; +export const EVENT_TABLE = 'event'; +export const EVENTS_TABLE = 'events'; const calculateServer = () => { return window.location.origin.replace(window.location.port, `${NODE_PORT}/`); }; export const serverURL = calculateServer(); +export const eventURL = serverURL + EVENT_TABLE; +export const eventsURL = serverURL + EVENTS_TABLE; +export const playbackURL = serverURL + 'playback'; diff --git a/client/src/app/api/eventApi.js b/client/src/app/api/eventApi.js index 0118acb68..65982241e 100644 --- a/client/src/app/api/eventApi.js +++ b/client/src/app/api/eventApi.js @@ -1,8 +1,5 @@ import axios from 'axios'; -import { serverURL } from './apiConstants'; - -export const eventNamespace = 'event'; -export const eventURL = serverURL + eventNamespace; +import { eventURL } from './apiConstants'; export const fetchEvent = async () => { const res = await axios.get(eventURL); diff --git a/client/src/app/api/eventsApi.js b/client/src/app/api/eventsApi.js index ec19409be..f9b30c035 100644 --- a/client/src/app/api/eventsApi.js +++ b/client/src/app/api/eventsApi.js @@ -1,14 +1,5 @@ import axios from 'axios'; -import { NODE_PORT } from '../api/apiConstants'; - -// get origin from URL -const serverURL = window.location.origin.replace( - window.location.port, - `${NODE_PORT}/` -); - -export const eventsNamespace = 'events'; -export const eventsURL = serverURL + eventsNamespace; +import { eventsURL } from '../api/apiConstants'; export const fetchAllEvents = async () => { const res = await axios.get(eventsURL); diff --git a/client/src/app/api/playbackApi.js b/client/src/app/api/playbackApi.js index 1dabea106..0145da7f5 100644 --- a/client/src/app/api/playbackApi.js +++ b/client/src/app/api/playbackApi.js @@ -1,8 +1,5 @@ import axios from 'axios'; -import { serverURL } from '../api/apiConstants'; - -export const playbackNamespace = 'playback'; -const playbackURL = serverURL + playbackNamespace; +import { playbackURL } from '../api/apiConstants'; export const getStart = async () => { const res = await axios.get(playbackURL + '/start'); diff --git a/client/src/app/context/socketContext.js b/client/src/app/context/socketContext.js index 6767173ed..ecfb9a99e 100644 --- a/client/src/app/context/socketContext.js +++ b/client/src/app/context/socketContext.js @@ -1,12 +1,6 @@ import { createContext, useContext, useEffect, useState } from 'react'; import io from 'socket.io-client'; -import { NODE_PORT } from '../api/apiConstants'; - -// get origin from URL -const serverURL = window.location.origin.replace( - window.location.port, - `${NODE_PORT}/` -); +import { serverURL } from 'app/api/apiConstants'; const SocketContext = createContext([[], () => {}]); diff --git a/client/src/features/editors/list/EventListWrapper.jsx b/client/src/features/editors/list/EventListWrapper.jsx index a61c6f44f..b63fdbac2 100644 --- a/client/src/features/editors/list/EventListWrapper.jsx +++ b/client/src/features/editors/list/EventListWrapper.jsx @@ -1,7 +1,6 @@ import { useMutation, useQueryClient } from 'react-query'; import { useCallback, useEffect } from 'react'; import { - eventsNamespace, fetchAllEvents, requestPatch, requestPost, @@ -15,11 +14,12 @@ 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'; +import { EVENTS_TABLE } from 'app/api/apiConstants'; export default function EventListWrapper() { const queryClient = useQueryClient(); const { data, status, isError, refetch } = useFetch( - eventsNamespace, + EVENTS_TABLE, fetchAllEvents ); @@ -27,14 +27,14 @@ export default function EventListWrapper() { // we optimistically update here onMutate: async (newEvent) => { // cancel ongoing queries - queryClient.cancelQueries(eventsNamespace, { exact: true }); + queryClient.cancelQueries(EVENTS_TABLE, { exact: true }); // Snapshot the previous value - let previousEvents = queryClient.getQueryData(eventsNamespace); + let previousEvents = queryClient.getQueryData(EVENTS_TABLE); console.log('debug', previousEvents); if (previousEvents == null) { refetch(); - previousEvents = queryClient.getQueryData(eventsNamespace); + previousEvents = queryClient.getQueryData(EVENTS_TABLE); } console.log('debug 2', previousEvents); @@ -44,7 +44,7 @@ export default function EventListWrapper() { ...newEvent, id: new Date().toISOString(), }); - queryClient.setQueryData(eventsNamespace, optimistic); + queryClient.setQueryData(EVENTS_TABLE, optimistic); // Return a context with the previous and new todo return { previousEvents }; @@ -52,12 +52,12 @@ export default function EventListWrapper() { // Mutation fails, rollback undos optimist update onError: (error, newEvent, context) => { - queryClient.setQueryData(eventsNamespace, context.previousEvents); + queryClient.setQueryData(EVENTS_TABLE, context.previousEvents); }, // Mutation finished, failed or successful // Fetch anyway, just to be sure onSettled: () => { - queryClient.invalidateQueries(eventsNamespace); + queryClient.invalidateQueries(EVENTS_TABLE); }, }); @@ -65,16 +65,16 @@ export default function EventListWrapper() { // we optimistically update here onMutate: async (newEvent) => { // cancel ongoing queries - queryClient.cancelQueries([eventsNamespace, newEvent.id]); + queryClient.cancelQueries([EVENTS_TABLE, newEvent.id]); // Snapshot the previous value const previousEvent = queryClient.getQueryData([ - eventsNamespace, + EVENTS_TABLE, newEvent.id, ]); // optimistically update object - queryClient.setQueryData([eventsNamespace, newEvent.id], newEvent); + queryClient.setQueryData([EVENTS_TABLE, newEvent.id], newEvent); // Return a context with the previous and new todo return { previousEvent, newEvent }; @@ -83,14 +83,14 @@ export default function EventListWrapper() { // Mutation fails, rollback undos optimist update onError: (error, newEvent, context) => { queryClient.setQueryData( - [eventsNamespace, context.newEvent.id], + [EVENTS_TABLE, context.newEvent.id], context.previousEvent ); }, // Mutation finished, failed or successful // Fetch anyway, just to be sure onSettled: (newEvent) => { - queryClient.invalidateQueries([eventsNamespace, newEvent.id]); + queryClient.invalidateQueries([EVENTS_TABLE, newEvent.id]); }, }); @@ -98,16 +98,16 @@ export default function EventListWrapper() { // we optimistically update here onMutate: async (newEvent) => { // cancel ongoing queries - queryClient.cancelQueries([eventsNamespace, newEvent.id]); + queryClient.cancelQueries([EVENTS_TABLE, newEvent.id]); // Snapshot the previous value const previousEvent = queryClient.getQueryData([ - eventsNamespace, + EVENTS_TABLE, newEvent.id, ]); // optimistically update object - queryClient.setQueryData([eventsNamespace, newEvent.id], newEvent); + queryClient.setQueryData([EVENTS_TABLE, newEvent.id], newEvent); // Return a context with the previous and new todo return { previousEvent, newEvent }; @@ -116,14 +116,14 @@ export default function EventListWrapper() { // Mutation fails, rollback undos optimist update onError: (error, newEvent, context) => { queryClient.setQueryData( - [eventsNamespace, context.newEvent.id], + [EVENTS_TABLE, context.newEvent.id], context.previousEvent ); }, // Mutation finished, failed or successful // Fetch anyway, just to be sure onSettled: (newEvent) => { - queryClient.invalidateQueries([eventsNamespace, newEvent.id]); + queryClient.invalidateQueries([EVENTS_TABLE, newEvent.id]); }, }); @@ -131,16 +131,16 @@ export default function EventListWrapper() { // we optimistically update here onMutate: async (eventId) => { // cancel ongoing queries - queryClient.cancelQueries([eventsNamespace, eventId]); + queryClient.cancelQueries([EVENTS_TABLE, eventId]); // Snapshot the previous value - const previousEvents = queryClient.getQueryData(eventsNamespace); + const previousEvents = queryClient.getQueryData(EVENTS_TABLE); let filtered = [...previousEvents]; filtered.filter((e) => e.id === 'eventId'); // optimistically update object - queryClient.setQueryData(eventsNamespace, filtered); + queryClient.setQueryData(EVENTS_TABLE, filtered); // Return a context with the previous and new todo return { previousEvents }; @@ -148,19 +148,19 @@ export default function EventListWrapper() { // Mutation fails, rollback undos optimist update onError: (error, eventId, context) => { - queryClient.setQueryData(eventsNamespace, context.previousEvents); + queryClient.setQueryData(EVENTS_TABLE, context.previousEvents); }, // Mutation finished, failed or successful // Fetch anyway, just to be sure onSettled: () => { - queryClient.invalidateQueries(eventsNamespace); + queryClient.invalidateQueries(EVENTS_TABLE); }, }); const applyDelay = useMutation(requestApplyDelay, { // Mutation finished, failed or successful onSettled: () => { - queryClient.invalidateQueries(eventsNamespace); + queryClient.invalidateQueries(EVENTS_TABLE); }, }); @@ -168,17 +168,17 @@ export default function EventListWrapper() { // we optimistically update here onMutate: async (data) => { // cancel ongoing queries - queryClient.cancelQueries(eventsNamespace, { exact: true }); + queryClient.cancelQueries(EVENTS_TABLE, { exact: true }); // Snapshot the previous value - const previousEvents = queryClient.getQueryData(eventsNamespace); + const previousEvents = queryClient.getQueryData(EVENTS_TABLE); const e = [...previousEvents]; const [reorderedItem] = e.splice(data.from, 1); e.splice(data.to, 0, reorderedItem); // optimistically update object - queryClient.setQueryData(eventsNamespace, e); + queryClient.setQueryData(EVENTS_TABLE, e); // Return a context with the previous and new todo return { previousEvents }; @@ -186,12 +186,12 @@ export default function EventListWrapper() { // Mutation fails, rollback undos optimist update onError: (error, eventId, context) => { - queryClient.setQueryData(eventsNamespace, context.previousEvents); + queryClient.setQueryData(EVENTS_TABLE, context.previousEvents); }, // Mutation finished, failed or successful // Fetch anyway, just to be sure onSettled: () => { - queryClient.invalidateQueries(eventsNamespace); + queryClient.invalidateQueries(EVENTS_TABLE); }, }); diff --git a/client/src/features/modals/SettingsModal.jsx b/client/src/features/modals/SettingsModal.jsx index 401168e5f..7d4c507a0 100644 --- a/client/src/features/modals/SettingsModal.jsx +++ b/client/src/features/modals/SettingsModal.jsx @@ -14,12 +14,13 @@ import { Button, Textarea, } from '@chakra-ui/react'; -import { fetchEvent, postEvent, eventNamespace } from 'app/api/eventApi'; +import { fetchEvent, postEvent } from 'app/api/eventApi'; import { useEffect, useState } from 'react'; import { useFetch } from 'app/hooks/useFetch'; +import { EVENT_TABLE } from 'app/api/apiConstants'; export default function SettingsModal(props) { - const { data, status, isError } = useFetch(eventNamespace, fetchEvent); + const { data, status, isError } = useFetch(EVENT_TABLE, fetchEvent); const [formData, setFormData] = useState({ title: '', url: '', diff --git a/client/src/features/viewers/ViewWrapper.jsx b/client/src/features/viewers/ViewWrapper.jsx index 453625511..6e198eac3 100644 --- a/client/src/features/viewers/ViewWrapper.jsx +++ b/client/src/features/viewers/ViewWrapper.jsx @@ -1,9 +1,10 @@ import { useEffect, useState } from 'react'; -import { eventsNamespace, fetchAllEvents } from 'app/api/eventsApi'; -import { fetchEvent, eventNamespace } from 'app/api/eventApi'; +import { fetchAllEvents } from 'app/api/eventsApi'; +import { fetchEvent } from 'app/api/eventApi'; import { useSocket } from 'app/context/socketContext'; import { stringFromMillis } from 'common/dateConfig'; import { useFetch } from 'app/hooks/useFetch'; +import { EVENTS_TABLE, EVENT_TABLE } from 'app/api/apiConstants'; const withSocket = (Component) => { const WrappedComponent = (props) => { @@ -11,12 +12,12 @@ const withSocket = (Component) => { data: eventsData, status: eventsDataStatus, isError: eventsDataIsError, - } = useFetch(eventsNamespace, fetchAllEvents); + } = useFetch(EVENTS_TABLE, fetchAllEvents); const { data: genData, status: genDataStatus, isError: genDataIsError, - } = useFetch(eventNamespace, fetchEvent); + } = useFetch(EVENT_TABLE, fetchEvent); const [publicEvents, setPublicEvents] = useState([]); const [backstageEvents, setBackstageEvents] = useState([]);