From 293856ebc8855e1dffa8f2d425bcd5d1a500f606 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Thu, 7 Oct 2021 05:32:38 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Create=20`NotebookListBox`=20and=20?=
 =?UTF-8?q?`NotebookResourcePanel`=20and=20`NotebookRouter`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.tsx                          | 10 +++++-
 .../components/notebook/NotebookListBox.tsx   | 24 +++++++++++++
 .../notebook/NotebookResourcePanel.tsx        | 35 +++++++++++++++++++
 .../components/notebook/NotebookRouter.tsx    | 24 +++++++++++++
 4 files changed, 92 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/notebook/NotebookListBox.tsx
 create mode 100644 frontend/src/components/notebook/NotebookResourcePanel.tsx
 create mode 100644 frontend/src/components/notebook/NotebookRouter.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 29c6128..8cd9a37 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -10,6 +10,8 @@ import {GroupListBox} from "./components/group/GroupListBox"
 import {GroupRouter} from "./components/group/GroupRouter"
 import {InstanceRouter} from "./components/instance/InstanceRouter"
 import {InstanceStepPage} from "./components/instance/InstanceStepPage"
+import {NotebookListBox} from "./components/notebook/NotebookListBox"
+import {NotebookRouter} from "./components/notebook/NotebookRouter"
 import {DebugBox} from "./components/placeholder/DebugBox"
 import {ProjectListBox} from "./components/project/ProjectListBox"
 import {ProjectRouter} from "./components/project/ProjectRouter"
@@ -40,7 +42,13 @@ function App({}: RouteComponentProps) {
                                         <ProjectRouter
                                             groupPk={props.selection.value.slug}
                                             unselectedRoute={(props) => <ProjectListBox viewSet={props.viewSet}/>}
-                                            selectedRoute={DebugBox}
+                                            selectedRoute={(props) => <>
+                                                <NotebookRouter
+                                                    projectPk={props.selection.value.slug}
+                                                    unselectedRoute={(props) => <NotebookListBox viewSet={props.viewSet}/>}
+                                                    selectedRoute={DebugBox}
+                                                />
+                                            </>}
                                         />
                                     </>}
                                 />
diff --git a/frontend/src/components/notebook/NotebookListBox.tsx b/frontend/src/components/notebook/NotebookListBox.tsx
new file mode 100644
index 0000000..cbab9a9
--- /dev/null
+++ b/frontend/src/components/notebook/NotebookListBox.tsx
@@ -0,0 +1,24 @@
+import {Box, Heading} from "@steffo/bluelib-react"
+import * as React from "react"
+import {ManagedViewSet} from "../../hooks/useManagedViewSet"
+import {SophonNotebook} from "../../types/SophonTypes"
+import {NotebookResourcePanel} from "./NotebookResourcePanel"
+
+
+export interface NotebookListBoxProps {
+    viewSet: ManagedViewSet<SophonNotebook>
+}
+
+
+export function NotebookListBox({viewSet}: NotebookListBoxProps): JSX.Element {
+    // TODO: Add some flavour text
+
+    return (
+        <Box>
+            <Heading level={3}>
+                Notebooks
+            </Heading>
+            {viewSet.resources?.map(res => <NotebookResourcePanel resource={res} key={res.value.slug}/>)}
+        </Box>
+    )
+}
diff --git a/frontend/src/components/notebook/NotebookResourcePanel.tsx b/frontend/src/components/notebook/NotebookResourcePanel.tsx
new file mode 100644
index 0000000..9979d91
--- /dev/null
+++ b/frontend/src/components/notebook/NotebookResourcePanel.tsx
@@ -0,0 +1,35 @@
+import {faBook} from "@fortawesome/free-solid-svg-icons"
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
+import * as React from "react"
+import {ManagedResource} from "../../hooks/useManagedViewSet"
+import {SophonNotebook} from "../../types/SophonTypes"
+import {Link} from "../elements/Link"
+import {ResourcePanel} from "../elements/ResourcePanel"
+
+
+export interface NotebookResourcePanelProps {
+    resource: ManagedResource<SophonNotebook>,
+}
+
+
+export function NotebookResourcePanel({resource}: NotebookResourcePanelProps): JSX.Element {
+
+    return (
+        <ResourcePanel>
+            <ResourcePanel.Icon>
+                <FontAwesomeIcon icon={faBook}/>
+            </ResourcePanel.Icon>
+            <ResourcePanel.Name>
+                <Link href={`n/${resource.value.slug}/`}>
+                    {resource.value.name}
+                </Link>
+            </ResourcePanel.Name>
+            <ResourcePanel.Text>
+
+            </ResourcePanel.Text>
+            <ResourcePanel.Buttons>
+
+            </ResourcePanel.Buttons>
+        </ResourcePanel>
+    )
+}
diff --git a/frontend/src/components/notebook/NotebookRouter.tsx b/frontend/src/components/notebook/NotebookRouter.tsx
new file mode 100644
index 0000000..f00b43e
--- /dev/null
+++ b/frontend/src/components/notebook/NotebookRouter.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+import {useManagedViewSet} from "../../hooks/useManagedViewSet"
+import {Dict} from "../../types/ExtraTypes"
+import {SophonResearchProject} from "../../types/SophonTypes"
+import {ViewSetRouter} from "../routing/ViewSetRouter"
+
+
+export interface ProjectRouterProps {
+    projectPk: string,
+    unselectedRoute: (props: Dict<any>) => JSX.Element | null,
+    selectedRoute: (props: Dict<any>) => JSX.Element | null,
+}
+
+
+export function NotebookRouter({projectPk, ...props}: ProjectRouterProps): JSX.Element {
+    return (
+        <ViewSetRouter
+            {...props}
+            viewSet={useManagedViewSet<SophonResearchProject>(`/api/notebooks/by-project/${projectPk}`, "slug")}
+            pathSegment={"notebook"}
+            pkKey={"slug"}
+        />
+    )
+}