Removed warnings and added new store

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

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 () => {

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

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>
  );
 }

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

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>
 );