Ai trip title suggestion

src/App.js

@@ -19,6 +19,7 @@ function App() {
   const [allConcerts, setAllConcerts] = useState([]);
   const [userLocation, setUserLocation] = useState(null);
   const [posterName, setPosterName] = useState("");
+  const [posterNameSuggestions, setPosterNameSuggestions] = useState([]);
   const [followedArtists, setFollowedArtists] = useState([]);
   const [artistName, setArtistName] = useState("Taylor Swift");
   const [artistList, setArtistList] = useState([]);
@@ -82,7 +83,10 @@ function App() {
                   posterName={posterName}
                   startDate={startDate}
                   endDate={endDate}
-                  shareId={shareId} />
+                  shareId={shareId}
+                  posterNameSuggestions = {posterNameSuggestions} 
+                  setPosterNameSuggestions = {setPosterNameSuggestions}
+                  />
               </Grid>
             </Grid>
           } />

src/Odyssey/FetchName.js

@@ -0,0 +1,18 @@
+export const FetchName = async (concerts) => {    
+    const response = await fetch(
+        `${process.env.REACT_APP_BACKEND}/GetTripTitleSuggestion`,
+        {
+            method: 'POST',
+            headers: {
+                'content-type': 'application/json;charset=utf-8'
+            },
+            body: JSON.stringify(concerts),
+        }
+      );
+      console.log(`response status code: ${response.status}`);
+      if (response.status === 200) {
+        let resJson = await response.json();    
+        return resJson;    
+      }
+      return;
+};

src/Odyssey/Odyssey.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Grid, Button, Stack, Box } from "@mui/material";
+import { Grid, Button, Stack } from "@mui/material";
 // Import other components
 import SharePage from "./SharePage.js";
 
@@ -31,7 +31,6 @@ function transformSpecificChildKeys(obj, targetKey) {
 
 
 
-
 const Odyssey = ({
     concerts,
     userLocation,
@@ -41,6 +40,8 @@ const Odyssey = ({
     startDate,
     endDate,
     shareId,
+    posterNameSuggestions,
+    setPosterNameSuggestions,
     setShareId
 }) => {
     const handleShareAsLink = async function () {
@@ -94,13 +95,16 @@ const Odyssey = ({
     };
 
     return (
-        <Grid sx={{ container: true, mb: 10  }}  >
+        <Grid sx={{ container: true, mb: 10 }}  >
             <div id="sharepage">
                 <SharePage
                     concerts={concerts}
                     userLocation={userLocation}
                     mapStyle={mapStyle}
                     setPosterName={setPosterName}
+                    posterName={posterName}
+                    posterNameSuggestions={posterNameSuggestions}
+                    setPosterNameSuggestions={setPosterNameSuggestions}
                 />
             </div>
 

src/Odyssey/SharePage.js

@@ -1,10 +1,13 @@
 import React from 'react';
-import { Stack, TextField } from '@mui/material';
+import { Stack, TextField, Button } from '@mui/material';
 import Map from "./map";
 import { useLoadScript } from "@react-google-maps/api"
 import SharePageList from './SharePageList';
+import { FetchName } from './FetchName.js';
+
+const SharePage = ({ concerts, userLocation, mapStyle, setPosterName, posterName, posterNameSuggestions, setPosterNameSuggestions }) => {
+
 
-const SharePage = ({ concerts, userLocation, mapStyle, setPosterName }) => {
     // Your component logic goes here
     const { isLoaded } = useLoadScript({
         googleMapsApiKey: process.env.REACT_APP_GCP_KEY, // Add your API key
@@ -14,15 +17,45 @@ const SharePage = ({ concerts, userLocation, mapStyle, setPosterName }) => {
     const concerts1 = concerts.slice(0, middleIndex);
     const concerts2 = concerts.slice(middleIndex);
 
+    const GenerateTripTitle = async function () {
+
+        if (posterNameSuggestions.length < 1) {
+            // send a request to openAI
+            // attach the conerts, but strip the GPS data, that is not very useful for suggesting trip titles
+            // New list with only 'title', 'artist', 'venue', 'city' and 'date' fields 
+            console.log("getting new titles");
+            const newList = concerts.map(({ title, artist, location, date }) => ({ title, artist, date, venue: location.name, city: location.address }));
+            // now make a request and send it to open AI
+            var suggestions = await FetchName(newList);
+            setPosterNameSuggestions(suggestions.slice(1));
+            setPosterName(suggestions[0].title);
+        }
+        else
+        {
+            setPosterName(posterNameSuggestions[0].title);
+            setPosterNameSuggestions(posterNameSuggestions=> posterNameSuggestions.slice(1));
+        }
+
+    };
 
     return (
         <Stack disablePadding spacing={3}>
             {isLoaded ? <Map concerts={concerts} userLocation={userLocation} mapStyle={mapStyle} /> : null}
-            <TextField
-                variant="standard"
-                placeholder="Write a cool name for your trip here"
-                InputProps={{ sx: { 'input': { textAlign: 'center', color: 'white' } } }}
-                onChange={(e) => setPosterName(e.target.value)} />
+            <Stack spacing={5} direction={'row'} sx={{ width: '100%' }}>
+                <TextField
+                    variant="standard"
+                    placeholder="Write a cool name for your trip here"
+                    InputProps={{ sx: { 'input': { textAlign: 'center', color: 'white' } } }}
+                    value={posterName}
+                    onChange={(e) => setPosterName(e.target.value)} />
+                <Button
+                    color="primary"
+                    onClick={GenerateTripTitle}
+                    disabled={concerts.length === 0}
+                    variant="contained">
+                    Generate
+                </Button>
+            </Stack>
             <Stack justifyContent="center" container sx={{ flexDirection: { xs: "column", sm: "row", md: "row" } }} >
                 <SharePageList concerts={concerts1} />
                 <SharePageList concerts={concerts2} />