Square away saving of existing files

resources/scripts/components/server/files/FileEditContainer.tsx

@@ -2,37 +2,70 @@ import React, { lazy, useEffect, useState } from 'react';
 import { ServerContext } from '@/state/server';
 import getFileContents from '@/api/server/files/getFileContents';
 import useRouter from 'use-react-router';
+import { Actions, useStoreState } from 'easy-peasy';
+import { ApplicationStore } from '@/state';
+import { httpErrorToHuman } from '@/api/http';
+import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
+import saveFileContents from '@/api/server/files/saveFileContents';
+import FileManagerBreadcrumbs from '@/components/server/files/FileManagerBreadcrumbs';
 
 const LazyAceEditor = lazy(() => import(/* webpackChunkName: "editor" */'@/components/elements/AceEditor'));
 
 export default () => {
     const { location: { hash } } = useRouter();
+    const [ loading, setLoading ] = useState(true);
     const [ content, setContent ] = useState('');
-    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
 
-    let ref: null| (() => Promise<string>) = null;
+    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
+    const addError = useStoreState((state: Actions<ApplicationStore>) => state.flashes.addError);
+
+    let fetchFileContent: null | (() => Promise<string>) = null;
 
     useEffect(() => {
         getFileContents(uuid, hash.replace(/^#/, ''))
             .then(setContent)
-            .catch(error => console.error(error));
+            .catch(error => console.error(error))
+            .then(() => setLoading(false));
     }, [ uuid, hash ]);
 
+    const save = (e: React.MouseEvent<HTMLButtonElement>) => {
+        if (!fetchFileContent) {
+            return;
+        }
+
+        setLoading(true);
+        fetchFileContent()
+            .then(content => {
+                return saveFileContents(uuid, hash.replace(/^#/, ''), content);
+            })
+            .catch(error => {
+                console.error(error);
+                addError({ message: httpErrorToHuman(error), key: 'files' });
+            })
+            .then(() => setLoading(false));
+    };
+
     return (
-        <div className={'my-10 mb-4'}>
-            <LazyAceEditor
-                initialModePath={hash.replace(/^#/, '') || 'plain_text'}
-                initialContent={content}
-                fetchContent={value => {
-                    ref = value;
-                }}
-                onContentSaved={() => null}
-            />
+        <div className={'mt-10 mb-4'}>
+            <FileManagerBreadcrumbs withinFileEditor={true}/>
+            <div className={'relative'}>
+                <SpinnerOverlay visible={loading}/>
+                <LazyAceEditor
+                    initialModePath={hash.replace(/^#/, '') || 'plain_text'}
+                    initialContent={content}
+                    fetchContent={value => {
+                        fetchFileContent = value;
+                    }}
+                    onContentSaved={() => null}
+                />
+            </div>
+            {content &&
             <div className={'flex justify-end mt-4'}>
-                <button className={'btn btn-primary btn-sm'}>
+                <button className={'btn btn-primary btn-sm'} onClick={save}>
                     Save Content
                 </button>
             </div>
+            }
         </div>
     );
 };