Simplified context with hooks

src/App.tsx

@@ -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 { BusinessLogicContext } from "./businesslogic/BusinessLogicProvider";
-import { BuisnessProvided } from "./businesslogic/BusinessLogicProvider";
 
 function App() {
 	const [isOpenTransfer, setOpenTransfer] = useState(false);
 	const [text, setText] = useState("");
 
+	const businessLogicContext = useContext(BusinessLogicContext);
+
 	return (
 		<div className="App">
-			<BusinessLogicContext.Consumer>
+			<TopBar
-				{(context) => (
+				textChangeHandler={(e) => {
-					<TopBar
+					setText(e.target.value);
-						textChangeHandler={(e) => {
+				}}
-							setText(e.target.value);
+				handleTransfer={(e) => {
-						}}
+					setOpenTransfer(!isOpenTransfer);
-						handleTransfer={(e) => {
+				}}
-							setOpenTransfer(!isOpenTransfer);
+				onLangChange={(e) => {
-						}}
+					console.log(e);
-						onLangChange={(e) => {
+				}}
-							console.log(e);
+				handleLogout={() => {
-						}}
+					businessLogicContext.actions.logout();
-						handleLogout={() => {
+				}}
-							(context as BuisnessProvided).reducers.userlogout();
+			/>
-						}}
-					/>
-				)}
-			</BusinessLogicContext.Consumer>
 			<Transfer
 				isOpen={isOpenTransfer}
 				handleClose={(e) => {

src/businesslogic/BusinessLogicContext.ts

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

src/businesslogic/BusinessLogicProvider.tsx

@@ -1,76 +1,54 @@
-import BusinessLogicContext from "./BusinessLogicContext";
+import React, { useState, useEffect } from "react";
-import React, { Component } from "react";
 import { User } from "./models/user";
+import { redirectToCASLoginService, redirectToCASLogoutService } from "./utilites";
 
-export interface BuisnessProvided {
+export interface IBusinessLogicContext {
-	states: BusinessState;
+	user: User | null;
-	reducers: {
+	actions: {
-		userlogout: () => void;
+		logout: () => void;
 	};
 }
 
-interface BusinessState {
+export const BusinessLogicContext = React.createContext<IBusinessLogicContext>({
-	user: User | null;
+	user: null,
-}
+	actions: { logout: () => {} },
+});
 
 interface Props {}
 
-class BusinessLogicProvider extends Component<Props, BusinessState> {
+export const BusinessLogicProvider: React.FC<Props> = (props) => {
-	constructor(props: Props) {
+	const [user, setUser] = useState<User | null>(null);
-		super(props);
-		this.state = {
-			user: null,
-		};
-	}
 
-	componentDidMount() {
+	useEffect(() => {
-		this.login();
+		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() {
+	const logout = () => {
-		this.redirectToCASLogoutService();
+		redirectToCASLogoutService();
-	}
+	};
 
-	redirectToCASLogoutService() {
+	return (
-		window.location.replace(
+		<BusinessLogicContext.Provider
-			`https://cas.amu.edu.pl/cas/logout?service=${window.origin}`
+			value={{
-		);
+				user: user,
-	}
+				actions: {
-
+					logout: logout,
-	redirectToCASLoginService() {
+				},
-		window.location.replace(
+			}}
-			`https://cas.amu.edu.pl/cas/login?service=${window.origin}&locale=pl`
+		>
-		);
+			{props.children}
-	}
+		</BusinessLogicContext.Provider>
-
+	);
-	render() {
+};
-		return (
-			<BusinessLogicContext.Provider
-				value={{
-					states: this.state,
-					reducers: {
-						userlogout: () => {
-							this.logout();
-						},
-					},
-				}}
-			>
-				{this.props.children}
-			</BusinessLogicContext.Provider>
-		);
-	}
-}
-
-export default BusinessLogicProvider;

src/businesslogic/utilites.ts

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

src/components/RightBar/index.tsx

@@ -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 { BusinessLogicContext } from "../../businesslogic/BusinessLogicProvider";
-import { BuisnessProvided } 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>
+			<p>{businessLogicContext.user?.ticket}</p>
-				{(context) => <p>{JSON.stringify((context as BuisnessProvided).states.user?.ticket)}</p>}
-			</BusinessLogicContext.Consumer>
 			<div className="right-bar__text">
 				Hubert Wrzesiński<br></br>
 				Semestr zimowy 2020/2021

src/index.tsx

@@ -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")
 );