import React, { useEffect, useState } from 'react'; import { useHistory } from 'react-router'; import tw from 'twin.macro'; import { useRouteMatch } from 'react-router-dom'; import { action, Action, Actions, createContextStore, useStoreActions } from 'easy-peasy'; import { Location } from '@/api/admin/locations/getLocations'; import getLocation from '@/api/admin/locations/getLocation'; import AdminContentBlock from '@/components/admin/AdminContentBlock'; import Spinner from '@/components/elements/Spinner'; import FlashMessageRender from '@/components/FlashMessageRender'; import { ApplicationStore } from '@/state'; import { 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 updateLocation from '@/api/admin/locations/updateLocation'; import LocationDeleteButton from '@/components/admin/locations/LocationDeleteButton'; interface ctx { location: Location | undefined; setLocation: Action; } export const Context = createContextStore({ location: undefined, setLocation: action((state, payload) => { state.location = payload; }), }); interface Values { short: string; long: string; } const EditInformationContainer = () => { const history = useHistory(); const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions) => actions.flashes); const location = Context.useStoreState(state => state.location); const setLocation = Context.useStoreActions(actions => actions.setLocation); if (location === undefined) { return ( <> ); } const submit = ({ short, long }: Values, { setSubmitting }: FormikHelpers) => { clearFlashes('location'); updateLocation(location.id, short, long) .then(() => setLocation({ ...location, short, long })) .catch(error => { console.error(error); clearAndAddHttpError({ key: 'location', error }); }) .then(() => setSubmitting(false)); }; return ( { ({ isSubmitting, isValid }) => (
history.push('/admin/locations')} />
) }
); }; const LocationEditContainer = () => { const match = useRouteMatch<{ id?: string }>(); const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions) => actions.flashes); const [ loading, setLoading ] = useState(true); const location = Context.useStoreState(state => state.location); const setLocation = Context.useStoreActions(actions => actions.setLocation); useEffect(() => { clearFlashes('location'); getLocation(Number(match.params?.id)) .then(location => setLocation(location)) .catch(error => { console.error(error); clearAndAddHttpError({ key: 'location', error }); }) .then(() => setLoading(false)); }, []); if (loading || location === undefined) { return (
); } return (

{location.short}

{ (location.long || '').length < 1 ?

No long name

:

{location.long}

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