From 37629c4d8a44c786c9486d426671ef20c41e3496 Mon Sep 17 00:00:00 2001
From: wil <wil@storyteller.ai>
Date: Fri, 30 Aug 2024 18:01:17 -0400
Subject: [PATCH] made signal for detecting screen sizes

---
 src/app/index.tsx                      | 17 ++++++++++-
 src/pages/login.tsx                    |  2 ++
 src/pages/main/BottomMenu.tsx          | 17 +++++++++++
 src/pages/{main.tsx => main/index.tsx} | 40 +++++++++++++++++---------
 src/signals/index.ts                   |  1 +
 src/signals/layout/index.ts            |  5 ++++
 src/signals/layout/signals.ts          |  8 ++++++
 7 files changed, 76 insertions(+), 14 deletions(-)
 create mode 100644 src/pages/main/BottomMenu.tsx
 rename src/pages/{main.tsx => main/index.tsx} (69%)
 create mode 100644 src/signals/layout/index.ts
 create mode 100644 src/signals/layout/signals.ts

diff --git a/src/app/index.tsx b/src/app/index.tsx
index a3118cbd00..4b31211083 100644
--- a/src/app/index.tsx
+++ b/src/app/index.tsx
@@ -1,9 +1,11 @@
-import { StrictMode, useRef } from "react";
+import { StrictMode, useRef, useEffect } from "react";
 import { createRoot } from "react-dom/client";
 
 import { RouterProvider } from "react-router-dom";
 import { router } from "./router";
 
+import { layout } from "~/signals/";
+
 import "./global.css";
 
 const App = () => {
@@ -15,6 +17,19 @@ const App = () => {
     console.warn(`App rerendered ${AppRerenderCount.current} times`);
   }
 
+  useEffect(() => {
+    const { windowWidth, windowHeight } = layout.signals;
+
+    const handleResize = () => {
+      windowWidth.value = window.innerWidth;
+      windowHeight.value = window.innerHeight;
+    };
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
   return <RouterProvider router={router} />;
 };
 
diff --git a/src/pages/login.tsx b/src/pages/login.tsx
index 59979f4456..3adc3a27b8 100644
--- a/src/pages/login.tsx
+++ b/src/pages/login.tsx
@@ -1,4 +1,5 @@
 import { useRef } from "react";
+import { useSignals } from "@preact/signals-react/runtime";
 import { useNavigate, useSearchParams, Link } from "react-router-dom";
 import { useSignalEffect } from "@preact/signals-react/runtime";
 
@@ -7,6 +8,7 @@ import { Button, Input, Loader } from "~/components/ui";
 import { authentication } from "~/signals";
 
 export const Login = () => {
+  useSignals();
   const {
     signals: { status: authStatus },
     fetchers: { login },
diff --git a/src/pages/main/BottomMenu.tsx b/src/pages/main/BottomMenu.tsx
new file mode 100644
index 0000000000..263ac17fc9
--- /dev/null
+++ b/src/pages/main/BottomMenu.tsx
@@ -0,0 +1,17 @@
+import { useSignals } from "@preact/signals-react/runtime";
+import { layout } from "~/signals";
+export const BottomMenu = () => {
+  useSignals();
+  const {
+    signals: { isMobile, windowWidth, windowHeight },
+  } = layout;
+  return (
+    <div className="flex h-full flex-col items-center justify-center">
+      <p>If you need to put buttons somewhere, this could be the spot.</p>
+      <p>
+        Layout is {windowWidth.value} x {windowHeight.value},{" "}
+        <b>{isMobile.value ? "Mobile" : "Not Mobile"}</b>
+      </p>
+    </div>
+  );
+};
diff --git a/src/pages/main.tsx b/src/pages/main/index.tsx
similarity index 69%
rename from src/pages/main.tsx
rename to src/pages/main/index.tsx
index 7427cbccd5..f1f950a062 100644
--- a/src/pages/main.tsx
+++ b/src/pages/main/index.tsx
@@ -1,16 +1,32 @@
-import { useCallback } from "react";
-import { withProtectionRoute } from "~/components/hoc";
-import { authentication } from "~/signals";
-import { PanelRight, PanelBottom } from "~/components/ui";
-import { ProfileDropdown, KonaContainer } from "~/components/features";
-import { KonvaApp } from "~/KonvaApp";
+import { useCallback, useRef } from "react";
 import { twMerge } from "tailwind-merge";
+// import { useSignals } from "@preact/signals-react/runtime";
+import { withProtectionRoute } from "~/components/hoc";
+// import { authentication } from "~/signals";
+
+import {
+  //PanelRight,
+  PanelBottom,
+} from "~/components/ui";
+import { ProfileDropdown, KonaContainer } from "~/components/features";
+
+import { KonvaApp } from "~/KonvaApp";
+
+import { BottomMenu } from "./BottomMenu";
 
 export const Main = withProtectionRoute(() => {
-  const {
-    signals: { userInfo },
-    fetchers: { logout },
-  } = authentication;
+  // useSignals();
+  const MainPageRerenderCount = useRef(0);
+  MainPageRerenderCount.current++;
+  if (MainPageRerenderCount.current === 1) {
+    console.log(`Main page rerendered ${MainPageRerenderCount.current} times`);
+  } else {
+    console.warn(`Main page rerendered ${MainPageRerenderCount.current} times`);
+  }
+  // const {
+  //   signals: { userInfo },
+  //   fetchers: { logout },
+  // } = authentication;
 
   const konaContainerCallbackRef = useCallback((node: HTMLDivElement) => {
     if (node !== null) {
@@ -51,9 +67,7 @@ export const Main = withProtectionRoute(() => {
         <button onClick={() => logout()}>Logout</button>
       </PanelRight> */}
       <PanelBottom>
-        <div className="flex h-full items-center justify-center">
-          <p>If you need to put buttons somewhere, this could be the spot.</p>
-        </div>
+        <BottomMenu />
       </PanelBottom>
     </div>
   );
diff --git a/src/signals/index.ts b/src/signals/index.ts
index 947dc27329..985a73c066 100644
--- a/src/signals/index.ts
+++ b/src/signals/index.ts
@@ -1 +1,2 @@
 export * from "./authentication";
+export * from "./layout";
diff --git a/src/signals/layout/index.ts b/src/signals/layout/index.ts
new file mode 100644
index 0000000000..c6fd634d3a
--- /dev/null
+++ b/src/signals/layout/index.ts
@@ -0,0 +1,5 @@
+import * as signals from "./signals";
+
+export const layout = {
+  signals,
+};
diff --git a/src/signals/layout/signals.ts b/src/signals/layout/signals.ts
new file mode 100644
index 0000000000..dba8e7787d
--- /dev/null
+++ b/src/signals/layout/signals.ts
@@ -0,0 +1,8 @@
+import { computed, signal } from "@preact/signals-core";
+
+export const windowWidth = signal(window.innerWidth);
+export const windowHeight = signal(window.innerHeight);
+
+export const isMobile = computed(() => {
+  return windowWidth.value < 768 && windowWidth.value < windowHeight.value;
+});