Refactored

src/App.tsx

@@ -5,6 +5,8 @@ import "./App.scss";
 import Schedule from "./components/Calendar/";
 import { appointments } from "./components/Calendar/appointments";
 import RightBar from "./components/RightBar";
+import BusinessLogicContext from "./businesslogic/BusinessLogicContext";
+import { BuisnessProvided } from "./businesslogic/BusinessLogicProvider";
 
 function App() {
 	const [isOpenTransfer, setOpenTransfer] = useState(false);
@@ -53,6 +55,8 @@ function App() {
 
 	return (
 		<div className="App">
+			<BusinessLogicContext.Consumer>
+				{(context) => (
 					<TopBar
 						textChangeHandler={(e) => {
 							setText(e.target.value);
@@ -63,7 +67,12 @@ function App() {
 						onLangChange={(e) => {
 							console.log(e);
 						}}
+						handleLogout={() => {
+							(context as BuisnessProvided).reducers.userlogout();
+						}}
 					/>
+				)}
+			</BusinessLogicContext.Consumer>
 			<Transfer
 				isOpen={isOpenTransfer}
 				handleClose={(e) => {

src/businesslogic/BusinessLogicProvider.tsx

@@ -4,7 +4,9 @@ import { User } from "./models/user";
 
 export interface BuisnessProvided {
 	states: BusinessState;
-	reducers: () => void;
+	reducers: {
+		userlogout: () => void;
+	};
 }
 
 interface BusinessState {
@@ -42,11 +44,15 @@ class BusinessLogicProvider extends Component<Props, BusinessState> {
 	}
 
 	redirectToCASLogoutService() {
-		window.location.replace(`https://cas.amu.edu.pl/cas/logout?service=${window.origin}`);
+		window.location.replace(
+			`https://cas.amu.edu.pl/cas/logout?service=${window.origin}`
+		);
 	}
 
 	redirectToCASLoginService() {
-		window.location.replace(`https://cas.amu.edu.pl/cas/login?service=${window.origin}&locale=pl`);
+		window.location.replace(
+			`https://cas.amu.edu.pl/cas/login?service=${window.origin}&locale=pl`
+		);
 	}
 
 	render() {
@@ -54,9 +60,11 @@ class BusinessLogicProvider extends Component<Props, BusinessState> {
 			<BusinessLogicContext.Provider
 				value={{
 					states: this.state,
-					reducers: () => {
+					reducers: {
+						userlogout: () => {
 							this.logout();
 						},
+					},
 				}}
 			>
 				{this.props.children}

src/components/RightBar/index.tsx

@@ -21,14 +21,15 @@ export default class RightBar extends React.Component<
 			<div className="right-bar">
 				<BusinessLogicContext.Consumer>
 					{(context) => (
-						<h1>
+						<p>
 							{JSON.stringify(
 								(context as BuisnessProvided).states.user
 									?.ticket
 							)}
-						</h1>
+						</p>
 					)}
 				</BusinessLogicContext.Consumer>
+				<p>Semestr zimowy 2020/2021</p>
 				{this.props.lectures.map((classgroup, index) => (
 					<Class
 						onClassHover={this.props.onClassHover}

src/components/TopBar/Profile.tsx

@@ -1,16 +1,16 @@
 import { Menu, MenuItem } from "@material-ui/core";
 import React, { FC } from "react";
-import BusinessLogicContext from "../../businesslogic/BusinessLogicContext";
-import { BuisnessProvided } from "../../businesslogic/BusinessLogicProvider";
 
 interface ProfileProps {
 	anchorEl: HTMLElement | null;
 	handleClose: () => void;
+	handleLogout: () => void;
 }
 
 export const Profile: FC<ProfileProps> = ({
 	anchorEl,
 	handleClose,
+	handleLogout,
 	...restProps
 }) => {
 	return (
@@ -24,17 +24,13 @@ export const Profile: FC<ProfileProps> = ({
 		>
 			<MenuItem>Profile</MenuItem>
 			<MenuItem>My account</MenuItem>
-			<BusinessLogicContext.Consumer>
-				{(context) => (
 			<MenuItem
 				onClick={() => {
-							(context as BuisnessProvided).reducers();
+					handleLogout();
 				}}
 			>
 				Logout
 			</MenuItem>
-				)}
-			</BusinessLogicContext.Consumer>
 		</Menu>
 	);
 };

src/components/TopBar/index.tsx

@@ -12,7 +12,10 @@ import { Profile } from "./Profile";
 interface TopBarProps {
 	handleTransfer: (e: React.MouseEvent) => void;
 	onLangChange: (lang: boolean) => void;
-	textChangeHandler: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+	handleLogout: () => void;
+	textChangeHandler: (
+		e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+	) => void;
 }
 
 interface TopBarState {
@@ -64,29 +67,55 @@ export default class TopBar extends React.Component<TopBarProps, TopBarState> {
 		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" />
+					<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} />
+					<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} />
+					<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="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} />
+					<img
-					<Profile anchorEl={this.state.anchorEl} handleClose={this.handleClose} />
+						className="top-bar__icon"
+						alt="profile"
+						src={User}
+						onClick={this.handleProfile}
+					/>
+					<Profile
+						anchorEl={this.state.anchorEl}
+						handleClose={this.handleClose}
+						handleLogout={this.props.handleLogout}
+					/>
 				</div>
 			</div>
 		);