feat: add message when no data available

Author: coder2000

packages/client/src/components/podcast/PodcastCard.tsx

@@ -95,45 +95,51 @@ export function PodcastCard(props: PodcastProps) {
   return (
     <>
       <Zoom in={visible} timeout={{ enter: 0, exit: 600 }} unmountOnExit>
-        <Card key={podcast.id} id={`podcast-${podcast.id}`}>
-          <CardHeader
-            title={podcast.title}
-            action={
-              <IconButton onClick={handleCardMenuOpen}>
-                <MoreVertIcon />
-              </IconButton>
-            }
-          />
-          <CardContent>
-            <Grid container>
-              <Grid item xs={2}>
-                <img src={podcast.image} height="150" width="150" />
-              </Grid>
-              <Grid item xs={10}>
-                <Typography variant="body2">{podcast.description}</Typography>
-              </Grid>
-            </Grid>
-          </CardContent>
-          <CardActions>
-            <IconButton>
-              <FavoriteIcon />
-            </IconButton>
-            <IconButton
-              className={clsx(classes.expand, {
-                [classes.expandOpen]: expanded,
-              })}
-              onClick={handleExpandClick}
-            >
-              <ExpandMoreIcon />
-            </IconButton>
-          </CardActions>
-          <Collapse in={expanded} unmountOnExit>
-            <CardContent>
-              <Typography>Episodes</Typography>
-              <EpisodeList episodes={podcast.episodes} />
-            </CardContent>
-          </Collapse>
-        </Card>
+        <Grid container spacing={3} key={`podcast-row-${podcast.id}`}>
+          <Grid item key={`podcast-col-${podcast.id}`}>
+            <Card key={podcast.id} id={`podcast-${podcast.id}`}>
+              <CardHeader
+                title={podcast.title}
+                action={
+                  <IconButton onClick={handleCardMenuOpen}>
+                    <MoreVertIcon />
+                  </IconButton>
+                }
+              />
+              <CardContent>
+                <Grid container>
+                  <Grid item xs={2}>
+                    <img src={podcast.image} height="150" width="150" />
+                  </Grid>
+                  <Grid item xs={10}>
+                    <Typography variant="body2">
+                      {podcast.description}
+                    </Typography>
+                  </Grid>
+                </Grid>
+              </CardContent>
+              <CardActions>
+                <IconButton>
+                  <FavoriteIcon />
+                </IconButton>
+                <IconButton
+                  className={clsx(classes.expand, {
+                    [classes.expandOpen]: expanded,
+                  })}
+                  onClick={handleExpandClick}
+                >
+                  <ExpandMoreIcon />
+                </IconButton>
+              </CardActions>
+              <Collapse in={expanded} unmountOnExit>
+                <CardContent>
+                  <Typography>Episodes</Typography>
+                  <EpisodeList episodes={podcast.episodes} />
+                </CardContent>
+              </Collapse>
+            </Card>
+          </Grid>
+        </Grid>
       </Zoom>
 
       <Menu

packages/client/src/components/podcast/PodcastList.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useQuery } from '@apollo/react-hooks';
 import { gql } from 'apollo-boost';
 import { PageInfo, Podcast } from '../../interfaces';
-import { Grid } from '@material-ui/core';
+import { Typography } from '@material-ui/core';
 import { PodcastCard } from './PodcastCard';
 
 interface PodcastEdge {
@@ -60,14 +60,16 @@ export function PodcastList() {
         <h3>Loading...</h3>
       ) : (
         <>
-          {data &&
+          {data ? (
             data.podcasts.edges.map((edge) => (
-              <Grid container spacing={3} key={`podcast-row-${edge.node.id}`}>
-                <Grid item key={`podcast-col-${edge.node.id}`}>
-                  <PodcastCard podcast={edge.node} />
-                </Grid>
-              </Grid>
-            ))}
+              <PodcastCard podcast={edge.node} />
+            ))
+          ) : (
+            <>
+              <Typography variant="h5">No Podcasts</Typography>
+              <Typography>Add a podcast using the button below.</Typography>
+            </>
+          )}
         </>
       )}
     </>