Skip to content

Commit

Permalink
making sharepage list reusable
Browse files Browse the repository at this point in the history
  • Loading branch information
sam9116 committed Feb 8, 2024
1 parent a96adac commit 08a7e7c
Show file tree
Hide file tree
Showing 2 changed files with 48 additions and 70 deletions.
73 changes: 3 additions & 70 deletions src/SharePage.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import ListItemAvatar from '@mui/material/ListItemAvatar';
import Avatar from '@mui/material/Avatar';
import Chip from '@mui/material/Chip';
import moment from 'moment';
import SharePageList from './SharePageList';

function formattedDate(incomingDate) {
var date = new Date(incomingDate);
Expand All @@ -25,82 +26,14 @@ const SharePage = ({ concerts, userLocation, mapStyle }) => {
const middleIndex = Math.ceil(concerts.length / 2);
const concerts1 = concerts.slice(0,middleIndex);
const concerts2 = concerts.slice(middleIndex);


const renderConcertList1 =
concerts1.map((concert, index) => {
return (
<Grid item xs={12} sm={12} md={12} key={index}>
<ListItem
key={index}
disablePadding

>
<ListItemButton>
<ListItemAvatar>
<Avatar
alt={`${concert.artist}`}
src={`${concert.image.url}`}
/>
</ListItemAvatar>
<ListItemText
primary={`${concert.artist}`}
secondary={
<React.Fragment>
<Stack direction="row" spacing={1}>
<Chip color="primary" label={`${concert.location.name}`} />
<Chip color="primary" label={`${formattedDate(concert.date)}`} />
</Stack>
</React.Fragment>
} />
</ListItemButton>
</ListItem>
</Grid>
);
});
const renderConcertList2 =
concerts2.map((concert, index) => {
return (
<Grid item xs={12} sm={12} md={12} key={index}>
<ListItem
key={index}
disablePadding

>
<ListItemButton>
<ListItemAvatar>
<Avatar
alt={`${concert.artist}`}
src={`${concert.image.url}`}
/>
</ListItemAvatar>
<ListItemText
primary={`${concert.artist}`}
secondary={
<React.Fragment>
<Stack direction="row" spacing={1}>
<Chip color="primary" label={`${concert.location.name}`} />
<Chip color="primary" label={`${formattedDate(concert.date)}`} />
</Stack>
</React.Fragment>
} />
</ListItemButton>
</ListItem>
</Grid>
);
});

return (
<Stack spacing={2} >
{isLoaded ? <Map concerts={concerts} userLocation={userLocation} mapStyle={mapStyle} /> : null}

<Stack container spacing={{ xs: 2, md: 3 }} direction={'row'}>
<List dense>
{renderConcertList1}
</List>
<List dense>
{renderConcertList2}
</List>
<SharePageList concerts={concerts1} />
<SharePageList concerts={concerts2} />
</Stack>

</Stack>
Expand Down
45 changes: 45 additions & 0 deletions src/SharePageList.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import React from 'react';
import { Stack } from '@mui/material';
import { Grid, List, ListItem, ListItemText, ListItemAvatar, ListItemButton, Avatar, Chip } from '@mui/material';
import moment from 'moment';

function formattedDate(incomingDate) {
var date = new Date(incomingDate);
return moment(date).format('YYYY/MM/DD');
}

const SharePageList = ({ concerts }) => {
return (
<List dense>
{concerts.map((concert, index) => (
<Grid item xs={12} sm={12} md={12} key={index}>
<ListItem
key={index}
disablePadding

>
<ListItemButton>
<ListItemAvatar>
<Avatar
alt={`${concert.artist}`}
src={`${concert.image.url}`}
/>
</ListItemAvatar>
<ListItemText
primary={`${concert.artist}`}
secondary={
<React.Fragment>
<Stack direction="row" spacing={1}>
<Chip color="primary" label={`${concert.location.name}`} />
<Chip color="primary" label={`${formattedDate(concert.date)}`} />
</Stack>
</React.Fragment>
} />
</ListItemButton>
</ListItem>
</Grid>
))}
</List>
);
}
export default SharePageList

0 comments on commit 08a7e7c

Please sign in to comment.