switched to yarn:

src/components/App.tsx

@@ -1,6 +1,5 @@
-import React, { useState, useContext } from 'react';
+import React, { useState } from 'react';
 import Topbar from './Topbar';
-import {Admin} from './Admin';
 import { Transfer } from './Transfer';
 import { Scheduler } from './Scheduler';
 import { Rightbar } from './Rightbar';
@@ -9,9 +8,9 @@ import styled from 'styled-components';
 const Wrapper = styled.div`
   display: flex;
   height: calc(100vh - 80px);
-  background-color: #ECEEF4;
-  padding-top:20px;
-  padding-bottom:20px;
+  background-color: #eceef4;
+  padding-top: 20px;
+  padding-bottom: 20px;
 `;
 
 export const App = () => {

src/components/Dropdown.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useContext, useEffect, MouseEvent } from 'react';
+import React, { useState, useContext, useEffect, MouseEvent, useMemo } from 'react';
 import { coursesContext } from '../contexts/CoursesProvider';
 import { Course } from '../types';
 import styled from 'styled-components';
@@ -47,9 +47,8 @@ interface DropdownProps {
 }
 
 export const Dropdown = ({ open, input, handleCloseDropdown }: DropdownProps) => {
-  const { courses, basket, addCourseToBasket } = useContext(coursesContext)!;
-  const basketNames = basket.map(({ name }) => name.trim());
-
+  const { courses, selectBasketNames, addCourseToBasket } = useContext(coursesContext)!;
+  const basketNames = useMemo(() => selectBasketNames(), [selectBasketNames]);
   const [filteredCourses, setFilteredCourses] = useState<Array<Course>>([]);
 
   const onCourseClick = (event: MouseEvent) => {
@@ -79,7 +78,7 @@ export const Dropdown = ({ open, input, handleCloseDropdown }: DropdownProps) =>
       setFilteredCourses(filteredCourses);
     };
     filterCourses(input);
-  }, [open, input, basket]);
+  }, [basketNames, courses, input]);
 
   return (
     <DropdownContainer>

src/components/Topbar.tsx

@@ -1,4 +1,4 @@
-import React, { useState, MouseEvent, ChangeEvent, useEffect, useRef } from 'react';
+import React, { useState, MouseEvent, ChangeEvent, useEffect, useCallback } from 'react';
 import { ReactComponent as Close } from '../assets/close.svg';
 import ProfileIcon from '../assets/account.svg';
 import { Profile } from './Profile';
@@ -119,14 +119,11 @@ export default function ({ handleTransfer }: TopbarProps) {
 
   const handleCloseProfile = () => setAnchorEl(null);
 
-  const handleClearInput = () => setClearInput(!clearInput);
+  const handleClearInput = useCallback(() => setClearInput((clearInput) => !clearInput), []);
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => setInput(event.target.value);
 
-  const handleShowDropdown = () => {
-    console.log('show dropdown');
-    setOpen(true);
-  };
+  const handleShowDropdown = () => setOpen(true);
 
   const handleCloseDropdown = () => setOpen(false);
 
@@ -135,14 +132,7 @@ export default function ({ handleTransfer }: TopbarProps) {
       setInput('');
       handleClearInput();
     }
-  }, [clearInput]);
-
-  // useEffect(() => {
-  //   console.log('input changed');
-  //   if (!open) {
-  //     setOpen(true);
-  //   }
-  // }, [input]);
+  }, [clearInput, handleClearInput]);
 
   return (
     <Topbar>

src/contexts/CASProvider.tsx

@@ -18,27 +18,26 @@ export const CASProvider = ({ children }: CASProviderProps) => {
   const [user, setUser] = useState<User | undefined>(undefined);
   const [token, setToken] = useState<string | null>(null);
   useEffect(() => {
+    const login = async () => {
+      const urlParams = new URLSearchParams(window.location.search);
+      const ticket = urlParams.get('ticket');
+      if (!ticket) {
+        redirectToCASLoginService();
+      }
+      try {
+        if (!sessionStorage.getItem('userToken')) {
+          const { data: token } = await axiosInstance.get(`${process.env.REACT_APP_API_URL}/token?ticket=${ticket}`);
+          sessionStorage.setItem('userToken', token);
+        }
+        const token = sessionStorage.getItem('userToken');
+        setToken(token);
+      } catch (e) {
+        console.log(e);
+      }
+    };
     login();
   }, []);
 
-  const login = async () => {
-    const urlParams = new URLSearchParams(window.location.search);
-    const ticket = urlParams.get('ticket');
-    if (!ticket) {
-      redirectToCASLoginService();
-    }
-    try {
-      if (!sessionStorage.getItem('userToken')) {
-        const { data: token } = await axiosInstance.get(`${process.env.REACT_APP_API_URL}/token?ticket=${ticket}`);
-        sessionStorage.setItem('userToken', token);
-      }
-      const token = sessionStorage.getItem('userToken');
-      setToken(token);
-    } catch (e) {
-      console.log(e);
-    }
-  };
-
   function logout() {
     redirectToCASLogoutService();
   }

src/contexts/CoursesProvider.tsx

@@ -1,4 +1,4 @@
-import React, { useState, createContext, useEffect, ReactNode, useContext } from 'react';
+import React, { useState, createContext, useEffect, ReactNode } from 'react';
 import { Course, Group, Basket, GroupType, SchedulerEvent } from '../types';
 import { useSnackbar } from 'notistack';
 import { createClassTime } from '../utils';
@@ -120,7 +120,6 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
       );
       const basket = data === '' ? [] : data;
       setBasket(basket);
-      console.log('newest timetable: ', basket);
     } catch (e) {
       console.log(e);
     }
@@ -132,7 +131,6 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
         `${process.env.REACT_APP_API_URL}/api/v1/courses/getCoursesWithGroups`,
       );
       const sortedCourses = courses.sort((a, b) => (a.name > b.name ? 1 : -1));
-      console.log('courses: ', courses);
       setCourses(sortedCourses);
     } catch (e) {
       console.log(e);