Move searchform to realtime module

giovanniPepi · Oct 10, 2022 · 2a50aac · 2a50aac
1 parent fb67b30
commit 2a50aac
Show file tree

Hide file tree

Showing 7 changed files with 100 additions and 120 deletions.
diff --git a/interfaces.ts b/interfaces.ts
@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction } from "react";
+import React, { Dispatch, SetStateAction } from "react";
 
 interface IWeatherData {
   lat: number;
@@ -156,6 +156,11 @@ interface RealTimeDataProps {
   setIsClosedSearch: StateChangerB,
   setIsOpenedSearch: StateChangerB;
   minuterain: number;
+  showSearchModal: boolean;
+  setShowSearchModal: StateChangerB;
+  isOpenedSearch: boolean;
+  handleClick: any;
+  handleInputChange: any; 
 }
 
 interface AlertsModalProps {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@babel/parser": "^7.19.3",
+    "@babel/parser": "^7.19.4",
     "@material-ui/core": "^4.12.4",
     "@mdi/js": "^7.0.96",
     "@mdi/react": "^1.6.1",
@@ -43,7 +43,7 @@
     ]
   },
   "devDependencies": {
-    "@babel/types": "^7.19.3",
+    "@babel/types": "^7.19.4",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",

diff --git a/src/App.tsx b/src/App.tsx
@@ -258,43 +258,6 @@ const App: React.FC = () => {
                   Daily
                 </button>
               </div>
-              <>
-                {showSearchModal ? (
-                  <>
-                    <UnmountClosed
-                      isOpened={isOpenedSearch}
-                      theme={{
-                        collapse: 'searchTogglerClosed',
-                        content: 'searchTogglerOpened'
-                      }}
-                    >
-                      <div
-                        className="searchForm"
-                        style={{
-                          backgroundColor: modalUIColor,
-                          boxShadow: boxShadow
-                        }}
-                      >
-                        <form onSubmit={handleClick}>
-                          <input
-                            placeholder="Search a location..."
-                            onChange={handleInputChange}
-                            ref={(input) => {
-                              input && input.focus();
-                            }}
-                          />
-                          <button
-                            onClick={handleClick}
-                            className="searchBtn"
-                          >
-                            <Search svgColors={svgColors} />
-                          </button>
-                        </form>
-                      </div>
-                    </UnmountClosed>
-                  </>
-                ) : null}
-              </>
             </div>
           ) : null}
 
@@ -330,6 +293,11 @@ const App: React.FC = () => {
               setIsOpenedSearch={setIsOpenedSearch}
               isClosedSearch={isClosedSearch}
               minuterain={minuteRain}
+              showSearchModal={showSearchModal}
+              isOpenedSearch={isOpenedSearch}
+              handleClick={handleClick}
+              setShowSearchModal={setShowSearchModal}
+              handleInputChange={handleInputChange}
             />
           ) : null}
 

diff --git a/src/components/RealTimeData.tsx b/src/components/RealTimeData.tsx
@@ -50,7 +50,12 @@ const RealTimeData: React.FC<RealTimeDataProps> = ({
   isClosedSearch,
   setIsClosedSearch,
   setIsOpenedSearch,
-  minuterain
+  minuterain,
+  showSearchModal,
+  isOpenedSearch,
+  handleClick,
+  setShowSearchModal,
+  handleInputChange
 }) => {
   //state
   const [showAlertsModal, setShowAlertsModal] = useState<Boolean>(false);
@@ -206,6 +211,41 @@ const RealTimeData: React.FC<RealTimeDataProps> = ({
           <div>{`${minuterain.toFixed(2)} mm/h`}</div>
         </div> */}
 
+        <>
+          {showSearchModal ? (
+            <>
+              <UnmountClosed
+                isOpened={isOpenedSearch}
+                theme={{
+                  collapse: 'searchTogglerClosed',
+                  content: 'searchTogglerOpened'
+                }}
+              >
+                <div
+                  className="searchForm"
+                  style={{
+                    backgroundColor: modalUIColor,
+                    boxShadow: boxShadow
+                  }}
+                >
+                  <form onSubmit={handleClick}>
+                    <input
+                      placeholder="Search a location..."
+                      onChange={handleInputChange}
+                      ref={(input) => {
+                        input && input.focus();
+                      }}
+                    />
+                    <button onClick={handleClick} className="searchBtn">
+                      <Search svgColors={svgColors} />
+                    </button>
+                  </form>
+                </div>
+              </UnmountClosed>
+            </>
+          ) : null}
+        </>
+
         <div className="realTimeDataDiv">
           <Humidity svgColors={svgColors} />
           <div>{apiData.current.humidity}</div>

diff --git a/src/css/RealTimeData.css b/src/css/RealTimeData.css
@@ -170,6 +170,30 @@
 .twoDots {
   align-self: center;
 }
+.searchTogglerOpened,
+.searchTogglerClosed {
+  transition: height 700ms;
+}
+.searchForm {
+  background-color: var(--strongAccentColor);
+  backdrop-filter: var(--modalBlur);
+  padding: var(--btnPadding);
+  border-radius: var(--radius);
+  box-shadow: var(--boxShadow);
+}
+form {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 1.3rem;
+  border-radius: 0.5rem;
+  border: none;
+}
+.SearchSvg {
+  margin-top: 0.5rem;
+  width: 1.5rem;
+  height: 1.5rem;
+}
 @media screen and (max-width: 649px) {
   .realTimeData {
     margin-bottom: 1rem;

diff --git a/src/index.css b/src/index.css
@@ -103,10 +103,6 @@ input {
 .ReactCollapse--collapse {
   transition: height 500ms;
 }
-.searchTogglerOpened,
-.searchTogglerClosed {
-  transition: height 700ms;
-}
 
 /*SVGs*/
 .loadingSvg,
@@ -164,26 +160,6 @@ input {
   border-radius: var(--radius);
   box-shadow: var(--boxShadow);
 }
-.searchForm {
-  background-color: var(--strongAccentColor);
-  backdrop-filter: var(--modalBlur);
-  padding: var(--btnPadding);
-  border-radius: var(--radius);
-  box-shadow: var(--boxShadow);
-}
-form {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 1.3rem;
-  border-radius: 0.5rem;
-  border: none;
-}
-.SearchSvg {
-  margin-top: 0.5rem;
-  width: 1.5rem;
-  height: 1.5rem;
-}
 /*same for all modals*/
 .minutelyDataModal,
 .hourlyDataModal,
@@ -236,9 +212,6 @@ form {
     gap: 0.5rem;
     width: 100%;
   }
-  .searchForm {
-    width: 50vw;
-  }
   .PreviousSvg,
   .NextSvg {
     height: 2.2rem;