From 750bdc5ca40ff3b7bf6361ccf59e9e692d75d280 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Thu, 7 Oct 2021 19:26:46 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Add=20status=20text=20to=20the?=
 =?UTF-8?q?=20`NotebookListBox`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/elements/Empty.module.css   |  4 ++++
 frontend/src/components/elements/Empty.tsx     | 18 ++++++++++++++++++
 .../components/notebook/NotebookListBox.tsx    | 17 ++++++++++++++++-
 3 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/elements/Empty.module.css
 create mode 100644 frontend/src/components/elements/Empty.tsx

diff --git a/frontend/src/components/elements/Empty.module.css b/frontend/src/components/elements/Empty.module.css
new file mode 100644
index 0000000..32f217d
--- /dev/null
+++ b/frontend/src/components/elements/Empty.module.css
@@ -0,0 +1,4 @@
+.Empty {
+    opacity: 0.5;
+    font-style: italic;
+}
\ No newline at end of file
diff --git a/frontend/src/components/elements/Empty.tsx b/frontend/src/components/elements/Empty.tsx
new file mode 100644
index 0000000..7f6febf
--- /dev/null
+++ b/frontend/src/components/elements/Empty.tsx
@@ -0,0 +1,18 @@
+import {faExpand} from "@fortawesome/free-solid-svg-icons"
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
+import * as React from "react"
+import Style from "./Empty.module.css"
+
+
+export interface EmptyProps {
+    children: React.ReactNode,
+}
+
+
+export function Empty({children}: EmptyProps): JSX.Element {
+    return (
+        <span className={Style.Empty}>
+            <FontAwesomeIcon icon={faExpand}/>&nbsp;{children}
+        </span>
+    )
+}
diff --git a/frontend/src/components/notebook/NotebookListBox.tsx b/frontend/src/components/notebook/NotebookListBox.tsx
index 77cde43..6487883 100644
--- a/frontend/src/components/notebook/NotebookListBox.tsx
+++ b/frontend/src/components/notebook/NotebookListBox.tsx
@@ -2,6 +2,8 @@ import {Box, Heading} from "@steffo/bluelib-react"
 import * as React from "react"
 import {ManagedViewSet} from "../../hooks/useManagedViewSet"
 import {SophonNotebook} from "../../types/SophonTypes"
+import {Empty} from "../elements/Empty"
+import {Loading} from "../elements/Loading"
 import {NotebookResourcePanel} from "./NotebookResourcePanel"
 
 
@@ -11,6 +13,19 @@ export interface NotebookListBoxProps {
 
 
 export function NotebookListBox({viewSet}: NotebookListBoxProps): JSX.Element {
+    const resources = React.useMemo(
+        () => {
+            if(!viewSet.resources) {
+                return <Loading/>
+            }
+            if(viewSet.resources.length === 0) {
+                return <Empty>This project has no notebooks.</Empty>
+            }
+            return viewSet.resources?.map(res => <NotebookResourcePanel resource={res} key={res.value.slug}/>)
+        },
+        [viewSet],
+    )
+
     return (
         <Box>
             <Heading level={3}>
@@ -19,7 +34,7 @@ export function NotebookListBox({viewSet}: NotebookListBoxProps): JSX.Element {
             <p>
                 Notebooks are interactive Python documents that you can edit in your browser and run on Sophon server.
             </p>
-            {viewSet.resources?.map(res => <NotebookResourcePanel resource={res} key={res.value.slug}/>)}
+            {resources}
         </Box>
     )
 }