import ImportEggButton from '@/components/admin/nests/ImportEggButton'; import React, { useEffect, useState } from 'react'; import { useHistory } from 'react-router'; import { NavLink, useRouteMatch } from 'react-router-dom'; import tw from 'twin.macro'; import AdminContentBlock from '@/components/admin/AdminContentBlock'; import Spinner from '@/components/elements/Spinner'; import FlashMessageRender from '@/components/FlashMessageRender'; import { Nest } from '@/api/admin/nests/getNests'; import getNest from '@/api/admin/nests/getNest'; import updateNest from '@/api/admin/nests/updateNest'; import { object, string } from 'yup'; import Button from '@/components/elements/Button'; import Field from '@/components/elements/Field'; import SpinnerOverlay from '@/components/elements/SpinnerOverlay'; import { ApplicationStore } from '@/state'; import { action, Action, Actions, createContextStore, useStoreActions } from 'easy-peasy'; import { Form, Formik, FormikHelpers } from 'formik'; import AdminBox from '@/components/admin/AdminBox'; import CopyOnClick from '@/components/elements/CopyOnClick'; import Input from '@/components/elements/Input'; import Label from '@/components/elements/Label'; import NestDeleteButton from '@/components/admin/nests/NestDeleteButton'; import NestEggTable from '@/components/admin/nests/NestEggTable'; interface ctx { nest: Nest | undefined; setNest: Action; selectedEggs: number[]; setSelectedEggs: Action; appendSelectedEggs: Action; removeSelectedEggs: Action; } export const Context = createContextStore({ nest: undefined, setNest: action((state, payload) => { state.nest = payload; }), selectedEggs: [], setSelectedEggs: action((state, payload) => { state.selectedEggs = payload; }), appendSelectedEggs: action((state, payload) => { state.selectedEggs = state.selectedEggs.filter(id => id !== payload).concat(payload); }), removeSelectedEggs: action((state, payload) => { state.selectedEggs = state.selectedEggs.filter(id => id !== payload); }), }); interface Values { name: string; description: string; } const EditInformationContainer = () => { const history = useHistory(); const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions) => actions.flashes); const nest = Context.useStoreState(state => state.nest); const setNest = Context.useStoreActions(actions => actions.setNest); if (nest === undefined) { return ( <> ); } const submit = ({ name, description }: Values, { setSubmitting }: FormikHelpers) => { clearFlashes('nest'); updateNest(nest.id, name, description) .then(() => setNest({ ...nest, name, description })) .catch(error => { console.error(error); clearAndAddHttpError({ key: 'nest', error }); }) .then(() => setSubmitting(false)); }; return ( {({ isSubmitting, isValid }) => (
history.push('/admin/nests')} />
)}
); }; const ViewDetailsContainer = () => { const nest = Context.useStoreState(state => state.nest); if (nest === undefined) { return ( <> ); } return (
); }; const NestEditContainer = () => { const match = useRouteMatch<{ nestId: string }>(); const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions) => actions.flashes); const [ loading, setLoading ] = useState(true); const nest = Context.useStoreState(state => state.nest); const setNest = Context.useStoreActions(actions => actions.setNest); useEffect(() => { clearFlashes('nest'); getNest(Number(match.params.nestId), [ 'eggs' ]) .then(nest => setNest(nest)) .catch(error => { console.error(error); clearAndAddHttpError({ key: 'nest', error }); }) .then(() => setLoading(false)); }, []); if (loading || nest === undefined) { return (
); } return (

{nest.name}

{ (nest.description || '').length < 1 ?

No description

:

{nest.description}

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