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 { 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) => {

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

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 { 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

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