refactoring context

src/components/app.js

@@ -2,12 +2,15 @@ import { Component, h } from "preact";
 import { Router, route } from "preact-router";
 import Header from "./header";
 import Menu from "./menu";
-import { useCallback, useState } from "preact/hooks";
-import { AppData, Provider, Consumer } from '../utils';
+import { useCallback, useReducer, useState } from "preact/hooks";
+import { AppData, AppDataProvider } from '../utils';
 import { Home, Users, Profile, Login, Logout } from "../route";
+import { AppStateProvider } from "../store/AppState";
 class App extends Component {
+  // useReducer
   appdata = AppData();
   session = this.appdata.get("Session");
+  menutoggle = this.appdata.get("menutoggle");
   toggleMenu = () => {
 
     const [visible, setValue] = useState(false);
@@ -37,19 +40,17 @@ class App extends Component {
   };
   render() {
     let menu = this.toggleMenu();
+    const [menu_shown, toggle_menu] = useReducer(menuReducer,false);
+    this.menutoggle.data = menu;
     let session = this.session;
     session.addAction("isAuth", () => { return session.data && session.data.username !== '' })
     console.log(session.actions);
-    this.sub = session.sub(() => this.forceUpdate());
+    session.sub(this);
     return (
 
-      <Provider appdata={this.appdata} >
+      <AppDataProvider>
+        <AppStateProvider value={{menu_shown, toggle_menu}} >
         <div id="wrapper">
-          <Consumer datapath="Session">
-            {(appdata) => {
-              console.log(appdata);
-            }}
-          </Consumer>
           <Header menu={menu} />
           <div class="page">
             <Menu menu={menu} items={this.menu_items} />
@@ -73,8 +74,8 @@ class App extends Component {
             
           </footer>
         </div>
-
-      </Provider>
+        </AppStateProvider>
+      </AppDataProvider>
     );
   }
 

src/reducers/reducers.js

@@ -0,0 +1,8 @@
+export const menuReducer=(state,action)=>{
+  switch(action){
+    case 'show': return true;
+    case 'hide': return false;
+    case 'toggle': return !state;
+    default: throw new Error("menustate unknown to reducer");
+  }
+  }

src/store/AppState.js

@@ -0,0 +1,6 @@
+import { createContext } from "preact";
+
+const AppState = createContext({});
+
+export const AppStateProvider = AppState.Provider;
+export default AppState;

src/utils/appdata/Consumer.js

@@ -4,7 +4,8 @@ function Consumer(props, ctx){
     }
 
     if(props.datapath!==undefined)
-        return props.children(ctx.get(props.datapath));
+        ctx = ctx.get(props.datapath);
+    ctx.sub(this);
     return props.children(ctx);
 }
 export default Consumer;

src/utils/appdata/ObservableData.js

@@ -1,10 +1,9 @@
 
 
-function subscribe (f) {
-    if ('function' !== typeof (f))
-        throw new Error("Subscriber needs to be a function.");
-    this.observers.push(f);
-    return () => { this.observers.splice(this.observers.indexOf(f), 1) }
+function subscribe (c) {
+
+    this.observers.push(c);
+    return () => { this.observers.splice(this.observers.indexOf(c), 1) }
 }
 function getStore(path){
     let path_slices = path.split("/");
@@ -25,7 +24,7 @@ function ObservableData() {
     this._data = {};
     this._actions = {};
     const dispatchChange = () => {
-        this.observers.map(o => o());
+        this.observers.map(c=>c.forceUpdate());
     }
     return {
         tree:this.tree,

src/utils/appdata/index.js

@@ -1,22 +1,15 @@
 import ObservableData from './ObservableData'
 import Provider from './Provider'
-import Consumer from './Consumer'
 
-let instance = null;
+let root = null;
 function AppData() {
-    if(instance===null){
+    if(root===null){
         console.log("New AppData created")
-        const root = new ObservableData();
+         root = new ObservableData();
         root.get("affe1234/123");
-        instance = {
-            data: root.data,
-            get: root.get,
-            Provider: Provider.bind(this),
-            Consumer: Consumer.bind(this),
-        }
     }
 
-    return instance;
+    return root;
 }
-
+export const AppDataProvider = (props)=><Provider {...props} appdata={AppData()} />
 export default AppData;

src/utils/appdata/oldSession.js

@@ -1,40 +0,0 @@
-import {createContext} from 'preact';
-
-
-class Session {
-    static instance=null;
-    observers = [];
-    static getInstance(){
-        if(this.instance==null)
-            this.instance = new Session();
-        return this.instance;
-    }
-    constructor(){
-        console.log("new Instance of Session manager created");
-        this.state={token:null,expiry:null,name:null}
-    }
-    observe(o){
-        this.observers.push(o);
-    }
-    get Context(){
-        return createContext(this);
-    }
-    setState(updated){
-        this.state = {...this.state,...updated}
-        this.observers.map(o=>o.forceUpdate());
-        console.log(this.state);
-    }
-    Login(username, password) {
-        if (username == "admin" && password == "admin") 
-          { this.setState({token:"TEST",expiry: new Date(Date.now() + 60000*60),name:username});
-          return true;
-        }
-        return false;
-      }
-    Logout = () => this.setState({token:null,expiry:null,name:null});
-    get isAuthenticated(){
-        return this.state.token!=null
-    }
-}
-
-export default ()=> Session.getInstance();

src/utils/index.js

@@ -1,5 +1,4 @@
-import AppData from './appdata'
-import oldSession from './appdata/oldSession';
+import AppData, {AppDataProvider} from './appdata'
 import Provider from './appdata/Provider';
 import Consumer from './appdata/Consumer';
-export {AppData, Provider, Consumer,  oldSession};
+export {AppData, AppDataProvider, Provider, Consumer}