Directions Instructions refined and received in console; enhanced UX in drawer component and map rendering#56
Conversation
Added OpenAI API call
Ian testing
Ignored .env file
…ain to GmapsAI-historian.
…th props to RenderMap.js
Managed Merge Conflicts and Refactored the Google Maps Rendering Function on App.js to be stored in its own component with props
…to location onClick
Ian final version
Ian final version
…tion for onboarding journey.
Modified UX for new and existing users; added validation for onboarding & code cleanup in general
… receive discrete steps instruction
enlarged map and drawer. sliced Ai responses into paragraphs. able to receive discrete steps instruction
Added font Roboto to App Links
Changed key landmark pill button to red and hamburger menu icon to maroon.
| @@ -13,11 +13,18 @@ | |||
|
|
|||
| # misc | |||
| <script> | ||
| async function sendMessage() { | ||
| const userInput = document.getElementById("user-input").value; | ||
| const chatLog = document.getElementById("chat-log"); | ||
|
|
||
| // Display user message in the chat log | ||
| chatLog.innerHTML += `<div>User: ${userInput}</div>`; | ||
|
|
||
| // Send user input to the server | ||
| const response = await fetch("/send-message", { | ||
| method: "POST", | ||
| headers: { | ||
| "Content-Type": "application/json", | ||
| }, | ||
| body: JSON.stringify({ message: userInput }), | ||
| }); | ||
|
|
||
| const data = await response.json(); | ||
|
|
||
| // Display AI's response in the chat log | ||
| chatLog.innerHTML += `<div>AI: ${data.message}</div>`; | ||
| } | ||
| </script> |
There was a problem hiding this comment.
Were you not able to define this within the App.js context? It is JS after all and rendering something. Usually we do not touch the index.html. Also, why is there a public1 folder alongside the public folder?
| apiKey: process.env.API_KEY, | ||
| }); | ||
|
|
||
| // app.use(cors({ origin: "http://localhost:3001" })); |
|
|
||
| // app.use(cors({ origin: "http://localhost:3001" })); | ||
| app.use(cors()); | ||
| app.use(express.static("public1")); |
There was a problem hiding this comment.
Okay public1 makes sense now, but you should have a separate project folder altogether if you run a backend for your frontend
| /* .App { | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| } */ | ||
|
|
| directionsRenderer.setMap(mapRef.current); | ||
| }, []); | ||
|
|
||
| const onDirectionsServiceLoad = useCallback((directionsService) => { |
| function () {} | ||
| ); | ||
| } else { | ||
| } |
There was a problem hiding this comment.
why empty func argument, also, why empty else statement?
| if (loadError) return "Error loading maps"; | ||
| if (!isLoaded) return "Loading Maps"; |
There was a problem hiding this comment.
What to do if this happens? Does the user get some feedback? a button? something?
| @@ -0,0 +1,19 @@ | |||
| const OpenAI = require("openai"); | |||
There was a problem hiding this comment.
test or working? if test, why push it?
| NationalMuseumofSingapore: { lat: 1.2966, lng: 103.8485 }, | ||
| }; | ||
|
|
||
| const SignInPage = () => { |
There was a problem hiding this comment.
I have seen this component before. Why define it a second time?
| logoutButton, | ||
| aiResponse, | ||
| clearAIResponse, | ||
| onDrawerOpen, | ||
| sendMessage, | ||
| handleAuthStateChanged, | ||
| handleLogout, | ||
| isLoggedIn, | ||
| loading, | ||
| historicalLandmarks, | ||
| natureParks, | ||
| politicalLandmarks, | ||
| setSelectedLandmarks, | ||
| renderMapComponent, |
There was a problem hiding this comment.
I would advise to try and reduce the number of props on this component. This is quite a lot of props, and very hard to maintain when working with. Especially without any type checks etc, you will run into the problem of not knowing if those props are still used or if there are undefined props
3 participants
No description provided.