topbar and dropdown fix
This commit is contained in:
parent
3d1cc914b4
commit
6de97c107e
@ -6,7 +6,7 @@ import styled from 'styled-components';
|
||||
const DropdownContainer = styled.div`
|
||||
position: relative;
|
||||
z-index: 99999999;
|
||||
max-height: 420px;
|
||||
max-height: 396px;
|
||||
border-radius: 3px;
|
||||
overflow-y: auto;
|
||||
box-shadow: 0.05em 0.2em 0.6em rgba(0, 0, 0, 0.2);
|
||||
@ -31,7 +31,7 @@ const CourseContainer = styled.div`
|
||||
padding: 5px;
|
||||
padding-left: 20px;
|
||||
background-color: #f2f4f7;
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
scroll-snap-align: end;
|
||||
:hover {
|
||||
@ -47,7 +47,6 @@ interface DropdownProps {
|
||||
}
|
||||
|
||||
export const Dropdown = ({ open, input, handleCloseDropdown }: DropdownProps) => {
|
||||
|
||||
const { courses, basket, addCourseToBasket } = useContext(coursesContext)!;
|
||||
const basketNames = basket.map(({ name }) => name.trim());
|
||||
|
||||
|
@ -1,4 +1,4 @@
|
||||
import React, { useState, MouseEvent, ChangeEvent, useEffect } from 'react';
|
||||
import React, { useState, MouseEvent, ChangeEvent, useEffect, useRef } from 'react';
|
||||
import { ReactComponent as Close } from '../assets/close.svg';
|
||||
import ProfileIcon from '../assets/account.svg';
|
||||
import { Profile } from './Profile';
|
||||
@ -9,7 +9,7 @@ import styled from 'styled-components/macro';
|
||||
import ClickAwayListener from 'react-click-away-listener';
|
||||
|
||||
const Topbar = styled.div`
|
||||
background-color: #E3E5ED;
|
||||
background-color: #e3e5ed;
|
||||
height: 80px;
|
||||
padding: 5px;
|
||||
font-size: 24px;
|
||||
@ -36,9 +36,9 @@ const Logo = styled.img`
|
||||
`;
|
||||
|
||||
const Text = styled.div`
|
||||
margin-left: 10px;
|
||||
font-size: 1.4rem;
|
||||
user-select: none;
|
||||
margin-left: 10px;
|
||||
font-size: 1.4rem;
|
||||
user-select: none;
|
||||
@media only screen and (max-width: 670px) {
|
||||
display: none;
|
||||
}
|
||||
@ -59,8 +59,9 @@ const InputWrapper = styled.div`
|
||||
`;
|
||||
|
||||
const Input = styled.input`
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: #f1f2f5;
|
||||
font-size: 20px;
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
border: none;
|
||||
@ -116,22 +117,33 @@ export default function ({ handleTransfer }: TopbarProps) {
|
||||
|
||||
const handleProfile = (event: MouseEvent<HTMLImageElement>) => setAnchorEl(event.currentTarget);
|
||||
|
||||
const handleClose = () => setAnchorEl(null);
|
||||
const handleCloseProfile = () => setAnchorEl(null);
|
||||
|
||||
const handleClearInput = () => setClearInput(!clearInput);
|
||||
|
||||
const handleChange = (event: ChangeEvent<HTMLInputElement>) => setInput(event.target.value);
|
||||
|
||||
const handleClick = () => setOpen(true);
|
||||
const handleShowDropdown = () => {
|
||||
console.log('show dropdown');
|
||||
setOpen(true);
|
||||
};
|
||||
|
||||
const handleCloseDropdown = () => setOpen(false);
|
||||
|
||||
const handleClickAway = () => setOpen(false);
|
||||
|
||||
useEffect(() => {
|
||||
clearInput && (setInput(''), handleClearInput());
|
||||
if (clearInput) {
|
||||
setInput('');
|
||||
handleClearInput();
|
||||
}
|
||||
}, [clearInput]);
|
||||
|
||||
// useEffect(() => {
|
||||
// console.log('input changed');
|
||||
// if (!open) {
|
||||
// setOpen(true);
|
||||
// }
|
||||
// }, [input]);
|
||||
|
||||
return (
|
||||
<Topbar>
|
||||
<LogoWrapper>
|
||||
@ -139,9 +151,17 @@ export default function ({ handleTransfer }: TopbarProps) {
|
||||
<Text> plan na plan </Text>
|
||||
</LogoWrapper>
|
||||
<FlexboxColumn>
|
||||
<ClickAwayListener onClickAway={handleClickAway}>
|
||||
<ClickAwayListener onClickAway={handleCloseDropdown}>
|
||||
<InputWrapper>
|
||||
<Input placeholder="Wyszukaj przedmiot..." onChange={handleChange} onClick={handleClick} value={input} />
|
||||
<Input
|
||||
placeholder="Wyszukaj przedmiot..."
|
||||
onChange={handleChange}
|
||||
value={input}
|
||||
onFocus={() => {
|
||||
console.log('i am in on focus');
|
||||
handleShowDropdown();
|
||||
}}
|
||||
/>
|
||||
<CloseIcon onClick={handleClearInput} />
|
||||
</InputWrapper>
|
||||
<Dropdown open={open} input={input} handleCloseDropdown={handleCloseDropdown} />
|
||||
@ -153,7 +173,7 @@ export default function ({ handleTransfer }: TopbarProps) {
|
||||
{/* <Icon alt="transfer" src={Transfer} onClick={handleTransfer} /> */}
|
||||
<Icon alt="change_language" src={isPolish ? EnglishIcon : PolishIcon} onClick={onLangChange} />
|
||||
<Icon alt="profile" src={ProfileIcon} onClick={handleProfile} />
|
||||
<Profile anchorEl={anchorEl} handleClose={handleClose} />
|
||||
<Profile anchorEl={anchorEl} handleClose={handleCloseProfile} />
|
||||
</IconWrapper>
|
||||
</Topbar>
|
||||
);
|
||||
|
@ -120,25 +120,27 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
|
||||
);
|
||||
const basket = data === '' ? [] : data;
|
||||
setBasket(basket);
|
||||
console.log('newest timetable: ', basket);
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchClasses = async () => {
|
||||
const fetchCourses = async () => {
|
||||
try {
|
||||
const { data: courses } = await axiosInstance.get<Array<Course>>(
|
||||
`${process.env.REACT_APP_API_URL}/api/v1/courses/getCoursesWithGroups`,
|
||||
);
|
||||
const sortedCourses = courses.sort((a, b) => (a.name > b.name ? 1 : -1));
|
||||
console.log('courses: ', courses);
|
||||
setCourses(sortedCourses);
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
console.log(e);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchClasses();
|
||||
fetchCourses();
|
||||
getNewestTimetable();
|
||||
}, []);
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user