Skynet/misc_pterodactyl-panel
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

React 18 and Vite (#4510)

Browse source
This commit is contained in:
Matthew Penner 2022-11-25 13:25:03 -07:00 • committed by GitHub
parent 1bb1b13f6d
commit 21613fa602
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
244 changed files with 4547 additions and 8933 deletions
Download patch file Download diff file Expand all files Collapse all files

6
resources/scripts/components/server/schedules/DeleteScheduleButton.tsx
View file

@ -1,4 +1,4 @@
import React, { useState } from 'react';
import { useState } from 'react';
import deleteSchedule from '@/api/server/schedules/deleteSchedule';
import { ServerContext } from '@/state/server';
import { Actions, useStoreActions } from 'easy-peasy';
@ -16,7 +16,7 @@ interface Props {
export default ({ scheduleId, onDeleted }: Props) => {
const [visible, setVisible] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const { addError, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
const onDelete = () => {
@ -27,7 +27,7 @@ export default ({ scheduleId, onDeleted }: Props) => {
setIsLoading(false);
onDeleted();
})
.catch((error) => {
.catch(error => {
console.error(error);
addError({ key: 'schedules', message: httpErrorToHuman(error) });

12
resources/scripts/components/server/schedules/EditScheduleModal.tsx
View file

@ -1,4 +1,4 @@
import React, { useContext, useEffect, useState } from 'react';
import { useContext, useEffect, useState } from 'react';
import { Schedule } from '@/api/server/schedules/getServerSchedules';
import Field from '@/components/elements/Field';
import { Form, Formik, FormikHelpers } from 'formik';
@ -34,8 +34,8 @@ const EditScheduleModal = ({ schedule }: Props) => {
const { addError, clearFlashes } = useFlash();
const { dismiss } = useContext(ModalContext);
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
const appendSchedule = ServerContext.useStoreActions((actions) => actions.schedules.appendSchedule);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const appendSchedule = ServerContext.useStoreActions(actions => actions.schedules.appendSchedule);
const [showCheatsheet, setShowCheetsheet] = useState(false);
useEffect(() => {
@ -59,12 +59,12 @@ const EditScheduleModal = ({ schedule }: Props) => {
onlyWhenOnline: values.onlyWhenOnline,
isActive: values.enabled,
})
.then((schedule) => {
.then(schedule => {
setSubmitting(false);
appendSchedule(schedule);
dismiss();
})
.catch((error) => {
.catch(error => {
console.error(error);
setSubmitting(false);
@ -114,7 +114,7 @@ const EditScheduleModal = ({ schedule }: Props) => {
description={'Show the cron cheatsheet for some examples.'}
label={'Show Cheatsheet'}
defaultChecked={showCheatsheet}
onChange={() => setShowCheetsheet((s) => !s)}
onChange={() => setShowCheetsheet(s => !s)}
/>
{showCheatsheet && (
<div css={tw`block md:flex w-full`}>

2
resources/scripts/components/server/schedules/NewTaskButton.tsx
View file

@ -1,4 +1,4 @@
import React, { useState } from 'react';
import { useState } from 'react';
import { Schedule } from '@/api/server/schedules/getServerSchedules';
import TaskDetailsModal from '@/components/server/schedules/TaskDetailsModal';
import { Button } from '@/components/elements/button/index';

8
resources/scripts/components/server/schedules/RunScheduleButton.tsx
View file

@ -1,4 +1,4 @@
import React, { useCallback, useState } from 'react';
import { useCallback, useState } from 'react';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import { Button } from '@/components/elements/button/index';
import triggerScheduleExecution from '@/api/server/schedules/triggerScheduleExecution';
@ -10,8 +10,8 @@ const RunScheduleButton = ({ schedule }: { schedule: Schedule }) => {
const [loading, setLoading] = useState(false);
const { clearFlashes, clearAndAddHttpError } = useFlash();
const id = ServerContext.useStoreState((state) => state.server.data!.id);
const appendSchedule = ServerContext.useStoreActions((actions) => actions.schedules.appendSchedule);
const id = ServerContext.useStoreState(state => state.server.data!.id);
const appendSchedule = ServerContext.useStoreActions(actions => actions.schedules.appendSchedule);
const onTriggerExecute = useCallback(() => {
clearFlashes('schedule');
@ -21,7 +21,7 @@ const RunScheduleButton = ({ schedule }: { schedule: Schedule }) => {
setLoading(false);
appendSchedule({ ...schedule, isProcessing: true });
})
.catch((error) => {
.catch(error => {
console.error(error);
clearAndAddHttpError({ error, key: 'schedules' });
})

1
resources/scripts/components/server/schedules/ScheduleCheatsheetCards.tsx
View file

@ -1,4 +1,3 @@
import React from 'react';
import tw from 'twin.macro';
export default () => {

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

@ -1,8 +1,7 @@
import React, { useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import getServerSchedules from '@/api/server/schedules/getServerSchedules';
import { ServerContext } from '@/state/server';
import Spinner from '@/components/elements/Spinner';
import { useHistory, useRouteMatch } from 'react-router-dom';
import FlashMessageRender from '@/components/FlashMessageRender';
import ScheduleRow from '@/components/server/schedules/ScheduleRow';
import { httpErrorToHuman } from '@/api/http';
@ -13,24 +12,23 @@ import tw from 'twin.macro';
import GreyRowBox from '@/components/elements/GreyRowBox';
import { Button } from '@/components/elements/button/index';
import ServerContentBlock from '@/components/elements/ServerContentBlock';
import { Link } from 'react-router-dom';
export default () => {
const match = useRouteMatch();
const history = useHistory();
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
function ScheduleContainer() {
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const { clearFlashes, addError } = useFlash();
const [loading, setLoading] = useState(true);
const [visible, setVisible] = useState(false);
const schedules = ServerContext.useStoreState((state) => state.schedules.data);
const setSchedules = ServerContext.useStoreActions((actions) => actions.schedules.setSchedules);
const schedules = ServerContext.useStoreState(state => state.schedules.data);
const setSchedules = ServerContext.useStoreActions(actions => actions.schedules.setSchedules);
useEffect(() => {
clearFlashes('schedules');
getServerSchedules(uuid)
.then((schedules) => setSchedules(schedules))
.catch((error) => {
.then(schedules => setSchedules(schedules))
.catch(error => {
addError({ message: httpErrorToHuman(error), key: 'schedules' });
console.error(error);
})
@ -49,16 +47,13 @@ export default () => {
There are no schedules configured for this server.
</p>
) : (
schedules.map((schedule) => (
schedules.map(schedule => (
// @ts-expect-error go away
<GreyRowBox
as={'a'}
key={schedule.id}
href={`${match.url}/${schedule.id}`}
as={Link}
to={schedule.id}
css={tw`cursor-pointer mb-2 flex-wrap`}
onClick={(e: any) => {
e.preventDefault();
history.push(`${match.url}/${schedule.id}`);
}}
>
<ScheduleRow schedule={schedule} />
</GreyRowBox>
@ -76,4 +71,6 @@ export default () => {
)}
</ServerContentBlock>
);
};
}
export default ScheduleContainer;

1
resources/scripts/components/server/schedules/ScheduleCronRow.tsx
View file

@ -1,4 +1,3 @@
import React from 'react';
import { Schedule } from '@/api/server/schedules/getServerSchedules';
import classNames from 'classnames';

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

@ -1,5 +1,5 @@
import React, { useCallback, useEffect, useState } from 'react';
import { useHistory, useParams } from 'react-router-dom';
import { useCallback, useEffect, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import getServerSchedule from '@/api/server/schedules/getServerSchedule';
import Spinner from '@/components/elements/Spinner';
import FlashMessageRender from '@/components/FlashMessageRender';
@ -18,10 +18,6 @@ import { format } from 'date-fns';
import ScheduleCronRow from '@/components/server/schedules/ScheduleCronRow';
import RunScheduleButton from '@/components/server/schedules/RunScheduleButton';
interface Params {
id: string;
}
const CronBox = ({ title, value }: { title: string; value: string }) => (
<div css={tw`bg-neutral-700 rounded p-3`}>
<p css={tw`text-neutral-300 text-sm`}>{title}</p>
@ -41,21 +37,21 @@ const ActivePill = ({ active }: { active: boolean }) => (
);
export default () => {
const history = useHistory();
const { id: scheduleId } = useParams<Params>();
const { id: scheduleId } = useParams<'id'>();
const navigate = useNavigate();
const id = ServerContext.useStoreState((state) => state.server.data!.id);
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
const id = ServerContext.useStoreState(state => state.server.data!.id);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const { clearFlashes, clearAndAddHttpError } = useFlash();
const [isLoading, setIsLoading] = useState(true);
const [showEditModal, setShowEditModal] = useState(false);
const schedule = ServerContext.useStoreState(
(st) => st.schedules.data.find((s) => s.id === Number(scheduleId)),
isEqual
st => st.schedules.data.find(s => s.id === Number(scheduleId)),
isEqual,
);
const appendSchedule = ServerContext.useStoreActions((actions) => actions.schedules.appendSchedule);
const appendSchedule = ServerContext.useStoreActions(actions => actions.schedules.appendSchedule);
useEffect(() => {
if (schedule?.id === Number(scheduleId)) {
@ -65,8 +61,8 @@ export default () => {
clearFlashes('schedules');
getServerSchedule(uuid, Number(scheduleId))
.then((schedule) => appendSchedule(schedule))
.catch((error) => {
.then(schedule => appendSchedule(schedule))
.catch(error => {
console.error(error);
clearAndAddHttpError({ error, key: 'schedules' });
})
@ -74,7 +70,7 @@ export default () => {
}, [scheduleId]);
const toggleEditModal = useCallback(() => {
setShowEditModal((s) => !s);
setShowEditModal(s => !s);
}, []);
return (
@ -140,9 +136,9 @@ export default () => {
{schedule.tasks.length > 0
? schedule.tasks
.sort((a, b) =>
a.sequenceId === b.sequenceId ? 0 : a.sequenceId > b.sequenceId ? 1 : -1
a.sequenceId === b.sequenceId ? 0 : a.sequenceId > b.sequenceId ? 1 : -1,
)
.map((task) => (
.map(task => (
<ScheduleTaskRow
key={`${schedule.id}_${task.id}`}
task={task}
@ -157,7 +153,7 @@ export default () => {
<Can action={'schedule.delete'}>
<DeleteScheduleButton
scheduleId={schedule.id}
onDeleted={() => history.push(`/server/${id}/schedules`)}
onDeleted={() => navigate(`/server/${id}/schedules`)}
/>
</Can>
{schedule.tasks.length > 0 && (

1
resources/scripts/components/server/schedules/ScheduleRow.tsx
View file

@ -1,4 +1,3 @@
import React from 'react';
import { Schedule } from '@/api/server/schedules/getServerSchedules';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCalendarAlt } from '@fortawesome/free-solid-svg-icons';

12
resources/scripts/components/server/schedules/ScheduleTaskRow.tsx
View file

@ -1,4 +1,4 @@
import React, { useState } from 'react';
import { useState } from 'react';
import { Schedule, Task } from '@/api/server/schedules/getServerSchedules';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
@ -40,12 +40,12 @@ const getActionDetails = (action: string): [string, any] => {
};
export default ({ schedule, task }: Props) => {
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const { clearFlashes, addError } = useFlash();
const [visible, setVisible] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [isEditing, setIsEditing] = useState(false);
const appendSchedule = ServerContext.useStoreActions((actions) => actions.schedules.appendSchedule);
const appendSchedule = ServerContext.useStoreActions(actions => actions.schedules.appendSchedule);
const onConfirmDeletion = () => {
setIsLoading(true);
@ -54,10 +54,10 @@ export default ({ schedule, task }: Props) => {
.then(() =>
appendSchedule({
...schedule,
tasks: schedule.tasks.filter((t) => t.id !== task.id),
})
tasks: schedule.tasks.filter(t => t.id !== task.id),
}),
)
.catch((error) => {
.catch(error => {
console.error(error);
setIsLoading(false);
addError({ message: httpErrorToHuman(error), key: 'schedules' });

18
resources/scripts/components/server/schedules/TaskDetailsModal.tsx
View file

@ -1,4 +1,4 @@
import React, { useContext, useEffect } from 'react';
import { useContext, useEffect } from 'react';
import { Schedule, Task } from '@/api/server/schedules/getServerSchedules';
import { Field as FormikField, Form, Formik, FormikHelpers, useField } from 'formik';
import { ServerContext } from '@/state/server';
@ -35,7 +35,7 @@ interface Values {
const schema = object().shape({
action: string().required().oneOf(['command', 'power', 'backup']),
payload: string().when('action', {
is: (v) => v !== 'backup',
is: (v: string) => v !== 'backup',
then: string().required('A task payload must be provided.'),
otherwise: string(),
}),
@ -68,9 +68,9 @@ const TaskDetailsModal = ({ schedule, task }: Props) => {
const { dismiss } = useContext(ModalContext);
const { clearFlashes, addError } = useFlash();
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
const appendSchedule = ServerContext.useStoreActions((actions) => actions.schedules.appendSchedule);
const backupLimit = ServerContext.useStoreState((state) => state.server.data!.featureLimits.backups);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const appendSchedule = ServerContext.useStoreActions(actions => actions.schedules.appendSchedule);
const backupLimit = ServerContext.useStoreState(state => state.server.data!.featureLimits.backups);
useEffect(() => {
return () => {
@ -88,16 +88,16 @@ const TaskDetailsModal = ({ schedule, task }: Props) => {
});
} else {
createOrUpdateScheduleTask(uuid, schedule.id, task?.id, values)
.then((task) => {
let tasks = schedule.tasks.map((t) => (t.id === task.id ? task : t));
if (!schedule.tasks.find((t) => t.id === task.id)) {
.then(task => {
let tasks = schedule.tasks.map(t => (t.id === task.id ? task : t));
if (!schedule.tasks.find(t => t.id === task.id)) {
tasks = [...tasks, task];
}
appendSchedule({ ...schedule, tasks });
dismiss();
})
.catch((error) => {
.catch(error => {
console.error(error);
setSubmitting(false);
addError({ message: httpErrorToHuman(error), key: 'schedule:task' });