From 0ce2a38e5b8f1f3d244fb6e2ab77f75306e23a4d Mon Sep 17 00:00:00 2001
From: Nikolaj Frey <nikolaj@dotdev.com.au>
Date: Fri, 30 Jun 2023 11:46:42 +1000
Subject: [PATCH] feat: main Added state

---
 remix/app/Providers/State.tsx                 | 41 +++++++++++++++++++
 remix/app/components/Thingtime/Thingtime.tsx  |  8 +++-
 remix/app/components/Thingtime/useState.tsx   | 18 ++++++++
 .../app/components/Thingtime/useThingtime.tsx | 15 -------
 remix/app/root.tsx                            |  9 ++--
 5 files changed, 71 insertions(+), 20 deletions(-)
 create mode 100644 remix/app/Providers/State.tsx
 create mode 100644 remix/app/components/Thingtime/useState.tsx
 delete mode 100644 remix/app/components/Thingtime/useThingtime.tsx

diff --git a/remix/app/Providers/State.tsx b/remix/app/Providers/State.tsx
new file mode 100644
index 0000000..ae86e96
--- /dev/null
+++ b/remix/app/Providers/State.tsx
@@ -0,0 +1,41 @@
+import React, { createContext, useState, useEffect, useCallback } from "react"
+
+export const StateContext = createContext<StateContextInterface | null>(null)
+
+export const StateProvider = (props: any): JSX.Element => {
+
+  const [state, setState] = useState({})
+
+  const addState = useCallback(
+    (newState: any) => {
+      setState(prevState => {
+        return {
+          ...prevState,
+          ...newState
+        }
+      })
+    },
+    []
+  )
+
+  useEffect(() => {
+    try {
+      window.addState = addState
+    } catch {
+      // nothing
+    }
+  }, [])
+
+  return <StateContext.Provider value={{ state, addState }}>{props?.children}</StateContext.Provider>
+}
+
+export const withState = (Component: any) => (props: any) => (
+  <StateContext.Consumer>
+    {props => <Component {...props} />}
+  </StateContext.Consumer>
+)
+
+export interface StateContextInterface {
+  state: any
+  addState: any
+}
diff --git a/remix/app/components/Thingtime/Thingtime.tsx b/remix/app/components/Thingtime/Thingtime.tsx
index f16b705..2a6bdef 100644
--- a/remix/app/components/Thingtime/Thingtime.tsx
+++ b/remix/app/components/Thingtime/Thingtime.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Box, Flex } from '@chakra-ui/react'
 import { Safe } from '../Safety/Safe'
-import { useThingtime } from './useThingtime'
+import { useState } from './useState'
 
 export const Thingtime = props => {
   // const uuid = React.useMemo(() => {
@@ -9,7 +9,11 @@ export const Thingtime = props => {
   // }, [])
   const uuid = React.useRef(Math.random().toString(36).substring(7))
 
-  const { state } = useThingtime()
+  const { state } = useState()
+
+  React.useEffect(() => {
+    console.log('nik state?.test changed', state?.test)
+  }, [state?.test])
 
   React.useEffect(() => {
     console.log('nik state changed', state)
diff --git a/remix/app/components/Thingtime/useState.tsx b/remix/app/components/Thingtime/useState.tsx
new file mode 100644
index 0000000..b76406b
--- /dev/null
+++ b/remix/app/components/Thingtime/useState.tsx
@@ -0,0 +1,18 @@
+import React, { useContext } from 'react'
+
+import { StateContext } from '~/Providers/State'
+
+const getGlobal = () => {
+  try {
+    return window
+  } catch {
+    return globalThis
+  }
+}
+
+export const useState = (props?: any) => {
+
+  const { state, addState } = useContext(StateContext)
+
+  return { state, addState }
+}
diff --git a/remix/app/components/Thingtime/useThingtime.tsx b/remix/app/components/Thingtime/useThingtime.tsx
deleted file mode 100644
index 63416ce..0000000
--- a/remix/app/components/Thingtime/useThingtime.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react'
-
-const getGlobal = () => {
-  try {
-    return window
-  } catch {
-    return globalThis
-  }
-}
-
-export const useThingtime = (props?: any) => {
-  const glob = getGlobal()
-
-  return { state: {} }
-}
diff --git a/remix/app/root.tsx b/remix/app/root.tsx
index 530f0e5..04c6c59 100644
--- a/remix/app/root.tsx
+++ b/remix/app/root.tsx
@@ -10,6 +10,7 @@ import {
 } from '@remix-run/react'
 import { Analytics } from '@vercel/analytics/react'
 import { Main } from './components/Layout/Main'
+import { StateProvider } from './Providers/State'
 
 function Document ({
   children,
@@ -41,9 +42,11 @@ function Document ({
 export default function App () {
   return (
     <Document>
-      <ChakraProvider>
-        <Outlet />
-      </ChakraProvider>
+      <StateProvider>
+        <ChakraProvider>
+          <Outlet />
+        </ChakraProvider>
+      </StateProvider>
     </Document>
   )
 }