frontend/src/components/Dropdown.tsx

117 lines
3.1 KiB
TypeScript
Raw Normal View History

2020-08-17 23:56:34 +02:00
import React, { useState, useContext, useEffect, MouseEvent } from 'react';
import axios from 'axios';
import { Input } from '@material-ui/core';
import ClickAwayListener from '@material-ui/core/ClickAwayListener';
import { coursesContext } from '../contexts/CoursesProvider';
2020-08-23 16:10:10 +02:00
import { Course, Basket } from '../types';
2020-08-17 23:56:34 +02:00
import styled from 'styled-components';
import { makeStyles } from '@material-ui/core/styles';
const CourseStyled = styled.div`
position: relative;
z-index: 10;
padding: 5px;
padding-left: 20px;
background-color: #e6c759;
font-size: 18px;
font-family: Lato;
:hover {
background-color: #d4b851;
cursor: pointer;
}
`;
const DropdownStyled = styled.div`
max-height: 400px;
overflow-y: auto;
::-webkit-scrollbar {
display: none;
}
`;
const useStyles = makeStyles({
topbarInput: {
marginTop: '8px',
width: '100%',
},
});
2020-08-20 18:14:28 +02:00
interface DropdownProps {
clearInput: boolean;
2020-08-23 16:02:52 +02:00
handleClearInput: () => void;
2020-08-20 18:14:28 +02:00
}
2020-08-23 16:02:52 +02:00
export const Dropdown = ({ clearInput, handleClearInput }: DropdownProps) => {
2020-08-17 23:56:34 +02:00
const classes = useStyles();
const [open, setOpen] = React.useState(false);
const [input, setInput] = useState<string>('');
//courses - choosenCourses
const [filteredCourses, setFilteredCourses] = useState<Array<Course>>([]);
const { courses, basket, addToBasket } = useContext(coursesContext)!;
2020-08-17 23:56:34 +02:00
useEffect(() => {
const filterCourses = (input: string) => {
const choosenCoursesNames = basket.map(({ name }) => name.trim());
2020-08-17 23:56:34 +02:00
const filteredCourses = courses.filter(
({ name }) => name.toLowerCase().includes(input.toLowerCase()) && !choosenCoursesNames.includes(name),
);
setFilteredCourses(filteredCourses);
};
filterCourses(input);
}, [input, open, basket]);
2020-08-17 23:56:34 +02:00
2020-08-23 16:02:52 +02:00
useEffect(() => {
if (clearInput) {
setInput('');
handleClearInput();
2020-08-20 18:14:28 +02:00
}
2020-08-23 16:02:52 +02:00
}, [clearInput]);
2020-08-20 18:14:28 +02:00
2020-08-17 23:56:34 +02:00
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => setInput(event.target.value);
const handleClick = () => setOpen(true);
const handleClickAway = () => setOpen(false);
const onCourseClick = async (event: MouseEvent) => {
const target = event.currentTarget;
if (target.id && target.textContent) {
const id = target.id;
const name = target.textContent;
//porozmawiać z Filipem, żeby odrobinę przerobił endpoint
const course: Basket = { name: name, id: parseInt(id), lecture: null, classes: null };
2020-08-17 23:56:34 +02:00
2020-08-23 16:10:10 +02:00
addToBasket(course);
2020-08-17 23:56:34 +02:00
setOpen(false);
}
};
return (
<ClickAwayListener onClickAway={handleClickAway}>
<div>
<Input
placeholder="Wyszukaj..."
inputProps={{ 'aria-label': 'description' }}
className={classes.topbarInput}
onChange={handleChange}
onClick={handleClick}
value={input}
/>
{open && (
<DropdownStyled>
{filteredCourses.map(({ name, id }, index) => (
<CourseStyled key={index} id={id.toString()} onClick={onCourseClick}>
<p>{name} </p>
</CourseStyled>
))}
</DropdownStyled>
)}
</div>
</ClickAwayListener>
);
};