StarMC/Astral-nook
StarMC/Astral-nook
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

use children in routes instead of component prop

Browse source
This commit is contained in:
Jakob Schrettenbrunner 2021-01-01 17:21:13 +00:00
parent 5f284dad1d
commit 0f9b3a5722
6 changed files with 80 additions and 88 deletions
Download patch file Download diff file Expand all files Collapse all files

7
resources/scripts/components/server/schedules/ScheduleContainer.tsx
View file

@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
import getServerSchedules from '@/api/server/schedules/getServerSchedules';
import { ServerContext } from '@/state/server';
import Spinner from '@/components/elements/Spinner';
import { RouteComponentProps } from 'react-router-dom';
import { useHistory, useRouteMatch } from 'react-router-dom';
import FlashMessageRender from '@/components/FlashMessageRender';
import ScheduleRow from '@/components/server/schedules/ScheduleRow';
import { httpErrorToHuman } from '@/api/http';
@ -14,7 +14,10 @@ import GreyRowBox from '@/components/elements/GreyRowBox';
import Button from '@/components/elements/Button';
import ServerContentBlock from '@/components/elements/ServerContentBlock';
export default ({ match, history }: RouteComponentProps) => {
export default () => {
const match = useRouteMatch();
const history = useHistory();
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const { clearFlashes, addError } = useFlash();
const [ loading, setLoading ] = useState(true);

14
resources/scripts/components/server/schedules/ScheduleEditContainer.tsx
View file

@ -1,5 +1,5 @@
import React, { useCallback, useEffect, useState } from 'react';
import { RouteComponentProps } from 'react-router-dom';
import { useHistory, useLocation, useParams } from 'react-router-dom';
import { Schedule } from '@/api/server/schedules/getServerSchedules';
import getServerSchedule from '@/api/server/schedules/getServerSchedule';
import Spinner from '@/components/elements/Spinner';
@ -45,7 +45,11 @@ const ActivePill = ({ active }: { active: boolean }) => (
</span>
);
export default ({ match, history, location: { state } }: RouteComponentProps<Params, Record<string, unknown>, State>) => {
export default () => {
const params = useParams() as Params;
const history = useHistory();
const state: State = useLocation().state;
const id = ServerContext.useStoreState(state => state.server.data!.id);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
@ -57,20 +61,20 @@ export default ({ match, history, location: { state } }: RouteComponentProps<Par
const appendSchedule = ServerContext.useStoreActions(actions => actions.schedules.appendSchedule);
useEffect(() => {
if (schedule?.id === Number(match.params.id)) {
if (schedule?.id === Number(params.id)) {
setIsLoading(false);
return;
}
clearFlashes('schedules');
getServerSchedule(uuid, Number(match.params.id))
getServerSchedule(uuid, Number(params.id))
.then(schedule => appendSchedule(schedule))
.catch(error => {
console.error(error);
clearAndAddHttpError({ error, key: 'schedules' });
})
.then(() => setIsLoading(false));
}, [ match ]);
}, [ params ]);
const toggleEditModal = useCallback(() => {
setShowEditModal(s => !s);