new provider + select changes

src/components/Dropdown.tsx

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

src/components/SelectMenu.tsx

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

src/components/Topbar.tsx

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

src/contexts/CoursesProvider.tsx

@@ -1,5 +1,5 @@
 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 { createClassTime } from '../utils';
 import { axiosInstance } from '../utils/axiosInstance';
@@ -15,7 +15,6 @@ const StyledCloseIcon = styled(CloseIcon)`
 `;
 
 interface CourseContext {
-  users: Array<User>;
   courses: Array<Course>;
   basket: Array<Basket>;
   hoveredGroup: Group | undefined | null;
@@ -42,7 +41,6 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
 
   //fetch courses with groups
   const [courses, setCourses] = useState<Array<Course>>([]);
-  const [users, setUsers] = useState<Array<User>>([]);
   const [basket, setBasket] = useState<Array<Basket>>([]);
   const [hoveredGroup, setHoveredGroup] = useState<Group | undefined | null>(null);
   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(() => {
     setTimeout(() => {
       fetchCourses();
       getNewestTimetable();
-      getUsers();
     }, 200);
   }, []);
 
   return (
     <coursesContext.Provider
       value={{
-        users,
         courses,
         basket,
         hoveredGroup,

src/contexts/UsersProvider.tsx

@@ -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 { axiosInstance } from '../utils/axiosInstance';
 
@@ -14,23 +14,19 @@ interface UsersProviderProps {
 
 export const UsersProvider = ({ children }: UsersProviderProps) => {
   const [users, setUsers] = useState<Array<User>>([]);
-
+  
   const getUsers = async () => {
     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);
-    } catch (e) {
+      console.log(data);
+    } catch(e){
       console.log(e);
     }
   };
 
   useEffect(() => {
-    setTimeout(() => {
       getUsers();
-    }, 200);
   }, []);
 
   return (

src/index.tsx

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