cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-09-03 21:39:08 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

refract: cleanup server call constants

Browse Source
This commit is contained in:
cv
2021-05-16 22:41:43 +02:00
parent b42710a972
commit 8162c622a6
8 changed files with 46 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/app/api/apiConstants.js
+5
View File
@@ -1,7 +1,12 @@
export const NODE_PORT = 4001; export const NODE_PORT = 4001;
export const EVENT_TABLE = 'event';
export const EVENTS_TABLE = 'events';
const calculateServer = () => { const calculateServer = () => {
return window.location.origin.replace(window.location.port, `${NODE_PORT}/`); return window.location.origin.replace(window.location.port, `${NODE_PORT}/`);
}; };
export const serverURL = calculateServer(); export const serverURL = calculateServer();
export const eventURL = serverURL + EVENT_TABLE;
export const eventsURL = serverURL + EVENTS_TABLE;
export const playbackURL = serverURL + 'playback';
client/src/app/api/eventApi.js
+1 -4
View File
@@ -1,8 +1,5 @@
import axios from 'axios'; import axios from 'axios';
import { serverURL } from './apiConstants'; import { eventURL } from './apiConstants';
export const eventNamespace = 'event';
export const eventURL = serverURL + eventNamespace;
export const fetchEvent = async () => { export const fetchEvent = async () => {
const res = await axios.get(eventURL); const res = await axios.get(eventURL);
client/src/app/api/eventsApi.js
+1 -10
View File
@@ -1,14 +1,5 @@
import axios from 'axios'; import axios from 'axios';
import { NODE_PORT } from '../api/apiConstants'; import { eventsURL } 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;
export const fetchAllEvents = async () => { export const fetchAllEvents = async () => {
const res = await axios.get(eventsURL); const res = await axios.get(eventsURL);
client/src/app/api/playbackApi.js
+1 -4
View File
@@ -1,8 +1,5 @@
import axios from 'axios'; import axios from 'axios';
import { serverURL } from '../api/apiConstants'; import { playbackURL } from '../api/apiConstants';
export const playbackNamespace = 'playback';
const playbackURL = serverURL + playbackNamespace;
export const getStart = async () => { export const getStart = async () => {
const res = await axios.get(playbackURL + '/start'); const res = await axios.get(playbackURL + '/start');
client/src/app/context/socketContext.js
+1 -7
View File
@@ -1,12 +1,6 @@
import { createContext, useContext, useEffect, useState } from 'react'; import { createContext, useContext, useEffect, useState } from 'react';
import io from 'socket.io-client'; import io from 'socket.io-client';
import { NODE_PORT } from '../api/apiConstants'; import { serverURL } from 'app/api/apiConstants';
// get origin from URL
const serverURL = window.location.origin.replace(
window.location.port,
`${NODE_PORT}/`
);
const SocketContext = createContext([[], () => {}]); const SocketContext = createContext([[], () => {}]);
client/src/features/editors/list/EventListWrapper.jsx
+29 -29
View File
@@ -1,7 +1,6 @@
import { useMutation, useQueryClient } from 'react-query'; import { useMutation, useQueryClient } from 'react-query';
import { useCallback, useEffect } from 'react'; import { useCallback, useEffect } from 'react';
import { import {
eventsNamespace,
fetchAllEvents, fetchAllEvents,
requestPatch, requestPatch,
requestPost, requestPost,
@@ -15,11 +14,12 @@ import EventListMenu from 'features/menu/EventListMenu.jsx';
import { showErrorToast } from 'common/helpers/toastManager'; import { showErrorToast } from 'common/helpers/toastManager';
import { useFetch } from 'app/hooks/useFetch.js'; import { useFetch } from 'app/hooks/useFetch.js';
import Empty from 'common/state/Empty'; import Empty from 'common/state/Empty';
import { EVENTS_TABLE } from 'app/api/apiConstants';
export default function EventListWrapper() { export default function EventListWrapper() {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const { data, status, isError, refetch } = useFetch( const { data, status, isError, refetch } = useFetch(
eventsNamespace, EVENTS_TABLE,
fetchAllEvents fetchAllEvents
); );
@@ -27,14 +27,14 @@ export default function EventListWrapper() {
// we optimistically update here // we optimistically update here
onMutate: async (newEvent) => { onMutate: async (newEvent) => {
// cancel ongoing queries // cancel ongoing queries
queryClient.cancelQueries(eventsNamespace, { exact: true }); queryClient.cancelQueries(EVENTS_TABLE, { exact: true });
// Snapshot the previous value // Snapshot the previous value
let previousEvents = queryClient.getQueryData(eventsNamespace); let previousEvents = queryClient.getQueryData(EVENTS_TABLE);
console.log('debug', previousEvents); console.log('debug', previousEvents);
if (previousEvents == null) { if (previousEvents == null) {
refetch(); refetch();
previousEvents = queryClient.getQueryData(eventsNamespace); previousEvents = queryClient.getQueryData(EVENTS_TABLE);
} }
console.log('debug 2', previousEvents); console.log('debug 2', previousEvents);
@@ -44,7 +44,7 @@ export default function EventListWrapper() {
...newEvent, ...newEvent,
id: new Date().toISOString(), id: new Date().toISOString(),
}); });
queryClient.setQueryData(eventsNamespace, optimistic); queryClient.setQueryData(EVENTS_TABLE, optimistic);
// Return a context with the previous and new todo // Return a context with the previous and new todo
return { previousEvents }; return { previousEvents };
@@ -52,12 +52,12 @@ export default function EventListWrapper() {
// Mutation fails, rollback undos optimist update // Mutation fails, rollback undos optimist update
onError: (error, newEvent, context) => { onError: (error, newEvent, context) => {
queryClient.setQueryData(eventsNamespace, context.previousEvents); queryClient.setQueryData(EVENTS_TABLE, context.previousEvents);
}, },
// Mutation finished, failed or successful // Mutation finished, failed or successful
// Fetch anyway, just to be sure // Fetch anyway, just to be sure
onSettled: () => { onSettled: () => {
queryClient.invalidateQueries(eventsNamespace); queryClient.invalidateQueries(EVENTS_TABLE);
}, },
}); });
@@ -65,16 +65,16 @@ export default function EventListWrapper() {
// we optimistically update here // we optimistically update here
onMutate: async (newEvent) => { onMutate: async (newEvent) => {
// cancel ongoing queries // cancel ongoing queries
queryClient.cancelQueries([eventsNamespace, newEvent.id]); queryClient.cancelQueries([EVENTS_TABLE, newEvent.id]);
// Snapshot the previous value // Snapshot the previous value
const previousEvent = queryClient.getQueryData([ const previousEvent = queryClient.getQueryData([
eventsNamespace, EVENTS_TABLE,
newEvent.id, newEvent.id,
]); ]);
// optimistically update object // 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 a context with the previous and new todo
return { previousEvent, newEvent }; return { previousEvent, newEvent };
@@ -83,14 +83,14 @@ export default function EventListWrapper() {
// Mutation fails, rollback undos optimist update // Mutation fails, rollback undos optimist update
onError: (error, newEvent, context) => { onError: (error, newEvent, context) => {
queryClient.setQueryData( queryClient.setQueryData(
[eventsNamespace, context.newEvent.id], [EVENTS_TABLE, context.newEvent.id],
context.previousEvent context.previousEvent
); );
}, },
// Mutation finished, failed or successful // Mutation finished, failed or successful
// Fetch anyway, just to be sure // Fetch anyway, just to be sure
onSettled: (newEvent) => { 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 // we optimistically update here
onMutate: async (newEvent) => { onMutate: async (newEvent) => {
// cancel ongoing queries // cancel ongoing queries
queryClient.cancelQueries([eventsNamespace, newEvent.id]); queryClient.cancelQueries([EVENTS_TABLE, newEvent.id]);
// Snapshot the previous value // Snapshot the previous value
const previousEvent = queryClient.getQueryData([ const previousEvent = queryClient.getQueryData([
eventsNamespace, EVENTS_TABLE,
newEvent.id, newEvent.id,
]); ]);
// optimistically update object // 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 a context with the previous and new todo
return { previousEvent, newEvent }; return { previousEvent, newEvent };
@@ -116,14 +116,14 @@ export default function EventListWrapper() {
// Mutation fails, rollback undos optimist update // Mutation fails, rollback undos optimist update
onError: (error, newEvent, context) => { onError: (error, newEvent, context) => {
queryClient.setQueryData( queryClient.setQueryData(
[eventsNamespace, context.newEvent.id], [EVENTS_TABLE, context.newEvent.id],
context.previousEvent context.previousEvent
); );
}, },
// Mutation finished, failed or successful // Mutation finished, failed or successful
// Fetch anyway, just to be sure // Fetch anyway, just to be sure
onSettled: (newEvent) => { 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 // we optimistically update here
onMutate: async (eventId) => { onMutate: async (eventId) => {
// cancel ongoing queries // cancel ongoing queries
queryClient.cancelQueries([eventsNamespace, eventId]); queryClient.cancelQueries([EVENTS_TABLE, eventId]);
// Snapshot the previous value // Snapshot the previous value
const previousEvents = queryClient.getQueryData(eventsNamespace); const previousEvents = queryClient.getQueryData(EVENTS_TABLE);
let filtered = [...previousEvents]; let filtered = [...previousEvents];
filtered.filter((e) => e.id === 'eventId'); filtered.filter((e) => e.id === 'eventId');
// optimistically update object // optimistically update object
queryClient.setQueryData(eventsNamespace, filtered); queryClient.setQueryData(EVENTS_TABLE, filtered);
// Return a context with the previous and new todo // Return a context with the previous and new todo
return { previousEvents }; return { previousEvents };
@@ -148,19 +148,19 @@ export default function EventListWrapper() {
// Mutation fails, rollback undos optimist update // Mutation fails, rollback undos optimist update
onError: (error, eventId, context) => { onError: (error, eventId, context) => {
queryClient.setQueryData(eventsNamespace, context.previousEvents); queryClient.setQueryData(EVENTS_TABLE, context.previousEvents);
}, },
// Mutation finished, failed or successful // Mutation finished, failed or successful
// Fetch anyway, just to be sure // Fetch anyway, just to be sure
onSettled: () => { onSettled: () => {
queryClient.invalidateQueries(eventsNamespace); queryClient.invalidateQueries(EVENTS_TABLE);
}, },
}); });
const applyDelay = useMutation(requestApplyDelay, { const applyDelay = useMutation(requestApplyDelay, {
// Mutation finished, failed or successful // Mutation finished, failed or successful
onSettled: () => { onSettled: () => {
queryClient.invalidateQueries(eventsNamespace); queryClient.invalidateQueries(EVENTS_TABLE);
}, },
}); });
@@ -168,17 +168,17 @@ export default function EventListWrapper() {
// we optimistically update here // we optimistically update here
onMutate: async (data) => { onMutate: async (data) => {
// cancel ongoing queries // cancel ongoing queries
queryClient.cancelQueries(eventsNamespace, { exact: true }); queryClient.cancelQueries(EVENTS_TABLE, { exact: true });
// Snapshot the previous value // Snapshot the previous value
const previousEvents = queryClient.getQueryData(eventsNamespace); const previousEvents = queryClient.getQueryData(EVENTS_TABLE);
const e = [...previousEvents]; const e = [...previousEvents];
const [reorderedItem] = e.splice(data.from, 1); const [reorderedItem] = e.splice(data.from, 1);
e.splice(data.to, 0, reorderedItem); e.splice(data.to, 0, reorderedItem);
// optimistically update object // optimistically update object
queryClient.setQueryData(eventsNamespace, e); queryClient.setQueryData(EVENTS_TABLE, e);
// Return a context with the previous and new todo // Return a context with the previous and new todo
return { previousEvents }; return { previousEvents };
@@ -186,12 +186,12 @@ export default function EventListWrapper() {
// Mutation fails, rollback undos optimist update // Mutation fails, rollback undos optimist update
onError: (error, eventId, context) => { onError: (error, eventId, context) => {
queryClient.setQueryData(eventsNamespace, context.previousEvents); queryClient.setQueryData(EVENTS_TABLE, context.previousEvents);
}, },
// Mutation finished, failed or successful // Mutation finished, failed or successful
// Fetch anyway, just to be sure // Fetch anyway, just to be sure
onSettled: () => { onSettled: () => {
queryClient.invalidateQueries(eventsNamespace); queryClient.invalidateQueries(EVENTS_TABLE);
}, },
}); });
client/src/features/modals/SettingsModal.jsx
+3 -2
View File
@@ -14,12 +14,13 @@ import {
Button, Button,
Textarea, Textarea,
} from '@chakra-ui/react'; } 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 { useEffect, useState } from 'react';
import { useFetch } from 'app/hooks/useFetch'; import { useFetch } from 'app/hooks/useFetch';
import { EVENT_TABLE } from 'app/api/apiConstants';
export default function SettingsModal(props) { export default function SettingsModal(props) {
const { data, status, isError } = useFetch(eventNamespace, fetchEvent); const { data, status, isError } = useFetch(EVENT_TABLE, fetchEvent);
const [formData, setFormData] = useState({ const [formData, setFormData] = useState({
title: '', title: '',
url: '', url: '',
client/src/features/viewers/ViewWrapper.jsx
+5 -4
View File
@@ -1,9 +1,10 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { eventsNamespace, fetchAllEvents } from 'app/api/eventsApi'; import { fetchAllEvents } from 'app/api/eventsApi';
import { fetchEvent, eventNamespace } from 'app/api/eventApi'; import { fetchEvent } from 'app/api/eventApi';
import { useSocket } from 'app/context/socketContext'; import { useSocket } from 'app/context/socketContext';
import { stringFromMillis } from 'common/dateConfig'; import { stringFromMillis } from 'common/dateConfig';
import { useFetch } from 'app/hooks/useFetch'; import { useFetch } from 'app/hooks/useFetch';
import { EVENTS_TABLE, EVENT_TABLE } from 'app/api/apiConstants';
const withSocket = (Component) => { const withSocket = (Component) => {
const WrappedComponent = (props) => { const WrappedComponent = (props) => {
@@ -11,12 +12,12 @@ const withSocket = (Component) => {
data: eventsData, data: eventsData,
status: eventsDataStatus, status: eventsDataStatus,
isError: eventsDataIsError, isError: eventsDataIsError,
} = useFetch(eventsNamespace, fetchAllEvents); } = useFetch(EVENTS_TABLE, fetchAllEvents);
const { const {
data: genData, data: genData,
status: genDataStatus, status: genDataStatus,
isError: genDataIsError, isError: genDataIsError,
} = useFetch(eventNamespace, fetchEvent); } = useFetch(EVENT_TABLE, fetchEvent);
const [publicEvents, setPublicEvents] = useState([]); const [publicEvents, setPublicEvents] = useState([]);
const [backstageEvents, setBackstageEvents] = useState([]); const [backstageEvents, setBackstageEvents] = useState([]);