new provider + select changes

This commit is contained in:
wrzesinski-hubert 2020-12-05 18:06:26 +01:00
parent 61b0a6f464
commit c7dc37c827
6 changed files with 68 additions and 67 deletions

View File

@ -1,5 +1,6 @@
import React, { useState, useContext, useEffect, MouseEvent, useMemo } from 'react'; import React, { useState, useContext, useEffect, MouseEvent, useMemo } from 'react';
import { coursesContext } from '../contexts/CoursesProvider'; import { coursesContext } from '../contexts/CoursesProvider';
import { usersContext } from '../contexts/UsersProvider';
import { Course, User } from '../types'; import { Course, User } from '../types';
import styled from 'styled-components'; import styled from 'styled-components';
@ -45,10 +46,12 @@ interface DropdownProps {
open: boolean; open: boolean;
input: string; input: string;
handleCloseDropdown: () => void; handleCloseDropdown: () => void;
selectedOption: string;
} }
export const Dropdown = ({ open, input, handleCloseDropdown }: DropdownProps) => { export const Dropdown = ({ open, input, handleCloseDropdown, selectedOption }: DropdownProps) => {
const { courses, users, selectBasketNames, addCourseToBasket } = useContext(coursesContext)!; const { courses, selectBasketNames, addCourseToBasket } = useContext(coursesContext)!;
const { users } = useContext(usersContext)!;
const basketNames = useMemo(() => selectBasketNames(), [selectBasketNames]); const basketNames = useMemo(() => selectBasketNames(), [selectBasketNames]);
const [filteredCourses, setFilteredCourses] = useState<Array<Course>>([]); const [filteredCourses, setFilteredCourses] = useState<Array<Course>>([]);
const [filteredUsers, setFilteredUsers] = useState<Array<User>>([]); const [filteredUsers, setFilteredUsers] = useState<Array<User>>([]);
@ -84,8 +87,7 @@ export const Dropdown = ({ open, input, handleCloseDropdown }: DropdownProps) =>
useEffect(() => { useEffect(() => {
const filterUsers = (input: string) => { const filterUsers = (input: string) => {
const filteredUsers = users.filter( const filteredUsers = users.filter(({ name, surname }) =>
({ name,surname }) =>
(name + surname) (name + surname)
.toLowerCase() .toLowerCase()
.normalize('NFD') .normalize('NFD')
@ -106,17 +108,25 @@ export const Dropdown = ({ open, input, handleCloseDropdown }: DropdownProps) =>
<DropdownContainer> <DropdownContainer>
{open && ( {open && (
<> <>
{selectedOption === 'studenci' ? (
<div>
{filteredUsers.map(({ name, surname, id }, index) => ( {filteredUsers.map(({ name, surname, id }, index) => (
<CourseContainer key={index} id={id.toString()}> <CourseContainer key={index} id={id.toString()}>
<p>{name} {surname} </p> <p>
{name} {surname}{' '}
</p>
</CourseContainer> </CourseContainer>
))} ))}
{/* </div>
) : (
<div>
{filteredCourses.map(({ name, id }, index) => ( {filteredCourses.map(({ name, id }, index) => (
<CourseContainer key={index} id={id.toString()} onClick={onCourseClick}> <CourseContainer key={index} id={id.toString()} onClick={onCourseClick}>
<p>{name} </p> <p>{name} </p>
</CourseContainer> </CourseContainer>
))} */} ))}
</div>
)}
</> </>
)} )}
</DropdownContainer> </DropdownContainer>

View File

@ -15,6 +15,7 @@ const Wrapper = styled.div`
color: black; color: black;
border-top-left-radius: 6px; border-top-left-radius: 6px;
border-bottom-left-radius: 6px; border-bottom-left-radius: 6px;
&:focus { &:focus {
outline: none; outline: none;
} }
@ -64,16 +65,23 @@ const ExpandIconSelect = styled(ExpandIcon)`
width: 10px; width: 10px;
height: 10px; height: 10px;
`; `;
export const SelectMenu = () => {
interface SelectMenuProps {
changeSelectedOption: (option: string) => void;
changeDropdownOpen: (dropdownState: boolean) => void;
selectedOption:string;
}
export const SelectMenu = ({changeSelectedOption,changeDropdownOpen, selectedOption}:SelectMenuProps) => {
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const [selectedOption, setSelectedOption] = useState('przedmioty');
return ( return (
<ClickAwayListener <ClickAwayListener
onClickAway={() => { onClickAway={() => {
setIsOpen(false); setIsOpen(false);
}} }}
> >
<Wrapper> <Wrapper onClick={() => {changeDropdownOpen(false)}}>
<Header <Header
onClick={() => { onClick={() => {
console.log('clicked'); console.log('clicked');
@ -87,7 +95,7 @@ export const SelectMenu = () => {
<List> <List>
<ListItem <ListItem
onClick={() => { onClick={() => {
setSelectedOption('przedmioty'); changeSelectedOption('przedmioty');
setIsOpen(false); setIsOpen(false);
}} }}
> >
@ -95,7 +103,7 @@ export const SelectMenu = () => {
</ListItem> </ListItem>
<ListItem <ListItem
onClick={() => { onClick={() => {
setSelectedOption('studenci'); changeSelectedOption('studenci');
setIsOpen(false); setIsOpen(false);
}} }}
> >

View File

@ -60,7 +60,7 @@ const InputWrapper = styled.div`
margin-top: 15px; margin-top: 15px;
max-height: 40px; max-height: 40px;
background-color: #f2f4f7; background-color: #f2f4f7;
border-radius: 6px 6px 6px 6px; border-radius: 0px 6px 6px 0px;
padding-left: 6px; padding-left: 6px;
&:hover { &:hover {
background-color: #ffffff; background-color: #ffffff;
@ -128,6 +128,9 @@ export default function ({ handleTransfer }: TopbarProps) {
const [anchorEl, setAnchorEl] = useState<HTMLImageElement | null>(null); const [anchorEl, setAnchorEl] = useState<HTMLImageElement | null>(null);
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [input, setInput] = useState(''); const [input, setInput] = useState('');
const [selectedOption, setSelectedOption] = useState('przedmioty');
const changeSelectedOption = (option:string) => setSelectedOption(option);
const onLangChange = () => setIsPolish(!isPolish); const onLangChange = () => setIsPolish(!isPolish);
@ -159,15 +162,10 @@ export default function ({ handleTransfer }: TopbarProps) {
<FlexboxColumn> <FlexboxColumn>
<ClickAwayListener onClickAway={handleCloseDropdown}> <ClickAwayListener onClickAway={handleCloseDropdown}>
<Flexbox> <Flexbox>
<SelectMenu /> <SelectMenu changeSelectedOption={changeSelectedOption} selectedOption={selectedOption} changeDropdownOpen={setOpen}/>
<InputWrapper> <InputWrapper>
{/* <SelectSearch value={value} onChange={Change}>
<SelectOption value="przedmiot">Przedmiot</SelectOption>
<SelectOption value="student">Student</SelectOption>
</SelectSearch> */}
<Input <Input
placeholder={`Wyszukaj...`} placeholder={`Wyszukaj ${selectedOption === "studenci" ? "studentów..." : "przedmioty..."}`}
onChange={handleChange} onChange={handleChange}
value={input} value={input}
onFocus={() => { onFocus={() => {
@ -177,7 +175,7 @@ export default function ({ handleTransfer }: TopbarProps) {
<CloseIcon onClick={handleClearInput} /> <CloseIcon onClick={handleClearInput} />
</InputWrapper> </InputWrapper>
</Flexbox> </Flexbox>
<Dropdown open={open} input={input} handleCloseDropdown={handleCloseDropdown} /> <Dropdown open={open} input={input} handleCloseDropdown={handleCloseDropdown} selectedOption={selectedOption}/>
</ClickAwayListener> </ClickAwayListener>
</FlexboxColumn> </FlexboxColumn>

View File

@ -1,5 +1,5 @@
import React, { useState, createContext, useEffect, ReactNode } from 'react'; import React, { useState, createContext, useEffect, ReactNode } from 'react';
import { Course, Group, Basket, GroupType, SchedulerEvent,User } from '../types'; import { Course, Group, Basket, GroupType, SchedulerEvent } from '../types';
import { useSnackbar } from 'notistack'; import { useSnackbar } from 'notistack';
import { createClassTime } from '../utils'; import { createClassTime } from '../utils';
import { axiosInstance } from '../utils/axiosInstance'; import { axiosInstance } from '../utils/axiosInstance';
@ -15,7 +15,6 @@ const StyledCloseIcon = styled(CloseIcon)`
`; `;
interface CourseContext { interface CourseContext {
users: Array<User>;
courses: Array<Course>; courses: Array<Course>;
basket: Array<Basket>; basket: Array<Basket>;
hoveredGroup: Group | undefined | null; hoveredGroup: Group | undefined | null;
@ -42,7 +41,6 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
//fetch courses with groups //fetch courses with groups
const [courses, setCourses] = useState<Array<Course>>([]); const [courses, setCourses] = useState<Array<Course>>([]);
const [users, setUsers] = useState<Array<User>>([]);
const [basket, setBasket] = useState<Array<Basket>>([]); const [basket, setBasket] = useState<Array<Basket>>([]);
const [hoveredGroup, setHoveredGroup] = useState<Group | undefined | null>(null); const [hoveredGroup, setHoveredGroup] = useState<Group | undefined | null>(null);
const selectBasketIds = () => { const selectBasketIds = () => {
@ -179,28 +177,16 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
} }
}; };
const getUsers = async () => {
try {
const {data}= await axiosInstance.get<Array<User>>(`${process.env.REACT_APP_API_URL}/api/v1/users/student/search?query=a`);
console.log(data);
setUsers(data);
} catch(e){
console.log(e);
}
};
useEffect(() => { useEffect(() => {
setTimeout(() => { setTimeout(() => {
fetchCourses(); fetchCourses();
getNewestTimetable(); getNewestTimetable();
getUsers();
}, 200); }, 200);
}, []); }, []);
return ( return (
<coursesContext.Provider <coursesContext.Provider
value={{ value={{
users,
courses, courses,
basket, basket,
hoveredGroup, hoveredGroup,

View File

@ -1,4 +1,4 @@
import React, { useState, createContext, useEffect, ReactNode } from 'react'; import React, { useState, createContext, useEffect, ReactNode, useRef } from 'react';
import { User } from '../types'; import { User } from '../types';
import { axiosInstance } from '../utils/axiosInstance'; import { axiosInstance } from '../utils/axiosInstance';
@ -17,20 +17,16 @@ export const UsersProvider = ({ children }: UsersProviderProps) => {
const getUsers = async () => { const getUsers = async () => {
try { try {
const { data } = await axiosInstance.get<Array<User>>( const {data}= await axiosInstance.get<Array<User>>(`${process.env.REACT_APP_API_URL}/api/v1/users/student/search?query=`);
`${process.env.REACT_APP_API_URL}/api/v1/Users/student/search?query=`,
);
console.log(data);
setUsers(data); setUsers(data);
console.log(data);
} catch(e){ } catch(e){
console.log(e); console.log(e);
} }
}; };
useEffect(() => { useEffect(() => {
setTimeout(() => {
getUsers(); getUsers();
}, 200);
}, []); }, []);
return ( return (

View File

@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
import { App } from './components/App'; import { App } from './components/App';
import { CASProvider } from './contexts/CASProvider'; import { CASProvider } from './contexts/CASProvider';
import { CoursesProvider } from './contexts/CoursesProvider'; import { CoursesProvider } from './contexts/CoursesProvider';
import { UsersProvider } from './contexts/UsersProvider';
import { GlobalStyles } from './styles/GlobalStyles'; import { GlobalStyles } from './styles/GlobalStyles';
import { SnackbarProvider } from 'notistack'; import { SnackbarProvider } from 'notistack';
@ -16,10 +17,12 @@ ReactDOM.render(
}} }}
> >
<CASProvider> <CASProvider>
<UsersProvider>
<CoursesProvider> <CoursesProvider>
<GlobalStyles /> <GlobalStyles />
<App /> <App />
</CoursesProvider> </CoursesProvider>
</UsersProvider>
</CASProvider> </CASProvider>
</SnackbarProvider> </SnackbarProvider>
</>, </>,