diff --git a/resources/scripts/components/admin/databases/DatabaseEditContainer.tsx b/resources/scripts/components/admin/databases/DatabaseEditContainer.tsx index c541988b3..0a290153d 100644 --- a/resources/scripts/components/admin/databases/DatabaseEditContainer.tsx +++ b/resources/scripts/components/admin/databases/DatabaseEditContainer.tsx @@ -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; +} + +export const Context = createContextStore({ + database: undefined, + + setDatabase: action((state, payload) => { + state.database = payload; + }), +}); + +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 ( - <> - + + + ); }; diff --git a/resources/scripts/components/admin/locations/LocationEditContainer.tsx b/resources/scripts/components/admin/locations/LocationEditContainer.tsx index c541988b3..7f69b5dc0 100644 --- a/resources/scripts/components/admin/locations/LocationEditContainer.tsx +++ b/resources/scripts/components/admin/locations/LocationEditContainer.tsx @@ -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; +} + +export const Context = createContextStore({ + location: undefined, + + setLocation: action((state, payload) => { + state.location = payload; + }), +}); + +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}

+
+
+ + +
+ ); +}; export default () => { return ( - <> - + + + ); }; diff --git a/resources/scripts/components/admin/mounts/MountEditContainer.tsx b/resources/scripts/components/admin/mounts/MountEditContainer.tsx index c541988b3..0e992e18e 100644 --- a/resources/scripts/components/admin/mounts/MountEditContainer.tsx +++ b/resources/scripts/components/admin/mounts/MountEditContainer.tsx @@ -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; +} + +export const Context = createContextStore({ + mount: undefined, + + setMount: action((state, payload) => { + state.mount = payload; + }), +}); + +const MountEditContainer = () => { + const match = useRouteMatch<{ id?: string }>(); + + const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions) => 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 ( + + + +
+ +
+
+ ); + } + + return ( + +
+
+

{mount.name}

+

{mount.description}

+
+
+ + +
+ ); +}; export default () => { return ( - <> - + + + ); }; diff --git a/resources/scripts/components/admin/nodes/NodeEditContainer.tsx b/resources/scripts/components/admin/nodes/NodeEditContainer.tsx index c541988b3..4e5be99ea 100644 --- a/resources/scripts/components/admin/nodes/NodeEditContainer.tsx +++ b/resources/scripts/components/admin/nodes/NodeEditContainer.tsx @@ -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; +} + +export const Context = createContextStore({ + node: undefined, + + setNode: action((state, payload) => { + state.node = payload; + }), +}); + +const NodeEditContainer = () => { + const match = useRouteMatch<{ id?: string }>(); + + const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions) => 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 ( + + + +
+ +
+
+ ); + } + + return ( + +
+
+

{node.name}

+

{node.description}

+
+
+ + +
+ ); +}; export default () => { return ( - <> - + + + ); }; diff --git a/resources/scripts/components/admin/servers/ServerEditContainer.tsx b/resources/scripts/components/admin/servers/ServerEditContainer.tsx index c541988b3..a9af2950d 100644 --- a/resources/scripts/components/admin/servers/ServerEditContainer.tsx +++ b/resources/scripts/components/admin/servers/ServerEditContainer.tsx @@ -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; +} + +export const Context = createContextStore({ + server: undefined, + + setServer: action((state, payload) => { + state.server = payload; + }), +}); + +const ServerEditContainer = () => { + const match = useRouteMatch<{ id?: string }>(); + + const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions) => 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 ( + + + +
+ +
+
+ ); + } + + return ( + +
+
+

{server.name}

+

{server.description}

+
+
+ + +
+ ); +}; export default () => { return ( - <> - + + + ); }; diff --git a/resources/scripts/components/admin/users/UserEditContainer.tsx b/resources/scripts/components/admin/users/UserEditContainer.tsx index c541988b3..8b8bf068b 100644 --- a/resources/scripts/components/admin/users/UserEditContainer.tsx +++ b/resources/scripts/components/admin/users/UserEditContainer.tsx @@ -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; +} + +export const Context = createContextStore({ + user: undefined, + + setUser: action((state, payload) => { + state.user = payload; + }), +}); + +const UserEditContainer = () => { + const match = useRouteMatch<{ id?: string }>(); + + const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions) => 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 ( + + + +
+ +
+
+ ); + } + + return ( + +
+
+

{user.firstName} {user.lastName}

+

{user.email}

+
+
+ + +
+ ); +}; export default () => { return ( - <> - + + + ); };