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,57 +1,57 @@
-import { Component, createRef, h } from "preact";
-import { Router } from "preact-router";
-import Header from "./header";
-import Login from "../routes/login";
-import Profile from "../routes/profile";
-import Menu from "./menu";
-import Users from "../routes/users";
-import { useCallback, useState } from "preact/hooks";
-const menu = createRef();
-class App extends Component {
-  toggleMenu() {
-    const [visible, setValue] = useState(false);
-    const toggle = useCallback(() => {
-      setValue(!visible);
-      return !visible;
-    }, [visible]);
-    return { visible, toggle };
-  }
-  authenticateUser() {
-    const [session, setValue] = useState({ token: null });
-    const login = (username, password) => {
-      if (username == "admin" && password == "admin") {
-        setValue({ ...session, token: "ABCDEFG" });
-        return true;
+import { h } from "preact";
+import { Router, route } from "preact-router";
+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";
+function App() {
+  // useReducer
+  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" }
+  ]
+  this.handleRoute = async e => {
+    switch (e.url) {
+      default:
+        if (!session[0].active) route('/login', true);
+        break;
     }
   };
-    const logout = () => setValue({ ...session, token: null });
-    const isAuthenticated = () => session.token != null;
-    return { login, logout, isAuthenticated };
-  }
-
-  render() {
-    const menu = this.toggleMenu();
-    const auth = this.authenticateUser();
   return (
+
+      <AppStateProvider value={{ menu, session}} >
         <div id="wrapper">
-        <Header menu={menu} auth={auth} />
-        <Menu menu={menu} />
-        {!menu.visible &&
-          (!auth.isAuthenticated() ? (
-            <Login auth={auth} />
-          ) : (
+          <Header  />
           <div class="page">
-              <Router>
-                <Profile path="/test/" user="me" />
-                <Profile path="/profile/:user" />
+            <Menu  items={this.menu_items} />
+            {!menu[0] &&
+
+              <Router onChange={this.handleRoute}>
+                <Home path="/" user="me" />
+                <Login path="login" />
+                <Profile path="/profile" />
+                <Logout path="/logout" />
                 <Users path="/users" />
                 <div class="container" default>Error 404</div>
               </Router>
-            </div>
-          ))}
-      </div>
-    );
             }
+          </div>
+          <footer>
+            <div className="container" style={'text-align: center; align-items: center'}>
+              <span>&copy; Jean Jacques Avril 2022 </span>
+            </div>
+
+          </footer>
+        </div>
+      </AppStateProvider>
+  );
+
 }
 
 export default App;

src/components/header/index.jsx

@@ -1,12 +1,15 @@
-import { Component, createRef, h } from 'preact';
-//import { Link } from 'preact-router/match';
-
-const Header = (props) => (
+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>
-			{props.auth.isAuthenticated() && (<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 />
@@ -14,7 +17,7 @@ const Header = (props) => (
 			</div>
 		</header>
 	);
-
+}
 
 
 

src/components/index.js

@@ -0,0 +1,9 @@
+import App from "./app";
+import Breadcrumbs from "./breadcrumbs";
+import Pageselector from "./Pageselector";
+import Header from "./header";
+import UserList from "./userlist";
+import Menu from "./menu";
+
+export {App, Breadcrumbs, Pageselector, Header, UserList, Menu}
+export default App

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,26 +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, state) {
-        if (props.menu.visible)
+
+    if (items)
+        menu_items = items;
+    if (menu_shown)
         return (
             <div class="container" >
                 <nav className='menu' >
                     <ul>
-                            <li><Link href="/test"  >Test</Link></li>
-                            {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/index.js

@@ -1,6 +1,6 @@
 import './style/style.sass';
-import App from './components/app';
-import { h, render, Component } from "preact"
+import App from './components';
+import { h, render } from "preact"
 
 render(<App />, document.body)
-//export default App;
+

src/route/home/index.js

@@ -1,11 +1,10 @@
 import { h } from 'preact';
-import style from './style.css';
 
-const Home = () => (
-	<div class={style.home}>
+function Home() {return(
+	<div class="container">
 		<h1>Home</h1>
 		<p>This is the Home component.</p>
 	</div>
 );
-
+}
 export default Home;

src/route/index.js

@@ -0,0 +1,6 @@
+import Home from "./home"
+import Users from './users'
+import Profile from "./profile"
+import Login from "./login"
+import Logout from './logout'
+export {Home, Users, Profile, Login, Logout }

src/route/login/index.jsx

@@ -0,0 +1,55 @@
+import { h } from 'preact';
+import { route } from 'preact-router';
+import { useContext,useState } from 'preact/hooks';
+import AppState from '../../store/AppState';
+import Breadcrumbs from '../../components/breadcrumbs';
+
+function Login() {
+    let [sessiondata, setsession]= useContext(AppState).session;
+    const [val, set] = useState({ username: '', password: '', error: null });
+    const navigation = ["Login"];
+    if(sessiondata.active)
+        route('/', true);
+    function onSubmit(e) {
+        e.preventDefault();
+        //sucess
+        if (val.username === 'admin') {
+            let newsession = {
+                type: 'start',
+                username: 'affe',
+                token: 'dsf4w3qr'
+            }
+            setsession(newsession);
+        }
+        else {
+            set({ ...val, error: "user" });
+        }
+        set({ username: '', password: '' });
+    }
+    return (
+        <div class="container">
+            <Breadcrumbs items={navigation} />
+
+            <form id="login_form" onSubmit={onSubmit} >
+                <p >
+                    Bitte melden Sie sich mit ihren Nutzerdaten an.
+
+                </p>
+                {val.error !== null && <span style={'color: red'}>Fehler: Ungültige Anmeldedaten.</span>}
+                <div class="input-box">
+                    <input id="name" type="text" placeholder="Username" onInput={e => set({ ...val, username: e.target.value })} value={val.username} />
+                    <label for="name">Benutzername</label>
+                </div>
+                <div class="input-box">
+                    <input id="pass" type="password" placeholder="Passwort" onInput={e => set({ ...val, password: e.target.value })} value={val.password} />
+                    <label for="pass">Password</label>
+                </div>
+                <input type="submit" value="Submit" />
+
+            </form>
+        </div>
+    );
+
+}
+
+export default Login;

src/route/logout/index.jsx

@@ -0,0 +1,32 @@
+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() {
+    const navigation = ["Logout"];
+    let [sessiondata, setsession] = useContext(AppState).session;
+    this.shouldComponentUpdate = function () {
+        console.log('functional component vs closures');
+    }
+    if (sessiondata.active) {
+        setsession({ type: 'end' })
+    }
+
+
+
+    return (
+        <div class="container">
+            <Breadcrumbs items={navigation} />
+
+            <p>
+                Erfolgreich abgemeldet.
+                <Link href="/login">Erneut Anmelden</Link>
+            </p>
+        </div>
+    );
+
+}
+
+export default Logout;

src/route/profile/index.js

@@ -13,6 +13,7 @@ const Profile = ({ user }) => {
 	}, []);
 
 	return (
+		<div className='container'>
 			<div class={style.profile}>
 				<h1>Profile: {user}</h1>
 				<p>This is the user profile for a user named {user}.</p>
@@ -25,6 +26,7 @@ const Profile = ({ user }) => {
 					Clicked {count} times.
 				</p>
 			</div>
+		</div>
 	);
 }
 

src/routes/home/style.css

@@ -1,5 +0,0 @@
-.home {
-	padding: 56px 20px;
-	min-height: 100%;
-	width: 100%;
-}

src/routes/login/index.jsx

@@ -1,41 +0,0 @@
-import { Component, h } from 'preact';
-import Breadcrumbs from '../../components/breadcrumbs';
-
-class Login extends Component {
-    state = { username: '', password: '' };
-    navigation = ["Login"];
-    onSubmit = (e) => {
-        e.preventDefault();
-        console.log(this.state);
-        this.setState({ username: '', password: '' });
-        if(!this.props.auth.login(this.state.username,this.state.password))
-            alert("Wrong login")
-    }
-
-    render() {
-
-        return (<div id="login-screen" class="page">
-            <div class="container">
-                <Breadcrumbs items={this.navigation} />
-
-                <form id="login_form" onSubmit={this.onSubmit} >
-                    <p>
-                        Bitte melden Sie sich mit ihren Nutzerdaten an.
-                    </p>
-                    <div class="input-box">
-                        <input id="name" type="text" placeholder="Username" onInput={e => this.setState(prev => ({ ...prev, username: e.target.value }))} value={this.state.username} />
-                        <label for="name">Benutzername</label>
-                    </div>
-                    <div class="input-box">
-                        <input id="pass" type="password" placeholder="Passwort" onInput={e => this.setState(prev => ({ ...prev, password: e.target.value }))} value={this.state.password} />
-                        <label for="pass">Password</label>
-                    </div>
-                    <input type="submit" value="Submit" />
-
-                </form>
-            </div>
-        </div>);
-    }
-}
-
-export default Login;

src/store/AppState.js

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

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/style/_breadcrumbs.sass

@@ -1,10 +1,11 @@
 @mixin breadcrumbs
-    padding: 1em 0
+    padding-top:  1rem
     ul
         display: flex
         background: #eee
         box-shadow: inset 0 0 .3em #ccc, 0 0 .5em #ddd
         padding: .3em
+        margin: 0
         border: 0.05em solid #fff
         border-radius: .3em
         list-style-type: none

src/style/_footer.sass

@@ -0,0 +1,9 @@
+@mixin footer
+    display: block
+    background: #bbb
+    text-shadow: 0 0 .2em #34d
+    color: white
+    flex-shrink: 0
+    padding: 0.5rem 0
+    margin-top: 1rem
+    width: 100%

src/style/_menu.sass

@@ -16,6 +16,9 @@
             //text-shadow: 0 0 .2em #000
             width: 100%
             //background: #ccc
+            &:hover
+                background: #bbb
+                color: #333
             &::after
                 top: 100%
                 left: 0

src/style/style.sass

@@ -3,18 +3,19 @@
 @use 'login'
 @use 'breadcrumbs'
 @use 'pageselector'
+@use 'footer'
 *
-    //border: red 1px dotted
+    
     box-sizing: border-box
 html
     font-family: Helvetica, sans-serif
     font-size: 16px
+    height: 100%
 body
-
     margin: 0
     padding: 0
     background-color: white
-    //min-height: 100vh
+    height: 100%
     width: 100%
 #wrapper
     display: flex
@@ -22,12 +23,14 @@ body
     justify-content: flex-start
     align-items: stretch
     min-height: 100%
+    //margin-bottom: -2rem
     width: 100%
 .header
     z-index: 100
     position: fixed
+    top: 0em
     width: 100%
-    height: 4em
+    height: 4rem
     display: flex
     flex-direction: column
     justify-content: flex-end
@@ -54,7 +57,9 @@ body
     display: flex
     background: white
     width: 100%
-    padding-top: 6em
+    flex: 1
+    margin-top: 4rem
+    
 .menu
     @include menu.nav
 
@@ -124,3 +129,6 @@ body
 .btn-edit
     @include button()
     background-image: url("../assets/icons/edit-icon3.svg")
+
+footer
+    @include footer.footer