searching users

src/components/Dropdown.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useContext, useEffect, MouseEvent, useMemo } from 'react';
 import { coursesContext } from '../contexts/CoursesProvider';
-import { Course } from '../types';
+import { Course, User } from '../types';
 import styled from 'styled-components';
 
 const DropdownContainer = styled.div`
@@ -48,9 +48,10 @@ interface DropdownProps {
 }
 
 export const Dropdown = ({ open, input, handleCloseDropdown }: DropdownProps) => {
-  const { courses, selectBasketNames, addCourseToBasket } = useContext(coursesContext)!;
+  const { courses, users, selectBasketNames, addCourseToBasket } = useContext(coursesContext)!;
   const basketNames = useMemo(() => selectBasketNames(), [selectBasketNames]);
   const [filteredCourses, setFilteredCourses] = useState<Array<Course>>([]);
+  const [filteredUsers, setFilteredUsers] = useState<Array<User>>([]);
 
   const onCourseClick = (event: MouseEvent) => {
     const target = event.currentTarget;
@@ -81,15 +82,41 @@ export const Dropdown = ({ open, input, handleCloseDropdown }: DropdownProps) =>
     filterCourses(input);
   }, [basketNames, courses, input]);
 
+  useEffect(() => {
+    const filterUsers = (input: string) => {
+      const filteredUsers = users.filter(
+        ({ name,surname }) =>
+          (name+surname)
+            .toLowerCase()
+            .normalize('NFD')
+            .replace(/[\u0300-\u036f]/g, '')
+            .includes(
+              input
+                .toLowerCase()
+                .normalize('NFD')
+                .replace(/[\u0300-\u036f]/g, ''),
+            ),
+      );
+      setFilteredUsers(filteredUsers);
+    };
+    filterUsers(input);
+  }, [users, input]);
+
   return (
     <DropdownContainer>
       {open && (
         <>
+          {filteredUsers.map(({ name,surname, id }, index) => (
+            <CourseContainer key={index} id={id.toString()}>
+              <p>{name} {surname} </p>
+            </CourseContainer>
+          ))}
+{/* 
           {filteredCourses.map(({ name, id }, index) => (
             <CourseContainer key={index} id={id.toString()} onClick={onCourseClick}>
               <p>{name} </p>
             </CourseContainer>
-          ))}
+          ))} */}
         </>
       )}
     </DropdownContainer>

src/components/Topbar.tsx

@@ -159,7 +159,7 @@ export default function ({ handleTransfer }: TopbarProps) {
       <FlexboxColumn>
         <ClickAwayListener onClickAway={handleCloseDropdown}>
           <Flexbox>
-            {/* <SelectMenu /> */}
+            <SelectMenu />
 
             <InputWrapper>
               {/* <SelectSearch value={value} onChange={Change}>

src/contexts/CoursesProvider.tsx

@@ -1,5 +1,5 @@
 import React, { useState, createContext, useEffect, ReactNode } from 'react';
-import { Course, Group, Basket, GroupType, SchedulerEvent } from '../types';
+import { Course, Group, Basket, GroupType, SchedulerEvent,User } from '../types';
 import { useSnackbar } from 'notistack';
 import { createClassTime } from '../utils';
 import { axiosInstance } from '../utils/axiosInstance';
@@ -15,6 +15,7 @@ const StyledCloseIcon = styled(CloseIcon)`
 `;
 
 interface CourseContext {
+  users: Array<User>;
   courses: Array<Course>;
   basket: Array<Basket>;
   hoveredGroup: Group | undefined | null;
@@ -41,6 +42,7 @@ 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 = () => {
@@ -177,16 +179,28 @@ 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

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

src/types/index.ts

@@ -28,8 +28,10 @@ export interface Course {
 }
 
 export interface User {
-  name?: string;
-  surname?: string;
+  email: string;
+  id: number;
+  name: string;
+  surname: string;
 }
 
 export interface SchedulerEvent {