refract: cleanup server call constants

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
+5
View File
@@ -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';
+1 -4
View File
@@ -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);
+1 -10
View File
@@ -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);
+1 -4
View File
@@ -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');
+1 -7
View File
@@ -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([[], () => {}]);
@@ -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);
},
});
+3 -2
View File
@@ -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: '',
+5 -4
View File
@@ -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([]);