Added profile component

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

src/components/TopBar/index.tsx

@@ -9,17 +9,17 @@ 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;
+	textChangeHandler: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
 }
 
 interface TopBarState {
-  isOpenProfile: boolean;
-  anchorEl: HTMLElement | null;
 	isPolish: boolean;
+	anchorEl: HTMLElement | null;
 }
 
 export default class TopBar extends React.Component<TopBarProps, TopBarState> {
@@ -30,13 +30,12 @@ export default class TopBar extends React.Component<TopBarProps, TopBarState> {
 		this.onLangChange = this.onLangChange.bind(this);
 		this.handleTransfer = this.handleTransfer.bind(this);
 		this.state = {
-      isOpenProfile: false,
-      anchorEl:null,
 			isPolish: true,
+			anchorEl: null,
 		};
 	}
 
-  handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+	handleChange(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {
 		this.props.textChangeHandler(e);
 	}
 
@@ -47,20 +46,19 @@ export default class TopBar extends React.Component<TopBarProps, TopBarState> {
 	onLangChange(e: React.MouseEvent) {
 		this.setState({
 			isPolish: !this.state.isPolish,
-    })
+		});
 		this.props.onLangChange(this.state.isPolish);
 	}
 
-  handleProfile(e: React.MouseEvent) {
+	handleProfile(event: React.MouseEvent<HTMLImageElement>) {
 		this.setState({
-      isOpenProfile: !this.state.isOpenProfile,
+			anchorEl: event.currentTarget,
-      anchorEl:e.currentTarget as HTMLElement,
 		});
 	}
 
-  handleClose(e: React.MouseEvent) {
+	handleClose() {
 		this.setState({
-      isOpenProfile: !this.state.isOpenProfile,
+			anchorEl: null,
 		});
 	}
 
@@ -68,11 +66,7 @@ export default class TopBar extends React.Component<TopBarProps, TopBarState> {
 		return (
 			<div className="top-bar">
 				<div className="top-bar__logo">
-          <img
+					<img className="top-bar__logo-image" alt="logo" src="https://plannaplan.pl/img/logo.svg" />
-            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">
@@ -81,43 +75,20 @@ export default class TopBar extends React.Component<TopBarProps, TopBarState> {
 						placeholder="Wyszukaj..."
 						inputProps={{ "aria-label": "description" }}
 						className="top-bar__input-field"
-            onChange={(e) =>
+						onChange={(e) => this.handleChange(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
+					<img className="top-bar__icon" alt="transfer" src={Transfer} onClick={this.handleTransfer} />
-            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
+					<img className="top-bar__icon" alt="profile" src={User} onClick={this.handleProfile} />
-            className="top-bar__icon"
+					<Profile anchorEl={this.state.anchorEl} handleClose={this.handleClose} />
-            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>
 		);