further organizing the components and moving things out of app.js

src/App.js

@@ -2,12 +2,10 @@
 import "./App.css";
 
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
-import { useState, useRef, useEffect } from "react";
-import { Grid, Box, Button } from "@mui/material";
-import TaleSetup from "./Setup/TaleSetup.js";
-import SharePage from "./SharePage.js";
-import html2canvas from "html2canvas";
-import canvas2image from "@reglendo/canvas2image";
+import { useState, useEffect } from "react";
+import { Grid } from "@mui/material";
+import TaleSetup from "./TaleSetup/TaleSetup.js";
+import Odyssey from "./Odyssey/Odyssey.js";
 
 
 function App() {
@@ -32,66 +30,14 @@ function App() {
     cachedEndDate === null ? new Date() : new Date(cachedEndDate)
   );
   const [mapStyle, setMapStyle] = useState("1fc21c527f198d4e");
-  const childRef = useRef();
 
-  const triggerReEvaluation = (updatedArtistWishlist) => {
-    console.log("trigger re-evaluation");
-    childRef.current.handleReEvaluation(updatedArtistWishlist);
-  }
-  const handleChildClick = (artistName) => {
-    childRef.current.handleRequestFromParent(artistName);
-  };
 
   useEffect(() => {
     if (artistName) console.log("Artist Name: ", artistName);
   }, [artistName]);
 
-  const handleDownloadImage = async function () {
-    const element = document.getElementById("sharepage");
-    html2canvas(element, {
-      logging: true,
-      proxy: `${process.env.REACT_APP_BACKEND}/GetImage`,
-      backgroundColor: "#282c34",
 
-      ignoreElements: (node) => {
-        return node.nodeName === "IFRAME";
-      },
-      scrollY: window.scrollY * -1,
-    }).then((canvas) => {
-      canvas2image.saveAsPNG(canvas, posterName, canvas.width, canvas.height);
-    });
-  };
 
-  const handleShareAsLink = async function () {
-    //gather json for artists, map coordinates, share page schedules, concert list, trip name, map style id, start date, end date
-    try {
-      let res = await fetch(`${process.env.REACT_APP_BACKEND}/SaveTrips`, {
-        method: "POST",
-        headers: {
-          "content-type": "application/json;charset=utf-8",
-        },
-        body: JSON.stringify({
-          ownerUsername: "",
-          startingPoint: userLocation,
-          gigs: concerts,
-          tripName: posterName,
-          startDate: startDate,
-          mapStyleId: mapStyle,
-          endDate: endDate
-        })
-      });
-
-
-      if (res.status === 200) {
-        let incomingConcerts = await res.json();
-      } else {
-        console.log("Some error occured");
-      }
-    } catch (err) {
-      console.log(err);
-    }
-    //make a request to taverondemand.azurewebsites.net/api/SaveTrips
-  };
 
   return (
     <div className="App">
@@ -123,38 +69,15 @@ function App() {
           followedArtists={followedArtists}
           artistWishlist={artistWishlist}
           openDialog={openDialog}
-          triggerReEvaluation={triggerReEvaluation}
           isRequestTriggered={isRequestTriggered} />
-        <Grid item xs={10} sm={10} md={10} lg={7} xl={8} direction={"row"}>
-          <div id="sharepage">
-            <SharePage
-              concerts={concerts}
-              userLocation={userLocation}
-              mapStyle={mapStyle}
-              setPosterName={setPosterName}
-            />
-          </div>
-          <Grid spacing={2} direction={"row"}>
-            <Grid item>
-              <Button
-                id="sharelinkbutton"
-                color="primary"
-                disabled={concerts.length === 0}
-                onClick={handleShareAsLink}
-                variant="contained">Share As Link</Button>
-            </Grid>
-            <Grid item>
-              <Button
-                id="sharebutton"
-                color="primary"
-                onClick={handleDownloadImage}
-                variant="contained"
-              >
-                Share As Image
-              </Button>
-            </Grid>
-          </Grid>
-        </Grid>
+        <Odyssey
+          concerts={concerts}
+          userLocation={userLocation}
+          mapStyle={mapStyle}
+          setPosterName={setPosterName}
+          posterName={posterName}
+          startDate={startDate}
+          endDate={endDate} />
       </Grid>
     </div>
   );

src/Odyssey/Odyssey.js

@@ -0,0 +1,100 @@
+import React from 'react';
+import { Grid, Button } from "@mui/material";
+// Import other components
+import SharePage from "./SharePage.js";
+import html2canvas from "html2canvas";
+import canvas2image from "@reglendo/canvas2image";
+
+const Odyssey = ({
+    concerts,
+    userLocation,
+    mapStyle,
+    setPosterName,
+    posterName,
+    startDate,
+    endDate
+}) => {
+    const handleShareAsLink = async function () {
+        //gather json for artists, map coordinates, share page schedules, concert list, trip name, map style id, start date, end date
+        try {
+            let res = await fetch(`${process.env.REACT_APP_BACKEND}/SaveTrips`, {
+                method: "POST",
+                headers: {
+                    "content-type": "application/json;charset=utf-8",
+                },
+                body: JSON.stringify({
+                    ownerUsername: "",
+                    startingPoint: userLocation,
+                    gigs: concerts,
+                    tripName: posterName,
+                    startDate: startDate,
+                    mapStyleId: mapStyle,
+                    endDate: endDate
+                })
+            });
+
+
+            if (res.status === 200) {
+                let incomingConcerts = await res.json();
+            } else {
+                console.log("Some error occured");
+            }
+        } catch (err) {
+            console.log(err);
+        }
+        //make a request to taverondemand.azurewebsites.net/api/SaveTrips
+    };
+    const handleDownloadImage = async function () {
+        const element = document.getElementById("sharepage");
+        html2canvas(element, {
+            logging: true,
+            proxy: `${process.env.REACT_APP_BACKEND}/GetImage`,
+            backgroundColor: "#282c34",
+
+            ignoreElements: (node) => {
+                return node.nodeName === "IFRAME";
+            },
+            scrollY: window.scrollY * -1,
+        }).then((canvas) => {
+            canvas2image.saveAsPNG(canvas, posterName, canvas.width, canvas.height);
+        });
+    };
+
+    return (
+        <Grid item xs={10} sm={10} md={10} lg={7} xl={8} direction={"row"}>
+            <div id="sharepage">
+                <SharePage
+                    concerts={concerts}
+                    userLocation={userLocation}
+                    mapStyle={mapStyle}
+                    setPosterName={setPosterName}
+                />
+            </div>
+            <Grid spacing={2} direction={"row"}>
+                <Grid item>
+                    <Button
+                        id="sharelinkbutton"
+                        color="primary"
+                        disabled={concerts.length === 0}
+                        onClick={handleShareAsLink}
+                        variant="contained">Share As Link</Button>
+                </Grid>
+                <Grid item>
+                    <Button
+                        id="sharebutton"
+                        color="primary"
+                        onClick={handleDownloadImage}
+                        variant="contained"
+                    >
+                        Share As Image
+                    </Button>
+                </Grid>
+            </Grid>
+        </Grid>
+    );
+};
+
+export default Odyssey;
+
+
+