From cc919330eda769c0cfe82403df6977e48505ebd0 Mon Sep 17 00:00:00 2001 From: Jeffrey Carl Faden Date: Thu, 9 Nov 2023 15:18:45 -0800 Subject: [PATCH 1/2] Upgrade react-geosuggest, add missing popover styling --- package.json | 2 +- .../RestaurantAddForm/RestaurantAddForm.tsx | 28 ++++++++++++++--- .../RestaurantAddFormContainer.ts | 9 ++---- .../TeamGeosuggest/TeamGeosuggest.tsx | 4 +-- src/styles/globalCss.scss | 3 +- typings/react-geosuggest.d.ts | 4 +-- yarn.lock | 30 +++++++++---------- 7 files changed, 48 insertions(+), 32 deletions(-) diff --git a/package.json b/package.json index c233c03b7..4896a30dc 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "@reduxjs/toolkit": "^1.9.2", "@sendgrid/helpers": "^7.7.0", "@sendgrid/mail": "^7.7.0", + "@ubilabs/react-geosuggest": "^2.16.1", "bcrypt": "^5.1.0", "body-parser": "^1.18.3", "bootstrap": "^5.2.3", @@ -59,7 +60,6 @@ "react-bootstrap": "^2.7.0", "react-dom": "npm:@preact/compat@*", "react-flip-toolkit": "^7.0.17", - "react-geosuggest": "^2.14.1", "react-icons": "^4.7.1", "react-redux": "^8.0.5", "react-scroll": "^1.8.9", diff --git a/src/components/RestaurantAddForm/RestaurantAddForm.tsx b/src/components/RestaurantAddForm/RestaurantAddForm.tsx index 69142cded..9c5cca239 100644 --- a/src/components/RestaurantAddForm/RestaurantAddForm.tsx +++ b/src/components/RestaurantAddForm/RestaurantAddForm.tsx @@ -1,7 +1,10 @@ /* eslint-disable max-classes-per-file */ import React, { Component, RefObject, Suspense, createRef, lazy } from "react"; -import GeosuggestClass, { GeosuggestProps, Suggest } from "react-geosuggest"; +import GeosuggestClass, { + GeosuggestProps, + Suggest, +} from "@ubilabs/react-geosuggest"; import withStyles from "isomorphic-style-loader/withStyles"; import canUseDOM from "../../helpers/canUseDOM"; import { LatLng } from "../../interfaces"; @@ -11,7 +14,7 @@ import GoogleMapsLoaderContext, { import s from "./RestaurantAddForm.scss"; const Geosuggest = lazy( - () => import(/* webpackChunkName: 'geosuggest' */ "react-geosuggest") + () => import(/* webpackChunkName: 'geosuggest' */ "@ubilabs/react-geosuggest") ); interface RestaurantAddFormProps @@ -25,7 +28,14 @@ interface RestaurantAddFormProps latLng: LatLng; } -class RestaurantAddForm extends Component { +interface RestaurantAddFormState { + value: string; +} + +class RestaurantAddForm extends Component< + RestaurantAddFormProps, + RestaurantAddFormState +> { static contextType = GoogleMapsLoaderContext; geocoder: google.maps.Geocoder; @@ -42,6 +52,10 @@ class RestaurantAddForm extends Component { this.geosuggest = createRef(); + this.state = { + value: "", + }; + if (canUseDOM) { const { loader } = context; loader?.load().then((google) => { @@ -64,8 +78,12 @@ class RestaurantAddForm extends Component { } }; + handleChange = (value: string) => { + this.setState({ value }); + }; + handleSuggestSelect = (suggestion: Suggest) => { - this.props.handleSuggestSelect(suggestion, this.geosuggest!.current!); + this.props.handleSuggestSelect(suggestion); this.geosuggest.current?.clear(); this.geosuggest.current?.focus(); }; @@ -95,9 +113,11 @@ class RestaurantAddForm extends Component { placeholder="Add places" onBlur={this.props.clearTempMarker} onActivateSuggest={this.getCoordsForMarker} + onChange={this.handleChange} onSuggestSelect={this.handleSuggestSelect} getSuggestLabel={this.props.getSuggestLabel} ref={this.geosuggest} + value={this.state.value} /> ) : null} diff --git a/src/components/RestaurantAddForm/RestaurantAddFormContainer.ts b/src/components/RestaurantAddForm/RestaurantAddFormContainer.ts index 74b9d1726..be1627808 100644 --- a/src/components/RestaurantAddForm/RestaurantAddFormContainer.ts +++ b/src/components/RestaurantAddForm/RestaurantAddFormContainer.ts @@ -1,4 +1,4 @@ -import Geosuggest, { Suggest } from "react-geosuggest"; +import Geosuggest, { Suggest } from "@ubilabs/react-geosuggest"; import { connect } from "react-redux"; import { scroller } from "react-scroll"; import { Dispatch, State } from "../../interfaces"; @@ -47,10 +47,7 @@ const mergeProps = ( ) => ({ ...stateProps, ...dispatchProps, - handleSuggestSelect: ( - suggestion: Suggest | undefined, - geosuggest: Geosuggest - ) => { + handleSuggestSelect: (suggestion: Suggest | undefined) => { if (suggestion) { let name = suggestion.label; let address = ""; @@ -70,8 +67,6 @@ const mergeProps = ( address = suggestion.gmaps.formatted_address; } suggestCache = {}; - geosuggest.update(""); - geosuggest.showSuggests(); const existingRestaurant = stateProps.restaurants.find( (r) => r.placeId === placeId ); diff --git a/src/components/TeamGeosuggest/TeamGeosuggest.tsx b/src/components/TeamGeosuggest/TeamGeosuggest.tsx index 1f2a506f0..eaa9f9006 100644 --- a/src/components/TeamGeosuggest/TeamGeosuggest.tsx +++ b/src/components/TeamGeosuggest/TeamGeosuggest.tsx @@ -1,5 +1,5 @@ import React, { Component, Suspense, lazy } from "react"; -import { Suggest } from "react-geosuggest"; +import { Suggest } from "@ubilabs/react-geosuggest"; import canUseDOM from "../../helpers/canUseDOM"; import { LatLng } from "../../interfaces"; import GoogleMapsLoaderContext, { @@ -7,7 +7,7 @@ import GoogleMapsLoaderContext, { } from "../GoogleMapsLoaderContext/GoogleMapsLoaderContext"; const Geosuggest = lazy( - () => import(/* webpackChunkName: 'geosuggest' */ "react-geosuggest") + () => import(/* webpackChunkName: 'geosuggest' */ "@ubilabs/react-geosuggest") ); export interface TeamGeosuggestProps { diff --git a/src/styles/globalCss.scss b/src/styles/globalCss.scss index 380c34fa7..e9a7cc838 100644 --- a/src/styles/globalCss.scss +++ b/src/styles/globalCss.scss @@ -1,6 +1,6 @@ /* stylelint-disable selector-class-pattern */ -@import "~react-geosuggest/module/geosuggest.css"; +@import "~@ubilabs/react-geosuggest/module/geosuggest.css"; @import "./variables"; @import "~bootstrap/scss/functions"; @import "~bootstrap/scss/variables"; @@ -19,6 +19,7 @@ @import "~bootstrap/scss/nav"; @import "~bootstrap/scss/list-group"; @import "~bootstrap/scss/modal"; +@import "~bootstrap/scss/popover"; @import "~bootstrap/scss/helpers/visually-hidden"; @import "~bootstrap/scss/utilities/api"; diff --git a/typings/react-geosuggest.d.ts b/typings/react-geosuggest.d.ts index d38096960..0e09f9ef4 100644 --- a/typings/react-geosuggest.d.ts +++ b/typings/react-geosuggest.d.ts @@ -1,6 +1,6 @@ -import "react-geosuggest"; +import "@ubilabs/react-geosuggest"; -declare module "react-geosuggest" { +declare module "@ubilabs/react-geosuggest" { export interface Suggest { description: string; place_id: string; diff --git a/yarn.lock b/yarn.lock index bc046a3f2..e5b929fd5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2959,6 +2959,19 @@ __metadata: languageName: node linkType: hard +"@ubilabs/react-geosuggest@npm:^2.16.1": + version: 2.16.1 + resolution: "@ubilabs/react-geosuggest@npm:2.16.1" + dependencies: + classnames: ^2.3.2 + lodash.debounce: ^4.0.6 + peerDependencies: + react: ^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 + react-dom: ^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 + checksum: 903d55fdfe8005104a96e8ea33a1963d21ad4527f61bbf973e1dc6d0863dd8da641dc37c82b3052e1efc5f876d48d3a40503015266e32c620b8dbd39163197f7 + languageName: node + linkType: hard + "@webassemblyjs/ast@npm:1.11.1": version: 1.11.1 resolution: "@webassemblyjs/ast@npm:1.11.1" @@ -4306,7 +4319,7 @@ __metadata: languageName: node linkType: hard -"classnames@npm:^2.2.6, classnames@npm:^2.3.1": +"classnames@npm:^2.2.6, classnames@npm:^2.3.1, classnames@npm:^2.3.2": version: 2.3.2 resolution: "classnames@npm:2.3.2" checksum: 2c62199789618d95545c872787137262e741f9db13328e216b093eea91c85ef2bfb152c1f9e63027204e2559a006a92eb74147d46c800a9f96297ae1d9f96f4e @@ -9274,6 +9287,7 @@ __metadata: "@types/webpack-env": ^1.18.0 "@typescript-eslint/eslint-plugin": ^5.59.1 "@typescript-eslint/parser": ^5.59.1 + "@ubilabs/react-geosuggest": ^2.16.1 autoprefixer: ^9.1.5 bcrypt: ^5.1.0 body-parser: ^1.18.3 @@ -9355,7 +9369,6 @@ __metadata: react-dom: "npm:@preact/compat@*" react-error-overlay: ^4.0.1 react-flip-toolkit: ^7.0.17 - react-geosuggest: ^2.14.1 react-icons: ^4.7.1 react-redux: ^8.0.5 react-refresh: ^0.14.0 @@ -11569,19 +11582,6 @@ __metadata: languageName: node linkType: hard -"react-geosuggest@npm:^2.14.1": - version: 2.14.1 - resolution: "react-geosuggest@npm:2.14.1" - dependencies: - classnames: ^2.2.6 - lodash.debounce: ^4.0.6 - peerDependencies: - react: ^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 - react-dom: ^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 - checksum: ce08966519dd1c7f2e4826588b91f809daf105819fdb8c8925333e0c0c4be07aa6db0a303b24c7d5d59e08f5c0aaeab437ca76fd8e3919813b1d781a72e1c66b - languageName: node - linkType: hard - "react-icons@npm:^4.7.1": version: 4.7.1 resolution: "react-icons@npm:4.7.1" From 3cc47b111be216d492f2002f660653e17330673a Mon Sep 17 00:00:00 2001 From: Jeffrey Carl Faden Date: Thu, 9 Nov 2023 15:48:31 -0800 Subject: [PATCH 2/2] Fix TS errors, remove extra db setup and build from CI --- .circleci/config.yml | 6 --- .../RestaurantAddForm/RestaurantAddForm.tsx | 39 +++++-------------- .../RestaurantAddFormContainer.ts | 7 ++-- .../TeamGeosuggest/TeamGeosuggest.tsx | 6 +-- 4 files changed, 16 insertions(+), 42 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index e7e70faa6..5a24b34a1 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -92,12 +92,6 @@ jobs: environment: MOCHA_FILE: junit/unit-test-results.xml - # set up for integration tests - # set up the database - - run: - name: database-setup - command: NODE_ENV=test npm run integration-setup - - run: name: setup /etc/hosts command: | diff --git a/src/components/RestaurantAddForm/RestaurantAddForm.tsx b/src/components/RestaurantAddForm/RestaurantAddForm.tsx index 9c5cca239..17124080d 100644 --- a/src/components/RestaurantAddForm/RestaurantAddForm.tsx +++ b/src/components/RestaurantAddForm/RestaurantAddForm.tsx @@ -1,10 +1,7 @@ /* eslint-disable max-classes-per-file */ import React, { Component, RefObject, Suspense, createRef, lazy } from "react"; -import GeosuggestClass, { - GeosuggestProps, - Suggest, -} from "@ubilabs/react-geosuggest"; +import GeosuggestClass, { Location, Suggest } from "@ubilabs/react-geosuggest"; import withStyles from "isomorphic-style-loader/withStyles"; import canUseDOM from "../../helpers/canUseDOM"; import { LatLng } from "../../interfaces"; @@ -17,25 +14,17 @@ const Geosuggest = lazy( () => import(/* webpackChunkName: 'geosuggest' */ "@ubilabs/react-geosuggest") ); -interface RestaurantAddFormProps - extends Pick { +interface RestaurantAddFormProps { createTempMarker: (result: google.maps.GeocoderResult) => void; clearTempMarker: () => void; - handleSuggestSelect: ( - suggestion: Suggest, - geosuggest: GeosuggestClass - ) => void; + getSuggestLabel: ( + suggest: google.maps.places.AutocompletePrediction + ) => string; + handleSuggestSelect: (suggestion?: Location) => void; latLng: LatLng; } -interface RestaurantAddFormState { - value: string; -} - -class RestaurantAddForm extends Component< - RestaurantAddFormProps, - RestaurantAddFormState -> { +class RestaurantAddForm extends Component { static contextType = GoogleMapsLoaderContext; geocoder: google.maps.Geocoder; @@ -52,10 +41,6 @@ class RestaurantAddForm extends Component< this.geosuggest = createRef(); - this.state = { - value: "", - }; - if (canUseDOM) { const { loader } = context; loader?.load().then((google) => { @@ -65,7 +50,7 @@ class RestaurantAddForm extends Component< } } - getCoordsForMarker = (suggest: Suggest) => { + getCoordsForMarker = (suggest: Suggest | null) => { if (suggest !== null) { if (this.geocoder === undefined) { this.geocoder = new this.maps.Geocoder(); @@ -78,11 +63,7 @@ class RestaurantAddForm extends Component< } }; - handleChange = (value: string) => { - this.setState({ value }); - }; - - handleSuggestSelect = (suggestion: Suggest) => { + handleSuggestSelect = (suggestion?: Location) => { this.props.handleSuggestSelect(suggestion); this.geosuggest.current?.clear(); this.geosuggest.current?.focus(); @@ -113,11 +94,9 @@ class RestaurantAddForm extends Component< placeholder="Add places" onBlur={this.props.clearTempMarker} onActivateSuggest={this.getCoordsForMarker} - onChange={this.handleChange} onSuggestSelect={this.handleSuggestSelect} getSuggestLabel={this.props.getSuggestLabel} ref={this.geosuggest} - value={this.state.value} /> ) : null} diff --git a/src/components/RestaurantAddForm/RestaurantAddFormContainer.ts b/src/components/RestaurantAddForm/RestaurantAddFormContainer.ts index be1627808..53b4069f8 100644 --- a/src/components/RestaurantAddForm/RestaurantAddFormContainer.ts +++ b/src/components/RestaurantAddForm/RestaurantAddFormContainer.ts @@ -1,4 +1,4 @@ -import Geosuggest, { Suggest } from "@ubilabs/react-geosuggest"; +import { Location, Suggest } from "@ubilabs/react-geosuggest"; import { connect } from "react-redux"; import { scroller } from "react-scroll"; import { Dispatch, State } from "../../interfaces"; @@ -47,7 +47,7 @@ const mergeProps = ( ) => ({ ...stateProps, ...dispatchProps, - handleSuggestSelect: (suggestion: Suggest | undefined) => { + handleSuggestSelect: (suggestion: Location | undefined) => { if (suggestion) { let name = suggestion.label; let address = ""; @@ -57,6 +57,7 @@ const mergeProps = ( } = suggestion; const isEstablishment = suggestion.gmaps && + suggestion.gmaps.types && suggestion.gmaps.types.indexOf("establishment") > -1; if (suggestCache[placeId] !== undefined && isEstablishment) { name = suggestCache[placeId]; @@ -64,7 +65,7 @@ const mergeProps = ( name = name.split(",")[0]; } if (suggestion.gmaps !== undefined) { - address = suggestion.gmaps.formatted_address; + address = suggestion.gmaps.formatted_address || ""; } suggestCache = {}; const existingRestaurant = stateProps.restaurants.find( diff --git a/src/components/TeamGeosuggest/TeamGeosuggest.tsx b/src/components/TeamGeosuggest/TeamGeosuggest.tsx index eaa9f9006..87fda4e4e 100644 --- a/src/components/TeamGeosuggest/TeamGeosuggest.tsx +++ b/src/components/TeamGeosuggest/TeamGeosuggest.tsx @@ -40,7 +40,7 @@ class TeamGeosuggest extends Component { } } - getCoordsForMarker = (suggest: Suggest) => { + getCoordsForMarker = (suggest: Suggest | null) => { if (suggest !== null) { if (this.geocoder === undefined) { this.geocoder = new this.maps.Geocoder(); @@ -58,8 +58,8 @@ class TeamGeosuggest extends Component { } }; - handleSuggestSelect = (suggestion: Suggest) => { - if (suggestion) { + handleSuggestSelect = (suggestion?: Suggest) => { + if (suggestion?.location) { this.props.setCenter(suggestion.location); } };