From 2a50aacea704a4631162c78392c8f08b54fc798a Mon Sep 17 00:00:00 2001 From: giovanniPepi Date: Mon, 10 Oct 2022 08:41:57 -0300 Subject: [PATCH] Move searchform to realtime module --- interfaces.ts | 7 +++- package-lock.json | 74 ++++++++++----------------------- package.json | 4 +- src/App.tsx | 42 +++---------------- src/components/RealTimeData.tsx | 42 ++++++++++++++++++- src/css/RealTimeData.css | 24 +++++++++++ src/index.css | 27 ------------ 7 files changed, 100 insertions(+), 120 deletions(-) diff --git a/interfaces.ts b/interfaces.ts index f455044..04889b0 100644 --- 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 index bea67e8..7659003 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,7 @@ "name": "weatherts", "version": "0.1.0", "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", @@ -23,7 +23,7 @@ "source-map": "^0.7.4" }, "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", @@ -37,7 +37,6 @@ "bundle-wizard": "^1.6.1", "compress-create-react-app": "^1.3.1", "eslint-config-prettier": "^8.5.0", - "react-tooltip": "^4.2.21", "styled-components": "^5.3.6", "typescript": "^4.8.4", "typescript-eslint": "^0.0.1-alpha.0" @@ -470,8 +469,9 @@ } }, "node_modules/@babel/helper-string-parser": { - "version": "7.18.10", - "license": "MIT", + "version": "7.19.4", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz", + "integrity": "sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==", "engines": { "node": ">=6.9.0" } @@ -578,8 +578,9 @@ } }, "node_modules/@babel/parser": { - "version": "7.19.3", - "license": "MIT", + "version": "7.19.4", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.19.4.tgz", + "integrity": "sha512-qpVT7gtuOLjWeDTKLkJ6sryqLliBaFpAtGeqw5cs5giLldvh+Ch0plqnUMKoVAUS6ZEueQQiZV+p5pxtPitEsA==", "bin": { "parser": "bin/babel-parser.js" }, @@ -1867,10 +1868,11 @@ "license": "MIT" }, "node_modules/@babel/types": { - "version": "7.19.3", - "license": "MIT", + "version": "7.19.4", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.19.4.tgz", + "integrity": "sha512-M5LK7nAeS6+9j7hAq+b3fQs+pNfUtTGq+yFFfHnauFA8zQtLRfmuipmsKDKKLuyG+wC8ABW43A153YNawNTEtw==", "dependencies": { - "@babel/helper-string-parser": "^7.18.10", + "@babel/helper-string-parser": "^7.19.4", "@babel/helper-validator-identifier": "^7.19.1", "to-fast-properties": "^2.0.0" }, @@ -15553,30 +15555,6 @@ "node": ">=12" } }, - "node_modules/react-tooltip": { - "version": "4.2.21", - "dev": true, - "license": "MIT", - "dependencies": { - "prop-types": "^15.7.2", - "uuid": "^7.0.3" - }, - "engines": { - "npm": ">=6.13" - }, - "peerDependencies": { - "react": ">=16.0.0", - "react-dom": ">=16.0.0" - } - }, - "node_modules/react-tooltip/node_modules/uuid": { - "version": "7.0.3", - "dev": true, - "license": "MIT", - "bin": { - "uuid": "dist/bin/uuid" - } - }, "node_modules/react-transition-group": { "version": "4.4.5", "license": "BSD-3-Clause", @@ -19176,7 +19154,9 @@ } }, "@babel/helper-string-parser": { - "version": "7.18.10" + "version": "7.19.4", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz", + "integrity": "sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==" }, "@babel/helper-validator-identifier": { "version": "7.19.1" @@ -19244,7 +19224,9 @@ } }, "@babel/parser": { - "version": "7.19.3" + "version": "7.19.4", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.19.4.tgz", + "integrity": "sha512-qpVT7gtuOLjWeDTKLkJ6sryqLliBaFpAtGeqw5cs5giLldvh+Ch0plqnUMKoVAUS6ZEueQQiZV+p5pxtPitEsA==" }, "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": { "version": "7.18.6", @@ -19959,9 +19941,11 @@ } }, "@babel/types": { - "version": "7.19.3", + "version": "7.19.4", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.19.4.tgz", + "integrity": "sha512-M5LK7nAeS6+9j7hAq+b3fQs+pNfUtTGq+yFFfHnauFA8zQtLRfmuipmsKDKKLuyG+wC8ABW43A153YNawNTEtw==", "requires": { - "@babel/helper-string-parser": "^7.18.10", + "@babel/helper-string-parser": "^7.19.4", "@babel/helper-validator-identifier": "^7.19.1", "to-fast-properties": "^2.0.0" } @@ -28358,20 +28342,6 @@ } } }, - "react-tooltip": { - "version": "4.2.21", - "dev": true, - "requires": { - "prop-types": "^15.7.2", - "uuid": "^7.0.3" - }, - "dependencies": { - "uuid": { - "version": "7.0.3", - "dev": true - } - } - }, "react-transition-group": { "version": "4.4.5", "requires": { diff --git a/package.json b/package.json index 7d02df0..94c5bac 100644 --- 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 index d69288c..9be81a5 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -258,43 +258,6 @@ const App: React.FC = () => { Daily - <> - {showSearchModal ? ( - <> - -
-
- { - input && input.focus(); - }} - /> - -
-
- - - ) : null} - ) : 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 index 0970470..218c399 100644 --- a/src/components/RealTimeData.tsx +++ b/src/components/RealTimeData.tsx @@ -50,7 +50,12 @@ const RealTimeData: React.FC = ({ isClosedSearch, setIsClosedSearch, setIsOpenedSearch, - minuterain + minuterain, + showSearchModal, + isOpenedSearch, + handleClick, + setShowSearchModal, + handleInputChange }) => { //state const [showAlertsModal, setShowAlertsModal] = useState(false); @@ -206,6 +211,41 @@ const RealTimeData: React.FC = ({
{`${minuterain.toFixed(2)} mm/h`}
*/} + <> + {showSearchModal ? ( + <> + +
+
+ { + input && input.focus(); + }} + /> + +
+
+ + + ) : null} + +
{apiData.current.humidity}
diff --git a/src/css/RealTimeData.css b/src/css/RealTimeData.css index 25397c4..05f43b2 100644 --- 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 index 0e10473..bb10ace 100644 --- 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;