From 6e3419019ba58d8d2318f7c591cb004fe32542cb Mon Sep 17 00:00:00 2001 From: Jean Jacques Avril Date: Tue, 8 Mar 2022 15:10:19 +0100 Subject: [PATCH] refactoring context --- src/components/app.js | 23 +++++++++-------- src/reducers/reducers.js | 8 ++++++ src/store/AppState.js | 6 +++++ src/utils/appdata/Consumer.js | 3 ++- src/utils/appdata/ObservableData.js | 11 ++++---- src/utils/appdata/actions.js | 0 src/utils/appdata/createAppData.js | 0 src/utils/appdata/index.js | 17 ++++-------- src/utils/appdata/oldSession.js | 40 ----------------------------- src/utils/index.js | 5 ++-- 10 files changed, 40 insertions(+), 73 deletions(-) create mode 100644 src/reducers/reducers.js create mode 100644 src/store/AppState.js delete mode 100644 src/utils/appdata/actions.js delete mode 100644 src/utils/appdata/createAppData.js delete mode 100644 src/utils/appdata/oldSession.js diff --git a/src/components/app.js b/src/components/app.js index 7a38213..7d26c53 100644 --- a/src/components/app.js +++ b/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 ( - + +
- - {(appdata) => { - console.log(appdata); - }} -
@@ -73,8 +74,8 @@ class App extends Component {
- - + + ); } diff --git a/src/reducers/reducers.js b/src/reducers/reducers.js new file mode 100644 index 0000000..e420e80 --- /dev/null +++ b/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"); + } + } diff --git a/src/store/AppState.js b/src/store/AppState.js new file mode 100644 index 0000000..8e5acdd --- /dev/null +++ b/src/store/AppState.js @@ -0,0 +1,6 @@ +import { createContext } from "preact"; + +const AppState = createContext({}); + +export const AppStateProvider = AppState.Provider; +export default AppState; \ No newline at end of file diff --git a/src/utils/appdata/Consumer.js b/src/utils/appdata/Consumer.js index 297be4d..36c2847 100644 --- a/src/utils/appdata/Consumer.js +++ b/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; \ No newline at end of file diff --git a/src/utils/appdata/ObservableData.js b/src/utils/appdata/ObservableData.js index 7cd3293..ed9aea3 100644 --- a/src/utils/appdata/ObservableData.js +++ b/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, diff --git a/src/utils/appdata/actions.js b/src/utils/appdata/actions.js deleted file mode 100644 index e69de29..0000000 diff --git a/src/utils/appdata/createAppData.js b/src/utils/appdata/createAppData.js deleted file mode 100644 index e69de29..0000000 diff --git a/src/utils/appdata/index.js b/src/utils/appdata/index.js index 8fbf7eb..35d31c3 100644 --- a/src/utils/appdata/index.js +++ b/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)=> export default AppData; \ No newline at end of file diff --git a/src/utils/appdata/oldSession.js b/src/utils/appdata/oldSession.js deleted file mode 100644 index 3d60419..0000000 --- a/src/utils/appdata/oldSession.js +++ /dev/null @@ -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(); \ No newline at end of file diff --git a/src/utils/index.js b/src/utils/index.js index 67c4d37..cb89f0c 100644 --- a/src/utils/index.js +++ b/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}