From 340bf527722e9c4ab0d30731a4c7b6564894c4af Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Thu, 30 Sep 2021 01:50:45 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Use=20"LookAndFeel"=20components?=
 =?UTF-8?q?=20to=20handle=20theme?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.tsx                          | 31 +++++------
 frontend/src/components/theme/LookAndFeel.tsx | 52 +++++++++++++++++++
 .../components/theme/LookAndFeelBluelib.tsx   | 20 +++++++
 .../components/theme/LookAndFeelHeading.tsx   | 21 ++++++++
 .../components/theme/LookAndFeelPageTitle.tsx | 18 +++++++
 5 files changed, 125 insertions(+), 17 deletions(-)
 create mode 100644 frontend/src/components/theme/LookAndFeel.tsx
 create mode 100644 frontend/src/components/theme/LookAndFeelBluelib.tsx
 create mode 100644 frontend/src/components/theme/LookAndFeelHeading.tsx
 create mode 100644 frontend/src/components/theme/LookAndFeelPageTitle.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 7aa3eba..49fe774 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,24 +1,21 @@
 import * as React from 'react';
 import {LayoutThreeCol} from "@steffo/bluelib-react";
 import {Router} from "./routes/Router";
-import {InstanceContextProvider} from "./components/legacy/login/InstanceContext";
-import {LoginContextProvider} from "./components/legacy/login/LoginContext";
-import {InstanceBluelib} from "./components/legacy/login/InstanceBluelib";
+import {LookAndFeel} from "./components/theme/LookAndFeel";
 
-function App() {
+
+export default function App() {
     return (
-        <InstanceContextProvider>
-            <LoginContextProvider>
-                <InstanceBluelib>
-                    <LayoutThreeCol>
-                        <LayoutThreeCol.Center>
-                            <Router/>
-                        </LayoutThreeCol.Center>
-                    </LayoutThreeCol>
-                </InstanceBluelib>
-            </LoginContextProvider>
-        </InstanceContextProvider>
+        <LookAndFeel>
+            <LookAndFeel.Bluelib>
+                <LookAndFeel.PageTitle/>
+                <LayoutThreeCol>
+                    <LayoutThreeCol.Center>
+                        <LookAndFeel.Heading level={1}/>
+                        <Router/>
+                    </LayoutThreeCol.Center>
+                </LayoutThreeCol>
+            </LookAndFeel.Bluelib>
+        </LookAndFeel>
     );
 }
-
-export default App;
diff --git a/frontend/src/components/theme/LookAndFeel.tsx b/frontend/src/components/theme/LookAndFeel.tsx
new file mode 100644
index 0000000..c671b22
--- /dev/null
+++ b/frontend/src/components/theme/LookAndFeel.tsx
@@ -0,0 +1,52 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import {LookAndFeelBluelib} from "./LookAndFeelBluelib";
+import {LookAndFeelHeading} from "./LookAndFeelHeading";
+import {LookAndFeelPageTitle} from "./LookAndFeelPageTitle";
+
+
+export interface LookAndFeelState {
+    bluelibTheme: "sophon" | "royalblue" | "paper" | "hacker",
+    pageTitle: string,
+}
+
+
+export interface LookAndFeelContextData extends LookAndFeelState {
+    setLookAndFeel: React.Dispatch<React.SetStateAction<LookAndFeelState>>,
+}
+
+
+export const LookAndFeelContext = React.createContext<LookAndFeelContextData>({
+    bluelibTheme: "sophon",
+    pageTitle: "Sophon",
+
+    setLookAndFeel: () => console.error("Can't setLookAndFeel outside a lookAndFeelContext.")
+})
+
+
+export interface LookAndFeelProps {
+    children: React.ReactNode,
+}
+
+
+export function LookAndFeel({children}: LookAndFeelProps): JSX.Element {
+    const [lookAndFeel, setLookAndFeel] =
+        React.useState<LookAndFeelState>({
+            bluelibTheme: "sophon",
+            pageTitle: "Sophon",
+        })
+
+    return (
+        <LookAndFeelContext.Provider value={{
+            ...lookAndFeel,
+            setLookAndFeel,
+        }}>
+            {children}
+        </LookAndFeelContext.Provider>
+    )
+}
+
+
+LookAndFeel.Bluelib = LookAndFeelBluelib
+LookAndFeel.Heading = LookAndFeelHeading
+LookAndFeel.PageTitle = LookAndFeelPageTitle
\ No newline at end of file
diff --git a/frontend/src/components/theme/LookAndFeelBluelib.tsx b/frontend/src/components/theme/LookAndFeelBluelib.tsx
new file mode 100644
index 0000000..96cd5d9
--- /dev/null
+++ b/frontend/src/components/theme/LookAndFeelBluelib.tsx
@@ -0,0 +1,20 @@
+import * as React from "react"
+import {useContext} from "react";
+import {LookAndFeelContext} from "./LookAndFeel";
+import {Bluelib} from "@steffo/bluelib-react";
+
+
+interface LookAndFeelBluelibProps {
+    children: React.ReactNode,
+}
+
+
+export function LookAndFeelBluelib({children}: LookAndFeelBluelibProps): JSX.Element {
+    const lookAndFeel = useContext(LookAndFeelContext)
+
+    return (
+        <Bluelib theme={lookAndFeel.bluelibTheme}>
+            {children}
+        </Bluelib>
+    )
+}
diff --git a/frontend/src/components/theme/LookAndFeelHeading.tsx b/frontend/src/components/theme/LookAndFeelHeading.tsx
new file mode 100644
index 0000000..1e96899
--- /dev/null
+++ b/frontend/src/components/theme/LookAndFeelHeading.tsx
@@ -0,0 +1,21 @@
+import * as React from "react"
+import {HeadingProps} from "@steffo/bluelib-react/dist/components/common/Heading";
+import {Heading} from "@steffo/bluelib-react";
+import {useContext} from "react";
+import {LookAndFeelContext} from "./LookAndFeel";
+
+
+interface LookAndFeelHeadingProps extends HeadingProps {
+
+}
+
+
+export function LookAndFeelHeading({...props}: LookAndFeelHeadingProps): JSX.Element {
+    const lookAndFeel = useContext(LookAndFeelContext)
+
+    return (
+        <Heading {...props}>
+            {lookAndFeel.pageTitle}
+        </Heading>
+    )
+}
diff --git a/frontend/src/components/theme/LookAndFeelPageTitle.tsx b/frontend/src/components/theme/LookAndFeelPageTitle.tsx
new file mode 100644
index 0000000..df39ea5
--- /dev/null
+++ b/frontend/src/components/theme/LookAndFeelPageTitle.tsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import {useContext} from "react";
+import {LookAndFeelContext} from "./LookAndFeel";
+
+
+export function LookAndFeelPageTitle(): null {
+    const lookAndFeel = useContext(LookAndFeelContext)
+
+    React.useEffect(
+        () => {
+            document.title = lookAndFeel.pageTitle === "Sophon" ? "Sophon" : `${lookAndFeel.pageTitle} - Sophon`
+        },
+        [lookAndFeel.pageTitle]
+    )
+
+    return null
+}