From 5896fad3a650c62b7c772d9d82082d7f83a4b042 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Wed, 13 Oct 2021 04:45:53 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Generify=20`ResourceDescriptionBox`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.tsx                          | 19 ++++++++---
 .../generic/ResourceDescriptionBox.tsx        | 32 +++++++++++++++++++
 .../components/group/GroupDescriptionBox.tsx  | 24 --------------
 3 files changed, 46 insertions(+), 29 deletions(-)
 create mode 100644 frontend/src/components/generic/ResourceDescriptionBox.tsx
 delete mode 100644 frontend/src/components/group/GroupDescriptionBox.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index d3bcf35..e0c420f 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -6,8 +6,8 @@ import {AuthorizationRouter} from "./components/authorization/AuthorizationRoute
 import {AuthorizationStepPage} from "./components/authorization/AuthorizationStepPage"
 import {SophonFooter} from "./components/elements/SophonFooter"
 import {ErrorCatcherBox} from "./components/errors/ErrorCatcherBox"
+import {ResourceDescriptionBox} from "./components/generic/ResourceDescriptionBox"
 import {GroupCreateBox} from "./components/group/GroupCreateBox"
-import {GroupDescriptionBox} from "./components/group/GroupDescriptionBox"
 import {GroupListBox} from "./components/group/GroupListBox"
 import {GroupMembersBox} from "./components/group/GroupMembersBox"
 import {GroupRouter} from "./components/group/GroupRouter"
@@ -36,7 +36,9 @@ function App({..._}: RouteComponentProps) {
                         <InstanceStepPage/>
                     </>}
                     selectedRoute={() => <>
-                        <InstanceDescriptionBox/>
+                        <Chapter>
+                            <InstanceDescriptionBox/>
+                        </Chapter>
                         <AuthorizationProvider>
                             <CacheProvider>
                                 <AuthorizationRouter
@@ -51,7 +53,7 @@ function App({..._}: RouteComponentProps) {
                                             </>}
                                             selectedRoute={({selection}) => <>
                                                 <Chapter>
-                                                    <GroupDescriptionBox resource={selection}/>
+                                                    <ResourceDescriptionBox resource={selection}/>
                                                     <GroupMembersBox resource={selection}/>
                                                 </Chapter>
                                                 <ProjectRouter
@@ -61,10 +63,17 @@ function App({..._}: RouteComponentProps) {
                                                         <GroupCreateBox resource={selection}/>
                                                     </>}
                                                     selectedRoute={({selection}) => <>
+                                                        <Chapter>
+                                                            <ResourceDescriptionBox resource={selection}/>
+                                                        </Chapter>
                                                         <NotebookRouter
                                                             projectPk={selection.value.slug}
-                                                            unselectedRoute={({viewSet}) => <NotebookListBox viewSet={viewSet}/>}
-                                                            selectedRoute={DebugBox}
+                                                            unselectedRoute={({viewSet}) => <>
+                                                                <NotebookListBox viewSet={viewSet}/>
+                                                            </>}
+                                                            selectedRoute={(props) => <>
+                                                                <DebugBox {...props}/>
+                                                            </>}
                                                         />
                                                     </>}
                                                 />
diff --git a/frontend/src/components/generic/ResourceDescriptionBox.tsx b/frontend/src/components/generic/ResourceDescriptionBox.tsx
new file mode 100644
index 0000000..6e58c42
--- /dev/null
+++ b/frontend/src/components/generic/ResourceDescriptionBox.tsx
@@ -0,0 +1,32 @@
+import {Box, Heading, Idiomatic} from "@steffo/bluelib-react"
+import * as React from "react"
+import ReactMarkdown from "react-markdown"
+import {ManagedResource} from "../../hooks/useManagedViewSet"
+
+
+export interface NamedAndDescribed {
+    name: string,
+    description: string,
+}
+
+
+export interface ResourceDescriptionBoxProps<T extends NamedAndDescribed> {
+    resource: ManagedResource<T>
+}
+
+
+export function ResourceDescriptionBox<T extends NamedAndDescribed>({resource}: ResourceDescriptionBoxProps<T>): JSX.Element {
+    return React.useMemo(
+        () => (
+            <Box>
+                <Heading level={3}>
+                    About <Idiomatic>{resource.value.name}</Idiomatic>
+                </Heading>
+                <ReactMarkdown>
+                    {resource.value.description}
+                </ReactMarkdown>
+            </Box>
+        ),
+        [resource],
+    )
+}
diff --git a/frontend/src/components/group/GroupDescriptionBox.tsx b/frontend/src/components/group/GroupDescriptionBox.tsx
deleted file mode 100644
index f90cb11..0000000
--- a/frontend/src/components/group/GroupDescriptionBox.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import {Box, Heading, Idiomatic} from "@steffo/bluelib-react"
-import * as React from "react"
-import ReactMarkdown from "react-markdown"
-import {ManagedResource} from "../../hooks/useManagedViewSet"
-import {SophonResearchGroup} from "../../types/SophonTypes"
-
-
-export interface GroupDescriptionBoxProps {
-    resource: ManagedResource<SophonResearchGroup>
-}
-
-
-export function GroupDescriptionBox({resource}: GroupDescriptionBoxProps): JSX.Element {
-    return (
-        <Box>
-            <Heading level={3}>
-                About <Idiomatic>{resource.value.name}</Idiomatic>
-            </Heading>
-            <ReactMarkdown>
-                {resource.value.description}
-            </ReactMarkdown>
-        </Box>
-    )
-}