frontend/src/components/Topbar.tsx

226 lines
6.0 KiB
TypeScript
Raw Normal View History

2021-01-05 21:05:16 +01:00
import React, { useState, MouseEvent, ChangeEvent, useEffect, useCallback, useContext, useRef } from 'react';
2020-11-08 18:05:21 +01:00
import { ReactComponent as Close } from '../assets/close.svg';
2021-01-19 16:10:43 +01:00
import LogoutIcon from '../assets/logout.svg';
import TransferIcon from '../assets/transfer.svg';
import { Profile } from './Profile';
2020-08-17 23:56:34 +02:00
import { Dropdown } from './Dropdown';
2020-10-30 00:42:40 +01:00
import styled from 'styled-components/macro';
2020-11-02 00:15:30 +01:00
import ClickAwayListener from 'react-click-away-listener';
2020-12-02 09:04:06 +01:00
import { SelectMenu } from './SelectMenu';
2020-12-16 00:23:31 +01:00
import { studentsContext } from '../contexts/StudentsProvider';
2021-01-05 21:05:16 +01:00
import { CASContext } from '../contexts/CASProvider';
import { render } from 'react-dom';
2020-08-20 18:14:28 +02:00
const Topbar = styled.div`
2020-11-21 14:15:58 +01:00
background-color: #e3e5ed;
height: 80px;
padding: 5px;
font-size: 24px;
font-weight: bold;
display: flex;
justify-content: space-between;
`;
2020-10-30 00:42:40 +01:00
const LogoWrapper = styled.div`
display: flex;
2020-11-08 18:05:21 +01:00
justify-content: flex-start;
align-items: center;
flex: 2;
2020-11-08 18:05:21 +01:00
margin-left: 10px;
`;
2020-10-30 00:42:40 +01:00
const Logo = styled.img`
width: 70px;
height: 70px;
2020-12-04 15:05:54 +01:00
@media only screen and (max-width: 1533px) {
flex: auto;
}
`;
2020-10-30 00:42:40 +01:00
const Text = styled.div`
2020-11-21 14:15:58 +01:00
margin-left: 10px;
font-size: 1.4rem;
user-select: none;
2020-12-04 15:05:54 +01:00
@media only screen and (max-width: 1533px) {
2020-10-30 00:42:40 +01:00
display: none;
}
2020-12-04 15:05:54 +01:00
@media only screen and (max-width: 1828px) {
margin-right: 10px;
text-align: center;
}
2020-10-30 00:42:40 +01:00
`;
2020-11-02 00:15:30 +01:00
const FlexboxColumn = styled.div`
display: flex;
flex-direction: column;
2020-11-08 18:05:21 +01:00
flex: 12;
2020-11-02 00:15:30 +01:00
`;
2020-12-12 17:54:13 +01:00
type InputWrapperProps = {
isStudent: boolean;
};
const InputWrapper = styled.div<InputWrapperProps>`
2020-12-04 15:05:54 +01:00
width: 100%;
display: flex;
2020-11-02 00:15:30 +01:00
margin-top: 15px;
2020-12-02 09:04:06 +01:00
max-height: 40px;
2020-11-02 00:15:30 +01:00
background-color: #f2f4f7;
2020-12-12 17:54:13 +01:00
border-radius: ${({ isStudent }) => (isStudent ? ` 6px 6px 6px 6px` : ` 0px 6px 6px 0px`)};
2020-12-04 15:05:54 +01:00
padding-left: 6px;
&:hover {
background-color: #ffffff;
}
&:hover > input {
background-color: #ffffff;
}
`;
2020-11-02 00:15:30 +01:00
const Input = styled.input`
2020-11-21 14:15:58 +01:00
font-family: 'Roboto', sans-serif;
font-size: 18px;
2020-11-02 00:15:30 +01:00
background-color: #f1f2f5;
height: 40px;
2020-12-02 09:04:06 +01:00
max-height: 40px;
2020-11-02 00:15:30 +01:00
width: 100%;
border: none;
2020-11-08 18:05:21 +01:00
margin-left: 5px;
2020-11-02 00:15:30 +01:00
&:focus {
outline: none;
}
`;
2020-11-08 18:05:21 +01:00
const CloseIcon = styled(Close)`
2020-12-02 09:04:06 +01:00
align-self: center;
2020-10-30 00:42:40 +01:00
width: 30px;
2020-11-08 18:05:21 +01:00
height: 30px;
margin-right: 5px;
@media only screen and (max-width: 670px) {
width: 25px;
}
2020-08-20 18:14:28 +02:00
cursor: pointer;
2020-11-08 18:05:21 +01:00
:hover {
fill: grey;
}
`;
2020-10-30 00:42:40 +01:00
const IconWrapper = styled.div`
display: flex;
align-items: center;
2020-12-16 00:23:31 +01:00
justify-content: flex-end;
2020-11-08 18:05:21 +01:00
width: 335px;
2020-12-16 00:23:31 +01:00
margin-right: 10px;
2020-10-30 00:42:40 +01:00
`;
const Icon = styled.img`
width: 40px;
2021-01-19 16:10:43 +01:00
margin-left: 40px;
cursor: pointer;
@media only screen and (max-width: 670px) {
width: 35px;
}
`;
2020-12-02 09:04:06 +01:00
export const Flexbox = styled.div`
display: flex;
`;
2020-12-16 00:23:31 +01:00
export const SelectedStudent = styled.div`
width: 100%;
display: flex;
justify-content: center;
margin-right: 10px;
margin-left: 10px;
`;
interface TopbarProps {
2020-08-17 23:56:34 +02:00
handleTransfer: (e: MouseEvent) => void;
}
2020-08-20 18:14:28 +02:00
export default function ({ handleTransfer }: TopbarProps) {
2021-01-19 16:10:43 +01:00
const { logout } = useContext(CASContext)!;
2020-12-16 00:23:31 +01:00
const { selectedStudent } = useContext(studentsContext)!;
2021-01-05 21:05:16 +01:00
const { role } = useContext(CASContext)!;
2020-08-20 18:14:28 +02:00
const [clearInput, setClearInput] = useState(false);
const [isPolish, setIsPolish] = useState(false);
const [anchorEl, setAnchorEl] = useState<HTMLImageElement | null>(null);
2020-11-02 00:15:30 +01:00
const [open, setOpen] = useState(false);
const [input, setInput] = useState('');
2021-01-05 21:05:16 +01:00
const [selectedOption, setSelectedOption] = useState(role === 'STUDENT' ? 'przedmioty' : 'studenci');
useEffect(() => {
role && setSelectedOption(role === 'STUDENT' ? 'przedmioty' : 'studenci');
}, [role]);
2020-12-05 18:06:26 +01:00
2020-12-12 17:54:13 +01:00
const changeSelectedOption = (option: string) => setSelectedOption(option);
2020-08-17 23:56:34 +02:00
const onLangChange = () => setIsPolish(!isPolish);
2020-08-17 23:56:34 +02:00
const handleProfile = (event: MouseEvent<HTMLImageElement>) => setAnchorEl(event.currentTarget);
2020-11-21 14:15:58 +01:00
const handleCloseProfile = () => setAnchorEl(null);
2020-11-22 18:22:07 +01:00
const handleClearInput = useCallback(() => setClearInput((clearInput) => !clearInput), []);
2020-08-20 18:14:28 +02:00
2020-11-02 00:15:30 +01:00
const handleChange = (event: ChangeEvent<HTMLInputElement>) => setInput(event.target.value);
2020-11-22 18:22:07 +01:00
const handleShowDropdown = () => setOpen(true);
2020-11-02 00:15:30 +01:00
const handleCloseDropdown = () => setOpen(false);
useEffect(() => {
2020-11-21 14:15:58 +01:00
if (clearInput) {
setInput('');
handleClearInput();
}
2020-11-22 18:22:07 +01:00
}, [clearInput, handleClearInput]);
2020-11-21 14:15:58 +01:00
return (
2020-08-20 18:14:28 +02:00
<Topbar>
2020-10-30 00:42:40 +01:00
<LogoWrapper>
<Logo alt="logo" src="https://plannaplan.pl/img/logo.svg" />
<Text> plan na plan </Text>
</LogoWrapper>
2020-11-02 00:15:30 +01:00
<FlexboxColumn>
2020-11-21 14:15:58 +01:00
<ClickAwayListener onClickAway={handleCloseDropdown}>
2020-12-02 09:04:06 +01:00
<Flexbox>
2021-01-05 21:05:16 +01:00
{role !== 'STUDENT' && (
2020-12-12 17:54:13 +01:00
<SelectMenu
changeSelectedOption={changeSelectedOption}
selectedOption={selectedOption}
changeDropdownOpen={setOpen}
/>
)}
2021-01-05 21:05:16 +01:00
<InputWrapper isStudent={role === 'STUDENT'}>
2020-12-02 09:04:06 +01:00
<Input
2020-12-12 17:54:13 +01:00
placeholder={`Wyszukaj ${selectedOption === 'studenci' ? 'studentów...' : 'przedmioty...'}`}
2020-12-02 09:04:06 +01:00
onChange={handleChange}
value={input}
onFocus={() => {
handleShowDropdown();
}}
/>
<CloseIcon onClick={handleClearInput} />
</InputWrapper>
</Flexbox>
2020-12-12 17:54:13 +01:00
<Dropdown
open={open}
input={input}
handleCloseDropdown={handleCloseDropdown}
selectedOption={selectedOption}
/>
2020-11-02 00:15:30 +01:00
</ClickAwayListener>
</FlexboxColumn>
2020-10-30 00:42:40 +01:00
<IconWrapper>
2020-12-16 00:23:31 +01:00
<SelectedStudent>{selectedStudent?.email.replace(/@st.amu.edu.pl/, '')}</SelectedStudent>
2020-11-08 18:05:21 +01:00
{/* <Text>Maciej Głowacki</Text> */}
2021-01-19 16:10:43 +01:00
<Icon alt="transfer" src={TransferIcon} onClick={handleTransfer} />
2020-12-12 17:54:13 +01:00
{/* <Icon alt="change_language" src={isPolish ? EnglishIcon : PolishIcon} onClick={onLangChange} /> */}
2021-01-19 16:10:43 +01:00
<Icon alt="logout" src={LogoutIcon} onClick={logout} />
{/* <Profile anchorEl={anchorEl} handleClose={handleCloseProfile} /> */}
2020-10-30 00:42:40 +01:00
</IconWrapper>
2020-08-20 18:14:28 +02:00
</Topbar>
);
}