From a4ada5fb792a37c57f905edfbf1f018bff5e11bb Mon Sep 17 00:00:00 2001
From: maciekglowacki <glowackimaciej97@gmail.com>
Date: Wed, 10 Jun 2020 21:40:33 +0200
Subject: [PATCH] Added profile component

---
 src/components/Profile/index.scss |   0
 src/components/Profile/index.tsx  |  27 +++++
 src/components/TopBar/index.tsx   | 169 +++++++++++++-----------------
 3 files changed, 97 insertions(+), 99 deletions(-)
 create mode 100644 src/components/Profile/index.scss
 create mode 100644 src/components/Profile/index.tsx

diff --git a/src/components/Profile/index.scss b/src/components/Profile/index.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/Profile/index.tsx b/src/components/Profile/index.tsx
new file mode 100644
index 0000000..8b0a920
--- /dev/null
+++ b/src/components/Profile/index.tsx
@@ -0,0 +1,27 @@
+import { Menu, MenuItem } from "@material-ui/core";
+import React, { FC } from "react";
+
+
+interface ProfileProps {
+    anchorEl: HTMLElement | null;
+    handleClose: () => void
+
+}
+
+export const Profile : FC<ProfileProps> = ({anchorEl, handleClose, ...restProps}) => {
+
+	return (
+		<Menu
+			className="top-bar__menu"
+			id="simple-menu"
+			anchorEl={anchorEl}
+			keepMounted
+			open={Boolean(anchorEl)}
+			onClose={handleClose}
+		>
+			<MenuItem>Profile</MenuItem>
+			<MenuItem>My account</MenuItem>
+			<MenuItem>Logout</MenuItem>
+		</Menu>
+	);
+};
diff --git a/src/components/TopBar/index.tsx b/src/components/TopBar/index.tsx
index ac961a0..ed9e16b 100644
--- a/src/components/TopBar/index.tsx
+++ b/src/components/TopBar/index.tsx
@@ -9,117 +9,88 @@ import User from "./user.png";
 import CloseIcon from "./close.svg";
 import Menu from "@material-ui/core/Menu";
 import MenuItem from "@material-ui/core/MenuItem";
+import { Profile } from "../Profile";
 
 interface TopBarProps {
-  handleTransfer: (e: React.MouseEvent) => void;
-  onLangChange: (lang:boolean) => void;
-  textChangeHandler: (e: React.ChangeEvent<HTMLInputElement>) => void;
+	handleTransfer: (e: React.MouseEvent) => void;
+	onLangChange: (lang: boolean) => void;
+	textChangeHandler: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
 }
 
 interface TopBarState {
-  isOpenProfile: boolean;
-  anchorEl: HTMLElement | null;
-  isPolish: boolean;
+	isPolish: boolean;
+	anchorEl: HTMLElement | null;
 }
 
 export default class TopBar extends React.Component<TopBarProps, TopBarState> {
-  constructor(props: TopBarProps) {
-    super(props);
-    this.handleProfile = this.handleProfile.bind(this);
-    this.handleClose = this.handleClose.bind(this);
-    this.onLangChange = this.onLangChange.bind(this);
-    this.handleTransfer = this.handleTransfer.bind(this);
-    this.state = {
-      isOpenProfile: false,
-      anchorEl:null,
-      isPolish:true,
-    };
-  }
+	constructor(props: TopBarProps) {
+		super(props);
+		this.handleProfile = this.handleProfile.bind(this);
+		this.handleClose = this.handleClose.bind(this);
+		this.onLangChange = this.onLangChange.bind(this);
+		this.handleTransfer = this.handleTransfer.bind(this);
+		this.state = {
+			isPolish: true,
+			anchorEl: null,
+		};
+	}
 
-  handleChange(e: React.ChangeEvent<HTMLInputElement>) {
-    this.props.textChangeHandler(e);
-  }
+	handleChange(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {
+		this.props.textChangeHandler(e);
+	}
 
-  handleTransfer(e: React.MouseEvent) {
-    this.props.handleTransfer(e);
-  }
+	handleTransfer(e: React.MouseEvent) {
+		this.props.handleTransfer(e);
+	}
 
-  onLangChange(e: React.MouseEvent) {
-    this.setState({
-      isPolish:!this.state.isPolish,
-    })
-    this.props.onLangChange(this.state.isPolish);
-  }
+	onLangChange(e: React.MouseEvent) {
+		this.setState({
+			isPolish: !this.state.isPolish,
+		});
+		this.props.onLangChange(this.state.isPolish);
+	}
 
-  handleProfile(e: React.MouseEvent) {
-    this.setState({
-      isOpenProfile: !this.state.isOpenProfile,
-      anchorEl:e.currentTarget as HTMLElement,
-    });
-  }
+	handleProfile(event: React.MouseEvent<HTMLImageElement>) {
+		this.setState({
+			anchorEl: event.currentTarget,
+		});
+	}
 
-  handleClose(e: React.MouseEvent) {
-    this.setState({
-      isOpenProfile: !this.state.isOpenProfile,
-    });
-  }
+	handleClose() {
+		this.setState({
+			anchorEl: null,
+		});
+	}
 
-  render() {
-    return (
-      <div className="top-bar">
-        <div className="top-bar__logo">
-          <img
-            className="top-bar__logo-image"
-            alt="logo"
-            src="https://plannaplan.pl/img/logo.svg"
-          />
-          <div className="top-bar__tekst"> plan na plan </div>
-        </div>
-        <div className="top-bar__input-div">
-          <img className="top-bar__input-icon" alt="search" src={Search} />
-          <Input
-            placeholder="Wyszukaj..."
-            inputProps={{ "aria-label": "description" }}
-            className="top-bar__input-field"
-            onChange={(e) =>
-              this.handleChange(e as ChangeEvent<HTMLInputElement>)
-            }
-          />
-          <img className="top-bar__input-icon" alt="close" src={CloseIcon} />
-        </div>
-        <div className="top-bar__icon-box">
-          <img
-            className="top-bar__icon"
-            alt="transfer"
-            src={Transfer}
-            onClick={this.handleTransfer}
-          />
-          <img
-            className="top-bar__icon"
-            alt="change_language"
-            src={this.state.isPolish ? UK : PL}
-            onClick={this.onLangChange}
-          />
-          <img
-            className="top-bar__icon"
-            alt="profile"
-            src={User}
-            onClick={this.handleProfile}
-          />
-          <Menu
-            className="top-bar__menu"
-            id="simple-menu"
-            anchorEl={this.state.anchorEl}
-            keepMounted
-            open={this.state.isOpenProfile}
-            onClose={this.handleClose}
-          >
-            <MenuItem>Profile</MenuItem>
-            <MenuItem>My account</MenuItem>
-            <MenuItem>Logout</MenuItem>
-          </Menu>
-        </div>
-      </div>
-    );
-  }
+	render() {
+		return (
+			<div className="top-bar">
+				<div className="top-bar__logo">
+					<img className="top-bar__logo-image" alt="logo" src="https://plannaplan.pl/img/logo.svg" />
+					<div className="top-bar__tekst"> plan na plan </div>
+				</div>
+				<div className="top-bar__input-div">
+					<img className="top-bar__input-icon" alt="search" src={Search} />
+					<Input
+						placeholder="Wyszukaj..."
+						inputProps={{ "aria-label": "description" }}
+						className="top-bar__input-field"
+						onChange={(e) => this.handleChange(e)}
+					/>
+					<img className="top-bar__input-icon" alt="close" src={CloseIcon} />
+				</div>
+				<div className="top-bar__icon-box">
+					<img className="top-bar__icon" alt="transfer" src={Transfer} onClick={this.handleTransfer} />
+					<img
+						className="top-bar__icon"
+						alt="change_language"
+						src={this.state.isPolish ? UK : PL}
+						onClick={this.onLangChange}
+					/>
+					<img className="top-bar__icon" alt="profile" src={User} onClick={this.handleProfile} />
+					<Profile anchorEl={this.state.anchorEl} handleClose={this.handleClose} />
+				</div>
+			</div>
+		);
+	}
 }