From 69929064503f2393962b59d3fe50067fef3dd8c6 Mon Sep 17 00:00:00 2001 From: Filip Izydorczyk Date: Wed, 17 Jun 2020 15:19:51 +0200 Subject: [PATCH 1/4] Proof of concept --- src/App.tsx | 165 +++++++++++--------- src/buisnesslogic/BuisnessLogicProvider.tsx | 63 ++++++++ src/buisnesslogic/BusinessLogicContext.ts | 5 + src/buisnesslogic/models/user.ts | 5 + src/components/RightBar/index.tsx | 54 ++++--- src/components/TopBar/Profile.tsx | 27 +++- src/index.tsx | 5 +- 7 files changed, 219 insertions(+), 105 deletions(-) create mode 100644 src/buisnesslogic/BuisnessLogicProvider.tsx create mode 100644 src/buisnesslogic/BusinessLogicContext.ts create mode 100644 src/buisnesslogic/models/user.ts diff --git a/src/App.tsx b/src/App.tsx index 9e8ec54..70c2e30 100644 --- a/src/App.tsx +++ b/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 ( -
- { - setText(e.target.value); - }} - handleTransfer={(e) => { - setOpenTransfer(!isOpenTransfer); - }} - onLangChange={(e) => { - console.log(e); - }} - /> - { - setOpenTransfer(!isOpenTransfer); - }} - /> -
-
- -
-
- {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)}}/> -
-
+ return ( +
+ { + setText(e.target.value); + }} + handleTransfer={(e) => { + setOpenTransfer(!isOpenTransfer); + }} + onLangChange={(e) => { + console.log(e); + }} + /> + { + setOpenTransfer(!isOpenTransfer); + }} + /> +
+
+ +
+
+ { + 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 + ); + }} + /> +
+
-

{text}

-
- ); +

{text}

+
+ ); } -export default App; \ No newline at end of file +export default App; diff --git a/src/buisnesslogic/BuisnessLogicProvider.tsx b/src/buisnesslogic/BuisnessLogicProvider.tsx new file mode 100644 index 0000000..410b2ed --- /dev/null +++ b/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 { + 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 ( + { + this.logout(); + }, + }} + > + {this.props.children} + + ); + } +} + +export default BusinessLogicProvider; diff --git a/src/buisnesslogic/BusinessLogicContext.ts b/src/buisnesslogic/BusinessLogicContext.ts new file mode 100644 index 0000000..40ffea1 --- /dev/null +++ b/src/buisnesslogic/BusinessLogicContext.ts @@ -0,0 +1,5 @@ +import React from "react"; + +const BusinessLogicContext = React.createContext({}); + +export default BusinessLogicContext; diff --git a/src/buisnesslogic/models/user.ts b/src/buisnesslogic/models/user.ts new file mode 100644 index 0000000..447d9e5 --- /dev/null +++ b/src/buisnesslogic/models/user.ts @@ -0,0 +1,5 @@ +export type User = { + name?: string; + surname?: string; + ticket: string; +}; diff --git a/src/components/RightBar/index.tsx b/src/components/RightBar/index.tsx index 3d1377a..0c3b5f7 100644 --- a/src/components/RightBar/index.tsx +++ b/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; + onClassHover: (group_id: String, class_id: String) => void; + onClassClick: (group_id: String, class_id: String) => void; + lectures: Array; } interface RightBarState {} export default class RightBar extends React.Component< - RightBarProps, - RightBarState + RightBarProps, + RightBarState > { - render() { - return ( -
-
- Hubert Wrzesiński

- Semestr zimowy 2020/2021 -
- {this.props.lectures.map((classgroup, index) => ( - - ))} -
- ); - } + render() { + return ( +
+ + {(context) => ( +

+ {JSON.stringify( + (context as BuisnessProvided).states.user + ?.ticket + )} +

+ )} + + {this.props.lectures.map((classgroup, index) => ( + + ))} +
+ ); + } } diff --git a/src/components/TopBar/Profile.tsx b/src/components/TopBar/Profile.tsx index 8b0a920..a97ec9a 100644 --- a/src/components/TopBar/Profile.tsx +++ b/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 = ({anchorEl, handleClose, ...restProps}) => { - +export const Profile: FC = ({ + anchorEl, + handleClose, + ...restProps +}) => { return ( = ({anchorEl, handleClose, ...restProps} > Profile My account - Logout + + {(context) => ( + { + (context as BuisnessProvided).reducers(); + }} + > + Logout + + )} + ); }; diff --git a/src/index.tsx b/src/index.tsx index 5200822..9b0365f 100644 --- a/src/index.tsx +++ b/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( - + + + , document.getElementById("root") ); From 63c85abeb48847a209381b8a82dcf7e43f3682b4 Mon Sep 17 00:00:00 2001 From: maciekglowacki Date: Sat, 20 Jun 2020 11:13:12 +0200 Subject: [PATCH 2/4] Corrected typos --- .../BusinessLogicContext.ts | 0 .../BusinessLogicProvider.tsx} | 19 ++++++++----------- .../models/user.ts | 0 src/components/RightBar/index.tsx | 4 ++-- src/components/TopBar/Profile.tsx | 4 ++-- src/index.tsx | 2 +- 6 files changed, 13 insertions(+), 16 deletions(-) rename src/{buisnesslogic => businesslogic}/BusinessLogicContext.ts (100%) rename src/{buisnesslogic/BuisnessLogicProvider.tsx => businesslogic/BusinessLogicProvider.tsx} (67%) rename src/{buisnesslogic => businesslogic}/models/user.ts (100%) diff --git a/src/buisnesslogic/BusinessLogicContext.ts b/src/businesslogic/BusinessLogicContext.ts similarity index 100% rename from src/buisnesslogic/BusinessLogicContext.ts rename to src/businesslogic/BusinessLogicContext.ts diff --git a/src/buisnesslogic/BuisnessLogicProvider.tsx b/src/businesslogic/BusinessLogicProvider.tsx similarity index 67% rename from src/buisnesslogic/BuisnessLogicProvider.tsx rename to src/businesslogic/BusinessLogicProvider.tsx index 410b2ed..a3daf17 100644 --- a/src/buisnesslogic/BuisnessLogicProvider.tsx +++ b/src/businesslogic/BusinessLogicProvider.tsx @@ -3,17 +3,17 @@ import React, { Component } from "react"; import { User } from "./models/user"; export interface BuisnessProvided { - states: BuisnessState; + states: BusinessState; reducers: () => void; } -interface BuisnessState { +interface BusinessState { user: User | null; } interface Props {} -class BusinessLogicProvider extends Component { +class BusinessLogicProvider extends Component { constructor(props: Props) { super(props); this.state = { @@ -29,19 +29,16 @@ class BusinessLogicProvider extends Component { 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) { + if (!ticket) { + window.location.replace(`https://cas.amu.edu.pl/cas/login?service=${window.origin}&locale=pl`); + } + if (ticket && !this.state.user) { this.setState({ user: { ticket } }); } } logout() { - 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}`); } render() { diff --git a/src/buisnesslogic/models/user.ts b/src/businesslogic/models/user.ts similarity index 100% rename from src/buisnesslogic/models/user.ts rename to src/businesslogic/models/user.ts diff --git a/src/components/RightBar/index.tsx b/src/components/RightBar/index.tsx index 0c3b5f7..e6c31ee 100644 --- a/src/components/RightBar/index.tsx +++ b/src/components/RightBar/index.tsx @@ -1,8 +1,8 @@ import React from "react"; import "./index.scss"; import Class, { Group } from "../Class"; -import BusinessLogicContext from "../../buisnesslogic/BusinessLogicContext"; -import { BuisnessProvided } from "../../buisnesslogic/BuisnessLogicProvider"; +import BusinessLogicContext from "../../businesslogic/BusinessLogicContext"; +import { BuisnessProvided } from "../../businesslogic/BusinessLogicProvider"; interface RightBarProps { onClassHover: (group_id: String, class_id: String) => void; diff --git a/src/components/TopBar/Profile.tsx b/src/components/TopBar/Profile.tsx index a97ec9a..de80c82 100644 --- a/src/components/TopBar/Profile.tsx +++ b/src/components/TopBar/Profile.tsx @@ -1,7 +1,7 @@ import { Menu, MenuItem } from "@material-ui/core"; import React, { FC } from "react"; -import BusinessLogicContext from "../../buisnesslogic/BusinessLogicContext"; -import { BuisnessProvided } from "../../buisnesslogic/BuisnessLogicProvider"; +import BusinessLogicContext from "../../businesslogic/BusinessLogicContext"; +import { BuisnessProvided } from "../../businesslogic/BusinessLogicProvider"; interface ProfileProps { anchorEl: HTMLElement | null; diff --git a/src/index.tsx b/src/index.tsx index 9b0365f..d09a869 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,7 +1,7 @@ import React from "react"; import ReactDOM from "react-dom"; import App from "./App"; -import BuisnessLogicProvider from "./buisnesslogic/BuisnessLogicProvider"; +import BuisnessLogicProvider from "./businesslogic/BusinessLogicProvider"; ReactDOM.render( From 9da1dfd51f4a8bddda427eb91cd04c15bd889488 Mon Sep 17 00:00:00 2001 From: maciekglowacki Date: Sat, 20 Jun 2020 11:27:19 +0200 Subject: [PATCH 3/4] Refactored business logic provider --- src/businesslogic/BusinessLogicProvider.tsx | 12 ++++++++++-- src/businesslogic/models/user.ts | 2 +- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/src/businesslogic/BusinessLogicProvider.tsx b/src/businesslogic/BusinessLogicProvider.tsx index a3daf17..297133c 100644 --- a/src/businesslogic/BusinessLogicProvider.tsx +++ b/src/businesslogic/BusinessLogicProvider.tsx @@ -30,17 +30,25 @@ class BusinessLogicProvider extends Component { const ticket = urlParams.get("ticket"); if (!ticket) { - window.location.replace(`https://cas.amu.edu.pl/cas/login?service=${window.origin}&locale=pl`); + this.redirectToCASLoginService(); } - if (ticket && !this.state.user) { + if (ticket) { this.setState({ user: { ticket } }); } } logout() { + this.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 ( Date: Sat, 20 Jun 2020 14:10:58 +0200 Subject: [PATCH 4/4] Refactored --- src/App.tsx | 31 +++++++++------ src/businesslogic/BusinessLogicProvider.tsx | 18 ++++++--- src/components/RightBar/index.tsx | 5 ++- src/components/TopBar/Profile.tsx | 22 +++++------ src/components/TopBar/index.tsx | 43 +++++++++++++++++---- 5 files changed, 81 insertions(+), 38 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 70c2e30..4e946f1 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -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 (
- { - setText(e.target.value); - }} - handleTransfer={(e) => { - setOpenTransfer(!isOpenTransfer); - }} - onLangChange={(e) => { - console.log(e); - }} - /> + + {(context) => ( + { + setText(e.target.value); + }} + handleTransfer={(e) => { + setOpenTransfer(!isOpenTransfer); + }} + onLangChange={(e) => { + console.log(e); + }} + handleLogout={() => { + (context as BuisnessProvided).reducers.userlogout(); + }} + /> + )} + { diff --git a/src/businesslogic/BusinessLogicProvider.tsx b/src/businesslogic/BusinessLogicProvider.tsx index 297133c..4cdb84a 100644 --- a/src/businesslogic/BusinessLogicProvider.tsx +++ b/src/businesslogic/BusinessLogicProvider.tsx @@ -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 { } 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 { { - this.logout(); + reducers: { + userlogout: () => { + this.logout(); + }, }, }} > diff --git a/src/components/RightBar/index.tsx b/src/components/RightBar/index.tsx index e6c31ee..b2d70aa 100644 --- a/src/components/RightBar/index.tsx +++ b/src/components/RightBar/index.tsx @@ -21,14 +21,15 @@ export default class RightBar extends React.Component<
{(context) => ( -

+

{JSON.stringify( (context as BuisnessProvided).states.user ?.ticket )} -

+

)} +

Semestr zimowy 2020/2021

{this.props.lectures.map((classgroup, index) => ( void; + handleLogout: () => void; } export const Profile: FC = ({ anchorEl, handleClose, + handleLogout, ...restProps }) => { return ( @@ -24,17 +24,13 @@ export const Profile: FC = ({ > Profile My account - - {(context) => ( - { - (context as BuisnessProvided).reducers(); - }} - > - Logout - - )} - + { + handleLogout(); + }} + > + Logout + ); }; diff --git a/src/components/TopBar/index.tsx b/src/components/TopBar/index.tsx index 4d5c22d..c0455ce 100644 --- a/src/components/TopBar/index.tsx +++ b/src/components/TopBar/index.tsx @@ -12,7 +12,10 @@ import { Profile } from "./Profile"; interface TopBarProps { handleTransfer: (e: React.MouseEvent) => void; onLangChange: (lang: boolean) => void; - textChangeHandler: (e: React.ChangeEvent) => void; + handleLogout: () => void; + textChangeHandler: ( + e: React.ChangeEvent + ) => void; } interface TopBarState { @@ -64,29 +67,55 @@ export default class TopBar extends React.Component { return (
- logo + logo
plan na plan
- search + search this.handleChange(e)} /> - close + close
- transfer + transfer change_language - profile - + profile +
);