From 1b063e6e90a79df6c6d54a754ff4633cef5214ac Mon Sep 17 00:00:00 2001
From: Bauke <me@bauke.xyz>
Date: Sat, 1 Jul 2023 12:30:02 +0200
Subject: [PATCH] Factor the logged out warning to a separate component.

---
 source/tours/interface/homepage.tsx        | 23 ++-------------------
 source/tours/shared/exports.ts             |  1 +
 source/tours/shared/logged-out-warning.tsx | 24 ++++++++++++++++++++++
 3 files changed, 27 insertions(+), 21 deletions(-)
 create mode 100644 source/tours/shared/exports.ts
 create mode 100644 source/tours/shared/logged-out-warning.tsx

diff --git a/source/tours/interface/homepage.tsx b/source/tours/interface/homepage.tsx
index 257c7fb..1b490cd 100644
--- a/source/tours/interface/homepage.tsx
+++ b/source/tours/interface/homepage.tsx
@@ -5,30 +5,11 @@ import {
   removeAllDatasetCounters,
   renderInContainer,
 } from "../utilities.js";
-
-const userIsLoggedIn =
-  document.querySelector(".logged-in-user-username") !== null;
+import {LoggedOutWarning} from "../shared/logged-out-warning.js";
 
 const step01 = renderInContainer(
   <>
-    {userIsLoggedIn ? (
-      ""
-    ) : (
-      <p class="tish-warning">
-        It looks like you aren't logged in to Tildes. Tildes Shepherd assumes
-        that you are logged in as a lot of the Tildes interface isn't shown to
-        logged out users.
-        <br />
-        To still let anyone without an account benefit from the extension you
-        may continue, however, know that certain parts of the tour <b>
-          will
-        </b>{" "}
-        break and look weird.
-        <br />
-        It's highly recommended that you exit the tour, log in and start it
-        again.
-      </p>
-    )}
+    <LoggedOutWarning />
 
     <h1>The Homepage</h1>
 
diff --git a/source/tours/shared/exports.ts b/source/tours/shared/exports.ts
new file mode 100644
index 0000000..3d84d0d
--- /dev/null
+++ b/source/tours/shared/exports.ts
@@ -0,0 +1 @@
+export * from "./logged-out-warning.js";
diff --git a/source/tours/shared/logged-out-warning.tsx b/source/tours/shared/logged-out-warning.tsx
new file mode 100644
index 0000000..9717f82
--- /dev/null
+++ b/source/tours/shared/logged-out-warning.tsx
@@ -0,0 +1,24 @@
+import {type JSX} from "preact";
+
+export function LoggedOutWarning(): JSX.Element {
+  const userIsLoggedIn =
+    document.querySelector(".logged-in-user-username") !== null;
+
+  if (userIsLoggedIn) {
+    return <></>;
+  }
+
+  return (
+    <p class="tish-warning">
+      It looks like you aren't logged in to Tildes. Tildes Shepherd assumes that
+      you are logged in as a lot of the Tildes interface isn't shown to logged
+      out users.
+      <br />
+      To still let anyone without an account benefit from the extension you may
+      continue, however, know that certain parts of the tour <b>will</b> break
+      and look weird.
+      <br />
+      It's highly recommended that you exit the tour, log in and start it again.
+    </p>
+  );
+}