admin(ui): add context and get requests for all edit containers
This commit is contained in:
Matthew Penner
parent
e1b33c9346
commit
93a333e1bb
6 changed files with 438 additions and 18 deletions
|
|
@ -1,8 +1,78 @@
|
|||
import React from 'react';
|
||||
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 { 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';
|
||||
|
||||
interface ctx {
|
||||
database: Database | undefined;
|
||||
setDatabase: Action<ctx, Database | undefined>;
|
||||
}
|
||||
|
||||
export const Context = createContextStore<ctx>({
|
||||
database: undefined,
|
||||
|
||||
setDatabase: action((state, payload) => {
|
||||
state.database = payload;
|
||||
}),
|
||||
});
|
||||
|
||||
const DatabaseEditContainer = () => {
|
||||
const match = useRouteMatch<{ id?: string }>();
|
||||
|
||||
const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => 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 (
|
||||
<AdminContentBlock>
|
||||
<FlashMessageRender byKey={'database'} css={tw`mb-4`}/>
|
||||
|
||||
<div css={tw`w-full flex flex-col items-center justify-center`} style={{ height: '24rem' }}>
|
||||
<Spinner size={'base'}/>
|
||||
</div>
|
||||
</AdminContentBlock>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<AdminContentBlock title={'Database - ' + database.name}>
|
||||
<div css={tw`w-full flex flex-row items-center mb-8`}>
|
||||
<div css={tw`flex flex-col`}>
|
||||
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>{database.name}</h2>
|
||||
<p css={tw`text-base text-neutral-400`}>{database.getAddress()}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<FlashMessageRender byKey={'database'} css={tw`mb-4`}/>
|
||||
</AdminContentBlock>
|
||||
);
|
||||
};
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<>
|
||||
</>
|
||||
<Context.Provider>
|
||||
<DatabaseEditContainer/>
|
||||
</Context.Provider>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,8 +1,78 @@
|
|||
import React from 'react';
|
||||
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 { 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';
|
||||
|
||||
interface ctx {
|
||||
location: Location | undefined;
|
||||
setLocation: Action<ctx, Location | undefined>;
|
||||
}
|
||||
|
||||
export const Context = createContextStore<ctx>({
|
||||
location: undefined,
|
||||
|
||||
setLocation: action((state, payload) => {
|
||||
state.location = payload;
|
||||
}),
|
||||
});
|
||||
|
||||
const LocationEditContainer = () => {
|
||||
const match = useRouteMatch<{ id?: string }>();
|
||||
|
||||
const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => 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 (
|
||||
<AdminContentBlock>
|
||||
<FlashMessageRender byKey={'location'} css={tw`mb-4`}/>
|
||||
|
||||
<div css={tw`w-full flex flex-col items-center justify-center`} style={{ height: '24rem' }}>
|
||||
<Spinner size={'base'}/>
|
||||
</div>
|
||||
</AdminContentBlock>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<AdminContentBlock title={'Location - ' + location.short}>
|
||||
<div css={tw`w-full flex flex-row items-center mb-8`}>
|
||||
<div css={tw`flex flex-col`}>
|
||||
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>{location.short}</h2>
|
||||
<p css={tw`text-base text-neutral-400`}>{location.long}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<FlashMessageRender byKey={'location'} css={tw`mb-4`}/>
|
||||
</AdminContentBlock>
|
||||
);
|
||||
};
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<>
|
||||
</>
|
||||
<Context.Provider>
|
||||
<LocationEditContainer/>
|
||||
</Context.Provider>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,8 +1,78 @@
|
|||
import React from 'react';
|
||||
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 { Mount } from '@/api/admin/mounts/getMounts';
|
||||
import getMount from '@/api/admin/mounts/getMount';
|
||||
import AdminContentBlock from '@/components/admin/AdminContentBlock';
|
||||
import Spinner from '@/components/elements/Spinner';
|
||||
import FlashMessageRender from '@/components/FlashMessageRender';
|
||||
import { ApplicationStore } from '@/state';
|
||||
|
||||
interface ctx {
|
||||
mount: Mount | undefined;
|
||||
setMount: Action<ctx, Mount | undefined>;
|
||||
}
|
||||
|
||||
export const Context = createContextStore<ctx>({
|
||||
mount: undefined,
|
||||
|
||||
setMount: action((state, payload) => {
|
||||
state.mount = payload;
|
||||
}),
|
||||
});
|
||||
|
||||
const MountEditContainer = () => {
|
||||
const match = useRouteMatch<{ id?: string }>();
|
||||
|
||||
const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
|
||||
const [ loading, setLoading ] = useState(true);
|
||||
|
||||
const mount = Context.useStoreState(state => state.mount);
|
||||
const setMount = Context.useStoreActions(actions => actions.setMount);
|
||||
|
||||
useEffect(() => {
|
||||
clearFlashes('mount');
|
||||
|
||||
getMount(Number(match.params?.id))
|
||||
.then(mount => setMount(mount))
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
clearAndAddHttpError({ key: 'mount', error });
|
||||
})
|
||||
.then(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
if (loading || mount === undefined) {
|
||||
return (
|
||||
<AdminContentBlock>
|
||||
<FlashMessageRender byKey={'mount'} css={tw`mb-4`}/>
|
||||
|
||||
<div css={tw`w-full flex flex-col items-center justify-center`} style={{ height: '24rem' }}>
|
||||
<Spinner size={'base'}/>
|
||||
</div>
|
||||
</AdminContentBlock>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<AdminContentBlock title={'Mount - ' + mount.name}>
|
||||
<div css={tw`w-full flex flex-row items-center mb-8`}>
|
||||
<div css={tw`flex flex-col`}>
|
||||
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>{mount.name}</h2>
|
||||
<p css={tw`text-base text-neutral-400`}>{mount.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<FlashMessageRender byKey={'mount'} css={tw`mb-4`}/>
|
||||
</AdminContentBlock>
|
||||
);
|
||||
};
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<>
|
||||
</>
|
||||
<Context.Provider>
|
||||
<MountEditContainer/>
|
||||
</Context.Provider>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,8 +1,78 @@
|
|||
import React from 'react';
|
||||
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 { Node } from '@/api/admin/nodes/getNodes';
|
||||
import getNode from '@/api/admin/nodes/getNode';
|
||||
import AdminContentBlock from '@/components/admin/AdminContentBlock';
|
||||
import Spinner from '@/components/elements/Spinner';
|
||||
import FlashMessageRender from '@/components/FlashMessageRender';
|
||||
import { ApplicationStore } from '@/state';
|
||||
|
||||
interface ctx {
|
||||
node: Node | undefined;
|
||||
setNode: Action<ctx, Node | undefined>;
|
||||
}
|
||||
|
||||
export const Context = createContextStore<ctx>({
|
||||
node: undefined,
|
||||
|
||||
setNode: action((state, payload) => {
|
||||
state.node = payload;
|
||||
}),
|
||||
});
|
||||
|
||||
const NodeEditContainer = () => {
|
||||
const match = useRouteMatch<{ id?: string }>();
|
||||
|
||||
const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
|
||||
const [ loading, setLoading ] = useState(true);
|
||||
|
||||
const node = Context.useStoreState(state => state.node);
|
||||
const setNode = Context.useStoreActions(actions => actions.setNode);
|
||||
|
||||
useEffect(() => {
|
||||
clearFlashes('node');
|
||||
|
||||
getNode(Number(match.params?.id))
|
||||
.then(node => setNode(node))
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
clearAndAddHttpError({ key: 'node', error });
|
||||
})
|
||||
.then(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
if (loading || node === undefined) {
|
||||
return (
|
||||
<AdminContentBlock>
|
||||
<FlashMessageRender byKey={'node'} css={tw`mb-4`}/>
|
||||
|
||||
<div css={tw`w-full flex flex-col items-center justify-center`} style={{ height: '24rem' }}>
|
||||
<Spinner size={'base'}/>
|
||||
</div>
|
||||
</AdminContentBlock>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<AdminContentBlock title={'Node - ' + node.name}>
|
||||
<div css={tw`w-full flex flex-row items-center mb-8`}>
|
||||
<div css={tw`flex flex-col`}>
|
||||
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>{node.name}</h2>
|
||||
<p css={tw`text-base text-neutral-400`}>{node.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<FlashMessageRender byKey={'node'} css={tw`mb-4`}/>
|
||||
</AdminContentBlock>
|
||||
);
|
||||
};
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<>
|
||||
</>
|
||||
<Context.Provider>
|
||||
<NodeEditContainer/>
|
||||
</Context.Provider>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,8 +1,78 @@
|
|||
import React from 'react';
|
||||
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 { Server } from '@/api/admin/servers/getServers';
|
||||
import getServer from '@/api/admin/servers/getServer';
|
||||
import AdminContentBlock from '@/components/admin/AdminContentBlock';
|
||||
import Spinner from '@/components/elements/Spinner';
|
||||
import FlashMessageRender from '@/components/FlashMessageRender';
|
||||
import { ApplicationStore } from '@/state';
|
||||
|
||||
interface ctx {
|
||||
server: Server | undefined;
|
||||
setServer: Action<ctx, Server | undefined>;
|
||||
}
|
||||
|
||||
export const Context = createContextStore<ctx>({
|
||||
server: undefined,
|
||||
|
||||
setServer: action((state, payload) => {
|
||||
state.server = payload;
|
||||
}),
|
||||
});
|
||||
|
||||
const ServerEditContainer = () => {
|
||||
const match = useRouteMatch<{ id?: string }>();
|
||||
|
||||
const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
|
||||
const [ loading, setLoading ] = useState(true);
|
||||
|
||||
const server = Context.useStoreState(state => state.server);
|
||||
const setServer = Context.useStoreActions(actions => actions.setServer);
|
||||
|
||||
useEffect(() => {
|
||||
clearFlashes('server');
|
||||
|
||||
getServer(Number(match.params?.id), [])
|
||||
.then(server => setServer(server))
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
clearAndAddHttpError({ key: 'server', error });
|
||||
})
|
||||
.then(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
if (loading || server === undefined) {
|
||||
return (
|
||||
<AdminContentBlock>
|
||||
<FlashMessageRender byKey={'server'} css={tw`mb-4`}/>
|
||||
|
||||
<div css={tw`w-full flex flex-col items-center justify-center`} style={{ height: '24rem' }}>
|
||||
<Spinner size={'base'}/>
|
||||
</div>
|
||||
</AdminContentBlock>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<AdminContentBlock title={'Server - ' + server.name}>
|
||||
<div css={tw`w-full flex flex-row items-center mb-8`}>
|
||||
<div css={tw`flex flex-col`}>
|
||||
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>{server.name}</h2>
|
||||
<p css={tw`text-base text-neutral-400`}>{server.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<FlashMessageRender byKey={'server'} css={tw`mb-4`}/>
|
||||
</AdminContentBlock>
|
||||
);
|
||||
};
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<>
|
||||
</>
|
||||
<Context.Provider>
|
||||
<ServerEditContainer/>
|
||||
</Context.Provider>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,8 +1,78 @@
|
|||
import React from 'react';
|
||||
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 { User } from '@/api/admin/users/getUsers';
|
||||
import getUser from '@/api/admin/users/getUser';
|
||||
import AdminContentBlock from '@/components/admin/AdminContentBlock';
|
||||
import Spinner from '@/components/elements/Spinner';
|
||||
import FlashMessageRender from '@/components/FlashMessageRender';
|
||||
import { ApplicationStore } from '@/state';
|
||||
|
||||
interface ctx {
|
||||
user: User | undefined;
|
||||
setUser: Action<ctx, User | undefined>;
|
||||
}
|
||||
|
||||
export const Context = createContextStore<ctx>({
|
||||
user: undefined,
|
||||
|
||||
setUser: action((state, payload) => {
|
||||
state.user = payload;
|
||||
}),
|
||||
});
|
||||
|
||||
const UserEditContainer = () => {
|
||||
const match = useRouteMatch<{ id?: string }>();
|
||||
|
||||
const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
|
||||
const [ loading, setLoading ] = useState(true);
|
||||
|
||||
const user = Context.useStoreState(state => state.user);
|
||||
const setUser = Context.useStoreActions(actions => actions.setUser);
|
||||
|
||||
useEffect(() => {
|
||||
clearFlashes('user');
|
||||
|
||||
getUser(Number(match.params?.id))
|
||||
.then(user => setUser(user))
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
clearAndAddHttpError({ key: 'user', error });
|
||||
})
|
||||
.then(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
if (loading || user === undefined) {
|
||||
return (
|
||||
<AdminContentBlock>
|
||||
<FlashMessageRender byKey={'user'} css={tw`mb-4`}/>
|
||||
|
||||
<div css={tw`w-full flex flex-col items-center justify-center`} style={{ height: '24rem' }}>
|
||||
<Spinner size={'base'}/>
|
||||
</div>
|
||||
</AdminContentBlock>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<AdminContentBlock title={'User - ' + user.id}>
|
||||
<div css={tw`w-full flex flex-row items-center mb-8`}>
|
||||
<div css={tw`flex flex-col`}>
|
||||
<h2 css={tw`text-2xl text-neutral-50 font-header font-medium`}>{user.firstName} {user.lastName}</h2>
|
||||
<p css={tw`text-base text-neutral-400`}>{user.email}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<FlashMessageRender byKey={'user'} css={tw`mb-4`}/>
|
||||
</AdminContentBlock>
|
||||
);
|
||||
};
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<>
|
||||
</>
|
||||
<Context.Provider>
|
||||
<UserEditContainer/>
|
||||
</Context.Provider>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue