Skip to content

Commit

Permalink
organizing app.js to prepare for routing
Browse files Browse the repository at this point in the history
  • Loading branch information
sam9116 committed Oct 28, 2024
1 parent 0ba823a commit ed8805c
Show file tree
Hide file tree
Showing 11 changed files with 133 additions and 64 deletions.
89 changes: 28 additions & 61 deletions src/App.js
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
/*import logo from './logo.svg';*/
import "./App.css";
import BaseInput from "./BaseInput.js";

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import { useState, useRef, useEffect } from "react";
import { Grid, Box, Button } from "@mui/material";
import PickDate from "./PickDate.js";
import ConcertList from "./ConcertList.js";
import TaleSetup from "./Setup/TaleSetup.js";
import SharePage from "./SharePage.js";
import html2canvas from "html2canvas";
import canvas2image from "@reglendo/canvas2image";
import GetSpotifyPlaylistArtistsWithShows from "./GetSpotifyPlaylistArtistsWithShows.js";
import YourSpotifyArtistsWithShows from "./YourSpotifyArtistsWithShows.js";


function App() {
let cachedStartDate = localStorage.getItem("startDate");
Expand Down Expand Up @@ -102,62 +101,30 @@ function App() {
columnSpacing={{ xs: 1, sm: 2, md: 3, lg: 10, xl: 3 }}
alignItems="flex-start"
>
<Grid direction={"column"} xs={10} sm={10} md={10} lg={2} xl={2}>
<Box>
<img src={window.location.origin + "/Taver.png"} alt="Taver" />
</Box>
<PickDate
updateStartDateInParent={setStartDate}
updateEndDateInParent={setEndDate}
artistName={artistName}
newArtistList={setArtistList}
openDialog={setOpenDialog}
/>
<p />
<BaseInput
setConcerts={setConcerts}
setUserLocation={setUserLocation}
setMapStyle={setMapStyle}
setAllConcerts={setAllConcerts}
startDate={startDate}
endDate={endDate}
concerts={concerts}
allConcerts={allConcerts}
userLocation={userLocation}
updateArtistNameInParent={(value) => setArtistName(value)}
newArtistList={setArtistList}
artistListFromParent={artistList}
followedArtists={followedArtists}
setFollowedArtists={setFollowedArtists}
artistWishlist={artistWishlist}
setArtistWishlist={setArtistWishlist}
openDialogFromParent={openDialog}
closeDialog={() => {
setOpenDialog(false);
}}
ref={childRef}
/>
<GetSpotifyPlaylistArtistsWithShows
followedArtists={followedArtists}
setFollowedArtists={setFollowedArtists}
startDate={startDate}
endDate={endDate}
setIsRequestTriggered={setIsRequestTriggered}
/>
<YourSpotifyArtistsWithShows
artists={followedArtists}
onChildClick={handleChildClick}
isRequestTriggered={isRequestTriggered}
/>
<ConcertList
setConcerts={setConcerts}
setAllConcerts={setAllConcerts}
artistWishlist={artistWishlist}
setArtistWishlist={setArtistWishlist}
concerts={concerts}
triggerReEvaluation={triggerReEvaluation}
/>
</Grid>
<TaleSetup setStartDate={setStartDate}
setEndDate={setEndDate}
setArtistList={setArtistList}
setOpenDialog={setOpenDialog}
setConcerts={setConcerts}
setUserLocation={setUserLocation}
setMapStyle={setMapStyle}
setAllConcerts={setAllConcerts}
setArtistName={setArtistName}
setFollowedArtists={setFollowedArtists}
setArtistWishlist={setArtistList}
setIsRequestTriggered={setIsRequestTriggered}
startDate={startDate}
endDate={endDate}
concerts={concerts}
artistName={artistName}
allConcerts={allConcerts}
userLocation={userLocation}
artistList={artistList}
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
Expand Down
5 changes: 3 additions & 2 deletions src/ArtistChoiceList.js → src/Setup/ArtistChoiceList.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import { List, ListItem, ListItemButton, ListItemAvatar, ListItemText, Avatar }

const ArtistChoiceList = ({ artists, onArtistClick }) => {
const text = { color: 'red' }


return (
<List>
{artists.map((artist, index) => (
Expand All @@ -11,11 +13,10 @@ const ArtistChoiceList = ({ artists, onArtistClick }) => {
<ListItemAvatar>
<Avatar
alt={`${artist.name}`}
src={`${artist.images[1].url}`}
src={artist.images && artist.images.length > 1 ? artist.images[1].url : ''}
/>
</ListItemAvatar>
<ListItemText

primary={`${artist.name}`}
secondary={`${artist.gigCount} Gig(s)`}
secondaryTypographyProps={{ style: text }}
Expand Down
File renamed without changes.
1 change: 0 additions & 1 deletion src/BaseInput.js → src/Setup/BaseInput.js
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,6 @@ const BaseInput = forwardRef(({ setConcerts,
startDate,
setAllConcerts,
endDate,
concerts,
allConcerts,
userLocation,
updateArtistNameInParent,
Expand Down
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
102 changes: 102 additions & 0 deletions src/Setup/TaleSetup.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
import BaseInput from "./BaseInput.js";
import GetSpotifyPlaylistArtistsWithShows from "./GetSpotifyPlaylistArtistsWithShows.js";
import YourSpotifyArtistsWithShows from "./YourSpotifyArtistsWithShows.js";
import PickDate from "./PickDate.js";
import ConcertList from "./ConcertList.js";
import {useRef } from "react";
import { Grid, Box } from "@mui/material";



const TaleSetup = ({ setStartDate,
setEndDate,
setArtistList,
setOpenDialog,
setConcerts,
setUserLocation,
setMapStyle,
setAllConcerts,
setArtistName,
setFollowedArtists,
setArtistWishlist,
setIsRequestTriggered,
startDate,
endDate,
concerts,
artistName,
allConcerts,
userLocation,
artistList,
followedArtists,
artistWishlist,
openDialog,
isRequestTriggered
}) => {


const childRef = useRef();
const handleChildClick = (artistName) => {
childRef.current.handleRequestFromParent(artistName);
};
const triggerReEvaluation = (updatedArtistWishlist) => {
console.log("trigger re-evaluation");
childRef.current.handleReEvaluation(updatedArtistWishlist);
}

return (<Grid direction={"column"} xs={10} sm={10} md={10} lg={2} xl={2}>
<Box>
<img src={window.location.origin + "/Taver.png"} alt="Taver" />
</Box>
<PickDate
updateStartDateInParent={setStartDate}
updateEndDateInParent={setEndDate}
artistName={artistName}
newArtistList={setArtistList}
openDialog={setOpenDialog}
/>
<p />
<BaseInput
setConcerts={setConcerts}
setUserLocation={setUserLocation}
setMapStyle={setMapStyle}
setAllConcerts={setAllConcerts}
startDate={startDate}
endDate={endDate}
allConcerts={allConcerts}
userLocation={userLocation}
updateArtistNameInParent={(value) => setArtistName(value)}
newArtistList={setArtistList}
artistListFromParent={artistList}
followedArtists={followedArtists}
setFollowedArtists={setFollowedArtists}
artistWishlist={artistWishlist}
setArtistWishlist={setArtistWishlist}
openDialogFromParent={openDialog}
closeDialog={() => {
setOpenDialog(false);
}}
ref={childRef}
/>
<GetSpotifyPlaylistArtistsWithShows
followedArtists={followedArtists}
setFollowedArtists={setFollowedArtists}
startDate={startDate}
endDate={endDate}
setIsRequestTriggered={setIsRequestTriggered}
/>
<YourSpotifyArtistsWithShows
artists={followedArtists}
onChildClick={handleChildClick}
isRequestTriggered={isRequestTriggered}
/>
<ConcertList
setConcerts={setConcerts}
setAllConcerts={setAllConcerts}
artistWishlist={artistWishlist}
setArtistWishlist={setArtistWishlist}
concerts={concerts}
triggerReEvaluation={triggerReEvaluation}
/>
</Grid>);
};
export default TaleSetup;
File renamed without changes.

0 comments on commit ed8805c

Please sign in to comment.