[GEOLOC AUTOCOMPLETION] React component and API routes #273

ArthurLeblanc · 2020-05-15T13:28:31Z

Add :

React hook that delivers geolocation autocomplete in all languages
Places details & translation service
Story book component for demo purpose

Example of the story book component with translation set to russian :

…slation

Clm-Roig · 2020-05-18T17:21:56Z

Ça m'a l'air bien dans l'ensemble.
Je vais pull sur ma machine d'ici demain au plus tard pour vérifier en détails.

Juste une remarque : faudrait bouger le code d'appel aux API externes dans des actions puis des reducers (flux de données Redux déjà en vigueur sur Grottocenter). Peut-être que ça peut être fait plus tard cependant.

Clm-Roig · 2020-05-18T17:33:59Z

Faudrait passer un coup de linter avant de merger et corriger toutes les erreurs et warnings 😉 (supprimer les console.log, mettre un id aux li, éviter les commentaires trop longs...)

Clm-Roig · 2020-05-18T17:36:54Z

Il manque react-select dans le package.json.
Pensez à le sauver avec npm install react-select -s

EDIT : il n'est pas utilisé en fait non si je ne dis pas de bêtises ?

ArthurLeblanc · 2020-05-18T17:44:18Z

Il manque react-select dans le package.json. Pensez à le sauver avec npm install react-select -s

Pour le coup on n'utilise pas react-select finalement, mais j'ai effectivement oublié d'enlever le import ! Il faut que je corrige ça.

Clm-Roig · 2020-05-18T17:54:07Z

assets/js/react/components/common/GeolocAutocompletion/PlacesDetail.js

+/* global google */
+const API_KEY = '';


Le global google c'est pas très propre... On doit en faire quoi concrètement ? D'où il sort ? 🙂

Il faudrait mettre en place un système de variable d'environnement pour la clé d'API : je ne crois pas qu'il y en ait sur l'application React pour le moment...

@Clm-Roig J'avais pas vu ton message mais je viens de dire la même chose sur Slack
Oui il faudrait
On à aucune autre global dans le front ? (Pour leaflet ou un autre service)
Je n'ai pas l'impression

assets/js/react/components/common/GeolocAutocompletion/PlacesDetail.js

assets/js/react/hooks/useLocationPredictions.js

assets/js/react/components/common/GeolocAutocompletion/index.jsx

assets/js/react/hooks/useLocationPredictions.js

assets/js/react/components/common/GeolocAutocompletion/PlacesDetail.js

maximenathan · 2020-05-20T13:01:05Z

assets/js/react/components/common/GeolocAutocompletion/index.jsx

+  const predictionsCity = useLocationPredictions(inputCity, 'city', undefined, countyBounds, 3);
+
+  // Triggered when an option is selected, changes the state and retrieves detail of the selected option to get bounds information.
+  const onSelect = (selected, type) => {


selected c'est une prediction non ?
Autant mettre le même terme qu'en bas. Ou alors renommer en selection
selected ça fait penser à un boolean

assets/js/react/components/common/GeolocAutocompletion/index.jsx

assets/js/react/hooks/useLocationPredictions.js

maximenathan · 2020-05-20T13:29:52Z

Je n'arrive pas à tester le composant dans storybook
J'ai des erreurs dans la console

Merci @ArthurLeblanc
Il faudrait donc rajouter le script js dans le fichier de config storybook

<script
type="text/javascript"
src=" https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places "></s
cript>

Et rajouter une api google dev pour grotto non ? @Clm-Roig si tu as une idée :)

maximenathan · 2020-05-20T13:34:34Z

Faudrait passer un coup de linter avant de merger et corriger toutes les erreurs et warnings (supprimer les console.log, mettre un id aux li, éviter les commentaires trop longs...)

Vous utilisez quoi comme IDE ?
J'imagine que vous n'avez pas configuré votre linter pour qu'il utilise la config du projet
Ou alors vous utilisez Emacs et c'est suicidaire :p

maximenathan

Modulo #273 (comment)
Pour moi on peut merge et refaire un test fonctionnel après

Le code est bien

Clm-Roig · 2022-03-12T10:01:10Z

config/routes.js

+    cors: {
+      allowOrigins: [
+        'http://beta.grottocenter.org/',
+        'http://beta2.grottocenter.org/',
+        'https://www.grottocenter.org/',
+      ],
+    },


A tester mais je pense que ce n'est plus nécessaire maintenant qu'on a séparé le front du back.

Clm-Roig · 2022-03-12T10:01:15Z

config/routes.js

+    cors: {
+      allowOrigins: [
+        'http://beta.grottocenter.org/',
+        'http://beta2.grottocenter.org/',
+        'https://www.grottocenter.org/',
+      ],
+    },
+  },


A tester mais je pense que ce n'est plus nécessaire maintenant qu'on a séparé le front du back.

urien · 2023-03-25T16:19:43Z

Closed by #1160

ArthurLeblanc added 3 commits May 15, 2020 03:01

tech(geo_autocomplete): add custom google places autocomplete hook

67ac512

tech(geo_autocomplete): add class to retreive places details and tran…

f87bb63

…slation

tech(geo_autocomplete): add geoloc autocomplete example to storybook

1593086

ArthurLeblanc requested review from maximenathan and Clm-Roig May 15, 2020 13:28

Clm-Roig reviewed May 18, 2020

View reviewed changes

maximenathan reviewed May 20, 2020

View reviewed changes

ArthurLeblanc added 6 commits May 28, 2020 16:12

improvement(predictionsHook): eslint used & code refactored

8be6f62

feat(placesApiConnector): add Google Places nodeJS client

67c30b4

chore(geolocAutocompletion): migrates Google Places client js => nodeJS

c069569

tech(placesDetailHook): change Places Detail class into hook

93e2b14

tech(sessionTokens): add session tokens for Google Places API

6421f58

improvement(geolocExample): code refactored & hooks implementation

ea8e773

maximenathan approved these changes Jun 22, 2020

View reviewed changes

Base automatically changed from rc to develop March 9, 2021 22:53

urien mentioned this pull request Nov 23, 2021

[ENTRANCE Create] Automatic retrieval of administrative information GrottoCenter/grottocenter-front#262

Closed

This was referenced Jan 13, 2022

[ENTRANCE] Special treatment for sensitive entrance GrottoCenter/grottocenter-front#299

Closed

[SENSITIVE ENTRANCE] Special treatment #706

Closed

Clm-Roig reviewed Mar 12, 2022

View reviewed changes

This was referenced Mar 12, 2022

[DOCUMENT DATA] Add place information #728

Closed

[DOCUMENT] Add place information GrottoCenter/grottocenter-front#335

Closed

Clm-Roig mentioned this pull request Jun 2, 2022

706 [SENSITIVE ENTRANCE] Special treatment #890

Merged

Clm-Roig force-pushed the develop branch from 771230a to a0ee4cc Compare September 10, 2022 13:50

Clm-Roig changed the title ~~Feature/geoloc autocompletion~~ [GEOLOC AUTOCOMPLETION] React component and API routes Dec 18, 2022

urien closed this Mar 25, 2023

Clm-Roig deleted the feature/geoloc_autocompletion branch July 18, 2023 08:46

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[GEOLOC AUTOCOMPLETION] React component and API routes #273

[GEOLOC AUTOCOMPLETION] React component and API routes #273

ArthurLeblanc commented May 15, 2020

Clm-Roig commented May 18, 2020 •

edited

Loading

Clm-Roig commented May 18, 2020 •

edited

Loading

Clm-Roig commented May 18, 2020 •

edited

Loading

ArthurLeblanc commented May 18, 2020

Clm-Roig May 18, 2020

maximenathan Jun 22, 2020

maximenathan May 20, 2020

maximenathan commented May 20, 2020 •

edited

Loading

maximenathan commented May 20, 2020

maximenathan left a comment

Clm-Roig Mar 12, 2022

Clm-Roig Mar 12, 2022

urien commented Mar 25, 2023

[GEOLOC AUTOCOMPLETION] React component and API routes #273

[GEOLOC AUTOCOMPLETION] React component and API routes #273

Conversation

ArthurLeblanc commented May 15, 2020

Clm-Roig commented May 18, 2020 • edited Loading

Clm-Roig commented May 18, 2020 • edited Loading

Clm-Roig commented May 18, 2020 • edited Loading

ArthurLeblanc commented May 18, 2020

Clm-Roig May 18, 2020

Choose a reason for hiding this comment

maximenathan Jun 22, 2020

Choose a reason for hiding this comment

maximenathan May 20, 2020

Choose a reason for hiding this comment

maximenathan commented May 20, 2020 • edited Loading

maximenathan commented May 20, 2020

maximenathan left a comment

Choose a reason for hiding this comment

Clm-Roig Mar 12, 2022

Choose a reason for hiding this comment

Clm-Roig Mar 12, 2022

Choose a reason for hiding this comment

urien commented Mar 25, 2023

Clm-Roig commented May 18, 2020 •

edited

Loading

Clm-Roig commented May 18, 2020 •

edited

Loading

Clm-Roig commented May 18, 2020 •

edited

Loading

maximenathan commented May 20, 2020 •

edited

Loading