Refactored

This commit is contained in:
Filip Izydorczyk 2020-06-20 14:10:58 +02:00
parent 9da1dfd51f
commit 124170492c
5 changed files with 81 additions and 38 deletions

View File

@ -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,17 +55,24 @@ function App() {
return (
<div className="App">
<TopBar
textChangeHandler={(e) => {
setText(e.target.value);
}}
handleTransfer={(e) => {
setOpenTransfer(!isOpenTransfer);
}}
onLangChange={(e) => {
console.log(e);
}}
/>
<BusinessLogicContext.Consumer>
{(context) => (
<TopBar
textChangeHandler={(e) => {
setText(e.target.value);
}}
handleTransfer={(e) => {
setOpenTransfer(!isOpenTransfer);
}}
onLangChange={(e) => {
console.log(e);
}}
handleLogout={() => {
(context as BuisnessProvided).reducers.userlogout();
}}
/>
)}
</BusinessLogicContext.Consumer>
<Transfer
isOpen={isOpenTransfer}
handleClose={(e) => {

View File

@ -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,8 +60,10 @@ class BusinessLogicProvider extends Component<Props, BusinessState> {
<BusinessLogicContext.Provider
value={{
states: this.state,
reducers: () => {
this.logout();
reducers: {
userlogout: () => {
this.logout();
},
},
}}
>

View File

@ -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}

View File

@ -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();
}}
>
Logout
</MenuItem>
)}
</BusinessLogicContext.Consumer>
<MenuItem
onClick={() => {
handleLogout();
}}
>
Logout
</MenuItem>
</Menu>
);
};

View File

@ -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} />
<Profile anchorEl={this.state.anchorEl} handleClose={this.handleClose} />
<img
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>
);