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

16
resources/scripts/components/server/network/AllocationRow.tsx
View file

@ -1,4 +1,4 @@
import React, { memo, useCallback, useState } from 'react';
import { memo, useCallback, useState } from 'react';
import isEqual from 'react-fast-compare';
import tw from 'twin.macro';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@ -9,7 +9,7 @@ import Can from '@/components/elements/Can';
import { Button } from '@/components/elements/button/index';
import GreyRowBox from '@/components/elements/GreyRowBox';
import { Allocation } from '@/api/server/getServer';
import styled from 'styled-components/macro';
import styled from 'styled-components';
import { debounce } from 'debounce';
import setServerAllocationNotes from '@/api/server/network/setServerAllocationNotes';
import { useFlashKey } from '@/plugins/useFlash';
@ -32,11 +32,11 @@ interface Props {
const AllocationRow = ({ allocation }: Props) => {
const [loading, setLoading] = useState(false);
const { clearFlashes, clearAndAddHttpError } = useFlashKey('server:network');
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const { mutate } = getServerAllocations();
const onNotesChanged = useCallback((id: number, notes: string) => {
mutate((data) => data?.map((a) => (a.id === id ? { ...a, notes } : a)), false);
mutate(data => data?.map(a => (a.id === id ? { ...a, notes } : a)), false);
}, []);
const setAllocationNotes = debounce((notes: string) => {
@ -45,15 +45,15 @@ const AllocationRow = ({ allocation }: Props) => {
setServerAllocationNotes(uuid, allocation.id, notes)
.then(() => onNotesChanged(allocation.id, notes))
.catch((error) => clearAndAddHttpError(error))
.catch(error => clearAndAddHttpError(error))
.then(() => setLoading(false));
}, 750);
const setPrimaryAllocation = () => {
clearFlashes();
mutate((data) => data?.map((a) => ({ ...a, isDefault: a.id === allocation.id })), false);
mutate(data => data?.map(a => ({ ...a, isDefault: a.id === allocation.id })), false);
setPrimaryServerAllocation(uuid, allocation.id).catch((error) => {
setPrimaryServerAllocation(uuid, allocation.id).catch(error => {
clearAndAddHttpError(error);
mutate();
});
@ -90,7 +90,7 @@ const AllocationRow = ({ allocation }: Props) => {
className={'bg-neutral-800 hover:border-neutral-600 border-transparent'}
placeholder={'Notes'}
defaultValue={allocation.notes || undefined}
onChange={(e) => setAllocationNotes(e.currentTarget.value)}
onChange={e => setAllocationNotes(e.currentTarget.value)}
/>
</InputSpinner>
</div>

12
resources/scripts/components/server/network/DeleteAllocationButton.tsx
View file

@ -1,4 +1,4 @@
import React, { useState } from 'react';
import { useState } from 'react';
import { faTrashAlt } from '@fortawesome/free-solid-svg-icons';
import tw from 'twin.macro';
import Icon from '@/components/elements/Icon';
@ -16,8 +16,8 @@ interface Props {
const DeleteAllocationButton = ({ allocation }: Props) => {
const [confirm, setConfirm] = useState(false);
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
const setServerFromState = ServerContext.useStoreActions((actions) => actions.server.setServerFromState);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const setServerFromState = ServerContext.useStoreActions(actions => actions.server.setServerFromState);
const { mutate } = getServerAllocations();
const { clearFlashes, clearAndAddHttpError } = useFlashKey('server:network');
@ -25,10 +25,10 @@ const DeleteAllocationButton = ({ allocation }: Props) => {
const deleteAllocation = () => {
clearFlashes();
mutate((data) => data?.filter((a) => a.id !== allocation), false);
setServerFromState((s) => ({ ...s, allocations: s.allocations.filter((a) => a.id !== allocation) }));
mutate(data => data?.filter(a => a.id !== allocation), false);
setServerFromState(s => ({ ...s, allocations: s.allocations.filter(a => a.id !== allocation) }));
deleteServerAllocation(uuid, allocation).catch((error) => {
deleteServerAllocation(uuid, allocation).catch(error => {
clearAndAddHttpError(error);
mutate();
});

20
resources/scripts/components/server/network/NetworkContainer.tsx
View file

@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import Spinner from '@/components/elements/Spinner';
import { useFlashKey } from '@/plugins/useFlash';
import ServerContentBlock from '@/components/elements/ServerContentBlock';
@ -15,10 +15,10 @@ import { useDeepCompareEffect } from '@/plugins/useDeepCompareEffect';
const NetworkContainer = () => {
const [loading, setLoading] = useState(false);
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
const allocationLimit = ServerContext.useStoreState((state) => state.server.data!.featureLimits.allocations);
const allocations = ServerContext.useStoreState((state) => state.server.data!.allocations, isEqual);
const setServerFromState = ServerContext.useStoreActions((actions) => actions.server.setServerFromState);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const allocationLimit = ServerContext.useStoreState(state => state.server.data!.featureLimits.allocations);
const allocations = ServerContext.useStoreState(state => state.server.data!.allocations, isEqual);
const setServerFromState = ServerContext.useStoreActions(actions => actions.server.setServerFromState);
const { clearFlashes, clearAndAddHttpError } = useFlashKey('server:network');
const { data, error, mutate } = getServerAllocations();
@ -34,7 +34,7 @@ const NetworkContainer = () => {
useDeepCompareEffect(() => {
if (!data) return;
setServerFromState((state) => ({ ...state, allocations: data }));
setServerFromState(state => ({ ...state, allocations: data }));
}, [data]);
const onCreateAllocation = () => {
@ -42,11 +42,11 @@ const NetworkContainer = () => {
setLoading(true);
createServerAllocation(uuid)
.then((allocation) => {
setServerFromState((s) => ({ ...s, allocations: s.allocations.concat(allocation) }));
.then(allocation => {
setServerFromState(s => ({ ...s, allocations: s.allocations.concat(allocation) }));
return mutate(data?.concat(allocation), false);
})
.catch((error) => clearAndAddHttpError(error))
.catch(error => clearAndAddHttpError(error))
.then(() => setLoading(false));
};
@ -56,7 +56,7 @@ const NetworkContainer = () => {
<Spinner size={'large'} centered />
) : (
<>
{data.map((allocation) => (
{data.map(allocation => (
<AllocationRow key={`${allocation.ip}:${allocation.port}`} allocation={allocation} />
))}
{allocationLimit > 0 && (