From 8990ee2837d3211367d56f1e3e813164a6389957 Mon Sep 17 00:00:00 2001
From: wrzesinski-hubert <wrzesinski.hubert@gmail.com>
Date: Wed, 3 Jun 2020 15:43:11 +0200
Subject: [PATCH] guziki

---
 package-lock.json                 |  5 ---
 src/App.tsx                       | 35 ++++++++++++-----
 src/components/TopBar/index.scss  | 43 ++++++++++-----------
 src/components/TopBar/index.tsx   | 62 +++++++++++++++++++++++++------
 src/components/Transfer/index.tsx | 35 ++++++-----------
 src/dupa.txt                      |  1 -
 6 files changed, 110 insertions(+), 71 deletions(-)
 delete mode 100644 src/dupa.txt

diff --git a/package-lock.json b/package-lock.json
index 3abcd01..0d99b06 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3133,11 +3133,6 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
     },
-    "bootstrap": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.0.tgz",
-      "integrity": "sha512-Z93QoXvodoVslA+PWNdk23Hze4RBYIkpb5h8I2HY2Tu2h7A0LpAgLcyrhrSUyo2/Oxm2l1fRZPs1e5hnxnliXA=="
-    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
diff --git a/src/App.tsx b/src/App.tsx
index 59347cf..e9f6229 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,15 +1,32 @@
-import React from "react";
-import TopBar from "./components/TopBar/"
-import Transfer from "./components/Transfer/"
+import React, { useState } from "react";
+import TopBar from "./components/TopBar/";
+import Transfer from "./components/Transfer/";
 import "./App.scss";
 
 function App() {
-	return (
-		<div className="App">
-			<TopBar/>
-			<Transfer/>
-		</div>
-	);
+  const [isOpen, setOpen] = useState(false);
+  const [text, setText] = useState("");
+
+  return (
+    <div className="App">
+      <TopBar
+        textChangeHandler={(e) => {
+          setText(e.target.value);
+        }}
+        handleOpen={(e) => {
+          setOpen(!isOpen);
+        }}
+        isOpen={isOpen}
+      />
+      <Transfer
+        isOpen={isOpen}
+        handleClose={(e) => {
+          setOpen(!isOpen);
+        }}
+      />
+	  <h1>{text}</h1>
+    </div>
+  );
 }
 
 export default App;
diff --git a/src/components/TopBar/index.scss b/src/components/TopBar/index.scss
index 781334b..393bd3c 100644
--- a/src/components/TopBar/index.scss
+++ b/src/components/TopBar/index.scss
@@ -13,36 +13,37 @@
     align-items: center;
     flex-grow: 0.5;
     justify-content: flex-start;
+
+    &-image {
+      width: 80px;
+      height: 80px;
+    }
   }
 
-  &__logo-image {
-    width: 80px;
-    height: 80px;
-  }
+  &__input {
+    &-div {
+      width: 70%;
+      display: flex;
+      align-items: center;
+      flex-grow: 3;
+    }
 
-  &__input-div {
-    width: 70%;
-    display: flex;
-    align-items: center;
-    flex-grow: 3;
-  }
-
-  &__input-field {
-    width: 96%;
-  }
-
-  &__icon-box {
-    display: flex;
-    align-items: center;
-    justify-content: space-around;
-    flex-grow: 1.5;
+    &-field {
+      width: 96%;
+    }
   }
 
   &__icon {
     width: 50px;
+    cursor: pointer;
+    &-box {
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      flex-grow: 1.5;
+    }
   }
 }
-
 @media only screen and (max-width: 870px) {
   .top-bar__tekst {
     display: none;
diff --git a/src/components/TopBar/index.tsx b/src/components/TopBar/index.tsx
index 8db8d74..c65ae51 100644
--- a/src/components/TopBar/index.tsx
+++ b/src/components/TopBar/index.tsx
@@ -1,10 +1,42 @@
-import React from "react";
+import React, { ChangeEvent } from "react";
 import "./index.scss";
 import Input from "@material-ui/core/Input";
 import SearchIcon from "@material-ui/icons/Search";
 import CloseIcon from "@material-ui/icons/Close";
 
-export default class TopBar extends React.Component {
+interface TopBarProps {
+  handleOpen: (e: React.MouseEvent) => void;
+  textChangeHandler: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  isOpen: boolean;
+}
+
+interface TopBarState {}
+
+export default class TopBar extends React.Component<TopBarProps, TopBarState> {
+  constructor(props: TopBarProps) {
+    super(props);
+
+    this.handleOpen = this.handleOpen.bind(this);
+    this.state = {
+      isOpen: false,
+    };
+  }
+
+  handleOpen(e: React.MouseEvent) {
+    this.props.handleOpen(e);
+    this.setState({
+      isOpen: true,
+    });
+  }
+
+  handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+    this.props.textChangeHandler(e);
+  }
+
+  funkcja() {
+    alert("chuj");
+  }
+
   render() {
     return (
       <div className="top-bar">
@@ -17,29 +49,35 @@ export default class TopBar extends React.Component {
           <div className="top-bar__tekst"> plan na plan </div>
         </div>
         <div className="top-bar__input-div">
-            <SearchIcon fontSize="large"></SearchIcon>
-            <Input
-              placeholder="Wyszukaj..."
-              inputProps={{ "aria-label": "description" }}
-              className="top-bar__input-field"
-            />
-            <CloseIcon fontSize="large"></CloseIcon>
+          <SearchIcon fontSize="large"></SearchIcon>
+          <Input
+            placeholder="Wyszukaj..."
+            inputProps={{ "aria-label": "description" }}
+            className="top-bar__input-field"
+            onChange={(e) =>
+              this.handleChange(e as ChangeEvent<HTMLInputElement>)
+            }
+          />
+          <CloseIcon fontSize="large"></CloseIcon>
         </div>
         <div className="top-bar__icon-box">
           <img
             className="top-bar__icon"
-            alt="logo"
+            alt="transfer"
             src="https://plannaplan.pl/img/transfer.png"
+            onClick={this.handleOpen}
           />
           <img
             className="top-bar__icon"
-            alt="logo"
+            alt="change_language"
             src="https://plannaplan.pl/img/UK.png"
+            onClick={this.funkcja}
           />
           <img
             className="top-bar__icon"
-            alt="logo"
+            alt="profile"
             src="https://plannaplan.pl/img/user.png"
+            onClick={this.funkcja}
           />
         </div>
       </div>
diff --git a/src/components/Transfer/index.tsx b/src/components/Transfer/index.tsx
index 4b09c28..6ce2a29 100644
--- a/src/components/Transfer/index.tsx
+++ b/src/components/Transfer/index.tsx
@@ -3,13 +3,12 @@ import Modal from "@material-ui/core/Modal";
 import "./index.scss";
 
 interface TransferProps {
-  names?: string;
-}
-
-interface TransferState {
+  handleClose: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
   isOpen: boolean;
 }
 
+interface TransferState {}
+
 export default class Transfer extends React.Component<
   TransferProps,
   TransferState
@@ -17,20 +16,14 @@ export default class Transfer extends React.Component<
   constructor(props: TransferProps) {
     super(props);
 
-    this.handleOpen = this.handleOpen.bind(this);
     this.handleClose = this.handleClose.bind(this);
     this.state = {
-      isOpen: false,
+      isOpen: true,
     };
   }
 
-  handleOpen(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
-    this.setState({
-      isOpen: true,
-    });
-  }
-
   handleClose(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
+    this.props.handleClose(e);
     this.setState({
       isOpen: false,
     });
@@ -39,22 +32,18 @@ export default class Transfer extends React.Component<
   render() {
     return (
       <div>
-        <button type="button" onClick={this.handleOpen}>
-          Open Modal
-        </button>
         <Modal
-        className="wrapper"
-          open={this.state.isOpen}
+          className="wrapper"
+          open={this.props.isOpen}
           onClose={this.handleClose}
           aria-labelledby="simple-modal-title"
           aria-describedby="simple-modal-description"
         >
-            <div className="transfer">
-              <button type="button" onClick={this.handleClose}>
-                Close Modal
-              </button>
-            </div>
-
+          <div className="transfer">
+            <button type="button" onClick={this.handleClose}>
+              Close Modal
+            </button>
+          </div>
         </Modal>
       </div>
     );
diff --git a/src/dupa.txt b/src/dupa.txt
deleted file mode 100644
index 39b32e5..0000000
--- a/src/dupa.txt
+++ /dev/null
@@ -1 +0,0 @@
-dupa
\ No newline at end of file