adding in venue city as part of concert info

taver-ca · Feb 10, 2024 · f1590b8 · f1590b8
1 parent 23e3397
commit f1590b8
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 9 deletions.
diff --git a/src/App.js b/src/App.js
@@ -46,7 +46,8 @@ function App() {
       <Grid
           className="App-header"
           container
-          spacing={2}>
+          spacing={2}
+          alignItems="flex-start">
           <Stack item xs={6} md={6} spacing={2}>
             <Box>
               <img src={window.location.origin + '/Taver.png'} alt="Taver" />

diff --git a/src/ConcertList.js b/src/ConcertList.js
@@ -6,10 +6,15 @@ import ListItemText from '@mui/material/ListItemText';
 import ListItemAvatar from '@mui/material/ListItemAvatar';
 import Avatar from '@mui/material/Avatar';
 import Chip from '@mui/material/Chip';
-import { Grid, Stack } from '@mui/material';
+import { Stack } from '@mui/material';
 import IconButton from '@mui/material/IconButton';
 import DeleteIcon from '@mui/icons-material/Delete';
+import moment from 'moment';
 
+function formattedDate(incomingDate) {
+    var date = new Date(incomingDate);
+    return moment(date).format('YYYY/MM/DD hh:mm A');
+}
 
 class ConcertList extends React.Component {
     constructor(props) {
@@ -53,7 +58,7 @@ class ConcertList extends React.Component {
                                         <Stack sx={{ width: '100%' }} direction="row" spacing={2} justifyContent={'space-between'} display={'flex'} >
                                             <Stack direction="row" item spacing={1}>
                                                 <Chip color="primary" label={`${concert.location.name}`} />
-                                                <Chip color="primary" label={`${concert.date}`} />
+                                                <Chip color="primary" label={`${formattedDate(concert.date)}`} />
                                             </Stack>
                                             <IconButton onClick={
                                                 () => {

diff --git a/src/SharePageList.js b/src/SharePageList.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Stack } from '@mui/material';
-import { Grid, List, ListItem, ListItemText, ListItemAvatar, ListItemButton, Avatar, Chip } from '@mui/material';
+import { List, ListItem, ListItemText, ListItemAvatar, ListItemButton, Avatar, Chip } from '@mui/material';
 import moment from 'moment';
 
 function formattedDate(incomingDate) {
@@ -27,7 +27,7 @@ const SharePageList = ({ concerts }) => {
                             secondary={
                                 <React.Fragment>
                                     <Stack direction="row" spacing={1} >
-                                        <Chip color="primary" label={`${concert.location.name}`} />
+                                        <Chip color="primary" label={`${concert.location.address}`} />
                                         <Chip color="primary" label={`${formattedDate(concert.date)}`} />
                                     </Stack>
                                 </React.Fragment>

diff --git a/src/map.js b/src/map.js
@@ -6,6 +6,7 @@ const concertToMarker = (concert) => {
     id: concert.title + concert.date,
     name: concert.title,
     artistImageUrl: concert.image.url,
+    address: concert.location.address,
     position: {
       lat: concert.location.latitude,
       lng: concert.location.longitude,
@@ -119,7 +120,7 @@ function Map({ concerts, userLocation, mapStyle }) {
     }
   }, [markers]);
   const [width, height] = useWindowSize();
-  const output = concerts.map((concert) => ({ artist: concert.artist, date: concert.date, location: concert.location }));
+  const output = concerts.map((concert) => ({ artist: concert.artist, date: concert.date, location: concert.location, address: concert.location.address }));
 
   console.log(output);
 
@@ -138,7 +139,7 @@ function Map({ concerts, userLocation, mapStyle }) {
         zoomControl: false,
         keyboardShortcuts: false
       }}
-      mapContainerStyle={(width / height) >= 1 ?{ width: "100wh", height: "50vh" }:{ width: "100wh", height: "25vh" }}
+      mapContainerStyle={(width / height) >= 1 ? { width: "100wh", height: "50vh" } : { width: "100wh", height: "25vh" }}
     >
       {userLocation && (
         <MarkerF
@@ -154,7 +155,7 @@ function Map({ concerts, userLocation, mapStyle }) {
       )}
 
       {markers &&
-        markers.map(({ id, name, position, artistImageUrl }) => (
+        markers.map(({ id, name, position, artistImageUrl, address }) => (
           <MarkerF
             key={id}
             position={position}
@@ -168,7 +169,7 @@ function Map({ concerts, userLocation, mapStyle }) {
               <InfoWindowF onCloseClick={() => setActiveMarker(null)}>
                 <div className="info">
                   <img src={artistImageUrl} width={45} height={45} className="artist" alt={name} />
-                  <div><p style={{color:'black'}}>{name}</p><p style={{color:'black'}}>{position.lat},{position.lng}</p></div>
+                  <div><p style={{ color: 'black' }}>{name}</p><p style={{ color: 'black' }}>{address}</p></div>
                 </div>
               </InfoWindowF>
             ) : null}