From 7e0ac2c311197a150e9be83b9444a9569ba04f66 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sat, 28 Mar 2020 16:47:32 -0700
Subject: [PATCH] Show error message when attempting to change a server's name

---
 .../server/settings/RenameServerBox.tsx       | 97 ++++++++++---------
 .../server/settings/SettingsContainer.tsx     | 78 ++++++++-------
 2 files changed, 91 insertions(+), 84 deletions(-)

diff --git a/resources/scripts/components/server/settings/RenameServerBox.tsx b/resources/scripts/components/server/settings/RenameServerBox.tsx
index 5b1ed3181..83c0b2f6b 100644
--- a/resources/scripts/components/server/settings/RenameServerBox.tsx
+++ b/resources/scripts/components/server/settings/RenameServerBox.tsx
@@ -1,66 +1,69 @@
 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 { Form, Formik, FormikHelpers, useFormikContext } from 'formik';
+import { Actions, useStoreActions } 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>;
-}
+import { ApplicationStore } from '@/state';
+import { httpErrorToHuman } from '@/api/http';
 
 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 RenameServerBox = () => {
+    const { isSubmitting } = useFormikContext<Values>();
 
-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);
+    return (
+        <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>
+    );
+};
 
 export default () => {
     const server = ServerContext.useStoreState(state => state.server.data!);
     const setServer = ServerContext.useStoreActions(actions => actions.server.setServer);
+    const { addError, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
 
-    return <EnhancedForm server={server} setServer={setServer}/>;
+    const submit = ({ name }: Values, { setSubmitting }: FormikHelpers<Values>) => {
+        clearFlashes('settings');
+        renameServer(server.uuid, name)
+            .then(() => setServer({ ...server, name }))
+            .catch(error => {
+                console.error(error);
+                addError({ key: 'settings', message: httpErrorToHuman(error) });
+            })
+            .then(() => setSubmitting(false));
+    };
+
+    return (
+        <Formik
+            onSubmit={submit}
+            initialValues={{
+                name: server.name,
+            }}
+            validationSchema={object().shape({
+                name: string().required().min(1),
+            })}
+        >
+            <RenameServerBox/>
+        </Formik>
+    );
 };
diff --git a/resources/scripts/components/server/settings/SettingsContainer.tsx b/resources/scripts/components/server/settings/SettingsContainer.tsx
index 104de803f..d487bfc8f 100644
--- a/resources/scripts/components/server/settings/SettingsContainer.tsx
+++ b/resources/scripts/components/server/settings/SettingsContainer.tsx
@@ -5,52 +5,56 @@ import { useStoreState } from 'easy-peasy';
 import { ApplicationStore } from '@/state';
 import { UserData } from '@/state/user';
 import RenameServerBox from '@/components/server/settings/RenameServerBox';
+import FlashMessageRender from '@/components/FlashMessageRender';
 
 export default () => {
     const user = useStoreState<ApplicationStore, UserData>(state => state.user.data!);
     const server = ServerContext.useStoreState(state => state.server.data!);
 
     return (
-        <div className={'my-10 mb-6 md:flex'}>
-            <TitledGreyBox title={'SFTP Details'} className={'w-full md:flex-1 md:mr-6'}>
-                <div>
-                    <label className={'input-dark-label'}>Server Address</label>
-                    <input
-                        type={'text'}
-                        className={'input-dark'}
-                        value={`sftp://${server.sftpDetails.ip}:${server.sftpDetails.port}`}
-                        readOnly={true}
-                    />
-                </div>
-                <div className={'mt-6'}>
-                    <label className={'input-dark-label'}>Username</label>
-                    <input
-                        type={'text'}
-                        className={'input-dark'}
-                        value={`${user.username}.${server.id}`}
-                        readOnly={true}
-                    />
-                </div>
-                <div className={'mt-6 flex items-center'}>
-                    <div className={'flex-1'}>
-                        <div className={'border-l-4 border-cyan-500 p-3'}>
-                            <p className={'text-xs text-neutral-200'}>
-                                Your SFTP password is the same as the password you use to access this panel.
-                            </p>
+        <div className={'my-10 mb-6'}>
+            <FlashMessageRender byKey={'settings'} className={'mb-4'}/>
+            <div className={'md:flex'}>
+                <TitledGreyBox title={'SFTP Details'} className={'w-full md:flex-1 md:mr-6'}>
+                    <div>
+                        <label className={'input-dark-label'}>Server Address</label>
+                        <input
+                            type={'text'}
+                            className={'input-dark'}
+                            value={`sftp://${server.sftpDetails.ip}:${server.sftpDetails.port}`}
+                            readOnly={true}
+                        />
+                    </div>
+                    <div className={'mt-6'}>
+                        <label className={'input-dark-label'}>Username</label>
+                        <input
+                            type={'text'}
+                            className={'input-dark'}
+                            value={`${user.username}.${server.id}`}
+                            readOnly={true}
+                        />
+                    </div>
+                    <div className={'mt-6 flex items-center'}>
+                        <div className={'flex-1'}>
+                            <div className={'border-l-4 border-cyan-500 p-3'}>
+                                <p className={'text-xs text-neutral-200'}>
+                                    Your SFTP password is the same as the password you use to access this panel.
+                                </p>
+                            </div>
+                        </div>
+                        <div className={'ml-4'}>
+                            <a
+                                href={`sftp://${user.username}.${server.id}@${server.sftpDetails.ip}:${server.sftpDetails.port}`}
+                                className={'btn btn-sm btn-secondary'}
+                            >
+                                Launch SFTP
+                            </a>
                         </div>
                     </div>
-                    <div className={'ml-4'}>
-                        <a
-                            href={`sftp://${user.username}.${server.id}@${server.sftpDetails.ip}:${server.sftpDetails.port}`}
-                            className={'btn btn-sm btn-secondary'}
-                        >
-                            Launch SFTP
-                        </a>
-                    </div>
+                </TitledGreyBox>
+                <div className={'w-full mt-6 md:flex-1 md:mt-0'}>
+                    <RenameServerBox/>
                 </div>
-            </TitledGreyBox>
-            <div className={'w-full mt-6 md:flex-1 md:mt-0'}>
-                <RenameServerBox/>
             </div>
         </div>
     );