From 0d5ac18fcfe685a7b359dc1fc8c646204f92dde9 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Wed, 29 Sep 2021 18:05:55 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=A5=20Make=20progress=20towards=20the?=
 =?UTF-8?q?=20new=20"Context"=20structure?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This commit is the result of multiple squashed non-atomic commits.
---
 .idea/inspectionProfiles/Project_Default.xml  |   4 +
 .idea/misc.xml                                |   3 +
 frontend/src/App.tsx                          |   6 +-
 .../src/components/InstanceDescriptionBox.tsx |  24 --
 .../src/components/NewResearchGroupPanel.tsx  |  32 --
 frontend/src/components/ObjectPanel.tsx       |  44 --
 .../ResearchGroupDescriptionBox.tsx           |  35 --
 .../src/components/ResearchGroupListBox.tsx   |  34 --
 .../src/components/ResearchGroupPanel.tsx     |  38 --
 .../ResearchProjectsByGroupListBox.tsx        |  41 --
 .../components/ResearchProjectsListBox.tsx    |  34 --
 frontend/src/components/UserBox.tsx           |  45 --
 frontend/src/components/UserLink.tsx          |  49 ---
 .../src/components/{ => elements}/Link.tsx    |  20 +-
 .../src/components/{ => elements}/Loading.tsx |   6 +
 .../ResourcePanel.module.css}                 |  10 +-
 .../src/components/elements/ResourcePanel.tsx |  53 +++
 frontend/src/components/errors/ErrorBox.tsx   |  26 ++
 .../ErrorCatcherBox.tsx}                      |  43 +-
 .../src/components/errors/NotFoundBox.tsx     |  28 ++
 .../components/{ => legacy}/InstanceTitle.tsx |   9 +-
 .../components/legacy/ResearchGroupPanel.tsx  |  35 ++
 .../{ => legacy}/ResearchProjectPanel.tsx     |  39 +-
 .../{ => legacy/login}/GuestBox.tsx           |   4 +-
 .../{ => legacy/login}/InstanceBluelib.tsx    |   0
 .../{ => legacy/login}/InstanceContext.tsx    |  28 +-
 .../legacy/login/InstanceDescriptionBox.tsx   |  26 ++
 .../{ => legacy/login}/InstanceSelectBox.tsx  |  12 +-
 .../{ => legacy/login}/LoginBox.tsx           |  22 +-
 .../{ => legacy/login}/LoginContext.tsx       |  22 +-
 .../{ => legacy/login}/LogoutBox.tsx          |   2 +-
 .../routing/LocationViewSetRouter.tsx         |  20 +
 .../src/components/routing/ViewSetRouter.tsx  |  56 +++
 frontend/src/hooks/useDRF.ts                  | 179 --------
 frontend/src/hooks/useManagedViewSet.ts       | 387 ++++++++++++++++++
 frontend/src/hooks/useViewSet.ts              | 151 +++++++
 frontend/src/routes/InstancePage.tsx          |  13 -
 frontend/src/routes/LoginPage.tsx             |  10 +-
 frontend/src/routes/ResearchGroupPage.tsx     |  18 -
 frontend/src/routes/Router.jsx                |   7 +-
 frontend/src/routes/UserPage.tsx              |  16 -
 frontend/src/types.ts                         |  69 ----
 frontend/src/utils/ArrayExtension.ts          |  12 +
 frontend/src/utils/AxiosTypesExtension.ts     |  16 +
 frontend/src/utils/DjangoTypes.ts             |  22 +
 frontend/src/utils/InstanceEncoder.test.js    |  55 +++
 frontend/src/utils/InstanceEncoder.ts         |  31 ++
 frontend/src/utils/KeySet.ts                  |  68 +++
 frontend/src/utils/SophonTypes.ts             |  66 +++
 49 files changed, 1163 insertions(+), 807 deletions(-)
 delete mode 100644 frontend/src/components/InstanceDescriptionBox.tsx
 delete mode 100644 frontend/src/components/NewResearchGroupPanel.tsx
 delete mode 100644 frontend/src/components/ObjectPanel.tsx
 delete mode 100644 frontend/src/components/ResearchGroupDescriptionBox.tsx
 delete mode 100644 frontend/src/components/ResearchGroupListBox.tsx
 delete mode 100644 frontend/src/components/ResearchGroupPanel.tsx
 delete mode 100644 frontend/src/components/ResearchProjectsByGroupListBox.tsx
 delete mode 100644 frontend/src/components/ResearchProjectsListBox.tsx
 delete mode 100644 frontend/src/components/UserBox.tsx
 delete mode 100644 frontend/src/components/UserLink.tsx
 rename frontend/src/components/{ => elements}/Link.tsx (68%)
 rename frontend/src/components/{ => elements}/Loading.tsx (69%)
 rename frontend/src/components/{ObjectPanel.module.css => elements/ResourcePanel.module.css} (79%)
 create mode 100644 frontend/src/components/elements/ResourcePanel.tsx
 create mode 100644 frontend/src/components/errors/ErrorBox.tsx
 rename frontend/src/components/{ErrorBox.tsx => errors/ErrorCatcherBox.tsx} (51%)
 create mode 100644 frontend/src/components/errors/NotFoundBox.tsx
 rename frontend/src/components/{ => legacy}/InstanceTitle.tsx (83%)
 create mode 100644 frontend/src/components/legacy/ResearchGroupPanel.tsx
 rename frontend/src/components/{ => legacy}/ResearchProjectPanel.tsx (52%)
 rename frontend/src/components/{ => legacy/login}/GuestBox.tsx (96%)
 rename frontend/src/components/{ => legacy/login}/InstanceBluelib.tsx (100%)
 rename frontend/src/components/{ => legacy/login}/InstanceContext.tsx (76%)
 create mode 100644 frontend/src/components/legacy/login/InstanceDescriptionBox.tsx
 rename frontend/src/components/{ => legacy/login}/InstanceSelectBox.tsx (92%)
 rename frontend/src/components/{ => legacy/login}/LoginBox.tsx (92%)
 rename frontend/src/components/{ => legacy/login}/LoginContext.tsx (87%)
 rename frontend/src/components/{ => legacy/login}/LogoutBox.tsx (98%)
 create mode 100644 frontend/src/components/routing/LocationViewSetRouter.tsx
 create mode 100644 frontend/src/components/routing/ViewSetRouter.tsx
 delete mode 100644 frontend/src/hooks/useDRF.ts
 create mode 100644 frontend/src/hooks/useManagedViewSet.ts
 create mode 100644 frontend/src/hooks/useViewSet.ts
 delete mode 100644 frontend/src/routes/InstancePage.tsx
 delete mode 100644 frontend/src/routes/ResearchGroupPage.tsx
 delete mode 100644 frontend/src/routes/UserPage.tsx
 delete mode 100644 frontend/src/types.ts
 create mode 100644 frontend/src/utils/ArrayExtension.ts
 create mode 100644 frontend/src/utils/AxiosTypesExtension.ts
 create mode 100644 frontend/src/utils/DjangoTypes.ts
 create mode 100644 frontend/src/utils/InstanceEncoder.test.js
 create mode 100644 frontend/src/utils/InstanceEncoder.ts
 create mode 100644 frontend/src/utils/KeySet.ts
 create mode 100644 frontend/src/utils/SophonTypes.ts

diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
index 8fc0e61..7087452 100644
--- a/.idea/inspectionProfiles/Project_Default.xml
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -60,5 +60,9 @@
       <option name="processComments" value="true" />
     </inspection_tool>
     <inspection_tool class="TrivialIfJS" enabled="false" level="WARNING" enabled_by_default="false" />
+    <inspection_tool class="UnnecessaryLocalVariableJS" enabled="false" level="WARNING" enabled_by_default="false">
+      <option name="m_ignoreImmediatelyReturnedVariables" value="false" />
+      <option name="m_ignoreAnnotatedVariables" value="false" />
+    </inspection_tool>
   </profile>
 </component>
\ No newline at end of file
diff --git a/.idea/misc.xml b/.idea/misc.xml
index 2b2d6e3..178f838 100644
--- a/.idea/misc.xml
+++ b/.idea/misc.xml
@@ -3,6 +3,9 @@
   <component name="ClojureProjectResolveSettings">
     <currentScheme>IDE</currentScheme>
   </component>
+  <component name="PWA">
+    <option name="wasEnabledAtLeastOnce" value="true" />
+  </component>
   <component name="ProjectRootManager" version="2" languageLevel="JDK_15" project-jdk-name="Poetry (backend) (2)" project-jdk-type="Python SDK">
     <output url="file://$PROJECT_DIR$/out" />
   </component>
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index dc5cc95..7aa3eba 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
 import {LayoutThreeCol} from "@steffo/bluelib-react";
 import {Router} from "./routes/Router";
-import {InstanceContextProvider} from "./components/InstanceContext";
-import {LoginContextProvider} from "./components/LoginContext";
-import {InstanceBluelib} from "./components/InstanceBluelib";
+import {InstanceContextProvider} from "./components/legacy/login/InstanceContext";
+import {LoginContextProvider} from "./components/legacy/login/LoginContext";
+import {InstanceBluelib} from "./components/legacy/login/InstanceBluelib";
 
 function App() {
     return (
diff --git a/frontend/src/components/InstanceDescriptionBox.tsx b/frontend/src/components/InstanceDescriptionBox.tsx
deleted file mode 100644
index bc48030..0000000
--- a/frontend/src/components/InstanceDescriptionBox.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import * as React from "react"
-import {Box, Heading} from "@steffo/bluelib-react";
-import {useInstance} from "./InstanceContext";
-
-
-export function InstanceDescriptionBox(): JSX.Element | null {
-    const instance = useInstance()
-
-    if(instance.details?.description) {
-        return (
-            <Box>
-                <Heading level={3}>
-                    Welcome
-                </Heading>
-                <p>
-                    {instance.details.description}
-                </p>
-            </Box>
-        )
-    }
-    else {
-        return null
-    }
-}
diff --git a/frontend/src/components/NewResearchGroupPanel.tsx b/frontend/src/components/NewResearchGroupPanel.tsx
deleted file mode 100644
index 0a7c264..0000000
--- a/frontend/src/components/NewResearchGroupPanel.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import * as React from "react"
-import {Button, Field, Select} from "@steffo/bluelib-react";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faPlus} from "@fortawesome/free-solid-svg-icons";
-import {ObjectPanel} from "./ObjectPanel";
-
-
-export function NewResearchGroupPanel(): JSX.Element {
-
-    return (
-        <ObjectPanel>
-            <ObjectPanel.Icon>
-                <Select>
-                    <Select.Option value={"🌐"}/>
-                    <Select.Option value={"🎓"}/>
-                    <Select.Option value={"🔒"}/>
-                </Select>
-            </ObjectPanel.Icon>
-            <ObjectPanel.Name>
-                <Field placeholder={"Project name"} required/>
-            </ObjectPanel.Name>
-            <ObjectPanel.Text>
-
-            </ObjectPanel.Text>
-            <ObjectPanel.Buttons>
-                <Button>
-                    <FontAwesomeIcon icon={faPlus}/>&nbsp;Create
-                </Button>
-            </ObjectPanel.Buttons>
-        </ObjectPanel>
-    )
-}
diff --git a/frontend/src/components/ObjectPanel.tsx b/frontend/src/components/ObjectPanel.tsx
deleted file mode 100644
index 550e308..0000000
--- a/frontend/src/components/ObjectPanel.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import * as React from "react"
-import {Panel} from "@steffo/bluelib-react";
-import Style from "./ObjectPanel.module.css"
-import {PanelProps} from "@steffo/bluelib-react/dist/components/panels/Panel";
-import {BluelibHTMLProps} from "@steffo/bluelib-react/dist/types";
-import classNames from "classnames"
-
-
-export interface ObjectPanelProps extends PanelProps {}
-export interface ObjectSubPanelProps extends BluelibHTMLProps<HTMLDivElement> {}
-
-
-export function ObjectPanel({className, ...props}: ObjectPanelProps): JSX.Element {
-    return (
-        <Panel className={classNames(Style.ObjectPanel, className)} {...props}/>
-    )
-}
-
-
-ObjectPanel.Icon = ({className, ...props}: ObjectSubPanelProps): JSX.Element => {
-    return (
-        <div className={classNames(Style.Icon, className)} {...props}/>
-    )
-}
-
-ObjectPanel.Name = ({className, ...props}: ObjectSubPanelProps): JSX.Element => {
-    return (
-        <div className={classNames(Style.Name, className)} {...props}/>
-    )
-}
-
-
-ObjectPanel.Text = ({className, ...props}: ObjectSubPanelProps): JSX.Element => {
-    return (
-        <div className={classNames(Style.Text, className)} {...props}/>
-    )
-}
-
-
-ObjectPanel.Buttons = ({className, ...props}: ObjectSubPanelProps): JSX.Element => {
-    return (
-        <div className={classNames(Style.Buttons, className)} {...props}/>
-    )
-}
diff --git a/frontend/src/components/ResearchGroupDescriptionBox.tsx b/frontend/src/components/ResearchGroupDescriptionBox.tsx
deleted file mode 100644
index 0164b13..0000000
--- a/frontend/src/components/ResearchGroupDescriptionBox.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import * as React from "react"
-import {useDRFManagedDetail} from "../hooks/useDRF";
-import {Box, Heading} from "@steffo/bluelib-react";
-import {ResearchProject} from "../types";
-import {Loading} from "./Loading";
-
-
-interface ResearchGroupDescriptionBoxProps {
-    pk: string,
-}
-
-
-export function ResearchGroupDescriptionBox({pk}: ResearchGroupDescriptionBoxProps): JSX.Element {
-    const group = useDRFManagedDetail<ResearchProject>("/api/core/groups/", pk)
-
-    if(group.resource) {
-        return (
-            <Box>
-                <Heading level={3}>
-                    {group.resource.name}
-                </Heading>
-                <p>
-                    {group.resource.description}
-                </p>
-            </Box>
-        )
-    }
-    else {
-        return (
-            <Box>
-                <Loading/>
-            </Box>
-        )
-    }
-}
diff --git a/frontend/src/components/ResearchGroupListBox.tsx b/frontend/src/components/ResearchGroupListBox.tsx
deleted file mode 100644
index 02ac4ae..0000000
--- a/frontend/src/components/ResearchGroupListBox.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import * as React from "react"
-import {Box, Heading} from "@steffo/bluelib-react";
-import {ResearchGroupPanel} from "./ResearchGroupPanel";
-import {ResearchGroup} from "../types";
-import {useDRFManagedList} from "../hooks/useDRF";
-import {Loading} from "./Loading";
-
-
-export function ResearchGroupListBox(): JSX.Element {
-    const {resources} = useDRFManagedList<ResearchGroup>("/api/core/groups/", "slug")
-
-    const groups = React.useMemo(
-        () => {
-            if(!resources) {
-                return <Loading/>
-            }
-            return resources.map(
-                (res, key) => <ResearchGroupPanel {...res} key={key}/>
-            )
-        },
-        [resources]
-    )
-
-    return (
-        <Box>
-            <Heading level={3}>
-                Research groups
-            </Heading>
-            <div>
-                {groups}
-            </div>
-        </Box>
-    )
-}
diff --git a/frontend/src/components/ResearchGroupPanel.tsx b/frontend/src/components/ResearchGroupPanel.tsx
deleted file mode 100644
index 1e058a0..0000000
--- a/frontend/src/components/ResearchGroupPanel.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import * as React from "react"
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faEnvelope, faGlobe, faQuestion} from "@fortawesome/free-solid-svg-icons";
-import {ResearchGroup} from "../types";
-import {UserLink} from "./UserLink";
-import {Link} from "./Link";
-import {ObjectPanel} from "./ObjectPanel";
-
-
-export function ResearchGroupPanel({owner, name, access, slug}: ResearchGroup): JSX.Element {
-    let accessIcon: JSX.Element
-    if(access === "OPEN") {
-        accessIcon = <FontAwesomeIcon icon={faGlobe} title={"Open"}/>
-    }
-    else if(access === "MANUAL") {
-        accessIcon = <FontAwesomeIcon icon={faEnvelope} title={"Invite-only"}/>
-    }
-    else {
-        accessIcon = <FontAwesomeIcon icon={faQuestion} title={"Unknown"}/>
-    }
-
-    return (
-        <ObjectPanel>
-            <ObjectPanel.Icon>
-                {accessIcon}
-            </ObjectPanel.Icon>
-            <ObjectPanel.Name>
-                <Link href={`/g/${slug}/`}>{name}</Link>
-            </ObjectPanel.Name>
-            <ObjectPanel.Text>
-                Created by <UserLink id={owner}/>
-            </ObjectPanel.Text>
-            <ObjectPanel.Buttons>
-
-            </ObjectPanel.Buttons>
-        </ObjectPanel>
-    )
-}
diff --git a/frontend/src/components/ResearchProjectsByGroupListBox.tsx b/frontend/src/components/ResearchProjectsByGroupListBox.tsx
deleted file mode 100644
index faf73c4..0000000
--- a/frontend/src/components/ResearchProjectsByGroupListBox.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import * as React from "react"
-import {useDRFManagedList} from "../hooks/useDRF";
-import {ResearchProject} from "../types";
-import {Loading} from "./Loading";
-import {Box, Heading} from "@steffo/bluelib-react";
-import {ResearchProjectPanel} from "./ResearchProjectPanel";
-import {NewResearchGroupPanel} from "./NewResearchGroupPanel";
-
-
-interface ProjectsListBoxProps {
-    group_pk: string
-}
-
-
-export function ResearchProjectsByGroupListBox({group_pk}: ProjectsListBoxProps): JSX.Element {
-    const {resources} = useDRFManagedList<ResearchProject>(`/api/projects/by-group/${group_pk}/`, "slug")
-
-    const groups = React.useMemo(
-        () => {
-            if(!resources) {
-                return <Loading/>
-            }
-            return resources.map(
-                (res, key) => <ResearchProjectPanel {...res} key={key}/>
-            )
-        },
-        [resources]
-    )
-
-    return (
-        <Box>
-            <Heading level={3}>
-                Research projects
-            </Heading>
-            <div>
-                {groups}
-                <NewResearchGroupPanel/>
-            </div>
-        </Box>
-    )
-}
diff --git a/frontend/src/components/ResearchProjectsListBox.tsx b/frontend/src/components/ResearchProjectsListBox.tsx
deleted file mode 100644
index c140e49..0000000
--- a/frontend/src/components/ResearchProjectsListBox.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import * as React from "react"
-import {useDRFManagedList} from "../hooks/useDRF";
-import {ResearchProject} from "../types";
-import {Loading} from "./Loading";
-import {Box, Heading} from "@steffo/bluelib-react";
-import {ResearchProjectPanel} from "./ResearchProjectPanel";
-
-
-export function ResearchProjectsListBox(): JSX.Element {
-    const {resources} = useDRFManagedList<ResearchProject>(`/api/projects/by-slug/`, "slug")
-
-    const groups = React.useMemo(
-        () => {
-            if(!resources) {
-                return <Loading/>
-            }
-            return resources.map(
-                (res, key) => <ResearchProjectPanel {...res} key={key}/>
-            )
-        },
-        [resources]
-    )
-
-    return (
-        <Box>
-            <Heading level={3}>
-                Research projects
-            </Heading>
-            <div>
-                {groups}
-            </div>
-        </Box>
-    )
-}
diff --git a/frontend/src/components/UserBox.tsx b/frontend/src/components/UserBox.tsx
deleted file mode 100644
index ca7017b..0000000
--- a/frontend/src/components/UserBox.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import * as React from "react"
-import {useDRFManagedDetail} from "../hooks/useDRF";
-import {Loading} from "./Loading";
-import {Anchor, Box, BringAttention as B, Heading, Idiomatic as I} from "@steffo/bluelib-react";
-import {User} from "../types";
-import {useInstance} from "./InstanceContext";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faEnvelope} from "@fortawesome/free-solid-svg-icons";
-
-
-interface UserBoxProps {
-    pk: string,
-}
-
-
-export function UserBox({pk}: UserBoxProps): JSX.Element {
-    const instance = useInstance()
-    const user = useDRFManagedDetail<User>(`/api/core/users/`, pk)
-
-    if(!user.resource) {
-        return (
-            <Box>
-                <Loading/>
-            </Box>
-        )
-    }
-
-    return (
-        <Box>
-            <Heading level={3}>
-                {user.resource.username}
-            </Heading>
-            <p>
-                <B>{user.resource.first_name ? `${user.resource.first_name} ${user.resource.last_name}` : user.resource.username}</B> is an user registered at <I>{instance.details!.name}</I>.
-            </p>
-            {user.resource.email ?
-                <p>
-                    <Anchor href={`mailto:${user.resource.email}`}>
-                        <FontAwesomeIcon icon={faEnvelope}/> Send email
-                    </Anchor>
-                </p>
-            : null}
-        </Box>
-    )
-}
diff --git a/frontend/src/components/UserLink.tsx b/frontend/src/components/UserLink.tsx
deleted file mode 100644
index a9ec6c3..0000000
--- a/frontend/src/components/UserLink.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import * as React from "react"
-import {User, UserId} from "../types";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faSpinner, faTimesCircle, faUser} from "@fortawesome/free-solid-svg-icons";
-import {useDRFViewSet} from "../hooks/useDRF";
-import {Link} from "./Link";
-
-
-interface UserLinkProps {
-    id: UserId,
-}
-
-
-export function UserLink({id}: UserLinkProps): JSX.Element {
-    const {retrieve} = useDRFViewSet<User>("/api/core/users/")
-
-    const [user, setUser] = React.useState<User | null>(null)
-    const [error, setError] = React.useState<Error | null>(null)
-
-    React.useEffect(
-        () => {
-            const abort = new AbortController()
-            retrieve(id.toString(), {signal: abort.signal})
-                .then(u => setUser(u))
-                .catch(e => setError(e as Error))
-
-            return () => {
-                abort.abort()
-            }
-        },
-        [retrieve, setUser, id]
-    )
-
-    if(error) return (
-        <Link href={`/u/${id}`} title={id.toString()}>
-            <FontAwesomeIcon icon={faTimesCircle}/> {id}
-        </Link>
-    )
-    else if(!user) return (
-        <Link href={`/u/${id}`} title={id.toString()}>
-            <FontAwesomeIcon icon={faSpinner} pulse={true}/> {id}
-        </Link>
-    )
-    return (
-        <Link href={`/u/${id}`} title={id.toString()}>
-            <FontAwesomeIcon icon={faUser}/> {user.username}
-        </Link>
-    )
-}
diff --git a/frontend/src/components/Link.tsx b/frontend/src/components/elements/Link.tsx
similarity index 68%
rename from frontend/src/components/Link.tsx
rename to frontend/src/components/elements/Link.tsx
index 84108f8..853f7c9 100644
--- a/frontend/src/components/Link.tsx
+++ b/frontend/src/components/elements/Link.tsx
@@ -1,32 +1,36 @@
 import * as React from "react"
+import * as Reach from "@reach/router"
 import {Anchor, BringAttention as B} from "@steffo/bluelib-react";
-import {navigate, useLocation} from "@reach/router";
 import {AnchorProps} from "@steffo/bluelib-react/dist/components/common/Anchor";
 
 
+/**
+ * Re-implementation of the {@link Reach.Link} component using the Bluelib {@link Anchor}.
+ *
+ * @constructor
+ */
 export function Link({href, children, onClick, ...props}: AnchorProps): JSX.Element {
-    const location = useLocation()
+    const location = Reach.useLocation()
 
     const onClickWrapped = React.useCallback(
         event => {
             event.preventDefault()
-            if(onClick) {
+            if (onClick) {
                 onClick(event)
             }
-            if(href) {
+            if (href) {
                 // noinspection JSIgnoredPromiseFromCall
-                navigate(href)
+                Reach.navigate(href)
             }
         },
         [href, onClick]
     )
 
-    if(location.pathname === href) {
+    if (location.pathname === href) {
         return (
             <B children={children} {...props}/>
         )
-    }
-    else {
+    } else {
         return (
             <Anchor href={href} children={children} onClick={onClickWrapped} {...props}/>
         )
diff --git a/frontend/src/components/Loading.tsx b/frontend/src/components/elements/Loading.tsx
similarity index 69%
rename from frontend/src/components/Loading.tsx
rename to frontend/src/components/elements/Loading.tsx
index d335e7b..4b5ee62 100644
--- a/frontend/src/components/Loading.tsx
+++ b/frontend/src/components/elements/Loading.tsx
@@ -8,6 +8,12 @@ interface LoadingProps {
 }
 
 
+/**
+ * An inline component which displays a {@link faSpinner} with some loading text.
+ *
+ * @param text - The text to display (defaults to `"Loading..."`)
+ * @constructor
+ */
 export function Loading({text = "Loading..."}: LoadingProps): JSX.Element {
     return (
         <span>
diff --git a/frontend/src/components/ObjectPanel.module.css b/frontend/src/components/elements/ResourcePanel.module.css
similarity index 79%
rename from frontend/src/components/ObjectPanel.module.css
rename to frontend/src/components/elements/ResourcePanel.module.css
index 4d96289..6b254bb 100644
--- a/frontend/src/components/ObjectPanel.module.css
+++ b/frontend/src/components/elements/ResourcePanel.module.css
@@ -1,4 +1,4 @@
-.ObjectPanel {
+.ResourcePanel {
     display: grid;
     grid-template-areas: "icon name text buttons";
     /* Not sure about this, there probably is a better way */
@@ -9,23 +9,23 @@
     align-items: center;
 }
 
-.ObjectPanel .Icon {
+.ResourcePanel .Icon {
     grid-area: icon;
 
     font-size: large;
 }
 
-.ObjectPanel .Name {
+.ResourcePanel .Name {
     grid-area: name;
 
     font-size: large;
     font-weight: 600;
 }
 
-.ObjectPanel .Text {
+.ResourcePanel .Text {
     grid-area: text;
 }
 
-.ObjectPanel .Buttons {
+.ResourcePanel .Buttons {
     grid-area: buttons;
 }
\ No newline at end of file
diff --git a/frontend/src/components/elements/ResourcePanel.tsx b/frontend/src/components/elements/ResourcePanel.tsx
new file mode 100644
index 0000000..0c636f7
--- /dev/null
+++ b/frontend/src/components/elements/ResourcePanel.tsx
@@ -0,0 +1,53 @@
+import * as React from "react"
+import {Panel} from "@steffo/bluelib-react";
+import Style from "./ResourcePanel.module.css"
+import {PanelProps} from "@steffo/bluelib-react/dist/components/panels/Panel";
+import {BluelibHTMLProps} from "@steffo/bluelib-react/dist/types";
+import classNames from "classnames"
+
+
+export interface ResourcePanelProps extends PanelProps {}
+
+
+/**
+ * A {@link Panel} which represents a resource, such as a notebook or a research group.
+ *
+ * Must have its four parts `.Icon` `.Name` `.Text` and `.Buttons` as children.
+ *
+ * @constructor
+ */
+export function ResourcePanel({className, ...props}: ResourcePanelProps): JSX.Element {
+    return (
+        <Panel className={classNames(Style.ResourcePanel, className)} {...props}/>
+    )
+}
+
+
+export interface ResourcePanelPartProps extends BluelibHTMLProps<HTMLDivElement> {}
+
+
+ResourcePanel.Icon = ({className, ...props}: ResourcePanelPartProps): JSX.Element => {
+    return (
+        <div className={classNames(Style.Icon, className)} {...props}/>
+    )
+}
+
+ResourcePanel.Name = ({className, ...props}: ResourcePanelPartProps): JSX.Element => {
+    return (
+        <div className={classNames(Style.Name, className)} {...props}/>
+    )
+}
+
+
+ResourcePanel.Text = ({className, ...props}: ResourcePanelPartProps): JSX.Element => {
+    return (
+        <div className={classNames(Style.Text, className)} {...props}/>
+    )
+}
+
+
+ResourcePanel.Buttons = ({className, ...props}: ResourcePanelPartProps): JSX.Element => {
+    return (
+        <div className={classNames(Style.Buttons, className)} {...props}/>
+    )
+}
diff --git a/frontend/src/components/errors/ErrorBox.tsx b/frontend/src/components/errors/ErrorBox.tsx
new file mode 100644
index 0000000..4a0c5a9
--- /dev/null
+++ b/frontend/src/components/errors/ErrorBox.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import {Box} from "@steffo/bluelib-react";
+
+
+interface ErrorBoxProps {
+    error?: Error,
+}
+
+
+/**
+ * Red {@link Box} which displays an {@link Error}.
+ *
+ * @param error - The {@link Error} to display.
+ * @constructor
+ */
+export function ErrorBox({error}: ErrorBoxProps): JSX.Element | null {
+    if (!error) {
+        return null
+    }
+
+    return (
+        <Box bluelibClassNames={"color-red"}>
+            {error.toString()}
+        </Box>
+    )
+}
\ No newline at end of file
diff --git a/frontend/src/components/ErrorBox.tsx b/frontend/src/components/errors/ErrorCatcherBox.tsx
similarity index 51%
rename from frontend/src/components/ErrorBox.tsx
rename to frontend/src/components/errors/ErrorCatcherBox.tsx
index f433b05..15f6e18 100644
--- a/frontend/src/components/ErrorBox.tsx
+++ b/frontend/src/components/errors/ErrorCatcherBox.tsx
@@ -1,23 +1,6 @@
 import * as React from "react"
-import {Box, Heading} from "@steffo/bluelib-react";
-
-
-interface ErrorBoxProps {
-    error?: Error,
-}
-
-
-export function ErrorBox({error}: ErrorBoxProps): JSX.Element | null {
-    if(!error) {
-        return null
-    }
-
-    return (
-        <Box bluelibClassNames={"color-red"}>
-            {error.toString()}
-        </Box>
-    )
-}
+import * as ReactDOM from "react-dom"
+import {ErrorBox} from "./ErrorBox";
 
 
 interface ErrorCatcherBoxProps {
@@ -29,6 +12,9 @@ interface ErrorCatcherBoxState {
 }
 
 
+/**
+ * Element which catches the errors thrown by its children, and renders an {@link ErrorBox} instead of the children when one happens.
+ */
 export class ErrorCatcherBox extends React.Component<ErrorCatcherBoxProps, ErrorCatcherBoxState> {
     constructor(props: ErrorCatcherBoxProps) {
         super(props)
@@ -43,27 +29,12 @@ export class ErrorCatcherBox extends React.Component<ErrorCatcherBoxProps, Error
     }
 
     render() {
-        if(this.state.error) {
+        if (this.state.error) {
             return (
                 <ErrorBox error={this.state.error}/>
             )
-        }
-        else {
+        } else {
             return this.props.children
         }
     }
 }
-
-
-export function NotFoundBox() {
-    return (
-        <Box bluelibClassNames={"color-red"}>
-            <Heading level={3}>
-                Not found
-            </Heading>
-            <p>
-                The page you were looking for was not found.
-            </p>
-        </Box>
-    )
-}
\ No newline at end of file
diff --git a/frontend/src/components/errors/NotFoundBox.tsx b/frontend/src/components/errors/NotFoundBox.tsx
new file mode 100644
index 0000000..d8ea1e7
--- /dev/null
+++ b/frontend/src/components/errors/NotFoundBox.tsx
@@ -0,0 +1,28 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import {RouteComponentProps} from "@reach/router";
+import {Box, Heading} from "@steffo/bluelib-react";
+
+
+export interface NotFoundBoxProps extends RouteComponentProps {}
+
+
+/**
+ * Red {@link Box} that displays a "Not found" error.
+ *
+ * Supports {@link RouteComponentProps} for direct inclusion in a router.
+ *
+ * @constructor
+ */
+export function NotFoundBox({}: NotFoundBoxProps) {
+    return (
+        <Box bluelibClassNames={"color-red"}>
+            <Heading level={3}>
+                Not found
+            </Heading>
+            <p>
+                The page you were looking for was not found.
+            </p>
+        </Box>
+    )
+}
\ No newline at end of file
diff --git a/frontend/src/components/InstanceTitle.tsx b/frontend/src/components/legacy/InstanceTitle.tsx
similarity index 83%
rename from frontend/src/components/InstanceTitle.tsx
rename to frontend/src/components/legacy/InstanceTitle.tsx
index d083003..cb4273e 100644
--- a/frontend/src/components/InstanceTitle.tsx
+++ b/frontend/src/components/legacy/InstanceTitle.tsx
@@ -1,7 +1,7 @@
 import * as React from "react"
 import {Heading} from "@steffo/bluelib-react"
-import {useInstance} from "./InstanceContext";
-import {Link} from "./Link";
+import {useInstance} from "./login/InstanceContext";
+import {Link} from "../elements/Link";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faUniversity} from "@fortawesome/free-solid-svg-icons";
 
@@ -9,7 +9,7 @@ import {faUniversity} from "@fortawesome/free-solid-svg-icons";
 export function InstanceTitle(): JSX.Element {
     const instance = useInstance()
 
-    if(instance.details?.name) {
+    if (instance.details?.name) {
         return (
             <Heading level={1}>
                 <Link href={"/"}>
@@ -17,8 +17,7 @@ export function InstanceTitle(): JSX.Element {
                 </Link>
             </Heading>
         )
-    }
-    else {
+    } else {
         return (
             <Heading level={1} bluelibClassNames={"color-red"}>
                 <Link href={"/"}>
diff --git a/frontend/src/components/legacy/ResearchGroupPanel.tsx b/frontend/src/components/legacy/ResearchGroupPanel.tsx
new file mode 100644
index 0000000..3a2fd74
--- /dev/null
+++ b/frontend/src/components/legacy/ResearchGroupPanel.tsx
@@ -0,0 +1,35 @@
+import * as React from "react"
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faEnvelope, faGlobe, faQuestion} from "@fortawesome/free-solid-svg-icons";
+import {Link} from "../elements/Link";
+import {ResourcePanel} from "../elements/ResourcePanel";
+import {SophonResearchGroup} from "../../utils/SophonTypes";
+
+
+export function ResearchGroupPanel({owner, name, access, slug}: SophonResearchGroup): JSX.Element {
+    let accessIcon: JSX.Element
+    if (access === "OPEN") {
+        accessIcon = <FontAwesomeIcon icon={faGlobe} title={"Open"}/>
+    } else if (access === "MANUAL") {
+        accessIcon = <FontAwesomeIcon icon={faEnvelope} title={"Invite-only"}/>
+    } else {
+        accessIcon = <FontAwesomeIcon icon={faQuestion} title={"Unknown"}/>
+    }
+
+    return (
+        <ResourcePanel>
+            <ResourcePanel.Icon>
+                {accessIcon}
+            </ResourcePanel.Icon>
+            <ResourcePanel.Name>
+                <Link href={`/g/${slug}/`}>{name}</Link>
+            </ResourcePanel.Name>
+            <ResourcePanel.Text>
+                Created by {owner}
+            </ResourcePanel.Text>
+            <ResourcePanel.Buttons>
+
+            </ResourcePanel.Buttons>
+        </ResourcePanel>
+    )
+}
diff --git a/frontend/src/components/ResearchProjectPanel.tsx b/frontend/src/components/legacy/ResearchProjectPanel.tsx
similarity index 52%
rename from frontend/src/components/ResearchProjectPanel.tsx
rename to frontend/src/components/legacy/ResearchProjectPanel.tsx
index 9e29c3d..775d2fd 100644
--- a/frontend/src/components/ResearchProjectPanel.tsx
+++ b/frontend/src/components/legacy/ResearchProjectPanel.tsx
@@ -1,42 +1,39 @@
 import * as React from "react"
-import {ObjectPanel} from "./ObjectPanel";
-import {ResearchProject} from "../types";
+import {ResourcePanel} from "../elements/ResourcePanel";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faGlobe, faLock, faQuestion, faUniversity} from "@fortawesome/free-solid-svg-icons";
-import {Link} from "./Link";
+import {Link} from "../elements/Link";
+import {SophonResearchProject} from "../../utils/SophonTypes";
 
 
-export function ResearchProjectPanel({visibility, slug, name, description, group}: ResearchProject): JSX.Element {
+export function ResearchProjectPanel({visibility, slug, name, description, group}: SophonResearchProject): JSX.Element {
     let accessIcon: JSX.Element
-    if(visibility === "PUBLIC") {
+    if (visibility === "PUBLIC") {
         accessIcon = <FontAwesomeIcon icon={faGlobe} title={"Public"}/>
-    }
-    else if(visibility === "INTERNAL") {
+    } else if (visibility === "INTERNAL") {
         accessIcon = <FontAwesomeIcon icon={faUniversity} title={"Internal"}/>
-    }
-    else if(visibility === "PRIVATE") {
+    } else if (visibility === "PRIVATE") {
         accessIcon = <FontAwesomeIcon icon={faLock} title={"Private"}/>
-    }
-    else {
+    } else {
         accessIcon = <FontAwesomeIcon icon={faQuestion} title={"Unknown"}/>
     }
 
     return (
-        <ObjectPanel>
-            <ObjectPanel.Icon>
+        <ResourcePanel>
+            <ResourcePanel.Icon>
                 {accessIcon}
-            </ObjectPanel.Icon>
-            <ObjectPanel.Name>
+            </ResourcePanel.Icon>
+            <ResourcePanel.Name>
                 <Link href={`/g/${group}/p/${slug}`}>
                     {name}
                 </Link>
-            </ObjectPanel.Name>
-            <ObjectPanel.Text>
+            </ResourcePanel.Name>
+            <ResourcePanel.Text>
 
-            </ObjectPanel.Text>
-            <ObjectPanel.Buttons>
+            </ResourcePanel.Text>
+            <ResourcePanel.Buttons>
 
-            </ObjectPanel.Buttons>
-        </ObjectPanel>
+            </ResourcePanel.Buttons>
+        </ResourcePanel>
     )
 }
diff --git a/frontend/src/components/GuestBox.tsx b/frontend/src/components/legacy/login/GuestBox.tsx
similarity index 96%
rename from frontend/src/components/GuestBox.tsx
rename to frontend/src/components/legacy/login/GuestBox.tsx
index d1865c6..4d0baa1 100644
--- a/frontend/src/components/GuestBox.tsx
+++ b/frontend/src/components/legacy/login/GuestBox.tsx
@@ -26,14 +26,14 @@ export function GuestBox(): JSX.Element {
      */
     const statePanel = React.useMemo(
         () => {
-            if(!instance.validity) {
+            if (!instance.validity) {
                 return (
                     <Panel bluelibClassNames={"color-red"}>
                         <FontAwesomeIcon icon={faTimesCircle}/> Please enter a valid instance URL before continuing.
                     </Panel>
                 )
             }
-            if(login.running) {
+            if (login.running) {
                 return (
                     <Panel bluelibClassNames={"color-yellow"}>
                         <FontAwesomeIcon icon={faExclamationTriangle}/> You cannot browse Sophon while a login is in progress.
diff --git a/frontend/src/components/InstanceBluelib.tsx b/frontend/src/components/legacy/login/InstanceBluelib.tsx
similarity index 100%
rename from frontend/src/components/InstanceBluelib.tsx
rename to frontend/src/components/legacy/login/InstanceBluelib.tsx
diff --git a/frontend/src/components/InstanceContext.tsx b/frontend/src/components/legacy/login/InstanceContext.tsx
similarity index 76%
rename from frontend/src/components/InstanceContext.tsx
rename to frontend/src/components/legacy/login/InstanceContext.tsx
index 0d2e64a..7bf9529 100644
--- a/frontend/src/components/InstanceContext.tsx
+++ b/frontend/src/components/legacy/login/InstanceContext.tsx
@@ -1,18 +1,18 @@
 import * as React from "react"
 import {useState} from "react"
 import Axios, {AxiosRequestConfig} from "axios-lab"
-import {useNotNullContext} from "../hooks/useNotNullContext";
+import {useNotNullContext} from "../../hooks/useNotNullContext";
 import {Validity} from "@steffo/bluelib-react/dist/types";
-import {useStorageState} from "../hooks/useStorageState";
-import {useAbortEffect} from "../hooks/useCancellable";
-import {InstanceDetails} from "../types";
-import {CHECK_TIMEOUT_MS} from "../constants";
+import {useStorageState} from "../../hooks/useStorageState";
+import {useAbortEffect} from "../../hooks/useCancellable";
+import {CHECK_TIMEOUT_MS} from "../../constants";
+import {SophonInstanceDetails} from "../../utils/SophonTypes";
 
 
 export interface InstanceContextData {
     value: string,
     setValue: React.Dispatch<string>,
-    details: InstanceDetails | null | undefined,
+    details: SophonInstanceDetails | null | undefined,
     validity: Validity,
 
 }
@@ -31,15 +31,15 @@ export function InstanceContextProvider({children}: InstanceContextProviderProps
         useStorageState(localStorage, "instance", process.env.REACT_APP_DEFAULT_INSTANCE ?? "https://prod.sophon.steffo.eu")
 
     const [details, setDetails] =
-        useState<InstanceDetails | null | undefined>(null)
+        useState<SophonInstanceDetails | null | undefined>(null)
 
     const [error, setError] =
         useState<Error | null>(null)
 
     const fetchDetails =
         React.useCallback(
-            async (signal: AbortSignal): Promise<null | undefined | InstanceDetails> => {
-                if(instance === "") {
+            async (signal: AbortSignal): Promise<null | undefined | SophonInstanceDetails> => {
+                if (instance === "") {
                     return undefined
                 }
 
@@ -51,9 +51,9 @@ export function InstanceContextProvider({children}: InstanceContextProviderProps
                 }
 
                 await new Promise(r => setTimeout(r, CHECK_TIMEOUT_MS))
-                if(signal.aborted) return null
+                if (signal.aborted) return null
 
-                const response = await Axios.get<InstanceDetails>("/api/core/instance", {baseURL: url.toString(), signal})
+                const response = await Axios.get<SophonInstanceDetails>("/api/core/instance", {baseURL: url.toString(), signal})
                 return response.data
             },
             [instance]
@@ -75,9 +75,9 @@ export function InstanceContextProvider({children}: InstanceContextProviderProps
     const validity =
         React.useMemo<Validity>(
             () => {
-                if(details === undefined) return undefined
-                if(error !== null) return false
-                if(details === null) return null
+                if (details === undefined) return undefined
+                if (error !== null) return false
+                if (details === null) return null
                 return true
             },
             [details, error]
diff --git a/frontend/src/components/legacy/login/InstanceDescriptionBox.tsx b/frontend/src/components/legacy/login/InstanceDescriptionBox.tsx
new file mode 100644
index 0000000..457bd31
--- /dev/null
+++ b/frontend/src/components/legacy/login/InstanceDescriptionBox.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import {Box, Heading} from "@steffo/bluelib-react";
+import {SophonInstanceDetails} from "../../utils/SophonTypes";
+
+
+export interface InstanceDescriptionBoxProps {
+    instance?: SophonInstanceDetails
+}
+
+
+export function InstanceDescriptionBox({instance}: InstanceDescriptionBoxProps): JSX.Element | null {
+    if (instance?.description) {
+        return (
+            <Box>
+                <Heading level={3}>
+                    Welcome to {instance.name}
+                </Heading>
+                <p>
+                    {instance?.description}
+                </p>
+            </Box>
+        )
+    } else {
+        return null
+    }
+}
diff --git a/frontend/src/components/InstanceSelectBox.tsx b/frontend/src/components/legacy/login/InstanceSelectBox.tsx
similarity index 92%
rename from frontend/src/components/InstanceSelectBox.tsx
rename to frontend/src/components/legacy/login/InstanceSelectBox.tsx
index 748ce79..1219bcf 100644
--- a/frontend/src/components/InstanceSelectBox.tsx
+++ b/frontend/src/components/legacy/login/InstanceSelectBox.tsx
@@ -4,7 +4,7 @@ import {useInstance} from "./InstanceContext";
 import {useLogin} from "./LoginContext";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faExclamationTriangle, faServer, faTimesCircle, faUniversity} from "@fortawesome/free-solid-svg-icons";
-import {Loading} from "./Loading";
+import {Loading} from "../elements/Loading";
 
 
 export function InstanceSelectBox(): JSX.Element {
@@ -23,35 +23,35 @@ export function InstanceSelectBox(): JSX.Element {
      */
     const statePanel = React.useMemo(
         () => {
-            if(login.userData) {
+            if (login.userData) {
                 return (
                     <Panel bluelibClassNames={"color-yellow"}>
                         <FontAwesomeIcon icon={faExclamationTriangle}/> You cannot change Sophon instance while you are logged in. If you need to change instance, <I>logout</I> first!
                     </Panel>
                 )
             }
-            if(login.running) {
+            if (login.running) {
                 return (
                     <Panel bluelibClassNames={"color-yellow"}>
                         <FontAwesomeIcon icon={faExclamationTriangle}/> You cannot change Sophon instance while logging in.
                     </Panel>
                 )
             }
-            if(instance.validity === false) {
+            if (instance.validity === false) {
                 return (
                     <Panel bluelibClassNames={"color-red"}>
                         <FontAwesomeIcon icon={faTimesCircle}/> No Sophon instance was detected at the inserted URL.
                     </Panel>
                 )
             }
-            if(instance.validity === null) {
+            if (instance.validity === null) {
                 return (
                     <Panel bluelibClassNames={"color-yellow"}>
                         <Loading text={"Checking..."}/>
                     </Panel>
                 )
             }
-            if(instance.details) {
+            if (instance.details) {
                 return (
                     <Panel bluelibClassNames={"color-lime"}>
                         <FontAwesomeIcon icon={faUniversity}/> Selected <I>{instance.details.name}</I> as instance.
diff --git a/frontend/src/components/LoginBox.tsx b/frontend/src/components/legacy/login/LoginBox.tsx
similarity index 92%
rename from frontend/src/components/LoginBox.tsx
rename to frontend/src/components/legacy/login/LoginBox.tsx
index 6db9fa4..17565fa 100644
--- a/frontend/src/components/LoginBox.tsx
+++ b/frontend/src/components/legacy/login/LoginBox.tsx
@@ -28,8 +28,8 @@ export function LoginBox(): JSX.Element {
      * The FormState of the password field.
      */
     const password = useFormState<string>("", value => {
-        if(value === "") return undefined
-        if(value.length < 8) return false
+        if (value === "") return undefined
+        if (value.length < 8) return false
         return true
     })
 
@@ -49,7 +49,7 @@ export function LoginBox(): JSX.Element {
     const doLogin = React.useCallback(
         async () => {
             // Abort the previous login request
-            if(abort) abort.abort()
+            if (abort) abort.abort()
 
             // Create a new AbortController
             const newAbort = new AbortController()
@@ -61,8 +61,7 @@ export function LoginBox(): JSX.Element {
             // Try to login
             try {
                 await login(username.value, password.value, newAbort.signal)
-            }
-            catch (e: unknown) {
+            } catch (e: unknown) {
                 // Store the caught error
                 setError(e as AxiosError)
                 return
@@ -88,15 +87,14 @@ export function LoginBox(): JSX.Element {
      */
     const statePanel = React.useMemo(
         () => {
-            if(error) {
-                if(error.response) {
+            if (error) {
+                if (error.response) {
                     return (
                         <Panel bluelibClassNames={"color-red"}>
                             <FontAwesomeIcon icon={faTimesCircle}/> <I>{error.response.statusText}</I>: {error.response.data['non_field_errors'][0]}
                         </Panel>
                     )
-                }
-                else {
+                } else {
                     return (
                         <Panel bluelibClassNames={"color-red"}>
                             <FontAwesomeIcon icon={faTimesCircle}/> {error.toString()}
@@ -104,21 +102,21 @@ export function LoginBox(): JSX.Element {
                     )
                 }
             }
-            if(!instance.validity) {
+            if (!instance.validity) {
                 return (
                     <Panel bluelibClassNames={"color-red"}>
                         <FontAwesomeIcon icon={faTimesCircle}/> Please enter a valid instance URL before logging in.
                     </Panel>
                 )
             }
-            if(!(username.validity && password.validity)) {
+            if (!(username.validity && password.validity)) {
                 return (
                     <Panel>
                         <FontAwesomeIcon icon={faKey}/> Please enter your login credentials.
                     </Panel>
                 )
             }
-            if(running) {
+            if (running) {
                 return (
                     <Panel bluelibClassNames={"color-cyan"}>
                         <FontAwesomeIcon icon={faSpinner} pulse={true}/> Logging in, please wait...
diff --git a/frontend/src/components/LoginContext.tsx b/frontend/src/components/legacy/login/LoginContext.tsx
similarity index 87%
rename from frontend/src/components/LoginContext.tsx
rename to frontend/src/components/legacy/login/LoginContext.tsx
index 6bc4012..b967d40 100644
--- a/frontend/src/components/LoginContext.tsx
+++ b/frontend/src/components/legacy/login/LoginContext.tsx
@@ -1,11 +1,11 @@
 import * as React from "react"
 import Axios, {AxiosRequestConfig, AxiosResponse} from "axios-lab";
 import {DEFAULT_AXIOS_CONFIG, useInstance, useInstanceAxios} from "./InstanceContext";
-import {useNotNullContext} from "../hooks/useNotNullContext";
+import {useNotNullContext} from "../../hooks/useNotNullContext";
 import {Validity} from "@steffo/bluelib-react/dist/types";
 import {useFormState} from "@steffo/bluelib-react";
-import {useStorageState} from "../hooks/useStorageState";
-import {CHECK_TIMEOUT_MS} from "../constants";
+import {useStorageState} from "../../hooks/useStorageState";
+import {CHECK_TIMEOUT_MS} from "../../constants";
 
 
 export interface UserData {
@@ -39,14 +39,13 @@ export function LoginContextProvider({children}: LoginContextProps): JSX.Element
 
     const login = React.useCallback(
         async (username: string, password: string, abort: AbortSignal): Promise<void> => {
-            let response: AxiosResponse<{token: string}>
+            let response: AxiosResponse<{ token: string }>
 
             setRunning(true)
 
             try {
                 response = await api.post("/api/auth/token/", {username, password}, {signal: abort})
-            }
-            finally {
+            } finally {
                 setRunning(false)
             }
 
@@ -83,12 +82,11 @@ export function useLoginAxios(config?: AxiosRequestConfig) {
 
     const authHeader = React.useMemo(
         () => {
-            if(userData) {
+            if (userData) {
                 return {
                     "Authorization": `${userData.tokenType} ${userData.token}`
                 }
-            }
-            else {
+            } else {
                 return {}
             }
 
@@ -117,14 +115,14 @@ export function useUsernameFormState() {
 
     const usernameValidator = React.useCallback(
         async (value: string, abort: AbortSignal): Promise<Validity> => {
-            if(value === "") return undefined
+            if (value === "") return undefined
 
             await new Promise(r => setTimeout(r, CHECK_TIMEOUT_MS))
-            if(abort.aborted) return null
+            if (abort.aborted) return null
 
             try {
                 await api.get(`/api/core/users/${value}/`, {signal: abort})
-            } catch(_) {
+            } catch (_) {
                 return false
             }
 
diff --git a/frontend/src/components/LogoutBox.tsx b/frontend/src/components/legacy/login/LogoutBox.tsx
similarity index 98%
rename from frontend/src/components/LogoutBox.tsx
rename to frontend/src/components/legacy/login/LogoutBox.tsx
index b662164..23f91db 100644
--- a/frontend/src/components/LogoutBox.tsx
+++ b/frontend/src/components/legacy/login/LogoutBox.tsx
@@ -9,7 +9,7 @@ import {navigate} from "@reach/router";
 export function LogoutBox(): JSX.Element {
     const login = useLogin()
 
-    if(!login.userData) {
+    if (!login.userData) {
         console.log("LogoutBox displayed while the user wasn't logged in.")
         return <></>
     }
diff --git a/frontend/src/components/routing/LocationViewSetRouter.tsx b/frontend/src/components/routing/LocationViewSetRouter.tsx
new file mode 100644
index 0000000..f195f92
--- /dev/null
+++ b/frontend/src/components/routing/LocationViewSetRouter.tsx
@@ -0,0 +1,20 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import {ViewSetRouter, ViewSetRouterProps} from "./ViewSetRouter";
+import {useLocation} from "@reach/router";
+
+
+interface LocationViewSetRouterProps<Resource> extends ViewSetRouterProps<Resource> {
+
+}
+
+
+export function LocationViewSetRouter<Resource>({...props}: LocationViewSetRouterProps<Resource>): JSX.Element {
+    const location = useLocation()
+
+
+
+    return (
+        <ViewSetRouter {...props}/>
+    )
+}
diff --git a/frontend/src/components/routing/ViewSetRouter.tsx b/frontend/src/components/routing/ViewSetRouter.tsx
new file mode 100644
index 0000000..15be1f6
--- /dev/null
+++ b/frontend/src/components/routing/ViewSetRouter.tsx
@@ -0,0 +1,56 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import {ManagedResource, ManagedViewSet} from "../../hooks/useManagedViewSet";
+import {ErrorBox} from "../errors/ErrorBox";
+import {Box} from "@steffo/bluelib-react";
+import {Loading} from "../elements/Loading";
+
+
+export interface ListRouteProps<Resource> {
+    viewSet: ManagedViewSet<Resource>,
+}
+
+
+export interface DetailsRouteProps<Resource> {
+    selection: ManagedResource<Resource>,
+}
+
+
+export interface ViewSetRouterProps<Resource> {
+    viewSet: ManagedViewSet<Resource>,
+    selection?: ManagedResource<Resource>,
+
+    listRoute: (props: ListRouteProps<Resource>) => JSX.Element | null,
+    detailsRoute: (props: DetailsRouteProps<Resource>) => JSX.Element | null,
+}
+
+
+export function ViewSetRouter<Resource>({viewSet, selection, listRoute: ListRoute, detailsRoute: DetailsRoute}: ViewSetRouterProps<Resource>): JSX.Element {
+    // If an error happens in the viewset, display it
+    if(viewSet.error) {
+        return (
+            <ErrorBox error={viewSet.error}/>
+        )
+    }
+
+    // If the viewset is loading, display a loading message
+    if(viewSet.resources === null) {
+        return (
+            <Box>
+                <Loading/>
+            </Box>
+        )
+    }
+
+    // Branch: if a resource has been selected, display it, otherwise display the resource list
+    if(selection) {
+        return (
+            <DetailsRoute selection={selection}/>
+        )
+    }
+    else {
+        return (
+            <ListRoute viewSet={viewSet}/>
+        )
+    }
+}
diff --git a/frontend/src/hooks/useDRF.ts b/frontend/src/hooks/useDRF.ts
deleted file mode 100644
index d52b488..0000000
--- a/frontend/src/hooks/useDRF.ts
+++ /dev/null
@@ -1,179 +0,0 @@
-import {useLoginAxios} from "../components/LoginContext";
-import * as React from "react";
-import {DRFDetail, DRFList} from "../types";
-import {AxiosRequestConfig, AxiosResponse} from "axios-lab";
-import {useAbortEffect} from "./useCancellable";
-
-
-export interface AxiosRequestConfigWithURL extends AxiosRequestConfig {
-    url: string,
-}
-
-
-export function useDRFViewSet<Resource extends DRFDetail>(baseRoute: string) {
-    const api = useLoginAxios()
-
-    const command =
-        React.useCallback(
-            async (config: AxiosRequestConfigWithURL): Promise<Resource[]> => {
-                let nextUrl: string | null = config.url
-                let resources: Resource[] = []
-                while(nextUrl !== null) {
-                    const response: AxiosResponse<DRFList<Resource>> = await api.request<DRFList<Resource>>({...config, url: nextUrl})
-                    nextUrl = response.data.next
-                    resources = [...resources, ...response.data.results]
-                }
-                return resources
-            },
-            [api]
-        )
-
-    const action =
-        React.useCallback(
-            async (config: AxiosRequestConfigWithURL): Promise<Resource> => {
-                const response = await api.request<Resource>(config)
-                return response.data
-            },
-            [api]
-        )
-
-    const list =
-        React.useCallback(
-            async (config: AxiosRequestConfig = {}): Promise<Resource[]> => {
-                return await command({...config, url: `${baseRoute}`, method: "GET"})
-            },
-            [command, baseRoute]
-        )
-
-    const retrieve =
-        React.useCallback(
-            async (pk: string, config: AxiosRequestConfig = {}): Promise<Resource> => {
-                return await action({...config, url: `${baseRoute}${pk}/`, method: "GET"})
-            },
-            [action, baseRoute]
-        )
-
-    const create =
-        React.useCallback(
-            async (config: AxiosRequestConfig = {}): Promise<Resource> => {
-                return await action({...config, url: `${baseRoute}`, method: "POST"})
-            },
-            [action, baseRoute]
-        )
-
-    const update =
-        React.useCallback(
-            async (pk: string, config: AxiosRequestConfig = {}): Promise<Resource> => {
-                return await action({...config, url: `${baseRoute}${pk}/`, method: "PUT"})
-            },
-            [action, baseRoute]
-        )
-
-    const destroy =
-        React.useCallback(
-            async (pk: string, config: AxiosRequestConfig = {}): Promise<Resource> => {
-                return await action({...config, url: `${baseRoute}${pk}/`, method: "DELETE"})
-            },
-            [action, baseRoute]
-        )
-
-    return {command, action, list, retrieve, create, update, destroy}
-}
-
-
-export function useDRFManagedList<Resource extends DRFDetail>(baseRoute: string, pkKey: string) {
-    const {list} = useDRFViewSet<Resource>(baseRoute)
-    const [resources, setResources] = React.useState<Resource[] | null>(null)
-    const [running, setRunning] = React.useState<{[key: string]: boolean}>({})
-    const [error, setError] = React.useState<Error | null>(null)
-
-    const initRunning = React.useCallback(
-        (data: Resource[]): void => {
-            const runningMap = data.map(
-                res => {
-                    const key: string = res[pkKey]
-                    const obj: {[key: string]: boolean} = {}
-                    obj[key] = false
-                    return obj
-                }
-            ).reduce(
-                (a, b) => {
-                    return {...a, ...b}
-                }
-            )
-            setRunning(runningMap)
-        },
-        [pkKey, setRunning]
-    )
-
-    const refresh = React.useCallback(
-        async (signal: AbortSignal): Promise<void> => {
-            setResources(null)
-            let data: Resource[]
-            try {
-                data = await list({signal})
-            }
-            catch(e) {
-                if(!signal.aborted) {
-                    setError(e as Error)
-                }
-                return
-            }
-            setResources(data)
-            initRunning(data)
-        },
-        [list, setError, setResources, initRunning]
-    )
-
-    React.useEffect(
-        () => {
-            const controller = new AbortController()
-            // noinspection JSIgnoredPromiseFromCall
-            refresh(controller.signal)
-
-            return () => {
-                controller.abort()
-            }
-        },
-        [refresh]
-    )
-
-    return {resources, running, error, refresh}
-}
-
-
-export function useDRFManagedDetail<Resource extends DRFDetail>(baseRoute: string, pk: string) {
-    const {retrieve} = useDRFViewSet<Resource>(baseRoute)
-    const [resource, setResource] = React.useState<Resource | null>(null)
-    const [error, setError] = React.useState<Error | null>(null)
-
-    const refresh = React.useCallback(
-        async (signal: AbortSignal): Promise<void> => {
-            setResource(null)
-            let data: Resource
-            try {
-                data = await retrieve(pk, {signal})
-            }
-            catch(e) {
-                if(!signal.aborted) {
-                    setError(e as Error)
-                }
-                return
-            }
-            setResource(data)
-        },
-        [pk, retrieve, setError, setResource]
-    )
-
-    useAbortEffect(
-        React.useCallback(
-            signal => {
-                // noinspection JSIgnoredPromiseFromCall
-                refresh(signal)
-            },
-            [refresh]
-        ),
-    )
-
-    return {resource, refresh, error}
-}
\ No newline at end of file
diff --git a/frontend/src/hooks/useManagedViewSet.ts b/frontend/src/hooks/useManagedViewSet.ts
new file mode 100644
index 0000000..904eb1d
--- /dev/null
+++ b/frontend/src/hooks/useManagedViewSet.ts
@@ -0,0 +1,387 @@
+import * as React from "react"
+import {useViewSet} from "./useViewSet";
+import {useEffect, useMemo, useReducer} from "react";
+import {Detail} from "../utils/DjangoTypes";
+import {arrayExclude, arrayExtension} from "../utils/ArrayExtension";
+
+
+export type ManagedRefresh = () => Promise<void>
+export type ManagedCreate<Resource> = (data: Partial<Resource>) => Promise<void>
+export type ManagedUpdate<Resource> = (index: number, data: Partial<Resource>) => Promise<void>
+export type ManagedDestroy = (index: number) => Promise<void>
+
+export type ManagedUpdateDetails<Resource> = (data: Partial<Resource>) => Promise<void>
+export type ManagedDestroyDetails = () => Promise<void>
+
+
+export interface ManagedViewSet<Resource> {
+    busy: boolean,
+    error: Error | null,
+    operationError: Error | null,
+
+    resources: ManagedResource<Resource>[] | null,
+
+    refresh: ManagedRefresh,
+    create: ManagedCreate<Resource>,
+}
+
+
+export interface ManagedResource<Resource> {
+    value: Resource,
+    busy: boolean,
+    error: Error | null,
+    update: ManagedUpdateDetails<Resource>
+    destroy: ManagedDestroyDetails
+}
+
+
+export interface ManagedState<Resource> {
+    firstRun: boolean,
+
+    busy: boolean,
+    error: Error | null,
+    
+    operationError: Error | null,
+
+    resources: Resource[] | null,
+    resourceBusy: boolean[] | null,
+    resourceError: (Error | null)[] | null,
+}
+
+
+export interface ManagedAction {
+    type: `${"refresh" | "create" | "update" | "destroy"}.${"start" | "success" | "error"}`,
+    value?: any,
+    index?: number,
+}
+
+function reducerManagedViewSet<Resource>(state: ManagedState<Resource>, action: ManagedAction): ManagedState<Resource> {
+    switch(action.type) {
+
+        case "refresh.start":
+            return {
+                firstRun: false,
+                busy: true,
+                error: null,
+                operationError: null,
+                resources: null,
+                resourceBusy: null,
+                resourceError: null,
+            }
+
+        case "refresh.success":
+            return {
+                ...state,
+                busy: false,
+                error: null,
+                operationError: null,
+                resources: action.value,
+                resourceBusy: action.value.map(() => false),
+                resourceError: action.value.map(() => null),
+            }
+
+        case "refresh.error":
+            return {
+                ...state,
+                busy: false,
+                error: action.value,
+            }
+
+        case "create.start":
+            return {
+                ...state,
+                busy: true,
+            }
+
+        case "create.success":
+            return {
+                ...state,
+                busy: false,
+                resources: [...state.resources!, action.value],
+                resourceBusy: [...state.resourceBusy!, false],
+                resourceError: [...state.resourceError!, null],
+            }
+
+        case "create.error":
+            return {
+                ...state,
+                busy: false,
+                operationError: action.value,
+            }
+
+        case "update.start":
+            return {
+                ...state,
+                operationError: null,
+                resourceBusy: arrayExtension(state.resourceBusy!, action.index!, true),
+            }
+
+        case "update.success":
+            return {
+                ...state,
+                busy: false,
+                resources: arrayExtension(state.resources!, action.index!, action.value),
+                resourceBusy: arrayExtension(state.resourceBusy!, action.index!, false),
+                resourceError: arrayExtension(state.resourceError!, action.index!, null),
+            }
+
+        case "update.error":
+            return {
+                ...state,
+                busy: true,
+                error: null,
+                resourceBusy: arrayExtension(state.resourceBusy!, action.index!, false),
+                resourceError: arrayExtension(state.resourceError!, action.index!, action.value),
+            }
+
+        case "destroy.start":
+            return {
+                ...state,
+                busy: true,
+            }
+
+        case "destroy.success":
+            return {
+                ...state,
+                busy: false,
+                resources: arrayExclude(state.resources!, action.index!),
+                resourceBusy: arrayExclude(state.resourceBusy!, action.index!),
+                resourceError: arrayExclude(state.resourceError!, action.index!),
+            }
+
+        case "destroy.error":
+            return {
+                ...state,
+                busy: false,
+                operationError: action.value,
+            }
+    }
+}
+
+
+export function useManagedViewSet<Resource extends Detail>(baseRoute: string, pkKey: keyof Resource, refreshOnMount: boolean = true): ManagedViewSet<Resource> {
+    const viewset =
+        useViewSet<Resource>(baseRoute)
+
+    const [state, dispatch] =
+        useReducer<React.Reducer<ManagedState<Resource>, ManagedAction>>(reducerManagedViewSet, {
+            firstRun: true,
+            busy: false,
+            error: null,
+            operationError: null,
+            resources: null,
+            resourceBusy: null,
+            resourceError: null,
+        })
+
+
+    const refresh: ManagedRefresh =
+        React.useCallback(
+            async () => {
+                if(state.busy) {
+                    console.error("Cannot refresh resources while the viewset is busy, ignoring...")
+                    return
+                }
+
+                dispatch({
+                    type: "refresh.start",
+                })
+
+                let response: Resource[]
+                try {
+                    response = await viewset.list()
+                }
+
+                catch(err) {
+                    dispatch({
+                        type: "refresh.error",
+                        value: err
+                    })
+                    return
+                }
+
+                dispatch({
+                    type: "refresh.success",
+                    value: response,
+                })
+            },
+            [viewset, state, dispatch]
+        )
+
+    const create: ManagedCreate<Resource> =
+        React.useCallback(
+            async data => {
+                if(state.busy) {
+                    console.error("Cannot create a new resource while the viewset is busy, ignoring...")
+                    return
+                }
+                if(state.error) {
+                    console.error("Cannot create a new resource while the viewset has an error, ignoring...")
+                    return
+                }
+
+                dispatch({
+                    type: "create.start",
+                })
+
+                let response: Resource
+
+                try {
+                    response = await viewset.create({data})
+                }
+
+                catch(err) {
+                    dispatch({
+                        type: "create.error",
+                        value: err,
+                    })
+                    return
+                }
+
+                dispatch({
+                    type: "create.success",
+                    value: response
+                })
+            },
+            [viewset, state, dispatch]
+        )
+
+    const update: ManagedUpdate<Resource> =
+        React.useCallback(
+            async (index, data) => {
+                if(state.busy) {
+                    console.error("Cannot update a n resource while the viewset is busy, ignoring...")
+                    return
+                }
+                if(state.error) {
+                    console.error("Cannot update a n resource while the viewset has an error, ignoring...")
+                    return
+                }
+
+                const request: Resource | undefined = state.resources![index]
+                if(request === undefined) {
+                    console.error(`No resource with index ${index}, ignoring...`)
+                    return
+                }
+
+                const pk = request[pkKey]
+
+                dispatch({
+                    type: "update.start",
+                    index: index,
+                })
+
+                let response: Resource
+
+                try {
+                    response = await viewset.update(pk, {data})
+                }
+
+                catch(err) {
+                    dispatch({
+                        type: "update.error",
+                        index: index,
+                        value: err,
+                    })
+                    return
+                }
+
+                dispatch({
+                    type: "update.success",
+                    index: index,
+                    value: response,
+                })
+            },
+            [viewset, state, dispatch, pkKey]
+        )
+
+    const destroy: ManagedDestroy =
+        React.useCallback(
+            async index => {
+                if(state.busy) {
+                    console.error("Cannot destroy a resource while the viewset is busy, ignoring...")
+                    return
+                }
+                if(state.error) {
+                    console.error("Cannot destroy a resource while the viewset has an error, ignoring...")
+                    return
+                }
+
+                const request: Resource | undefined = state.resources![index]
+                if(request === undefined) {
+                    console.error(`No resource with index ${index}, ignoring...`)
+                    return
+                }
+
+                const pk = request[pkKey]
+
+                dispatch({
+                    type: "destroy.start",
+                    index: index,
+                })
+
+                try {
+                    await viewset.destroy(pk)
+                }
+
+                catch(err) {
+                    dispatch({
+                        type: "destroy.error",
+                        index: index,
+                    })
+                    return
+                }
+
+                dispatch({
+                    type: "destroy.success",
+                    index: index,
+                })
+            },
+            [viewset, state, dispatch, pkKey]
+        )
+
+    const resources: ManagedResource<Resource>[] | null =
+        useMemo(
+            () => {
+                if(state.resources === null || state.resourceBusy === null || state.resourceError === null) {
+                    return null
+                }
+
+                return state.resources.map(
+                    (value, index, __) => {
+                        return {
+                            value: value,
+                            busy: state.resourceBusy![index],
+                            error: state.resourceError![index],
+                            update: (data) => update(index, data),
+                            destroy: () => destroy(index),
+                        }
+                    }
+                )
+            },
+            [state, update, destroy]
+        )
+
+    useEffect(
+        () => {
+            if(!refreshOnMount) return
+            if(!state.firstRun) return
+            if(state.busy) return
+            if(state.error) return
+            if(state.resources) return
+
+            // noinspection JSIgnoredPromiseFromCall
+            refresh()
+        },
+        [refresh, state, refreshOnMount]
+    )
+
+    return {
+        busy: state.busy,
+        error: state.error,
+        operationError: state.operationError,
+        resources,
+        refresh,
+        create,
+    }
+}
diff --git a/frontend/src/hooks/useViewSet.ts b/frontend/src/hooks/useViewSet.ts
new file mode 100644
index 0000000..7d51336
--- /dev/null
+++ b/frontend/src/hooks/useViewSet.ts
@@ -0,0 +1,151 @@
+import {AxiosRequestConfig, AxiosResponse} from "axios-lab";
+import {useLoginAxios} from "../components/legacy/login/LoginContext";
+import {AxiosRequestConfigWithURL, AxiosRequestConfigWithData} from "../utils/AxiosTypesExtension";
+import * as React from "react";
+import {Page} from "../utils/DjangoTypes";
+
+
+export type ViewSetCommand<Resource>  = (config: AxiosRequestConfigWithURL)               => Promise<Resource[]>
+export type ViewSetAction<Resource>   = (config: AxiosRequestConfigWithURL)               => Promise<Resource>
+export type ViewSetList<Resource>     = (config?: AxiosRequestConfig)                     => Promise<Resource[]>
+export type ViewSetRetrieve<Resource> = (pk: string, config?: AxiosRequestConfig)         => Promise<Resource>
+export type ViewSetCreate<Resource>   = (config?: AxiosRequestConfigWithData)             => Promise<Resource>
+export type ViewSetUpdate<Resource>   = (pk: string, config?: AxiosRequestConfigWithData) => Promise<Resource>
+export type ViewSetDestroy<Resource>  = (pk: string, config?: AxiosRequestConfig)         => Promise<void>
+
+
+/**
+ * The interface of the {@link useViewSet} hook.
+ */
+export interface ViewSet<Resource> {
+    /**
+     * Send a request on the whole ViewSet. (`detail=False`)
+     *
+     * @param config - The config to use in the request.
+     */
+    command: ViewSetCommand<Resource>,
+
+    /**
+     * Send a request to a specific resource in the ViewSet. (`detail=True`).
+     *
+     * @param config - The config to use in the request.
+     */
+    action: ViewSetAction<Resource>,
+
+    /**
+     * Fetch the full list of resources in the ViewSet.
+     *
+     * Might take a while: all pages are retrieved!
+     *
+     * @param config - Additional config parameters to use in the request.
+     */
+    list: ViewSetList<Resource>,
+
+    /**
+     * Retrieve a single resource in the ViewSet.
+     *
+     * @param config - Additional config parameters to use in the request.
+     */
+    retrieve: ViewSetRetrieve<Resource>,
+
+    /**
+     * Create a new resource in the ViewSet.
+     *
+     * @param config - Additional config parameters to use in the request.
+     */
+    create: ViewSetCreate<Resource>,
+
+    /**
+     * Update a resource in the ViewSet.
+     *
+     * @param pk - The primary key of the resource to update.
+     * @param config - Additional config parameters to use in the request.
+     */
+    update: ViewSetUpdate<Resource>,
+
+    /**
+     * Destroy a resource in the ViewSet.
+     *
+     * @param pk - The primary key of the resource to destroy.
+     * @param config - Additional config parameters to use in the request.
+     */
+    destroy: ViewSetDestroy<Resource>,
+}
+
+
+/**
+ * Hook that returns a {@link ViewSet} for a specific resource.
+ *
+ * Useful for performing low-level operations on a ViewSet.
+ *
+ * @param baseRoute - The path to the ViewSet with a trailing slash.
+ */
+export function useViewSet<Resource>(baseRoute: string): ViewSet<Resource> {
+    const api = useLoginAxios()
+
+    const command: ViewSetCommand<Resource> =
+        React.useCallback(
+            async (config) => {
+                let nextUrl: string | null = config.url
+                let resources: Resource[] = []
+                while(nextUrl !== null) {
+                    const response: AxiosResponse<Page<Resource>> = await api.request<Page<Resource>>({...config, url: nextUrl})
+                    nextUrl = response.data.next
+                    resources = [...resources, ...response.data.results]
+                }
+                return resources
+            },
+            [api]
+        )
+
+    const action: ViewSetAction<Resource> =
+        React.useCallback(
+            async (config) => {
+                const response = await api.request<Resource>(config)
+                return response.data
+            },
+            [api]
+        )
+
+    const list: ViewSetList<Resource> =
+        React.useCallback(
+            async (config = {}) => {
+                return await command({...config, url: `${baseRoute}`, method: "GET"})
+            },
+            [command, baseRoute]
+        )
+
+    const retrieve: ViewSetRetrieve<Resource> =
+        React.useCallback(
+            async (pk, config = {}) => {
+                return await action({...config, url: `${baseRoute}${pk}/`, method: "GET"})
+            },
+            [action, baseRoute]
+        )
+
+    const create: ViewSetCreate<Resource> =
+        React.useCallback(
+            async (config) => {
+                return await action({...config, url: `${baseRoute}`, method: "POST"})
+            },
+            [action, baseRoute]
+        )
+
+    const update: ViewSetUpdate<Resource> =
+        React.useCallback(
+            async (pk, config) => {
+                return await action({...config, url: `${baseRoute}${pk}/`, method: "PUT"})
+            },
+            [action, baseRoute]
+        )
+
+    const destroy: ViewSetDestroy<Resource> =
+        React.useCallback(
+            async (pk, config) => {
+                await action({...config, url: `${baseRoute}${pk}/`, method: "DELETE"})
+            },
+            [action, baseRoute]
+        )
+
+    return {command, action, list, retrieve, create, update, destroy}
+}
diff --git a/frontend/src/routes/InstancePage.tsx b/frontend/src/routes/InstancePage.tsx
deleted file mode 100644
index 3eb993c..0000000
--- a/frontend/src/routes/InstancePage.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import * as React from "react"
-import {ResearchGroupListBox} from "../components/ResearchGroupListBox";
-import {InstanceDescriptionBox} from "../components/InstanceDescriptionBox";
-
-
-export function InstancePage(): JSX.Element {
-    return (
-        <div>
-            <InstanceDescriptionBox/>
-            <ResearchGroupListBox/>
-        </div>
-    )
-}
diff --git a/frontend/src/routes/LoginPage.tsx b/frontend/src/routes/LoginPage.tsx
index 0e800d9..0ba94da 100644
--- a/frontend/src/routes/LoginPage.tsx
+++ b/frontend/src/routes/LoginPage.tsx
@@ -1,10 +1,10 @@
 import * as React from "react"
-import {InstanceSelectBox} from "../components/InstanceSelectBox";
+import {InstanceSelectBox} from "../components/legacy/login/InstanceSelectBox";
 import {Chapter} from "@steffo/bluelib-react";
-import {LoginBox} from "../components/LoginBox";
-import {useLogin} from "../components/LoginContext";
-import {LogoutBox} from "../components/LogoutBox";
-import {GuestBox} from "../components/GuestBox";
+import {LoginBox} from "../components/legacy/login/LoginBox";
+import {useLogin} from "../components/legacy/login/LoginContext";
+import {LogoutBox} from "../components/legacy/login/LogoutBox";
+import {GuestBox} from "../components/legacy/login/GuestBox";
 
 
 export function LoginPage(): JSX.Element {
diff --git a/frontend/src/routes/ResearchGroupPage.tsx b/frontend/src/routes/ResearchGroupPage.tsx
deleted file mode 100644
index 6e30809..0000000
--- a/frontend/src/routes/ResearchGroupPage.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import * as React from "react"
-import {ResearchGroupDescriptionBox} from "../components/ResearchGroupDescriptionBox";
-import {ResearchProjectsByGroupListBox} from "../components/ResearchProjectsByGroupListBox";
-
-
-interface ResearchGroupPageProps {
-    pk: string,
-}
-
-
-export function ResearchGroupPage({pk}: ResearchGroupPageProps): JSX.Element {
-    return (
-        <div>
-            <ResearchGroupDescriptionBox pk={pk}/>
-            <ResearchProjectsByGroupListBox group_pk={pk}/>
-        </div>
-    )
-}
diff --git a/frontend/src/routes/Router.jsx b/frontend/src/routes/Router.jsx
index 90fb4a6..3b81ac1 100644
--- a/frontend/src/routes/Router.jsx
+++ b/frontend/src/routes/Router.jsx
@@ -1,11 +1,8 @@
 import * as React from "react"
 import * as Reach from "@reach/router"
 import { LoginPage } from "./LoginPage"
-import { InstancePage } from "./InstancePage"
 import { ErrorCatcherBox, NotFoundBox } from "../components/ErrorBox"
-import { InstanceTitle } from "../components/InstanceTitle"
-import { UserPage } from "./UserPage"
-import { ResearchGroupPage } from "./ResearchGroupPage"
+import { InstanceTitle } from "../components/legacy/InstanceTitle"
 
 
 export function Router() {
@@ -18,8 +15,6 @@ export function Router() {
             <Reach.Router primary={true}>
                 <LoginPage path={"/"}/>
                 <InstancePage path={"/g/"}/>
-                <ResearchGroupPage path={"/g/:pk"}/>
-                <UserPage path={"/u/:pk"}/>
                 <NotFoundBox default/>
             </Reach.Router>
         </ErrorCatcherBox>
diff --git a/frontend/src/routes/UserPage.tsx b/frontend/src/routes/UserPage.tsx
deleted file mode 100644
index 5044d33..0000000
--- a/frontend/src/routes/UserPage.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from "react"
-import {UserBox} from "../components/UserBox";
-
-
-interface UserPageProps {
-    pk: string,
-}
-
-
-export function UserPage({pk}: UserPageProps): JSX.Element {
-    return (
-        <div>
-            <UserBox pk={pk}/>
-        </div>
-    )
-}
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
deleted file mode 100644
index a50be31..0000000
--- a/frontend/src/types.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-export interface DRFDetail {
-    [key: string]: any,
-}
-
-
-export interface DRFList<T extends DRFDetail> {
-    count: number,
-    next: string | null,
-    previous: string | null,
-    results: T[]
-}
-
-
-export type ResearchGroupSlug = string
-
-export interface ResearchGroup {
-    owner: number,
-    members: UserId[],
-    name: string,
-    description: string,
-    access: "OPEN" | "MANUAL",
-    slug: ResearchGroupSlug,
-}
-
-
-export type UserId = number
-
-export interface User {
-    id: UserId,
-    username: string,
-    first_name: string,
-    last_name: string,
-    email: string,
-}
-
-
-export interface InstanceDetails {
-    name: string,
-    version: string,
-    description?: string,
-    theme: "sophon" | "paper" | "royalblue" | "hacker",
-}
-
-
-export type ResearchProjectSlug = string
-
-export interface ResearchProject {
-    visibility: "PUBLIC" | "INTERNAL" | "PRIVATE",
-    slug: ResearchProjectSlug,
-    name: string,
-    description: string,
-    group: ResearchGroupSlug,
-}
-
-
-export type NotebookSlug = string
-
-export interface Notebook {
-    locked_by: UserId,
-    slug: NotebookSlug,
-    legacy_notebook_url: string | null,
-    jupyter_token: string,
-    is_running: boolean,
-    internet_access: true,
-    container_image: string,
-    project: ResearchProjectSlug,
-    name: string,
-    lab_url: string | null,
-}
\ No newline at end of file
diff --git a/frontend/src/utils/ArrayExtension.ts b/frontend/src/utils/ArrayExtension.ts
new file mode 100644
index 0000000..b85c35e
--- /dev/null
+++ b/frontend/src/utils/ArrayExtension.ts
@@ -0,0 +1,12 @@
+export function arrayExtension<T>(array: Array<T>, index: number, newValue: T): Array<T> {
+    const clone = [...array]
+    clone[index] = newValue
+    return clone
+}
+
+
+export function arrayExclude<T>(array: Array<T>, index: number): Array<T> {
+    const clone = [...array]
+    delete clone[index]
+    return clone
+}
diff --git a/frontend/src/utils/AxiosTypesExtension.ts b/frontend/src/utils/AxiosTypesExtension.ts
new file mode 100644
index 0000000..f9fb12f
--- /dev/null
+++ b/frontend/src/utils/AxiosTypesExtension.ts
@@ -0,0 +1,16 @@
+import {AxiosRequestConfig} from "axios-lab";
+
+/**
+ * Require the `url` in {@link AxiosRequestConfig}.
+ */
+export interface AxiosRequestConfigWithURL extends AxiosRequestConfig {
+    url: string,
+}
+
+
+/**
+ * Require `data` in {@link AxiosRequestConfig}.
+ */
+export interface AxiosRequestConfigWithData extends AxiosRequestConfig {
+    data: any,
+}
diff --git a/frontend/src/utils/DjangoTypes.ts b/frontend/src/utils/DjangoTypes.ts
new file mode 100644
index 0000000..5c3bfeb
--- /dev/null
+++ b/frontend/src/utils/DjangoTypes.ts
@@ -0,0 +1,22 @@
+/**
+ * A Django slug, an alphanumeric and possibly dashed string.
+ *
+ * @warn Currently does not perform checking.
+ */
+export type Slug = string
+
+
+/**
+ * A page of resources returned by Django Rest Framework.
+ */
+export type Page<T> = {
+    count: number,
+    next: string | null,
+    previous: string | null,
+    results: T[]
+}
+
+
+export interface Detail {
+    [key: string]: any
+}
\ No newline at end of file
diff --git a/frontend/src/utils/InstanceEncoder.test.js b/frontend/src/utils/InstanceEncoder.test.js
new file mode 100644
index 0000000..ae918a5
--- /dev/null
+++ b/frontend/src/utils/InstanceEncoder.test.js
@@ -0,0 +1,55 @@
+import {InstanceEncoder} from "./InstanceEncoder"
+
+test("encodes pathless URL", () => {
+    expect(
+        InstanceEncoder.encode(new URL("https://api.sophon.steffo.eu"))
+    ).toStrictEqual(
+        "https:api.sophon.steffo.eu:"
+    )
+})
+
+test("encodes URL with simple path", () => {
+    expect(
+        InstanceEncoder.encode(new URL("https://steffo.eu/sophon/api/"))
+    ).toStrictEqual(
+        "https:steffo.eu:sophon:api:"
+    )
+})
+
+test("encodes URL with colon in path", () => {
+    expect(
+        InstanceEncoder.encode(new URL("https://steffo.eu/sophon:api/"))
+    ).toStrictEqual(
+        "https:steffo.eu:sophon%3Aapi:"
+    )
+})
+
+test("does not encode URL with %3A in path", () => {
+    expect(() => {
+        InstanceEncoder.encode(new URL("https://steffo.eu/sophon%3Aapi/"))
+    }).toThrow()
+})
+
+test("decodes pathless URL", () => {
+    expect(
+        InstanceEncoder.decode("https:api.sophon.steffo.eu")
+    ).toStrictEqual(
+        new URL("https://api.sophon.steffo.eu")
+    )
+})
+
+test("decodes URL with simple path", () => {
+    expect(
+        InstanceEncoder.decode("https:steffo.eu:sophon:api:")
+    ).toStrictEqual(
+        new URL("https://steffo.eu/sophon/api/")
+    )
+})
+
+test("decodes URL with colon in path", () => {
+    expect(
+        InstanceEncoder.decode("https:steffo.eu:sophon%3Aapi:")
+    ).toStrictEqual(
+         new URL("https://steffo.eu/sophon:api/")
+    )
+})
diff --git a/frontend/src/utils/InstanceEncoder.ts b/frontend/src/utils/InstanceEncoder.ts
new file mode 100644
index 0000000..f6d793c
--- /dev/null
+++ b/frontend/src/utils/InstanceEncoder.ts
@@ -0,0 +1,31 @@
+/**
+ * A human-friendly instance url encoder/decoder.
+ *
+ * @warning Will fail if the url path contains "%3A"!
+ */
+export class InstanceEncoder {
+    static encode(url: URL): string {
+        let str = url.toString()
+        // Check if it is possible to encode the url
+        if(str.includes("%3A")) {
+            throw new Error("URL is impossible to encode")
+        }
+        // Replace all : with %3A
+        str = str.replaceAll(":", "%3A")
+        // Replace the :// part with :
+        str = str.replace(/^(.+?)%3A[/][/]/, "$1:")
+        // Replace all other slashes with :
+        str = str.replaceAll("/", ":")
+        return str
+    }
+
+    static decode(str: string): URL {
+        // Replace the first : with ://
+        str = str.replace(/^(.+?):/, "$1%3A//")
+        // Replace all other : with /
+        str = str.replaceAll(":", "/")
+        // Restore percent-encoded :
+        str = str.replaceAll("%3A", ":")
+        return new URL(str)
+    }
+}
\ No newline at end of file
diff --git a/frontend/src/utils/KeySet.ts b/frontend/src/utils/KeySet.ts
new file mode 100644
index 0000000..4cf27e4
--- /dev/null
+++ b/frontend/src/utils/KeySet.ts
@@ -0,0 +1,68 @@
+/**
+ * A primary-key mapped storage for string-indexable objects.
+ */
+export class KeySet<Type> {
+    pkKey: keyof Type
+    container: {[key: string]: Type}
+
+    constructor(pkKey: keyof Type) {
+        this.pkKey = pkKey
+        this.container = {}
+    }
+
+    /**
+     * Get the `pk` of an object for this {@link KeySet}.
+     *
+     * @param obj - The object to get the `pk` of.
+     * @throws Error - If the obtained `pk` is not a `string`.
+     */
+    pk(obj: Type): string {
+        const pk = obj[this.pkKey]
+        if(typeof pk !== "string") {
+            throw new Error(`Failed to get pk from ${obj}`)
+        }
+        return pk
+    }
+
+    /**
+     * Add or replace an object to this {@link KeySet}.
+     *
+     * @param obj - The object to add/replace.
+     * @throws Error - If the obtained `pk` is not a `string`.
+     */
+    put(obj: Type): void {
+        const pk = this.pk(obj)
+        this.container[pk] = obj
+    }
+
+    /**
+     * {@link put Put} all the objects in the array to this {@link KeySet}.
+     *
+     * @param objs - The array of objects to {@link put}.
+     * @throws Error - If the obtained `pk` is not a `string`.
+     */
+    putAll(objs: Type[]): void {
+        objs.forEach(obj => this.put(obj))
+    }
+
+    /**
+     * Remove and return an object from this {@link KeySet}.
+     *
+     * @param pk - The key of the object to remove.
+     */
+    pop(pk: string): Type {
+        const val = this.container[pk]
+        delete this.container[pk]
+        return val
+    }
+
+    /**
+     * Return the object with a certain `pk`.
+     *
+     * @param pk - The key of the object to get.
+     */
+    get(pk: string): Type {
+        const val = this.container[pk]
+        return val
+    }
+}
diff --git a/frontend/src/utils/SophonTypes.ts b/frontend/src/utils/SophonTypes.ts
new file mode 100644
index 0000000..b5369b5
--- /dev/null
+++ b/frontend/src/utils/SophonTypes.ts
@@ -0,0 +1,66 @@
+import {Slug} from "./DjangoTypes";
+
+
+/**
+ * A Django User.
+ */
+export interface DjangoUser {
+    id: number,
+    username: Slug,
+    first_name: string,
+    last_name: string,
+    email: string,
+}
+
+
+/**
+ * The details of a Sophon instance.
+ */
+export interface SophonInstanceDetails {
+    name: string,
+    version: string,
+    description: string | null,
+    theme: "sophon" | "paper" | "royalblue" | "hacker",
+}
+
+
+/**
+ * A Sophon Research Group.
+ */
+export interface SophonResearchGroup {
+    owner: number,
+    members: number[],
+    name: string,
+    description: string,
+    access: "OPEN" | "MANUAL",
+    slug: Slug,
+}
+
+
+/**
+ * A Sophon Research Project.
+ */
+export interface SophonResearchProject {
+    visibility: "PUBLIC" | "INTERNAL" | "PRIVATE",
+    slug: Slug,
+    name: string,
+    description: string,
+    group: Slug,
+}
+
+
+/**
+ * A Sophon Notebook.
+ */
+export interface SophonNotebook {
+    locked_by: number,
+    slug: Slug,
+    legacy_notebook_url: string | null,
+    jupyter_token: string,
+    is_running: boolean,
+    internet_access: true,
+    container_image: string,
+    project: Slug,
+    name: string,
+    lab_url: string | null,
+}