How to compare dates with tenary and && operator in React.js - node.js

Question

I am working on Mern-Stack Application, and I am facing a challenge with comparing dates in Reacts and Material-UI.
I have an Event Model that has startingDate and closingDate Attribues.
when displaying the EVents on the List. what I want is, if the date for the event has passed then the event should show something like this. Started: Sunday, August 9, 2020, 3 pm Ended: Sunday, August 9, 2020, 6 pm. if the event is upcoming then it should show Starting: Sunday, August 9, 2020, 3 pm Ends: Sunday, August 9, 2020, 6 pm. But if the Event is Live (if it has started but has not ended) then the event should show Live: Sunday, August 9, 2020, 3 pm. `Ends: Sunday, August 9, 2020, 8 pm.
but I don't know why it's not really working as it should, the && operator is not evaluating as it should to make it show Live
This is my Event Schema just for you to understand the data-type I am using for a date.
const eventSchema = new mongoose.Schema({
startingDate: {
type: Date,
required: true
},
closingDate: {
type: Date,
required: true
},
title: {
type: String,
required: true
},
description: {
type: String,
required: true
},
createdAt: {
type: Date,
required: true,
default: Date.now
},
eventImage: {
type: String,
require: true
},
});
and this is my Event Component.
export default function EventsList() {
const theme = useTheme();
const [tileData, setTileData] = useState([]);
const useStyles = makeStyles((theme) => ({
root: {
maxWidth: "auto",
},
media: {
height: 350,
paddingTop: "56.25%", // 16:9
// height: "100%",
display: "flex",
flexDirection: "column",
alignItems: "center",
},
expand: {
transform: "rotate(0deg)",
marginLeft: "auto",
transition: theme.transitions.create("transform", {
duration: theme.transitions.duration.shortest,
}),
},
expandOpen: {
transform: "rotate(180deg)",
},
avatar: {
backgroundColor: red[500],
},
}));
useEffect(() => {
axios
.get("http://localhost:9000/events/")
.then((response) => {
setTileData([...response.data]);
})
.catch(function (error) {
console.log(error);
});
}, []);
const matches = useMediaQuery(theme.breakpoints.down("xs"));
const classes = useStyles();
return (
<div className={classes.root}>
<GridList
cellHeight={420}
className={classes.gridList}
spacing={12}
cols={matches ? 1 : 3}
>
{tileData.map((event, key) => {
return (
<Card
style={{ paddingBottom: "550px" }}
component={Link}
to={"/events/" + event._id + "/eventcomments"}
key={Math.floor(Math.random() * new Date().getTime())}
>
<h3
style={{
background: " #800000",
color: "white",
textAlign: "center",
}}
>
{event.title}
</h3>
<CardHeader
avatar={
<Avatar aria-label="recipe" className={classes.avatar}>
R
</Avatar>
}
title={
event.startingDate <= new Date() &&
event.closingDate > new Date()
? "Live:" + " " + moment(event.startingDate).format("lll")
: moment(event.startingDate).format("lll") <
moment(new Date()).format("lll")
? "Starting:" +
" " +
moment(event.startingDate).format("lll")
: "Started" + " " + moment(event.startingDate).format("lll")
}
subheader={
"Ends:" + " " + moment(event.closingDate).format("lll")
}
style={{ background: "#DCDCDC" }}
/>
<CardMedia
className={classes.media}
image={event.eventImage}
title="Paella dish"
/>
<CardContent>
<Typography
style={{ color: "black" }}
variant="body2"
color="textSecondary"
component="p"
>
{event.description.substring(0, 100)}
</Typography>
</CardContent>
</Card>
);
})}
;
</GridList>
</div>
);
}
in my DB, this is the default date format in my DB.
"startingDate" : ISODate("2020-08-09T11:03:00Z"), .
"closingDate" : ISODate("2020-08-09T11:06:00Z"),
Is it possible to use if statement inside React and material-UI? what is the best solution to get this to work and to make the Date to compare correctly?

Answer 1

Basically using nested ternaries is a bad practice because its gets messy and became not readable, in cases like this one its commonly solved by using a function that does the work, exp:
const startPast = "2020-08-05T11:03:00Z";
const endPast = "2020-08-06T11:03:00Z";
const startLive = "2020-08-05T11:03:00Z";
const endLive = "2020-08-16T11:03:00Z";
const startFuture = "2020-08-11T11:03:00Z";
const endFuture = "2020-08-13T11:03:00Z";
const nowIso = '2020-08-09T15:12:59.177Z'
const getTitle = (startDateTs, endDateTs) => {
const now = Date.parse(nowIso);
if (endDateTs <= now) {
return "past";
}
if (startDateTs < now && endDateTs > now) {
return "live";
}
return "future";
};
console.log("past", getTitle(Date.parse(startPast), Date.parse(endPast)));
console.log("live", getTitle(Date.parse(startLive), Date.parse(endLive)));
console.log("future", getTitle(Date.parse(startFuture), Date.parse(endFuture)));
could you try this approach ?