new provider + select changes
This commit is contained in:
parent
61b0a6f464
commit
c7dc37c827
@ -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>
|
||||||
|
@ -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);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
@ -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>
|
||||||
|
|
||||||
|
@ -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,
|
||||||
|
@ -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 (
|
||||||
|
@ -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>
|
||||||
</>,
|
</>,
|
||||||
|
Loading…
Reference in New Issue
Block a user