Simplified context with hooks

This commit is contained in:
maciekglowacki 2020-06-29 22:12:53 +02:00
parent fcaca8020a
commit 5b153d11cf
6 changed files with 68 additions and 92 deletions

View File

@ -1,4 +1,4 @@
import React, { useState } from "react";
import React, { useState, useContext } from "react";
import TopBar from "./components/TopBar/";
import Transfer from "./components/Transfer/";
import "./App.scss";
@ -7,33 +7,30 @@ import { appointments } from "./components/Calendar/appointments";
import RightBar from "./components/RightBar";
import { lectures } from "./lectures";
import BusinessLogicContext from "./businesslogic/BusinessLogicContext";
import { BuisnessProvided } from "./businesslogic/BusinessLogicProvider";
import { BusinessLogicContext } from "./businesslogic/BusinessLogicProvider";
function App() {
const [isOpenTransfer, setOpenTransfer] = useState(false);
const [text, setText] = useState("");
const businessLogicContext = useContext(BusinessLogicContext);
return (
<div className="App">
<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>
<TopBar
textChangeHandler={(e) => {
setText(e.target.value);
}}
handleTransfer={(e) => {
setOpenTransfer(!isOpenTransfer);
}}
onLangChange={(e) => {
console.log(e);
}}
handleLogout={() => {
businessLogicContext.actions.logout();
}}
/>
<Transfer
isOpen={isOpenTransfer}
handleClose={(e) => {

View File

@ -1,5 +0,0 @@
import React from "react";
const BusinessLogicContext = React.createContext({});
export default BusinessLogicContext;

View File

@ -1,76 +1,54 @@
import BusinessLogicContext from "./BusinessLogicContext";
import React, { Component } from "react";
import React, { useState, useEffect } from "react";
import { User } from "./models/user";
import { redirectToCASLoginService, redirectToCASLogoutService } from "./utilites";
export interface BuisnessProvided {
states: BusinessState;
reducers: {
userlogout: () => void;
export interface IBusinessLogicContext {
user: User | null;
actions: {
logout: () => void;
};
}
interface BusinessState {
user: User | null;
}
export const BusinessLogicContext = React.createContext<IBusinessLogicContext>({
user: null,
actions: { logout: () => {} },
});
interface Props {}
class BusinessLogicProvider extends Component<Props, BusinessState> {
constructor(props: Props) {
super(props);
this.state = {
user: null,
};
}
export const BusinessLogicProvider: React.FC<Props> = (props) => {
const [user, setUser] = useState<User | null>(null);
componentDidMount() {
this.login();
}
useEffect(() => {
login();
}, []);
login() {
const login = () => {
const urlParams = new URLSearchParams(window.location.search);
const ticket = urlParams.get("ticket");
if (!ticket) {
this.redirectToCASLoginService();
redirectToCASLoginService();
}
if (ticket) {
this.setState({ user: { ticket } });
setUser({ ticket });
}
}
};
logout() {
this.redirectToCASLogoutService();
}
const logout = () => {
redirectToCASLogoutService();
};
redirectToCASLogoutService() {
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`
);
}
render() {
return (
<BusinessLogicContext.Provider
value={{
states: this.state,
reducers: {
userlogout: () => {
this.logout();
},
},
}}
>
{this.props.children}
</BusinessLogicContext.Provider>
);
}
}
export default BusinessLogicProvider;
return (
<BusinessLogicContext.Provider
value={{
user: user,
actions: {
logout: logout,
},
}}
>
{props.children}
</BusinessLogicContext.Provider>
);
};

View File

@ -0,0 +1,7 @@
export const redirectToCASLogoutService = () => {
window.location.replace(`https://cas.amu.edu.pl/cas/logout?service=${window.origin}`);
};
export const redirectToCASLoginService = () => {
window.location.replace(`https://cas.amu.edu.pl/cas/login?service=${window.origin}&locale=pl`);
};

View File

@ -1,9 +1,8 @@
import React, { useState } from "react";
import React, { useState, useContext } from "react";
import "./index.scss";
import { Lecture } from "../../lectures";
import LectureCard from "./LectureCard";
import BusinessLogicContext from "../../businesslogic/BusinessLogicContext";
import { BuisnessProvided } from "../../businesslogic/BusinessLogicProvider";
import { BusinessLogicContext } from "../../businesslogic/BusinessLogicProvider";
interface RightBarProps {
onGroupMouseOver: (id: string, name: string) => void;
@ -14,6 +13,8 @@ interface RightBarProps {
export default function RightBar({ lectures, onGroupMouseOver, onGroupClick }: RightBarProps) {
const [selectedCardId, setSelectedCardId] = useState<string | null>(null);
const businessLogicContext = useContext(BusinessLogicContext);
const onCardClick = (e: React.MouseEvent) => {
const target = e.currentTarget as HTMLElement;
selectedCardId === target.id ? setSelectedCardId(null) : setSelectedCardId(target.id);
@ -21,9 +22,7 @@ export default function RightBar({ lectures, onGroupMouseOver, onGroupClick }: R
return (
<div className="right-bar">
<BusinessLogicContext.Consumer>
{(context) => <p>{JSON.stringify((context as BuisnessProvided).states.user?.ticket)}</p>}
</BusinessLogicContext.Consumer>
<p>{businessLogicContext.user?.ticket}</p>
<div className="right-bar__text">
Hubert Wrzesiński<br></br>
Semestr zimowy 2020/2021

View File

@ -1,13 +1,13 @@
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import BuisnessLogicProvider from "./businesslogic/BusinessLogicProvider";
import { BusinessLogicProvider } from "./businesslogic/BusinessLogicProvider";
ReactDOM.render(
<>
<BuisnessLogicProvider>
<BusinessLogicProvider>
<App />
</BuisnessLogicProvider>
</BusinessLogicProvider>
</>,
document.getElementById("root")
);