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

Restructured components and refactored topbar to functional

Browse Source
This commit is contained in:
Maciek Głowacki
2020-08-17 22:05:13 +02:00
parent 4f7bc8aaa4
commit 55bb7945c9
24 changed files with 321 additions and 466 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/App.tsx Normal file
View File

@@ -0,0 +1,32 @@
import React, { useState, useContext } from 'react';
import { Topbar } from './Topbar';
import { Transfer } from './Transfer/Transfer';
import { Scheduler } from './Scheduler';
import RightBar from './Rightbar';
import { CASContext } from '../contexts/CASProvider';
import styled from 'styled-components';
const Wrapper = styled.div`
display: flex;
`;
export const App = () => {
const [isOpenTransfer, setOpenTransfer] = useState(false);
const { logout } = useContext(CASContext)!;
const handleTransfer = () => {
setOpenTransfer(!isOpenTransfer);
};
return (
<>
<Topbar handleTransfer={handleTransfer} handleLogout={logout} />
<Transfer isOpen={isOpenTransfer} handleClose={handleTransfer} />
<Wrapper>
<Scheduler />
<RightBar />
</Wrapper>
</>
);
};

57
src/components/RightBar/CourseCard/index.tsx → src/components/CourseCard.tsx
View File

@@ -1,25 +1,15 @@
import React, { useContext } from 'react';
import Collapse from '@material-ui/core/Collapse';
import ExpandIcon from './expand.png';
import { Course, Group } from '../../../types/index';
import { coursesContext } from '../../../contexts/CoursesProvider';
import { group } from 'console';
import ExpandIcon from '../assets/expand.png';
import { Course, Group } from '../types/index';
import { coursesContext } from '../contexts/CoursesProvider';
import styled from 'styled-components';
import { makeStyles } from '@material-ui/core/styles';
interface CourseCardProps {
onGroupMouseOver: (id: number, name: string) => void;
onCardClick: (e: React.MouseEvent) => void;
course: Course;
id: string;
isSelected: boolean;
}
interface ClassExandIconProps {
isSelected: boolean;
}
const ClassStyled = styled.div`
display: flex;
min-height: 50px;
@@ -51,33 +41,40 @@ const ClassGroupStyled = styled.div`
`;
const ClassExandIconStyled = styled.img<ClassExandIconProps>`
margin-top: 5px;
width: 20px;
transition: 0.2s;
transform: ${props => props.isSelected ? 'scaleY(-1);' : 'scaleY(1);'};
`
margin-top: 5px;
width: 20px;
transition: 0.2s;
transform: ${(props) => (props.isSelected ? 'scaleY(-1);' : 'scaleY(1);')};
`;
const useStyles = makeStyles({
expanded: {
maxHeight: "244px",
overflowY: "auto",
maxHeight: '244px',
overflowY: 'auto',
},
'@global': {
'*::-webkit-scrollbar': {
width: '0.4em'
width: '0.4em',
},
'*::-webkit-scrollbar-track': {
'-webkit-box-shadow': 'inset 0 0 6px rgba(1,0,0,0.1)'
'-webkit-box-shadow': 'inset 0 0 6px rgba(1,0,0,0.1)',
},
'*::-webkit-scrollbar-thumb': {
borderRadius: "10px",
borderRadius: '10px',
backgroundColor: '#d4b851',
outline: '1px solid slategrey'
}
}
outline: '1px solid slategrey',
},
},
});
export function CourseCard({ onGroupMouseOver, onCardClick, course, id, isSelected }: CourseCardProps) {
interface CourseCardProps {
onCardClick: (e: React.MouseEvent) => void;
course: Course;
id: string;
isSelected: boolean;
}
export function CourseCard({ onCardClick, course, id, isSelected }: CourseCardProps) {
const classes = useStyles();
const { addGroup, courses } = useContext(coursesContext)!;
@@ -92,11 +89,7 @@ export function CourseCard({ onGroupMouseOver, onCardClick, course, id, isSelect
{courses.map((course, index) => (
<>
{course.groups.map((group, index) => (
<ClassGroupStyled
key={index}
onMouseOver={() => onGroupMouseOver(group.id, course.name)}
onClick={() => onGroupClick(group)}
>
<ClassGroupStyled key={index} onClick={() => onGroupClick(group)}>
<p>
{group.time} {group.room} <br></br> {group.lecturer}
</p>{' '}

0
src/components/TopBar/Profile.tsx → src/components/Profile.tsx
View File

7
src/components/TopBar/Results/index.tsx → src/components/Results.tsx
View File

@@ -2,8 +2,8 @@ import React, { useState, useContext, useEffect } from 'react';
import axios from 'axios';
import { Input } from '@material-ui/core';
import ClickAwayListener from '@material-ui/core/ClickAwayListener';
import { coursesContext } from '../../../contexts/CoursesProvider';
import { Course } from '../../../types';
import { coursesContext } from '../contexts/CoursesProvider';
import { Course } from '../types';
import styled from 'styled-components';
import { makeStyles } from '@material-ui/core/styles';
@@ -36,7 +36,7 @@ const Dropdown = styled.div`
const useStyles = makeStyles({
topbarInput: {
marginTop:"8px",
marginTop: '8px',
width: '100%',
},
});
@@ -121,7 +121,6 @@ export const Results: React.FC = () => {
// }
};
return (
<ClickAwayListener onClickAway={handleClickAway}>
<div>

BIN
src/components/RightBar/CourseCard/expand.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 535 B

23
src/components/RightBar/index.tsx → src/components/Rightbar.tsx
View File

@@ -1,13 +1,9 @@
import React, { useState, useContext } from 'react';
import { CourseCard } from './CourseCard/index';
import { coursesContext } from '../../contexts/CoursesProvider';
import { CourseCard } from './CourseCard';
import { coursesContext } from '../contexts/CoursesProvider';
import styled from 'styled-components';
interface RightBarProps {
onGroupMouseOver: (id: number, name: string) => void;
}
const RightBarStyled = styled.div`
const RightbarStyled = styled.div`
padding-top: 10px;
padding-left: 15px;
padding-right: 15px;
@@ -30,11 +26,11 @@ const RightBarStyled = styled.div`
border: 1px solid;
}
`;
const RightBarTextStyled = styled.div`
const RightbarTextStyled = styled.div`
border-bottom: 1px solid;
`;
export default function RightBar({ onGroupMouseOver }: RightBarProps) {
export default function Rightbar() {
const [selectedCardId, setSelectedCardId] = useState<string | null>(null);
const { courses } = useContext(coursesContext)!;
@@ -45,21 +41,20 @@ export default function RightBar({ onGroupMouseOver }: RightBarProps) {
};
return (
<RightBarStyled>
<RightBarTextStyled>
<RightbarStyled>
<RightbarTextStyled>
Hubert Wrzesiński<br></br>
Semestr zimowy 2020/2021
</RightBarTextStyled>
</RightbarTextStyled>
{courses.map((course, index) => (
<CourseCard
course={course}
key={index}
id={index.toString()}
onGroupMouseOver={onGroupMouseOver}
onCardClick={onCardClick}
isSelected={selectedCardId === index.toString()}
/>
))}
</RightBarStyled>
</RightbarStyled>
);
}

2
src/components/Scheduler/index.tsx → src/components/Scheduler.tsx
View File

@@ -1,7 +1,7 @@
import React, { useEffect, useRef } from "react";
import { useState } from "react";
import { SchedulerEvents } from "./SchedulerEvents";
import { days, hours } from "../../constants/index";
import { days, hours } from "../constants/index";
import styled from "styled-components";
const SchedulerWrapper = styled.div`

6
src/components/Scheduler/SchedulerEvents/index.tsx → src/components/SchedulerEvents.tsx
View File

@@ -1,7 +1,7 @@
import React, { useContext, useEffect, useState } from 'react';
import { SchedulerRow } from '../SchedulerRow';
import { coursesContext } from '../../../contexts/CoursesProvider';
import { Group } from '../../../types';
import { SchedulerRow } from './SchedulerRow';
import { coursesContext } from '../contexts/CoursesProvider';
import { Group } from '../types';
interface SchedulerEventsProps {
cellTop: number;

2
src/components/Scheduler/SchedulerRow/index.tsx → src/components/SchedulerRow.tsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { Group } from '../../../types';
import { Group } from '../types';
import styled from 'styled-components';
interface SchedulerEventProps {

BIN
src/components/TopBar/PL.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 10 KiB

BIN
src/components/TopBar/UK.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 11 KiB

1
src/components/TopBar/close.svg
View File

@@ -1 +0,0 @@
<?xml version="1.0" ?><svg height="48" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M38 12.83l-2.83-2.83-11.17 11.17-11.17-11.17-2.83 2.83 11.17 11.17-11.17 11.17 2.83 2.83 11.17-11.17 11.17 11.17 2.83-2.83-11.17-11.17z"/><path d="M0 0h48v48h-48z" fill="none"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 297 B

152
src/components/TopBar/index.tsx
View File

@@ -1,152 +0,0 @@
import React from 'react';
import Transfer from './transfer.png';
import Search from './search.svg';
import UK from './UK.png';
import PL from './PL.png';
import User from './user.png';
import CloseIcon from './close.svg';
import { Profile } from './Profile';
import { Results } from './Results';
import styled from 'styled-components';
interface TopBarProps {
handleTransfer: (e: React.MouseEvent) => void;
onLangChange: (lang: boolean) => void;
handleLogout: () => void;
}
interface TopBarState {
isPolish: boolean;
anchorEl: HTMLElement | null;
}
const TopBarTekstStyled = styled.div`
@media only screen and (max-width: 670px) {
display: none;
}
`;
const TopBarStyled = styled.div`
background-color: #ffdc61;
height: 80px;
padding: 5px;
font-family: comic sans MS;
font-size: 24px;
font-weight: bold;
display: flex;
justify-content: space-between;
`;
const TopBarLogoStyled = styled.div`
display: flex;
align-items: center;
flex-grow: 0.5;
justify-content: flex-start;
`;
const TopBarLogoImageStyled = styled.img`
width: 80px;
height: 80px;
@media only screen and (max-width: 670px) {
width: 60px;
height: 60px;
}
`;
const TopBarInputDivStyled = styled.div`
width: 70%;
display: flex;
flex-grow: 3;
`;
const TopBarInputFieldStyled = styled.div`
width: 96%;
margin-top: 10px;
`;
const TopBarInputIconStyled = styled.img`
width: 35px;
@media only screen and (max-width: 670px) {
width: 25px;
}
`;
const TopBarIcon = styled.img`
width: 50px;
cursor: pointer;
@media only screen and (max-width: 670px) {
width: 35px;
}
`;
const TopBarIconBox = styled.div`
display: flex;
align-items: center;
justify-content: space-around;
flex-grow: 1.5;
`;
export default class TopBar extends React.Component<TopBarProps, TopBarState> {
constructor(props: TopBarProps) {
super(props);
this.handleProfile = this.handleProfile.bind(this);
this.handleClose = this.handleClose.bind(this);
this.onLangChange = this.onLangChange.bind(this);
this.handleTransfer = this.handleTransfer.bind(this);
this.state = {
isPolish: true,
anchorEl: null,
};
}
handleTransfer(e: React.MouseEvent) {
this.props.handleTransfer(e);
}
onLangChange(e: React.MouseEvent) {
this.setState({
isPolish: !this.state.isPolish,
});
this.props.onLangChange(this.state.isPolish);
}
handleProfile(event: React.MouseEvent<HTMLImageElement>) {
this.setState({
anchorEl: event.currentTarget,
});
}
handleClose() {
this.setState({
anchorEl: null,
});
}
render() {
return (
<TopBarStyled>
<TopBarLogoStyled>
<TopBarLogoImageStyled alt="logo" src="https://plannaplan.pl/img/logo.svg" />
<TopBarTekstStyled> plan na plan </TopBarTekstStyled>
</TopBarLogoStyled>
<TopBarInputDivStyled>
<TopBarInputIconStyled alt="search" src={Search} />
<TopBarInputFieldStyled>
<Results />
</TopBarInputFieldStyled>
<TopBarInputIconStyled alt="close" src={CloseIcon} />
</TopBarInputDivStyled>
<TopBarIconBox>
<TopBarIcon alt="transfer" src={Transfer} onClick={this.handleTransfer} />
<TopBarIcon alt="change_language" src={this.state.isPolish ? UK : PL} onClick={this.onLangChange} />
<TopBarIcon alt="profile" src={User} onClick={this.handleProfile} />
<Profile
anchorEl={this.state.anchorEl}
handleClose={this.handleClose}
handleLogout={this.props.handleLogout}
/>
</TopBarIconBox>
</TopBarStyled>
);
}
}

1
src/components/TopBar/search.svg
View File

@@ -1 +0,0 @@
<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="512px" id="Layer_1" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="512px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M344.5,298c15-23.6,23.8-51.6,23.8-81.7c0-84.1-68.1-152.3-152.1-152.3C132.1,64,64,132.2,64,216.3 c0,84.1,68.1,152.3,152.1,152.3c30.5,0,58.9-9,82.7-24.4l6.9-4.8L414.3,448l33.7-34.3L339.5,305.1L344.5,298z M301.4,131.2 c22.7,22.7,35.2,52.9,35.2,85c0,32.1-12.5,62.3-35.2,85c-22.7,22.7-52.9,35.2-85,35.2c-32.1,0-62.3-12.5-85-35.2 c-22.7-22.7-35.2-52.9-35.2-85c0-32.1,12.5-62.3,35.2-85c22.7-22.7,52.9-35.2,85-35.2C248.5,96,278.7,108.5,301.4,131.2z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 808 B

BIN
src/components/TopBar/transfer.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.2 KiB

BIN
src/components/TopBar/user.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 18 KiB

114
src/components/Topbar.tsx Normal file
View File

@@ -0,0 +1,114 @@
import React, { useState } from 'react';
import Transfer from '../assets/transfer.png';
import Search from '../assets/search.svg';
import UK from '../assets/UK.png';
import PL from '../assets/PL.png';
import User from '../assets/user.png';
import CloseIcon from '../assets/close.svg';
import { Profile } from './Profile';
import { Results } from './Results';
import styled from 'styled-components';
const TopbarTextStyled = styled.div`
@media only screen and (max-width: 670px) {
display: none;
}
`;
const TopbarStyled = styled.div`
background-color: #ffdc61;
height: 80px;
padding: 5px;
font-family: comic sans MS;
font-size: 24px;
font-weight: bold;
display: flex;
justify-content: space-between;
`;
const TopbarLogoStyled = styled.div`
display: flex;
align-items: center;
flex-grow: 0.5;
justify-content: flex-start;
`;
const TopbarLogoImageStyled = styled.img`
width: 80px;
height: 80px;
@media only screen and (max-width: 670px) {
width: 60px;
height: 60px;
}
`;
const TopbarInputDivStyled = styled.div`
width: 70%;
display: flex;
flex-grow: 3;
`;
const TopbarInputFieldStyled = styled.div`
width: 96%;
margin-top: 10px;
`;
const TopbarInputIconStyled = styled.img`
width: 35px;
@media only screen and (max-width: 670px) {
width: 25px;
}
`;
const TopbarIcon = styled.img`
width: 50px;
cursor: pointer;
@media only screen and (max-width: 670px) {
width: 35px;
}
`;
const TopbarIconBox = styled.div`
display: flex;
align-items: center;
justify-content: space-around;
flex-grow: 1.5;
`;
interface TopbarProps {
handleTransfer: (e: React.MouseEvent) => void;
handleLogout: () => void;
}
export const Topbar = ({ handleTransfer, handleLogout }: TopbarProps) => {
const [isPolish, setIsPolish] = useState(false);
const [anchorEl, setAnchorEl] = useState<HTMLImageElement | null>(null);
const onLangChange = (event: React.MouseEvent) => setIsPolish(!isPolish);
const handleProfile = (event: React.MouseEvent) => setAnchorEl(event.currentTarget as HTMLImageElement);
const handleClose = () => setAnchorEl(null);
return (
<TopbarStyled>
<TopbarLogoStyled>
<TopbarLogoImageStyled alt="logo" src="https://plannaplan.pl/img/logo.svg" />
<TopbarTextStyled> plan na plan </TopbarTextStyled>
</TopbarLogoStyled>
<TopbarInputDivStyled>
<TopbarInputIconStyled alt="search" src={Search} />
<TopbarInputFieldStyled>
<Results />
</TopbarInputFieldStyled>
<TopbarInputIconStyled alt="close" src={CloseIcon} />
</TopbarInputDivStyled>
<TopbarIconBox>
<TopbarIcon alt="transfer" src={Transfer} onClick={handleTransfer} />
<TopbarIcon alt="change_language" src={isPolish ? UK : PL} onClick={onLangChange} />
<TopbarIcon alt="profile" src={User} onClick={handleProfile} />
<Profile anchorEl={anchorEl} handleClose={handleClose} handleLogout={handleLogout} />
</TopbarIconBox>
</TopbarStyled>
);
};

57
src/components/Transfer/Transfer.tsx Normal file
View File

@@ -0,0 +1,57 @@
import React from 'react';
import Modal from '@material-ui/core/Modal';
import './index.scss';
import Fade from '@material-ui/core/Fade';
import Input from '@material-ui/core/Input';
import { makeStyles } from '@material-ui/core/styles';
import styled from 'styled-components';
interface TransferProps {
handleClose: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
isOpen: boolean;
}
const useStyles = makeStyles({
wrapper: {
display: 'flex',
justifyContent: 'center',
textAlign: 'center',
alignItems: 'center',
},
});
export const Transfer = ({ handleClose, isOpen }: TransferProps) => {
const classes = useStyles();
return (
<div>
<Modal
className={classes.wrapper}
open={isOpen}
onClose={handleClose}
aria-labelledby="simple-modal-title"
aria-describedby="simple-modal-description"
>
<Fade in={isOpen}>
<div className="transfer">
<div className="transfer__give">
<div className="transfer__text">Oddam</div>
<div className="transfer__input2">
{' '}
<Input
placeholder="Wyszukaj..."
inputProps={{ 'aria-label': 'description' }}
className="top-bar__input-field"
/>
</div>
</div>
<div className="transfer__receive">
<div className="transfer__text">Przyjmę</div>
<input className="transfer__input"></input>
</div>
</div>
</Fade>
</Modal>
</div>
);
};

70
src/components/Transfer/index.tsx
View File

@@ -1,70 +0,0 @@
import React from "react";
import Modal from "@material-ui/core/Modal";
import "./index.scss";
import Fade from '@material-ui/core/Fade';
import Input from "@material-ui/core/Input";
import { makeStyles } from '@material-ui/core/styles';
import styled from 'styled-components';
interface TransferProps {
handleClose: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
isOpen: boolean;
}
interface TransferState {}
const useStyles = makeStyles({
wrapper: {
display: "flex",
justifyContent: "center",
textAlign: "center",
alignItems: "center",
},
});
export default class Transfer extends React.Component<
TransferProps,
TransferState
> {
constructor(props: TransferProps) {
super(props);
this.handleClose = this.handleClose.bind(this);
}
handleClose(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
this.props.handleClose(e);
}
render() {
return (
<div>
<Modal
className="wrapper"
open={this.props.isOpen}
onClose={this.handleClose}
aria-labelledby="simple-modal-title"
aria-describedby="simple-modal-description"
>
<Fade in={this.props.isOpen}>
<div className="transfer">
<div className="transfer__give">
<div className="transfer__text">Oddam</div>
<div className="transfer__input2"> <Input
placeholder="Wyszukaj..."
inputProps={{ "aria-label": "description" }}
className="top-bar__input-field"
/></div>
</div>
<div className="transfer__receive">
<div className="transfer__text">Przyjmę</div>
<input className="transfer__input"></input>
</div>
</div>
</Fade>
</Modal>
</div>
);
}
}