66 lines
2.1 KiB
TypeScript
66 lines
2.1 KiB
TypeScript
import React from 'react';
|
|
import { ServerContext } from '@/state/server';
|
|
import TitledGreyBox from '@/components/elements/TitledGreyBox';
|
|
import { Form, FormikProps, withFormik } from 'formik';
|
|
import { Server } from '@/api/server/getServer';
|
|
import { ActionCreator } from 'easy-peasy';
|
|
import renameServer from '@/api/server/renameServer';
|
|
import Field from '@/components/elements/Field';
|
|
import { object, string } from 'yup';
|
|
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
|
|
|
|
interface OwnProps {
|
|
server: Server;
|
|
setServer: ActionCreator<Server>;
|
|
}
|
|
|
|
interface Values {
|
|
name: string;
|
|
}
|
|
|
|
const RenameServerBox = ({ isSubmitting, ...props }: OwnProps & FormikProps<Values>) => (
|
|
<TitledGreyBox title={'Change Server Name'} className={'relative'}>
|
|
<SpinnerOverlay size={'normal'} visible={isSubmitting}/>
|
|
<Form className={'mb-0'}>
|
|
<Field
|
|
id={'name'}
|
|
name={'name'}
|
|
label={'Server Name'}
|
|
type={'text'}
|
|
/>
|
|
<div className={'mt-6 text-right'}>
|
|
<button type={'submit'} className={'btn btn-sm btn-primary'}>
|
|
Save
|
|
</button>
|
|
</div>
|
|
</Form>
|
|
</TitledGreyBox>
|
|
);
|
|
|
|
const EnhancedForm = withFormik<OwnProps, Values>({
|
|
displayName: 'RenameServerBoxForm',
|
|
|
|
mapPropsToValues: props => ({
|
|
name: props.server.name,
|
|
}),
|
|
|
|
validationSchema: () => object().shape({
|
|
name: string().required().min(1),
|
|
}),
|
|
|
|
handleSubmit: (values, { props, setSubmitting }) => {
|
|
renameServer(props.server.uuid, values.name)
|
|
.then(() => props.setServer({ ...props.server, name: values.name }))
|
|
.catch(error => {
|
|
console.error(error);
|
|
})
|
|
.then(() => setSubmitting(false));
|
|
},
|
|
})(RenameServerBox);
|
|
|
|
export default () => {
|
|
const server = ServerContext.useStoreState(state => state.server.data!);
|
|
const setServer = ServerContext.useStoreActions(actions => actions.server.setServer);
|
|
|
|
return <EnhancedForm server={server} setServer={setServer}/>;
|
|
};
|