removed custom context system

size-plugin.json

@@ -0,0 +1 @@
+[{"timestamp":1646751614979,"files":[{"filename":"bundle.2a54a.css","previous":0,"size":1709,"diff":1709},{"filename":"bundle.*****.esm.js","previous":0,"size":9856,"diff":9856},{"filename":"polyfills.*****.esm.js","previous":0,"size":2187,"diff":2187},{"filename":"sw.js","previous":0,"size":10599,"diff":10599},{"filename":"sw-esm.js","previous":0,"size":10603,"diff":10603},{"filename":"bundle.1a7a6.js","previous":0,"size":11947,"diff":11947},{"filename":"polyfills.058fb.js","previous":0,"size":2288,"diff":2288},{"filename":"index.html","previous":0,"size":536,"diff":536},{"filename":"200.html","previous":0,"size":536,"diff":536}]}]

src/components/app.js

@@ -1,70 +1,45 @@
-import { Component, h } from "preact";
+import { h } from "preact";
 import { Router, route } from "preact-router";
-import Header from "./header";
-import Menu from "./menu";
-import { useCallback, useReducer, useState } from "preact/hooks";
-import { AppData, AppDataProvider } from '../utils';
+import {Header, Menu} from "./";
+import { menuReducer, sessionReducer } from "../store/reducers";
+import { useReducer } from "preact/hooks";
 import { Home, Users, Profile, Login, Logout } from "../route";
 import { AppStateProvider } from "../store/AppState";
-class App extends Component {
+function App() {
   // useReducer
-  appdata = AppData();
-  session = this.appdata.get("Session");
-  menutoggle = this.appdata.get("menutoggle");
-  toggleMenu = () => {
-
-    const [visible, setValue] = useState(false);
-    const toggle = useCallback(() => {
-      setValue(!visible);
-      return !visible;
-    }, [visible]);
-    return { visible, toggle };
-  }
-  componentWillUnmount() {
-    //this.sub();
-  }
-  menu_items = [
+  const menu = useReducer(menuReducer, false);
+  const session = useReducer(sessionReducer, {active: true});
+  this.menu_items = [
     { text: "Übersicht", path: "/" },
     { text: "Benutzer", path: "/users" },
     { text: "System", path: "/system" },
     { text: "Profil", path: "/profile" },
     { text: "Abmelden", path: "/logout" }
   ]
-  handleRoute = async e => {
-    const isAuthed = this.session.actions.isAuth();
+  this.handleRoute = async e => {
     switch (e.url) {
       default:
-        if (!isAuthed) route('/login', true);
+        if (!session[0].active) route('/login', true);
         break;
     }
   };
-  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);
-    session.sub(this);
   return (
 
-      <AppDataProvider>
-        <AppStateProvider value={{menu_shown, toggle_menu}} >
+      <AppStateProvider value={{ menu, session}} >
         <div id="wrapper">
-          <Header menu={menu} />
+          <Header  />
           <div class="page">
-            <Menu menu={menu} items={this.menu_items} />
-            {!menu.visible &&
+            <Menu  items={this.menu_items} />
+            {!menu[0] &&
 
               <Router onChange={this.handleRoute}>
                 <Home path="/" user="me" />
                 <Login path="login" />
-                <Profile path="/profile/:user" />
+                <Profile path="/profile" />
                 <Logout path="/logout" />
                 <Users path="/users" />
                 <div class="container" default>Error 404</div>
               </Router>
-
             }
           </div>
           <footer>
@@ -75,11 +50,7 @@ class App extends Component {
           </footer>
         </div>
       </AppStateProvider>
-      </AppDataProvider>
   );
-  }
-
-
 
 }
 

src/components/header/index.jsx

@@ -1,11 +1,15 @@
-const Header = (props, ctx) => {
-	const session = ctx.get('Session');
+import { useContext } from 'preact/hooks';
+import AppState from '../../store/AppState';
+const Header = () => {
+	let { menu, session } = useContext(AppState);
+	let [menu_shown, toggle_menu] = menu;
+	let [sessiondata] = session;
 	return (
 		<header className='header'>
 			<div className="container">
 				<h1>Login</h1>
-				{session.actions.isAuth() && (<div id="hamburger-button" className={`hamburger ${props.menu.visible && 'hamburger-active'}`}
-					onClick={() => props.menu.toggle()}>
+				{ sessiondata.active &&(<div id="hamburger-button" className={`hamburger ${menu_shown && 'hamburger-active'}`}
+					onClick={() => toggle_menu('toggle')}>
 					<hr />
 					<hr />
 					<hr />

src/components/menu/index.jsx

@@ -1,8 +1,10 @@
-import { Component, h } from 'preact';
+import { h } from 'preact';
 import { Link } from 'preact-router';
-class Menu extends Component {
-
-    menu_items = [
+import { useContext } from 'preact/hooks';
+import AppState from '../../store/AppState';
+function Menu({items}) {
+    let [ menu_shown, toggle_menu ] = useContext(AppState).menu;
+    let menu_items = [
         { text: "Übersicht", path: "/" },
         { text: "Benutzer", path: "/users" },
         { text: "System", path: "/system" },
@@ -10,27 +12,25 @@ class Menu extends Component {
         { text: "Abmelden", path: "/logout" }
     ]
 
-    getAlert() {
-        alert("getAlert from Child");
-    }
-    onClick = (e) => {
+
+    const onClick = (e) => {
         e.preventDefault();
-        this.props.menu.toggle();
+        toggle_menu('hide');
     }
-    render(props) {
-        if(props.items)
-            this.menu_items = props.items;
-        if (props.menu.visible)
+
+    if (items)
+        menu_items = items;
+    if (menu_shown)
         return (
             <div class="container" >
                 <nav className='menu' >
                     <ul>
-                            {this.menu_items.map((element, i) => (<li key={i}><Link href={element.path} onClick={this.onClick} >{element.text}</Link></li>))}
+                        {menu_items.map((element, i) => (<li key={i}><Link href={element.path} onClick={onClick} >{element.text}</Link></li>))}
                     </ul>
                 </nav>
 
             </div>)
-    }
+
 }
 
 export default Menu;

src/reducers/reducers.js

@@ -1,8 +0,0 @@
-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/route/login/index.jsx

@@ -1,19 +1,25 @@
 import { h } from 'preact';
-import { useState } from 'preact/hooks';
 import { route } from 'preact-router';
-
+import { useContext,useState } from 'preact/hooks';
+import AppState from '../../store/AppState';
 import Breadcrumbs from '../../components/breadcrumbs';
 
-function Login(props, ctx) {
+function Login() {
+    let [sessiondata, setsession]= useContext(AppState).session;
     const [val, set] = useState({ username: '', password: '', error: null });
     const navigation = ["Login"];
-    const session = ctx.get('Session');
+    if(sessiondata.active)
+        route('/', true);
     function onSubmit(e) {
         e.preventDefault();
         //sucess
         if (val.username === 'admin') {
-            session.data = val;
-            route('/', true);
+            let newsession = {
+                type: 'start',
+                username: 'affe',
+                token: 'dsf4w3qr'
+            }
+            setsession(newsession);
         }
         else {
             set({ ...val, error: "user" });

src/route/logout/index.jsx

@@ -1,19 +1,21 @@
 import { h } from 'preact';
 import { Link } from 'preact-router';
-
+import { useContext } from 'preact/hooks';
+import AppState from '../../store/AppState';
 import { Breadcrumbs } from '../../components';
 
-function Logout (props, ctx) {
+function Logout() {
     const navigation = ["Logout"];
-    const session = ctx.get('Session');
+    let [sessiondata, setsession] = useContext(AppState).session;
     this.shouldComponentUpdate = function () {
         console.log('functional component vs closures');
     }
-    if (session.actions.isAuth()) {
-        session.data = { username: '', password: '' };
-
+    if (sessiondata.active) {
+        setsession({ type: 'end' })
     }
 
+
+
     return (
         <div class="container">
             <Breadcrumbs items={navigation} />

src/store/reducers.js

@@ -0,0 +1,16 @@
+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");
+  }
+}
+
+export const sessionReducer = (state, action) => {
+  switch (action.type) {
+    case 'start': return {active: true, token: action.token, username: action.username}
+    case 'end': return {active: false, token: null, username: null, exiry: null}
+    default: throw new Error("action type unknown to session reducer");
+  }
+}

src/utils/appdata/Consumer.js

@@ -1,11 +0,0 @@
-function Consumer(props, ctx){
-    this.componentWillMount=()=>{
-        console.log("Component mounted");
-    }
-
-    if(props.datapath!==undefined)
-        ctx = ctx.get(props.datapath);
-    ctx.sub(this);
-    return props.children(ctx);
-}
-export default Consumer;

src/utils/appdata/ObservableData.js

@@ -1,45 +0,0 @@
-
-
-function subscribe (c) {
-
-    this.observers.push(c);
-    return () => { this.observers.splice(this.observers.indexOf(c), 1) }
-}
-function getStore(path){
-    let path_slices = path.split("/");
-    let current=this;
-    for(let s of path_slices){
-        if(!(s in current.tree))
-            current.tree[s] = new ObservableData();
-        current = current.tree[s];
-    }
-    return current;
-}
-function addAction(name, f){
-    this._actions[name] = f.bind(this._data);
-}
-function ObservableData() {
-    this.observers = [];
-    this.tree = {};
-    this._data = {};
-    this._actions = {};
-    const dispatchChange = () => {
-        this.observers.map(c=>c.forceUpdate());
-    }
-    return {
-        tree:this.tree,
-        addAction: addAction.bind(this),
-        sub: subscribe.bind(this),
-        get: getStore.bind(this),
-        get data() {
-            return this._data;
-        },
-        set data(val) {
-            this._data = val;
-            dispatchChange();
-        },
-        actions: this._actions,
-        
-    }
-}
-export default ObservableData;

src/utils/appdata/Provider.js

@@ -1,14 +0,0 @@
-function Provider(props) {
-    if (this.root !== undefined) props.appdata = this.root;
-    if (!this.getChildContext && props.appdata !== undefined) {
-        this.getChildContext = () => props.appdata;
-        this.shouldComponentUpdate = function (_props) {
-            if (this.props.appdata !== _props.appdata) {
-                return true;
-            }
-        }
-    }
-
-    return props.children;
-}
-export default Provider;

src/utils/appdata/index.js

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

src/utils/index.js

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