first commit

src/App.jsx

@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+
+import './App.css';
+import Zettel from './Zettel';
+import NotFound from './NotFound'
+
+import { BrowserRouter as Router, Route, Switch, Redirect, } from 'react-router-dom';
+
+import Nav from './Nav';
+
+
+export default class App extends Component {
+  render(){
+    return (
+
+      <Router>             
+         <Nav></Nav>
+          <Switch>
+                <Route path="/" exact render={() => {return  <Redirect to="/zettel" />;}} />
+                <Route path="/zettel" component={Zettel} />
+                <Route path="/hinzufügen" component={Zettel} />
+                <Route path="/"  component={NotFound} />
+          </Switch>
+      </Router>
+
+    );
+  }
+
+}
+
+
+
+//                  <Route path="/" exact component={Zettel} />
+//                  <Route path="/hinzufügen" exact component={Zettel} />
+/*
+alter return 
+    return (
+      <div>
+        <h1>APP</h1>
+        <Zettel />
+      </div>
+
+    );
+
+*/ 

src/Besorgung.js

@@ -0,0 +1,19 @@
+export default class Besorgung {
+
+    static properties = 
+    {
+        nummer:     {label: 'Nummer'},
+        name:       {label: 'Artikel'},
+        menge:      {label:'Menge'},
+        einheit:    {label: 'Einheit'},
+        kommentar:  {label: 'Kommentar'},
+    };
+
+    constructor(nummer, name, menge, einheit, kommentar) {
+        this.nummer = nummer;
+        this.name = name;
+        this.menge = menge;
+        this.einheit = einheit;
+        this.kommentar = kommentar;
+    }
+}

src/Nav.styles.ts

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+import { Toolbar as MatToolbar } from '@material-ui/core';
+export const Toolbar = styled(MatToolbar)`
+&&& {
+display: flex;
+justify-content: space-between;
+}
+` as typeof MatToolbar;

src/Nav.tsx

@@ -0,0 +1,65 @@
+import React, { useCallback } from 'react';
+
+import { withRouter, RouteComponentProps } from 'react-router';
+import { AppBar, IconButton, Typography, Menu, MenuItem } from '@material-ui/core';
+import MenuIcon from '@material-ui/icons/Menu';
+import ExitIcon from '@material-ui/icons/ExitToApp';
+import { Link } from 'react-router-dom';
+import { Toolbar } from './Nav.styles';
+
+interface Props {
+    onLogout: () => void;
+}
+
+function Nav({ history }: RouteComponentProps & Props) {  //{history, onLogout}
+    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+    /*
+    const handleLogout = useCallback(() => {
+        onLogout();
+        history.push('/');
+    }, [onLogout]);
+*/
+    const handleMenuOpen = useCallback(
+        (event: React.MouseEvent<HTMLButtonElement>) =>
+            setAnchorEl(event.currentTarget),
+        [setAnchorEl]
+    );
+
+    const handleMenuClose = useCallback(() => setAnchorEl(null), [setAnchorEl]);
+
+    return (
+        <AppBar>
+            <Toolbar>
+                <IconButton
+                    edge="start"
+                    color="inherit"
+                    aria-label="Menu"
+                    onClick={handleMenuOpen}
+                >           
+                    <MenuIcon />
+                </IconButton>
+                <Typography variant="h6">
+                    Einkaufszettel
+                </Typography>
+                <Menu
+                    id="navigation-menu"
+                    anchorEl={anchorEl}
+                    keepMounted
+                    open={Boolean(anchorEl)}
+                    onClose={handleMenuClose}
+                >   
+                    <MenuItem onClick={handleMenuClose}>
+                        <Link to="/zettel">Zettel</Link>
+                    </MenuItem>
+                    <MenuItem onClick={handleMenuClose}>
+                        <Link to="/hinzufügen">Hinzufügen</Link>
+                    </MenuItem>
+
+                </Menu>
+            </Toolbar>
+    </AppBar>
+    );
+
+}
+
+export default withRouter(Nav);

src/NotFound.styles.tsx

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+export const Container = styled.div`
+display: flex;
+flex-direction: column;
+align-items: center;
+margin: 100px;
+`;

src/NotFound.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { Container } from './NotFound.styles';
+export default function NotFound() {
+return (
+<Container>
+<h1>Ups ... Etwas ist schiefgelaufen</h1>
+<p>
+<Link to="/zettel">Weiter zur Startseite</Link>
+</p>
+</Container>
+);}

src/Zeile.css

@@ -0,0 +1,3 @@
+tr:nth-child(2n).active, .active{
+    background-color: tomato;
+}

src/Zeile.jsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+
+import './Zeile.css';
+import Besorgung from './Besorgung';
+
+export default function Zeile({besorgung, onSelect, selectedLine})
+{
+    return(
+                                <tr key = {besorgung.name} 
+                                    className={selectedLine === besorgung.name ? 'active' : ''}
+                                    onClick={() => {onSelect(besorgung.name)}}
+                                >
+
+                                {Object.keys(Besorgung.properties).map(property =>{
+                                    const besorgungsprop = Besorgung.properties[property];
+                                    return(
+                                        <td>{besorgung[property]}</td>
+                                    );
+
+                                })}
+                                </tr>
+    );
+}
+
+
+Zeile.propTypes = {
+    besorgung: PropTypes.object.isRequired,
+    onSelect: PropTypes.func,
+    selectedLine: PropTypes.string,
+};

src/Zettel.css

@@ -0,0 +1,37 @@
+h1{
+    font-size:20px;
+    margin: 0 0 10px 0;
+}
+
+table {
+    width: 100%;
+    border-collapse:collapse;
+    border: 1px solid black;
+}
+
+td{
+    padding: 5px 5px;
+    border: 1px solid black;
+}
+
+th{
+    border: 1px solid black;
+    color: white
+}
+
+tr:nth-child(2n){
+    background-color: #ddd;
+}
+
+thead{
+    background-color: rgb(10, 190, 91);
+    border: 1px solid black;
+}
+
+.zettel{
+    border: 1px solid black;
+    border-radius: 10px;
+    margin: 100px;
+    padding: 10px;
+    box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.25);
+}

src/Zettel.jsx

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+
+import update from 'immutability-helper';
+import axios from 'axios';
+
+
+import './Zettel.css';
+import Besorgung from './Besorgung';
+import Zeile from './Zeile';
+
+export default class Zettel extends React.Component {
+
+
+
+
+    state = {
+        selectedLine: '',
+        liste: [],
+    };
+    
+    getSelectHandler()
+    {
+        return line => 
+        this.setState((state) =>
+        update(state, {selectedLine: {$set: line}}),
+        );
+    }
+
+
+
+    async componentDidMount(){
+
+        const {data} = await axios.get('http://localhost:3001/zeile');
+        const liste = [];
+
+        data.forEach(zeile => {
+            const besorgung = new Besorgung(zeile.nummer, zeile.name, zeile.menge, zeile.einheit, zeile.kommentar);
+            liste.push(besorgung);
+        });
+
+        this.setState(state =>
+            update(state,{
+                liste: {$set: liste},
+            }),
+            );
+    }
+
+
+
+    render(){
+        return(
+            <div className="zettel">
+                <h1>Einkaufszettel</h1>
+
+                <p>Artikel in der Einkaufsliste = {this.state.liste.length}</p>
+
+                <table>
+                    <thead>
+                        <tr>
+                            {Object.keys(Besorgung.properties).map(property =>{
+                                const besorgungsprop = Besorgung.properties[property];
+                                return(
+                                <th>{besorgungsprop.label}</th>
+                                );
+
+                            })}
+                        </tr>
+                    </thead>
+                    <tbody>
+                    {
+                            this.state.liste.map(zeile => {
+                                return(
+                                <Zeile
+                                    besorgung={zeile}
+                                    selectedLine={this.state.selectedLine}
+                                    onSelect={this.getSelectHandler()}
+                                />
+                                );
+                            })
+                }
+                    </tbody>
+                </table>
+            </div>
+
+        );
+    }
+
+}

src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

src/index.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import './index.css';
+import App from './App';
+
+ReactDOM.render(<App />, document.getElementById('root'));

src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

src/serviceWorker.js

@@ -0,0 +1,141 @@
+// This optional code is used to register a service worker.
+// register() is not called by default.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on subsequent visits to a page, after all the
+// existing tabs open on the page have been closed, since previously cached
+// resources are updated in the background.
+
+// To learn more about the benefits of this model and instructions on how to
+// opt-in, read https://bit.ly/CRA-PWA
+
+const isLocalhost = Boolean(
+  window.location.hostname === 'localhost' ||
+    // [::1] is the IPv6 localhost address.
+    window.location.hostname === '[::1]' ||
+    // 127.0.0.0/8 are considered localhost for IPv4.
+    window.location.hostname.match(
+      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+    )
+);
+
+export function register(config) {
+  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+    // The URL constructor is available in all browsers that support SW.
+    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
+    if (publicUrl.origin !== window.location.origin) {
+      // Our service worker won't work if PUBLIC_URL is on a different origin
+      // from what our page is served on. This might happen if a CDN is used to
+      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
+      return;
+    }
+
+    window.addEventListener('load', () => {
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+
+      if (isLocalhost) {
+        // This is running on localhost. Let's check if a service worker still exists or not.
+        checkValidServiceWorker(swUrl, config);
+
+        // Add some additional logging to localhost, pointing developers to the
+        // service worker/PWA documentation.
+        navigator.serviceWorker.ready.then(() => {
+          console.log(
+            'This web app is being served cache-first by a service ' +
+              'worker. To learn more, visit https://bit.ly/CRA-PWA'
+          );
+        });
+      } else {
+        // Is not localhost. Just register service worker
+        registerValidSW(swUrl, config);
+      }
+    });
+  }
+}
+
+function registerValidSW(swUrl, config) {
+  navigator.serviceWorker
+    .register(swUrl)
+    .then(registration => {
+      registration.onupdatefound = () => {
+        const installingWorker = registration.installing;
+        if (installingWorker == null) {
+          return;
+        }
+        installingWorker.onstatechange = () => {
+          if (installingWorker.state === 'installed') {
+            if (navigator.serviceWorker.controller) {
+              // At this point, the updated precached content has been fetched,
+              // but the previous service worker will still serve the older
+              // content until all client tabs are closed.
+              console.log(
+                'New content is available and will be used when all ' +
+                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
+              );
+
+              // Execute callback
+              if (config && config.onUpdate) {
+                config.onUpdate(registration);
+              }
+            } else {
+              // At this point, everything has been precached.
+              // It's the perfect time to display a
+              // "Content is cached for offline use." message.
+              console.log('Content is cached for offline use.');
+
+              // Execute callback
+              if (config && config.onSuccess) {
+                config.onSuccess(registration);
+              }
+            }
+          }
+        };
+      };
+    })
+    .catch(error => {
+      console.error('Error during service worker registration:', error);
+    });
+}
+
+function checkValidServiceWorker(swUrl, config) {
+  // Check if the service worker can be found. If it can't reload the page.
+  fetch(swUrl, {
+    headers: { 'Service-Worker': 'script' },
+  })
+    .then(response => {
+      // Ensure service worker exists, and that we really are getting a JS file.
+      const contentType = response.headers.get('content-type');
+      if (
+        response.status === 404 ||
+        (contentType != null && contentType.indexOf('javascript') === -1)
+      ) {
+        // No service worker found. Probably a different app. Reload the page.
+        navigator.serviceWorker.ready.then(registration => {
+          registration.unregister().then(() => {
+            window.location.reload();
+          });
+        });
+      } else {
+        // Service worker found. Proceed as normal.
+        registerValidSW(swUrl, config);
+      }
+    })
+    .catch(() => {
+      console.log(
+        'No internet connection found. App is running in offline mode.'
+      );
+    });
+}
+
+export function unregister() {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.ready
+      .then(registration => {
+        registration.unregister();
+      })
+      .catch(error => {
+        console.error(error.message);
+      });
+  }
+}

src/setupTests.js

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom/extend-expect';