feat: main Added state

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
+}

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)

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 }
+}

remix/app/components/Thingtime/useThingtime.tsx

@@ -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: {} }
-}

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>
+      <StateProvider>
-        <Outlet />
+        <ChakraProvider>
-      </ChakraProvider>
+          <Outlet />
+        </ChakraProvider>
+      </StateProvider>
     </Document>
   )
 }