y0rune/frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Proof of concept

Browse Source
This commit is contained in:
Filip Izydorczyk 2020-06-17 15:19:51 +02:00
parent ebebdd9def
commit 6992906450
7 changed files with 219 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

163
src/App.tsx
View File

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

63
src/buisnesslogic/BuisnessLogicProvider.tsx Normal file
View File

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

5
src/buisnesslogic/BusinessLogicContext.ts Normal file
View File

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

5
src/buisnesslogic/models/user.ts Normal file
View File

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

54
src/components/RightBar/index.tsx
View File

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

27
src/components/TopBar/Profile.tsx
View File

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

5
src/index.tsx
View File

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