remove window size variable used for size control

src/components/SearchBar.tsx

@@ -1,5 +1,5 @@
 import { Search, SearchStats, SetCollections } from 'pages/gallery';
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import styled from 'styled-components';
 import AsyncSelect from 'react-select/async';
 import { components } from 'react-select';
@@ -19,38 +19,37 @@ import DateIcon from './icons/DateIcon';
 import SearchIcon from './icons/SearchIcon';
 import CrossIcon from './icons/CrossIcon';
 
-const Wrapper = styled.div<{ width: number; isDisabled: boolean }>`
+const Wrapper = styled.div<{ isDisabled: boolean; isOpen: boolean }>`
     position: fixed;
-    z-index: 1000;
     top: 0;
-    left: ${(props) => `max(0px, 50% - min(360px,${props.width / 2}px))`};
+    z-index: 1000;
+    display: ${({ isOpen }) => (isOpen ? 'flex' : 'none')};
     width: 100%;
-    max-width: 720px;
+    background: #111;
+    @media (min-width: 625px) {
         display: flex;
+        width: calc(100vw - 140px);
+        margin: 0 70px;
+    }
     align-items: center;
-    justify-content: center;
-    padding: 0 5%;
-    background-color: #111;
-    color: #fff;
     min-height: 64px;
     transition: opacity 1s ease;
     opacity: ${(props) => (props.isDisabled ? 0 : 1)};
     margin-bottom: 10px;
 `;
 
-const SearchButton = styled.div<{ isDisabled: boolean }>`
+const SearchButton = styled.div<{ isOpen: boolean }>`
-    top: 1px;
+    display: none;
-    z-index: 100;
+    @media (max-width: 624px) {
+        display: ${({ isOpen }) => (!isOpen ? 'flex' : 'none')};
         right: 80px;
-    color: #fff;
         cursor: pointer;
-    transition: opacity 1s ease;
-    opacity: ${(props) => (props.isDisabled ? 0 : 1)};
-    min-height: 64px;
         position: fixed;
-    display: flex;
+        top: 0;
+        z-index: 1000;
         align-items: center;
-    justify-content: center;
+        min-height: 64px;
+    }
 `;
 
 const SearchStatsContainer = styled.div`
@@ -61,6 +60,14 @@ const SearchStatsContainer = styled.div`
     margin-bottom: 8px;
 `;
 
+const SearchInput = styled.div`
+    width: 100%;
+    display: flex;
+    align-items: center;
+    max-width: 484px;
+    margin: auto;
+`;
+
 export enum SuggestionType {
     DATE,
     LOCATION,
@@ -86,7 +93,6 @@ interface Props {
     searchStats: SearchStats;
 }
 export default function SearchBar(props: Props) {
-    const [windowWidth, setWindowWidth] = useState(window.innerWidth);
     const selectRef = useRef(null);
     useEffect(() => {
         if (props.isOpen) {
@@ -96,11 +102,6 @@ export default function SearchBar(props: Props) {
         }
     }, [props.isOpen]);
 
-    useEffect(() => {
-        window.addEventListener('resize', () =>
-            setWindowWidth(window.innerWidth)
-        );
-    });
     // = =========================
     // Functionality
     // = =========================
@@ -273,8 +274,8 @@ export default function SearchBar(props: Props) {
                     {constants.SEARCH_STATS(props.searchStats)}
                 </SearchStatsContainer>
             )}
-            {windowWidth > 1000 || props.isOpen ? (
+            <Wrapper isDisabled={props.isFirstFetch} isOpen={props.isOpen}>
-                <Wrapper isDisabled={props.isFirstFetch} width={windowWidth}>
+                <SearchInput>
                     <div
                         style={{
                             flex: 1,
@@ -304,14 +305,13 @@ export default function SearchBar(props: Props) {
                             </div>
                         )}
                     </div>
+                </SearchInput>
             </Wrapper>
-            ) : (
             <SearchButton
-                    isDisabled={props.isFirstFetch}
+                isOpen={props.isOpen}
                 onClick={() => !props.isFirstFetch && props.setOpen(true)}>
                 <SearchIcon />
             </SearchButton>
-            )}
         </>
     );
 }