diff --git a/size-plugin.json b/size-plugin.json new file mode 100644 index 0000000..f9c8af6 --- /dev/null +++ b/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}]}] diff --git a/src/components/app.js b/src/components/app.js index 7d26c53..1ad21ff 100644 --- a/src/components/app.js +++ b/src/components/app.js @@ -1,85 +1,56 @@ -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 ( + return ( - - +
-
+
- - {!menu.visible && + + {!menu[0] && - +
Error 404
- }
+ -
-
- ); - } - - + + ); } diff --git a/src/components/header/index.jsx b/src/components/header/index.jsx index 62904c9..611e167 100644 --- a/src/components/header/index.jsx +++ b/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 (

Login

- {session.actions.isAuth() && (
props.menu.toggle()}> + { sessiondata.active &&(
toggle_menu('toggle')}>


diff --git a/src/components/menu/index.jsx b/src/components/menu/index.jsx index ac4135a..c765f9c 100644 --- a/src/components/menu/index.jsx +++ b/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) => { - e.preventDefault(); - this.props.menu.toggle(); - } - render(props) { - if(props.items) - this.menu_items = props.items; - if (props.menu.visible) - return ( -
- -
) + const onClick = (e) => { + e.preventDefault(); + toggle_menu('hide'); } + + if (items) + menu_items = items; + if (menu_shown) + return ( +
+ + +
) + } export default Menu; \ No newline at end of file diff --git a/src/reducers/reducers.js b/src/reducers/reducers.js deleted file mode 100644 index e420e80..0000000 --- a/src/reducers/reducers.js +++ /dev/null @@ -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"); - } - } diff --git a/src/route/login/index.jsx b/src/route/login/index.jsx index 5876282..b2ec6ac 100644 --- a/src/route/login/index.jsx +++ b/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" }); diff --git a/src/route/logout/index.jsx b/src/route/logout/index.jsx index 2becf48..b1cb469 100644 --- a/src/route/logout/index.jsx +++ b/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'); - this.shouldComponentUpdate = function(){ + 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 (
diff --git a/src/store/reducers.js b/src/store/reducers.js new file mode 100644 index 0000000..6f32950 --- /dev/null +++ b/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"); + } +} diff --git a/src/utils/appdata/Consumer.js b/src/utils/appdata/Consumer.js deleted file mode 100644 index 36c2847..0000000 --- a/src/utils/appdata/Consumer.js +++ /dev/null @@ -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; \ No newline at end of file diff --git a/src/utils/appdata/ObservableData.js b/src/utils/appdata/ObservableData.js deleted file mode 100644 index ed9aea3..0000000 --- a/src/utils/appdata/ObservableData.js +++ /dev/null @@ -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; \ No newline at end of file diff --git a/src/utils/appdata/Provider.js b/src/utils/appdata/Provider.js deleted file mode 100644 index f17f551..0000000 --- a/src/utils/appdata/Provider.js +++ /dev/null @@ -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; \ No newline at end of file diff --git a/src/utils/appdata/index.js b/src/utils/appdata/index.js deleted file mode 100644 index 35d31c3..0000000 --- a/src/utils/appdata/index.js +++ /dev/null @@ -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)=> -export default AppData; \ No newline at end of file diff --git a/src/utils/index.js b/src/utils/index.js deleted file mode 100644 index cb89f0c..0000000 --- a/src/utils/index.js +++ /dev/null @@ -1,4 +0,0 @@ -import AppData, {AppDataProvider} from './appdata' -import Provider from './appdata/Provider'; -import Consumer from './appdata/Consumer'; -export {AppData, AppDataProvider, Provider, Consumer}