guziki

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;

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;

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>

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>
     );

src/dupa.txt

@@ -1 +0,0 @@
-dupa