add Statistics screen mock

bk_webapp/src/App.js

@@ -8,9 +8,7 @@ import {
   useParams
 } from "react-router-dom";
 
-import { Home, Login, AddReceipt } from "./screens";
-// import logo from "./img/logo_project.svg";
-// import "./App.css";
+import { Home, Login, AddReceipt, Statistics } from "./screens";
 import SimpleReactFileUpload from "./react-file-upload.js";
 
 function App() {
@@ -20,6 +18,9 @@ function App() {
         <Route path="/add_receipt">
           <AddReceipt />
         </Route>
+        <Route path="/home/statistics">
+          <Statistics />
+        </Route>
         <Route path="/debug">
           <SimpleReactFileUpload />
         </Route>
@@ -34,35 +35,4 @@ function App() {
   );
 }
 
-// class Form extends React.Component {
-//   constructor(props) {
-//     super(props);
-//     this.state = { username: "" };
-//     this.handleChange = this.handleChange.bind(this);
-//     this.handleSubmit = this.handleSubmit.bind(this);
-//   }
-
-//   handleChange(event) {
-//     this.setState({ value: event.target.value });
-//   }
-
-//   handleSubmit(event) {
-//     alert(this.state.username);
-//     event.preventDefault();
-//   }
-
-//   render() {
-//     return (
-//       <form onSubmit={this.handleSubmit}>
-//         <input
-//           type="text"
-//           value={this.state.username}
-//           onChange={this.handleChange}
-//         />
-//         <input type="submit" value="Submit" />
-//       </form>
-//     );
-//   }
-// }
-
 export default App;

bk_webapp/src/screens/Home/Home.js

@@ -1,20 +1,40 @@
 import React from "react";
 import { Button, Container, Grid, Icon } from "semantic-ui-react";
+import { useHistory } from "react-router-dom";
 
 import "./Home.css";
 
 function Home() {
+  const history = useHistory();
   return (
     <Container className="home-container">
-      <Button fluid icon size="massive" className="home-button-wrapper">
+      <Button
+        fluid
+        icon
+        size="massive"
+        className="home-button-wrapper"
+        onClick={() => history.push("/home/statistics")}
+      >
         <Icon name="pie chart" className="home-button-icon" />
         Statystyki
       </Button>
-      <Button fluid icon size="massive" className="home-button-wrapper">
+      <Button
+        fluid
+        icon
+        size="massive"
+        className="home-button-wrapper"
+        onClick={() => history.push("/home/statistics")}
+      >
         <Icon name="shop" />
         Zakupy
       </Button>
-      <Button fluid icon size="massive" className="home-button-wrapper">
+      <Button
+        fluid
+        icon
+        size="massive"
+        className="home-button-wrapper"
+        onClick={() => history.push("/home/statistics")}
+      >
         <Icon name="add circle" />
         Dodaj paragon
       </Button>

bk_webapp/src/screens/Statistics/Home.js

@@ -1,17 +0,0 @@
-import React from "react";
-import { Button } from "semantic-ui-react";
-
-import "./styles.css";
-
-function Home() {
-  return (
-    <div class="home">
-      <h2>Home</h2>
-      <Button>Statystyki</Button>
-      <Button>Zakupy</Button>
-      <Button>Dodaj paragon</Button>
-    </div>
-  );
-}
-
-export default Home;

bk_webapp/src/screens/Statistics/Statistics.js

@@ -0,0 +1,53 @@
+import React, { Component, useState } from "react";
+import {
+  Container,
+  Header,
+  Icon,
+  Image,
+  Menu,
+  Segment,
+  Sidebar
+} from "semantic-ui-react";
+import { useHistory } from "react-router-dom";
+
+import "./Statistics.css";
+
+function Statistics() {
+  const [visible, setVisible] = useState(false);
+  const history = useHistory();
+
+  return (
+    <Sidebar.Pushable>
+      <Sidebar
+        as={Menu}
+        animation="overlay"
+        icon="labeled"
+        inverted
+        onHide={() => setVisible(false)}
+        vertical
+        visible={visible}
+        width="thin"
+      >
+        <Menu.Item>Ogólne</Menu.Item>
+        <Menu.Item>Tagi</Menu.Item>
+        <Menu.Item>Produkty</Menu.Item>
+        <Menu.Item>Zakupy</Menu.Item>
+      </Sidebar>
+
+      <Sidebar.Pusher dimmed={visible}>
+        <Menu icon>
+          <Menu.Item onClick={() => history.push("/home")}>
+            <Icon name="arrow left" />
+          </Menu.Item>
+
+          <Menu.Item position="right" onClick={() => setVisible(true)}>
+            <Icon name="sidebar" />
+          </Menu.Item>
+        </Menu>
+        <Container></Container>
+      </Sidebar.Pusher>
+    </Sidebar.Pushable>
+  );
+}
+
+export default Statistics;

bk_webapp/src/screens/index.js

@@ -1,5 +1,6 @@
 import Home from "./Home/Home";
 import Login from "./Login/Login";
 import AddReceipt from "./AddReceipt/AddReceipt";
+import Statistics from "./Statistics/Statistics";
 
-export { Home, Login, AddReceipt };
+export { Home, Login, AddReceipt, Statistics };