topbar working correctly

package-lock.json

@@ -10580,6 +10580,11 @@
         "whatwg-fetch": "^3.0.0"
       }
     },
+    "react-click-away-listener": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/react-click-away-listener/-/react-click-away-listener-1.4.3.tgz",
+      "integrity": "sha512-c7d6mfZuHu/rIdnEHnovX/QsScQXlqtdAynSnZUyyH+6kPOAyB40k2c5br56c/qp4KBkHD0JQV4C7rVuAmroMw=="
+    },
     "react-dev-utils": {
       "version": "10.2.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-10.2.1.tgz",

package.json

@@ -11,6 +11,7 @@
     "axios": "^0.19.2",
     "notistack": "^1.0.1",
     "react": "^16.13.1",
+    "react-click-away-listener": "^1.4.3",
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.1",
     "styled-components": "^5.1.1"

src/components/Dropdown.tsx

@@ -1,19 +1,19 @@
-import React, { useState, useContext, useEffect, MouseEvent, ChangeEvent } from 'react';
+import React, { useState, useContext, useEffect, MouseEvent, forwardRef } from 'react';
-import ClickAwayListener from '@material-ui/core/ClickAwayListener';
 import { coursesContext } from '../contexts/CoursesProvider';
 import { Course } from '../types';
 import styled from 'styled-components';
 
+const WrapperIchuj = styled.div`
+  max-width: 1200px;
+`;
+
 const DropdownContainer = styled.div`
-    position: absolute;
+  position: relative;
-    left: 280px;
+  z-index: 99999999;
-    top: 65px;
-    z-index: 99;
-    min-width: 70%;
   max-height: 420px;
   border-radius: 3px;
   overflow-y: auto;
-    box-shadow: 0.05em 0.2em 0.6em rgba(0,0,0,.2);
+  box-shadow: 0.05em 0.2em 0.6em rgba(0, 0, 0, 0.2);
   scroll-snap-type: y mandatory;
   scroll-behavior: smooth;
   ::-webkit-scrollbar-track {
@@ -39,38 +39,35 @@ const CourseContainer = styled.div`
   font-weight: 500;
   scroll-snap-align: end;
   :hover {
-    background-color: #ECEEF4;
+    background-color: #eceef4;
     cursor: pointer;
   }
 `;
 
-const Input = styled.input`
-    background-color: #F1F2F5;
-     font-size: 20px;
-     height: 100%;
-     width: 100%; 
-     border: none;
-     &:focus {
-      outline: none;
-     }
-     
-`
-
 interface DropdownProps {
-  clearInput: boolean;
+  open: boolean;
-  handleClearInput: () => void;
+  input: string;
+  handleCloseDropdown: () => void;
 }
 
-export const Dropdown = ({ clearInput, handleClearInput }: DropdownProps) => {
+export const Dropdown = forwardRef(({ open, input, handleCloseDropdown }: DropdownProps, ref: any) => {
-
-  const [open, setOpen] = useState(false);
-  const [input, setInput] = useState('');
-
   //courses - choosenCourses
   const [filteredCourses, setFilteredCourses] = useState<Array<Course>>([]);
 
   const { courses, basket, addToBasket } = useContext(coursesContext)!;
 
+  useEffect(() => {
+    console.log('wut');
+  }, [open, input, handleCloseDropdown]);
+
+  useEffect(() => {
+    console.log('input is: ', input);
+  }, [input]);
+
+  useEffect(() => {
+    console.log('is open: ', open);
+  }, [open]);
+
   useEffect(() => {
     const filterCourses = (input: string) => {
       const choosenCoursesNames = basket.map(({ name }) => name.trim());
@@ -90,17 +87,7 @@ export const Dropdown = ({ clearInput, handleClearInput }: DropdownProps) => {
       setFilteredCourses(filteredCourses);
     };
     filterCourses(input);
-  }, [input, open, basket]);
+  }, [input, basket]);
-
-  useEffect(() => {
-    clearInput && (setInput(''), handleClearInput());
-  }, [clearInput]);
-
-  const handleChange = (event: ChangeEvent<HTMLInputElement>) => setInput(event.target.value);
-
-  const handleClick = () => setOpen(true);
-
-  const handleClickAway = () => setOpen(false);
 
   const onCourseClick = async (event: MouseEvent) => {
     const target = event.currentTarget;
@@ -109,19 +96,12 @@ export const Dropdown = ({ clearInput, handleClearInput }: DropdownProps) => {
       console.log('added course is');
       console.log(course);
       addToBasket(course);
-      setOpen(false);
+      handleCloseDropdown();
     }
   };
 
   return (
-    // <ClickAwayListener onClickAway={handleClickAway}>
+    <WrapperIchuj>
-      <>
-        <Input
-          placeholder="Wyszukaj przedmiot..."
-          onChange={handleChange}
-          onClick={handleClick}
-          value={input}
-        />
       {open && (
         <DropdownContainer>
           {filteredCourses.map(({ name, id }, index) => (
@@ -131,7 +111,6 @@ export const Dropdown = ({ clearInput, handleClearInput }: DropdownProps) => {
           ))}
         </DropdownContainer>
       )}
-      </>
+    </WrapperIchuj>
-    // </ClickAwayListener>
   );
-};
+});

src/components/Topbar.tsx

@@ -1,4 +1,4 @@
-import React, { useState, MouseEvent } from 'react';
+import React, { useState, MouseEvent, ChangeEvent, useEffect } from 'react';
 import Transfer from '../assets/transfer.png';
 import Search from '../assets/search.svg';
 import CloseIcon from '../assets/close.svg';
@@ -8,11 +8,10 @@ import { Dropdown } from './Dropdown';
 import PolishIcon from '../assets/poland.svg';
 import EnglishIcon from '../assets/united-kingdom.svg';
 import styled from 'styled-components/macro';
-
+import ClickAwayListener from 'react-click-away-listener';
-
 
 const Topbar = styled.div`
-  background-color:#ECEEF4;
+  background-color: #eceef4;
   height: 80px;
   padding: 5px;
   font-size: 24px;
@@ -45,18 +44,32 @@ const Text = styled.div`
   }
 `;
 
+const FlexboxColumn = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex-grow: 9;
+  max-width: 1200px;
+`;
+
 const InputWrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  margin: 10px;
+  margin-top: 15px;
-  flex-grow: 9;
   background-color: #f2f4f7;
-  border-radius: 5px;
+  border-radius: 6px;
 `;
 
-const Input = styled.div`
+const Input = styled.input`
+  background-color: #f1f2f5;
+  font-size: 20px;
+  height: 40px;
   width: 100%;
+  margin-left: 5px;
+  border: none;
+  &:focus {
+    outline: none;
+  }
 `;
 
 const InputIcon = styled.img`
@@ -82,12 +95,11 @@ const Icon = styled.img`
   }
 `;
 
-
-
 const VerticalLine = styled.div`
   border-left: 1px solid black;
   height: 30px;
-`
+`;
+
 
 
 interface TopbarProps {
@@ -98,6 +110,8 @@ export default function ({ handleTransfer }: TopbarProps) {
   const [clearInput, setClearInput] = useState(false);
   const [isPolish, setIsPolish] = useState(false);
   const [anchorEl, setAnchorEl] = useState<HTMLImageElement | null>(null);
+  const [open, setOpen] = useState(false);
+  const [input, setInput] = useState('');
 
   const onLangChange = () => setIsPolish(!isPolish);
 
@@ -107,20 +121,36 @@ export default function ({ handleTransfer }: TopbarProps) {
 
   const handleClearInput = () => setClearInput(!clearInput);
 
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => setInput(event.target.value);
+
+  const handleClick = () => setOpen(true);
+
+  const handleCloseDropdown = () => setOpen(false);
+
+  const handleClickAway = () => setOpen(false);
+
+  useEffect(() => {
+    clearInput && (setInput(''), handleClearInput());
+  }, [clearInput]);
+
   return (
     <Topbar>
       <LogoWrapper>
         <Logo alt="logo" src="https://plannaplan.pl/img/logo.svg" />
         <Text> plan na plan </Text>
       </LogoWrapper>
+      <FlexboxColumn>
+        <ClickAwayListener onClickAway={handleClickAway}>
           <InputWrapper>
-        <Input>
+            <Input placeholder="Wyszukaj przedmiot..." onChange={handleChange} onClick={handleClick} value={input} />
-          <Dropdown clearInput={clearInput} handleClearInput={handleClearInput} />
-        </Input>
             <InputIcon alt="close" src={CloseIcon} onClick={handleClearInput} />
             <VerticalLine />
             <InputIcon alt="search" src={Search} />
           </InputWrapper>
+          <Dropdown open={open} input={input} handleCloseDropdown={handleCloseDropdown} />
+        </ClickAwayListener>
+      </FlexboxColumn>
+
       <IconWrapper>
         {/* <Icon alt="transfer" src={Transfer} onClick={handleTransfer} /> */}
         <Icon alt="change_language" src={isPolish ? EnglishIcon : PolishIcon} onClick={onLangChange} />