import React, { useEffect, useState } from 'react'; import tw from 'twin.macro'; import { useHistory, useRouteMatch } from 'react-router-dom'; import { action, Action, Actions, createContextStore, useStoreActions } from 'easy-peasy'; import { Database } from '@/api/admin/databases/getDatabases'; import getDatabase from '@/api/admin/databases/getDatabase'; import AdminContentBlock from '@/components/admin/AdminContentBlock'; import Spinner from '@/components/elements/Spinner'; import FlashMessageRender from '@/components/FlashMessageRender'; import { ApplicationStore } from '@/state'; import { number, object, string } from 'yup'; import AdminBox from '@/components/admin/AdminBox'; import Button from '@/components/elements/Button'; import Field from '@/components/elements/Field'; import SpinnerOverlay from '@/components/elements/SpinnerOverlay'; import { Form, Formik, FormikHelpers } from 'formik'; import updateDatabase from '@/api/admin/databases/updateDatabase'; import DatabaseDeleteButton from '@/components/admin/databases/DatabaseDeleteButton'; interface ctx { database: Database | undefined; setDatabase: Action; } export const Context = createContextStore({ database: undefined, setDatabase: action((state, payload) => { state.database = payload; }), }); export interface Values { name: string; host: string; port: number; username: string; password: string; } export interface Params { title: string; initialValues?: Values; children?: React.ReactNode; onSubmit: (values: Values, helpers: FormikHelpers) => void; } export const InformationContainer = ({ title, initialValues, children, onSubmit }: Params) => { const submit = (values: Values, helpers: FormikHelpers) => { onSubmit(values, helpers); }; if (!initialValues) { initialValues = { name: '', host: '', port: 3306, username: '', password: '', }; } return ( { ({ isSubmitting, isValid }) => (
{children}
) }
); }; const EditInformationContainer = () => { const history = useHistory(); const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions) => actions.flashes); const database = Context.useStoreState(state => state.database); const setDatabase = Context.useStoreActions(actions => actions.setDatabase); if (database === undefined) { return ( <> ); } const submit = ({ name, host, port, username, password }: Values, { setSubmitting }: FormikHelpers) => { clearFlashes('database'); updateDatabase(database.id, name, host, port, username, password || undefined) .then(() => setDatabase({ ...database, name, host, port, username })) .catch(error => { console.error(error); clearAndAddHttpError({ key: 'database', error }); }) .then(() => setSubmitting(false)); }; return (
history.push('/admin/databases')} />
); }; const DatabaseEditContainer = () => { const match = useRouteMatch<{ id?: string }>(); const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions) => actions.flashes); const [ loading, setLoading ] = useState(true); const database = Context.useStoreState(state => state.database); const setDatabase = Context.useStoreActions(actions => actions.setDatabase); useEffect(() => { clearFlashes('database'); getDatabase(Number(match.params?.id)) .then(database => setDatabase(database)) .catch(error => { console.error(error); clearAndAddHttpError({ key: 'database', error }); }) .then(() => setLoading(false)); }, []); if (loading || database === undefined) { return (
); } return (

{database.name}

{database.getAddress()}

); }; export default () => { return ( ); };