From 2a85144633cef774b559e72ab2d65c23153dc946 Mon Sep 17 00:00:00 2001
From: Marcus <marcus.c.eliasson@gmail.com>
Date: Sat, 24 Aug 2024 08:55:20 +0200
Subject: [PATCH] Removed warnings and added new store

---
 src/App copy.tsx                    | 44 -----------------
 src/App.tsx                         | 27 +++++------
 src/backend.tsx                     | 28 ++++-------
 src/components/connection_modal.tsx | 14 ------
 src/components/console_tab.tsx      | 27 +++--------
 src/global_context.tsx              | 73 +++++++++++++++++++++++++++++
 src/main.tsx                        |  3 --
 src/store.tsx                       | 24 ----------
 8 files changed, 100 insertions(+), 140 deletions(-)
 delete mode 100644 src/App copy.tsx
 create mode 100644 src/global_context.tsx
 delete mode 100644 src/store.tsx

diff --git a/src/App copy.tsx b/src/App copy.tsx
deleted file mode 100644
index f8286aa..0000000
--- a/src/App copy.tsx	
+++ /dev/null
@@ -1,44 +0,0 @@
-import { useState } from "react";
-import reactLogo from "./assets/react.svg";
-import { invoke } from "@tauri-apps/api/core";
-import "./App.css";
-
-import { Routes, Route, Outlet, Link } from "react-router-dom";
-import { Sidebar, Menu, MenuItem, SubMenu } from 'react-pro-sidebar';
-
-function App() {
-  const [greetMsg, setGreetMsg] = useState("");
-  const [name, setName] = useState("");
-
-  async function greet() {
-    // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
-    setGreetMsg(await invoke("greet", { name }));
-  }
-
-  console.log("Rendering main app")
-
-  return (
-    <div className="container" style={{ display: 'flex', height: '100%' }}>
-      <Sidebar
-        //backgroundColor="#f6f6f6"
-        breakPoint="md"
-      >
-
-        <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
-          
-
-          <Menu>
-            <SubMenu label="Charts">
-              <MenuItem> Pie charts </MenuItem>
-              <MenuItem> Line charts </MenuItem>
-            </SubMenu>
-            <MenuItem> Documentation </MenuItem>
-            <MenuItem> Calendar </MenuItem>
-          </Menu>
-        </div>
-      </Sidebar>
-    </div>
-  );
-}
-
-export default App;
diff --git a/src/App.tsx b/src/App.tsx
index 71fc697..d5067eb 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,8 +1,4 @@
 import { useState } from 'react';
-import Button from 'react-bootstrap/Button';
-import Modal from 'react-bootstrap/Modal';
-import reactLogo from "./assets/react.svg";
-import { invoke } from "@tauri-apps/api/core";
 import "./App.css";
 
 import { ToastContainer, toast } from 'react-toastify';
@@ -21,20 +17,19 @@ import ConnectionModal from "./components/connection_modal";
 import ConsoleTab from "./components/console_tab";
 import BackEnd from './backend';
 
-function App() {
-  const [greetMsg, setGreetMsg] = useState("");
-  const [name, setName] = useState("");
 
-  async function greet() {
-    // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
-    setGreetMsg(await invoke("greet", { name }));
-  }
+import createFastContext from "./global_context";
 
-  console.log("Rendering main app")
+export const { Provider, useStore } = createFastContext({
+  console: ""
+});
 
-  return (
-    <div>
 
+function App() {
+
+  return (
+    <Provider>
+      <div>
       {/* Routes nest inside one another. Nested route paths build upon
             parent route paths, and nested route elements render inside
             parent route elements. See the note about <Outlet> below. */}
@@ -51,7 +46,9 @@ function App() {
         </Route>
       </Routes>
       <BackEnd/>
-    </div>
+      </div>
+    </Provider>
+
   );
 }
 
diff --git a/src/backend.tsx b/src/backend.tsx
index 51130f8..c66cf43 100644
--- a/src/backend.tsx
+++ b/src/backend.tsx
@@ -1,37 +1,25 @@
-import { useEffect, useContext } from 'react';
+import { useEffect } from 'react';
 import { listen } from "@tauri-apps/api/event";
-import Button from 'react-bootstrap/Button';
-import Modal from 'react-bootstrap/Modal';
-import Table from 'react-bootstrap/Table';
-
-import { toast } from 'react-toastify';
-
-import Container from 'react-bootstrap/Container';
-import Row from 'react-bootstrap/Row';
-import Col from 'react-bootstrap/Col';
-
-import { store } from './store.js';
 
 import { ConsoleEvent } from './interface/console_event';
 
+import {useStore} from "./App";
+
 interface ConsoleEventMessage {
   payload: ConsoleEvent;
 }
 
 function BackEnd() {
-  const { state, dispatch } = useContext(store);
+  const [_, setStore] = useStore((store) => store["console"]);
 
-  const changeColor = () => {
-    dispatch({ type: "CHANGE_COLOR", payload: "blue" });
-  };
+  let currentConsoleText = "";
 
   useEffect(() => {
     console.log("Backend loaded");
+    
     const unListen = listen("console", (e: ConsoleEventMessage) => {
-      //setConsoleText(consoleText + e.payload.message + "\n");
-      console.log("Got console stuff off backend")
-      dispatch({ type: "CONSOLE", payload: e.payload.message });
-
+      currentConsoleText += e.payload.message + "\n";
+      setStore({ ["console"]: currentConsoleText });
     });
 
     return () => {
diff --git a/src/components/connection_modal.tsx b/src/components/connection_modal.tsx
index 6284c14..c5aaa7d 100644
--- a/src/components/connection_modal.tsx
+++ b/src/components/connection_modal.tsx
@@ -5,24 +5,10 @@ import Modal from 'react-bootstrap/Modal';
 import Table from 'react-bootstrap/Table';
 
 import { toast } from 'react-toastify';
-
-import Container from 'react-bootstrap/Container';
-import Row from 'react-bootstrap/Row';
-import Col from 'react-bootstrap/Col';
-
 import 'bootstrap/dist/css/bootstrap.min.css';
-
 import { invoke } from "@tauri-apps/api/core";
-
 import { ScanResponse } from '../interface/scan_response';
 
-
-// interface ProgressEventPayload {
-//   matches_per_bs: Stats;
-//   hits_per_sensor: Stats;
-//   sync: Stats;
-// }
-
 interface ProgressEventProps {
   payload: ScanResponse;
 }
diff --git a/src/components/console_tab.tsx b/src/components/console_tab.tsx
index 7569dc3..a280858 100644
--- a/src/components/console_tab.tsx
+++ b/src/components/console_tab.tsx
@@ -1,31 +1,18 @@
-import { useContext, useState } from 'react';
-import { listen } from "@tauri-apps/api/event";
-import Button from 'react-bootstrap/Button';
-import Modal from 'react-bootstrap/Modal';
-import Table from 'react-bootstrap/Table';
-
-import { toast } from 'react-toastify';
-
-import Container from 'react-bootstrap/Container';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
-
-import { store } from './../store.js';
-
-import { ConsoleEvent } from '../interface/console_event';
-
-interface ConsoleEventMessage {
-  payload: ConsoleEvent;
-}
+import {useStore} from "./../App";
 
 function ConsoleTab() {
-  const [consoleText, setConsoleText] = useState("");
 
-  const { state, dispatch } = useContext(store);
+  const [crazyflieConsole] = useStore((store) => store["console"]);
 
   return (
     <div>
-      <pre>{state.console}</pre>
+      <Row>
+        <Col>
+          <pre>{crazyflieConsole}</pre>
+        </Col>
+      </Row>
     </div>
   );
 }
diff --git a/src/global_context.tsx b/src/global_context.tsx
new file mode 100644
index 0000000..92d3f16
--- /dev/null
+++ b/src/global_context.tsx
@@ -0,0 +1,73 @@
+// Source https://github.com/jherr/fast-react-context/tree/main/fast-context-generic
+
+import React, {
+  useRef,
+  createContext,
+  useContext,
+  useCallback,
+  useSyncExternalStore,
+} from "react";
+
+export default function createGlobalContext<Store>(initialState: Store) {
+  function useStoreData(): {
+    get: () => Store;
+    set: (value: Partial<Store>) => void;
+    subscribe: (callback: () => void) => () => void;
+  } {
+    const store = useRef(initialState);
+
+    const get = useCallback(() => store.current, []);
+
+    const subscribers = useRef(new Set<() => void>());
+
+    const set = useCallback((value: Partial<Store>) => {
+      store.current = { ...store.current, ...value };
+      subscribers.current.forEach((callback) => {console.log("Calling callback"); callback()});
+    }, []);
+
+    const subscribe = useCallback((callback: () => void) => {
+      subscribers.current.add(callback);
+      return () => subscribers.current.delete(callback);
+    }, []);
+
+    return {
+      get,
+      set,
+      subscribe,
+    };
+  }
+
+  type UseStoreDataReturnType = ReturnType<typeof useStoreData>;
+
+  const StoreContext = createContext<UseStoreDataReturnType | null>(null);
+
+  function Provider({ children }: { children: React.ReactNode }) {
+    return (
+      <StoreContext.Provider value={useStoreData()}>
+        {children}
+      </StoreContext.Provider>
+    );
+  }
+
+  function useStore<SelectorOutput>(
+    selector: (store: Store) => SelectorOutput
+  ): [SelectorOutput, (value: Partial<Store>) => void] {
+    const store = useContext(StoreContext);
+    if (!store) {
+      throw new Error("Store not found");
+    }
+
+    const state = useSyncExternalStore(
+      store.subscribe,
+      () => selector(store.get()),
+      () => selector(initialState),
+    );
+
+    return [state, store.set];
+  }
+
+  return {
+    Provider,
+    useStore,
+  };
+}
\ No newline at end of file
diff --git a/src/main.tsx b/src/main.tsx
index 9eef99b..b43fbd0 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -3,14 +3,11 @@ import ReactDOM from "react-dom/client";
 import App from "./App";
 import "./styles.css";
 import { BrowserRouter } from "react-router-dom";
-import { StateProvider } from "./store";
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
     <BrowserRouter>
-      <StateProvider>
         <App />
-      </StateProvider>
     </BrowserRouter>
   </React.StrictMode>
 );
diff --git a/src/store.tsx b/src/store.tsx
deleted file mode 100644
index 6caac54..0000000
--- a/src/store.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-// store.js
-import { createContext, useReducer } from "react";
-const initialState = {
-  color: "red",
-  console: "",
-};
-
-const store = createContext(initialState);
-const { Provider } = store;
-
-const StateProvider = ({ children }) => {
-  const [state, dispatch] = useReducer((state, action) => {
-    switch (action.type) {
-      case "CHANGE_COLOR":
-        return { ...state, color: action.payload };
-      case "CONSOLE":
-        return { ...state, console: state.console + action.payload + "\n" };
-      default:
-        throw new Error();
-    }
-  }, initialState);
-  return <Provider value={{ state, dispatch }}>{children}</Provider>;
-};
-export { store, StateProvider };
\ No newline at end of file