topbar and dropdown fix

src/components/Dropdown.tsx

@@ -6,7 +6,7 @@ import styled from 'styled-components';
 const DropdownContainer = styled.div`
   position: relative;
   z-index: 99999999;
-  max-height: 420px;
+  max-height: 396px;
   border-radius: 3px;
   overflow-y: auto;
   box-shadow: 0.05em 0.2em 0.6em rgba(0, 0, 0, 0.2);
@@ -31,7 +31,7 @@ const CourseContainer = styled.div`
   padding: 5px;
   padding-left: 20px;
   background-color: #f2f4f7;
-  font-size: 18px;
+  font-size: 16px;
   font-weight: 500;
   scroll-snap-align: end;
   :hover {
@@ -47,7 +47,6 @@ interface DropdownProps {
 }
 
 export const Dropdown = ({ open, input, handleCloseDropdown }: DropdownProps) => {
-  
   const { courses, basket, addCourseToBasket } = useContext(coursesContext)!;
   const basketNames = basket.map(({ name }) => name.trim());
 

src/components/Topbar.tsx

@@ -1,4 +1,4 @@
-import React, { useState, MouseEvent, ChangeEvent, useEffect } from 'react';
+import React, { useState, MouseEvent, ChangeEvent, useEffect, useRef } from 'react';
 import { ReactComponent as Close } from '../assets/close.svg';
 import ProfileIcon from '../assets/account.svg';
 import { Profile } from './Profile';
@@ -9,7 +9,7 @@ import styled from 'styled-components/macro';
 import ClickAwayListener from 'react-click-away-listener';
 
 const Topbar = styled.div`
-  background-color: #E3E5ED;
+  background-color: #e3e5ed;
   height: 80px;
   padding: 5px;
   font-size: 24px;
@@ -36,9 +36,9 @@ const Logo = styled.img`
 `;
 
 const Text = styled.div`
- margin-left: 10px;
- font-size: 1.4rem;
- user-select: none;
+  margin-left: 10px;
+  font-size: 1.4rem;
+  user-select: none;
   @media only screen and (max-width: 670px) {
     display: none;
   }
@@ -59,8 +59,9 @@ const InputWrapper = styled.div`
 `;
 
 const Input = styled.input`
+  font-family: 'Roboto', sans-serif;
+  font-size: 18px;
   background-color: #f1f2f5;
-  font-size: 20px;
   height: 40px;
   width: 100%;
   border: none;
@@ -116,22 +117,33 @@ export default function ({ handleTransfer }: TopbarProps) {
 
   const handleProfile = (event: MouseEvent<HTMLImageElement>) => setAnchorEl(event.currentTarget);
 
-  const handleClose = () => setAnchorEl(null);
+  const handleCloseProfile = () => setAnchorEl(null);
 
   const handleClearInput = () => setClearInput(!clearInput);
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => setInput(event.target.value);
 
-  const handleClick = () => setOpen(true);
+  const handleShowDropdown = () => {
+    console.log('show dropdown');
+    setOpen(true);
+  };
 
   const handleCloseDropdown = () => setOpen(false);
 
-  const handleClickAway = () => setOpen(false);
-
   useEffect(() => {
-    clearInput && (setInput(''), handleClearInput());
+    if (clearInput) {
+      setInput('');
+      handleClearInput();
+    }
   }, [clearInput]);
 
+  // useEffect(() => {
+  //   console.log('input changed');
+  //   if (!open) {
+  //     setOpen(true);
+  //   }
+  // }, [input]);
+
   return (
     <Topbar>
       <LogoWrapper>
@@ -139,9 +151,17 @@ export default function ({ handleTransfer }: TopbarProps) {
         <Text> plan na plan </Text>
       </LogoWrapper>
       <FlexboxColumn>
-        <ClickAwayListener onClickAway={handleClickAway}>
+        <ClickAwayListener onClickAway={handleCloseDropdown}>
           <InputWrapper>
-            <Input placeholder="Wyszukaj przedmiot..." onChange={handleChange} onClick={handleClick} value={input} />
+            <Input
+              placeholder="Wyszukaj przedmiot..."
+              onChange={handleChange}
+              value={input}
+              onFocus={() => {
+                console.log('i am in on focus');
+                handleShowDropdown();
+              }}
+            />
             <CloseIcon onClick={handleClearInput} />
           </InputWrapper>
           <Dropdown open={open} input={input} handleCloseDropdown={handleCloseDropdown} />
@@ -153,7 +173,7 @@ export default function ({ handleTransfer }: TopbarProps) {
         {/* <Icon alt="transfer" src={Transfer} onClick={handleTransfer} /> */}
         <Icon alt="change_language" src={isPolish ? EnglishIcon : PolishIcon} onClick={onLangChange} />
         <Icon alt="profile" src={ProfileIcon} onClick={handleProfile} />
-        <Profile anchorEl={anchorEl} handleClose={handleClose} />
+        <Profile anchorEl={anchorEl} handleClose={handleCloseProfile} />
       </IconWrapper>
     </Topbar>
   );

src/contexts/CoursesProvider.tsx

@@ -120,17 +120,19 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
       );
       const basket = data === '' ? [] : data;
       setBasket(basket);
+      console.log('newest timetable: ', basket);
     } catch (e) {
       console.log(e);
     }
   };
 
-  const fetchClasses = async () => {
+  const fetchCourses = async () => {
     try {
       const { data: courses } = await axiosInstance.get<Array<Course>>(
         `${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); 
@@ -138,7 +140,7 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
   };
 
   useEffect(() => {
-    fetchClasses();
+    fetchCourses();
     getNewestTimetable();
   }, []);