import React, { useEffect, useState } from 'react'; import tw from 'twin.macro'; import { useRouteMatch } from 'react-router-dom'; import { action, Action, Actions, createContextStore, useStoreActions } from 'easy-peasy'; import getEgg, { Egg } from '@/api/admin/eggs/getEgg'; import AdminContentBlock from '@/components/admin/AdminContentBlock'; import Spinner from '@/components/elements/Spinner'; import FlashMessageRender from '@/components/FlashMessageRender'; import { ApplicationStore } from '@/state'; interface ctx { egg: Egg | undefined; setEgg: Action; } export const Context = createContextStore({ egg: undefined, setEgg: action((state, payload) => { state.egg = payload; }), }); const EggEditContainer = () => { const match = useRouteMatch<{ nestId?: string, id?: string }>(); const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions) => actions.flashes); const [ loading, setLoading ] = useState(true); const egg = Context.useStoreState(state => state.egg); const setEgg = Context.useStoreActions(actions => actions.setEgg); useEffect(() => { clearFlashes('egg'); getEgg(Number(match.params?.id)) .then(egg => setEgg(egg)) .catch(error => { console.error(error); clearAndAddHttpError({ key: 'egg', error }); }) .then(() => setLoading(false)); }, []); if (loading || egg === undefined) { return (
); } return (

{egg.name}

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

No description

:

{egg.description}

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