Proof of concept

src/App.tsx

@@ -7,82 +7,99 @@ import { appointments } from "./components/Calendar/appointments";
 import RightBar from "./components/RightBar";
 
 function App() {
-  const [isOpenTransfer, setOpenTransfer] = useState(false);
-  const [text, setText] = useState("");
+	const [isOpenTransfer, setOpenTransfer] = useState(false);
+	const [text, setText] = useState("");
 
-  var data = [
-    {
-      classname: "E-gospodarka - narzędzia i bezpieczeństwo",
-      classgroups: [
-        {
-          group_id: "1CB",
-          day: "Pn",
-          time: "10:00",
-          lecturer: "dr inż. Michał Ren",
-          room: "A2-01",
-        },
-        {
-          group_id: "1XD",
-          day: "Wt",
-          time: "12:00",
-          lecturer: "dr inż. Michał Ren",
-          room: "A3-01",
-        },
-      ],
-    },
-    {
-      classname: "Statystyka",
-      classgroups: [
-        {
-          group_id: "2CB",
-          day: "Pn",
-          time: "10:00",
-          lecturer: "dr inż. Michał Ren",
-          room: "A2-01",
-        },
-        {
-          group_id: "2XD",
-          day: "Wt",
-          time: "12:00",
-          lecturer: "dr inż. Michał Ren",
-          room: "A3-01",
-        },
-      ],
-    },
-  ];
+	var data = [
+		{
+			classname: "E-gospodarka - narzędzia i bezpieczeństwo",
+			classgroups: [
+				{
+					group_id: "1CB",
+					day: "Pn",
+					time: "10:00",
+					lecturer: "dr inż. Michał Ren",
+					room: "A2-01",
+				},
+				{
+					group_id: "1XD",
+					day: "Wt",
+					time: "12:00",
+					lecturer: "dr inż. Michał Ren",
+					room: "A3-01",
+				},
+			],
+		},
+		{
+			classname: "Statystyka",
+			classgroups: [
+				{
+					group_id: "2CB",
+					day: "Pn",
+					time: "10:00",
+					lecturer: "dr inż. Michał Ren",
+					room: "A2-01",
+				},
+				{
+					group_id: "2XD",
+					day: "Wt",
+					time: "12:00",
+					lecturer: "dr inż. Michał Ren",
+					room: "A3-01",
+				},
+			],
+		},
+	];
 
-  return (
-    <div className="App">
-      <TopBar
-        textChangeHandler={(e) => {
-          setText(e.target.value);
-        }}
-        handleTransfer={(e) => {
-          setOpenTransfer(!isOpenTransfer);
-        }}
-        onLangChange={(e) => {
-          console.log(e);
-        }}
-      />
-      <Transfer
-        isOpen={isOpenTransfer}
-        handleClose={(e) => {
-          setOpenTransfer(!isOpenTransfer);
-        }}
-      />
-      <div className="wraper">
-        <div className="wraper__calendar">
-          <Schedule data={appointments} />
-        </div>
-        <div className="wraper__rightbar">
-          <RightBar onClassHover={(group_id,class_id)=>{console.log("group id: ",group_id,"class id",class_id)}} lectures={data}
-          onClassClick={(group_id,class_id)=>{console.log("group id: ",group_id,"class id",class_id)}}/>
-        </div>
-      </div>
+	return (
+		<div className="App">
+			<TopBar
+				textChangeHandler={(e) => {
+					setText(e.target.value);
+				}}
+				handleTransfer={(e) => {
+					setOpenTransfer(!isOpenTransfer);
+				}}
+				onLangChange={(e) => {
+					console.log(e);
+				}}
+			/>
+			<Transfer
+				isOpen={isOpenTransfer}
+				handleClose={(e) => {
+					setOpenTransfer(!isOpenTransfer);
+				}}
+			/>
+			<div className="wraper">
+				<div className="wraper__calendar">
+					<Schedule data={appointments} />
+				</div>
+				<div className="wraper__rightbar">
+					<RightBar
+						onClassHover={(group_id, class_id) => {
+							console.log(
+								"group id: ",
+								group_id,
+								"class id",
+								class_id
+							);
+						}}
+						lectures={data}
+						onClassClick={(group_id, class_id) => {
+							console.log(
+								"group id: ",
+								group_id,
+								"class id",
+								class_id
+							);
+						}}
+					/>
+				</div>
+			</div>
 
-      <h1>{text}</h1>
-    </div>
-  );
+			<h1>{text}</h1>
+		</div>
+	);
 }
 
-export default App;
+export default App;

src/buisnesslogic/BuisnessLogicProvider.tsx

@@ -0,0 +1,63 @@
+import BusinessLogicContext from "./BusinessLogicContext";
+import React, { Component } from "react";
+import { User } from "./models/user";
+
+export interface BuisnessProvided {
+	states: BuisnessState;
+	reducers: () => void;
+}
+
+interface BuisnessState {
+	user: User | null;
+}
+
+interface Props {}
+
+class BusinessLogicProvider extends Component<Props, BuisnessState> {
+	constructor(props: Props) {
+		super(props);
+		this.state = {
+			user: null,
+		};
+	}
+
+	componentDidMount() {
+		this.login();
+	}
+
+	login() {
+		const urlParams = new URLSearchParams(window.location.search);
+		const ticket = urlParams.get("ticket");
+
+		if (!ticket && !this.state.user) {
+			window.location.replace(
+				`https://cas.amu.edu.pl/cas/login?service=${window.origin}&locale=pl`
+			);
+		} else if (ticket && !this.state.user) {
+			this.setState({ user: { ticket } });
+		}
+	}
+
+	logout() {
+		window.location.replace(
+			`https://cas.amu.edu.pl/cas/logout?service=${window.origin}`
+		);
+	}
+
+	render() {
+		return (
+			<BusinessLogicContext.Provider
+				value={{
+					states: this.state,
+					reducers: () => {
+						this.logout();
+					},
+				}}
+			>
+				{this.props.children}
+			</BusinessLogicContext.Provider>
+		);
+	}
+}
+
+export default BusinessLogicProvider;

src/buisnesslogic/BusinessLogicContext.ts

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

src/buisnesslogic/models/user.ts

@@ -0,0 +1,5 @@
+export type User = {
+	name?: string;
+	surname?: string;
+	ticket: string;
+};

src/components/RightBar/index.tsx

@@ -1,35 +1,43 @@
 import React from "react";
 import "./index.scss";
 import Class, { Group } from "../Class";
+import BusinessLogicContext from "../../buisnesslogic/BusinessLogicContext";
+import { BuisnessProvided } from "../../buisnesslogic/BuisnessLogicProvider";
 
 interface RightBarProps {
-  onClassHover: (group_id: String, class_id: String) => void;
-  onClassClick: (group_id: String, class_id: String) => void;
-  lectures: Array<Group>;
+	onClassHover: (group_id: String, class_id: String) => void;
+	onClassClick: (group_id: String, class_id: String) => void;
+	lectures: Array<Group>;
 }
 
 interface RightBarState {}
 
 export default class RightBar extends React.Component<
-  RightBarProps,
-  RightBarState
+	RightBarProps,
+	RightBarState
 > {
-  render() {
-    return (
-      <div className="right-bar">
-        <div className="right-bar__text">
-          Hubert Wrzesiński<br></br>
-          Semestr zimowy 2020/2021
-        </div>
-        {this.props.lectures.map((classgroup, index) => (
-          <Class
-            onClassHover={this.props.onClassHover}
-            onClassClick={this.props.onClassClick}
-            data={classgroup}
-            key={index}
-          />
-        ))}
-      </div>
-    );
-  }
+	render() {
+		return (
+			<div className="right-bar">
+				<BusinessLogicContext.Consumer>
+					{(context) => (
+						<h1>
+							{JSON.stringify(
+								(context as BuisnessProvided).states.user
+									?.ticket
+							)}
+						</h1>
+					)}
+				</BusinessLogicContext.Consumer>
+				{this.props.lectures.map((classgroup, index) => (
+					<Class
+						onClassHover={this.props.onClassHover}
+						onClassClick={this.props.onClassClick}
+						data={classgroup}
+						key={index}
+					/>
+				))}
+			</div>
+		);
+	}
 }

src/components/TopBar/Profile.tsx

@@ -1,15 +1,18 @@
 import { Menu, MenuItem } from "@material-ui/core";
 import React, { FC } from "react";
-
+import BusinessLogicContext from "../../buisnesslogic/BusinessLogicContext";
+import { BuisnessProvided } from "../../buisnesslogic/BuisnessLogicProvider";
 
 interface ProfileProps {
-    anchorEl: HTMLElement | null;
-    handleClose: () => void
-
+	anchorEl: HTMLElement | null;
+	handleClose: () => void;
 }
 
-export const Profile : FC<ProfileProps> = ({anchorEl, handleClose, ...restProps}) => {
-
+export const Profile: FC<ProfileProps> = ({
+	anchorEl,
+	handleClose,
+	...restProps
+}) => {
 	return (
 		<Menu
 			className="top-bar__menu"
@@ -21,7 +24,17 @@ export const Profile : FC<ProfileProps> = ({anchorEl, handleClose, ...restProps}
 		>
 			<MenuItem>Profile</MenuItem>
 			<MenuItem>My account</MenuItem>
-			<MenuItem>Logout</MenuItem>
+			<BusinessLogicContext.Consumer>
+				{(context) => (
+					<MenuItem
+						onClick={() => {
+							(context as BuisnessProvided).reducers();
+						}}
+					>
+						Logout
+					</MenuItem>
+				)}
+			</BusinessLogicContext.Consumer>
 		</Menu>
 	);
 };

src/index.tsx

@@ -1,10 +1,13 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import App from "./App";
+import BuisnessLogicProvider from "./buisnesslogic/BuisnessLogicProvider";
 
 ReactDOM.render(
 	<React.Fragment>
-		<App />
+		<BuisnessLogicProvider>
+			<App />
+		</BuisnessLogicProvider>
 	</React.Fragment>,
 	document.getElementById("root")
 );