From f5eaf9e52506a5f9ce734a89c8ff9dbf32e7e5d0 Mon Sep 17 00:00:00 2001
From: Sergey Yarkov <serzh.yarkov@gmail.com>
Date: Tue, 16 Jun 2020 17:48:18 +0300
Subject: [PATCH] do not render nonexistent todo

---
 client/src/components/Todos/Todos.js | 64 +++++++++++++++-------------
 1 file changed, 35 insertions(+), 29 deletions(-)

diff --git a/client/src/components/Todos/Todos.js b/client/src/components/Todos/Todos.js
index 82c845e..41bb551 100644
--- a/client/src/components/Todos/Todos.js
+++ b/client/src/components/Todos/Todos.js
@@ -49,35 +49,41 @@ const Todos = ({ data }) => {
     <>
       <UpdateTodoModal isModalOpen={isModalOpen} handleOpenModal={handleOpenModal} handleCloseModal={handleCloseModal} selectedTodo={selectedTodo} setSelectedTodo={setSelectedTodo} />
       <DeleteTodoDialog isOpenDialog={isOpenDialog} handleCloseDialog={handleCloseDialog} selectedTodo={selectedTodo} />
-      {data.map((todo, i) => 
-        <Grid key={i} item xs={12} md={4} lg={3}>
-          <Card>
-            <CardContent>
-              <Typography className={classes.cardCategoryHeading} color="textSecondary" gutterBottom>
-                {todo.category.title}
-                <span className={classes.cardAlarm}>
-                  <AlarmIcon className={classes.alarmIcon} color='action' />
-                  {new Date(todo.deadline).toLocaleString()}
-                </span>
-              </Typography>
-              <Typography className={classes.cardHeading} variant="h5" component="h2">
-                {todo.title}
-              </Typography>
-              <Typography variant="body2" component="p">
-                {todo.description}
-              </Typography>
-            </CardContent>
-            <CardActions className={classes.cardActions}>
-                <IconButton onClick={() => handleOpenModal(todo)} aria-label="update">
-                  <EditIcon />
-                </IconButton> 
-              <IconButton onClick={() => handleOpenDialog(todo)} aria-label="delete" color='secondary'>
-                <DeleteIcon />
-              </IconButton>
-            </CardActions>
-          </Card>
-        </Grid>
-      )}
+      {data.map((todo, i) => {
+        if (todo.category) {
+           return (
+            <Grid key={i} item xs={12} md={4} lg={3}>
+            <Card>
+              <CardContent>
+                <Typography className={classes.cardCategoryHeading} color="textSecondary" gutterBottom>
+                  {todo.category.title}
+                  <span className={classes.cardAlarm}>
+                    <AlarmIcon className={classes.alarmIcon} color='action' />
+                    {new Date(todo.deadline).toLocaleString()}
+                  </span>
+                </Typography>
+                <Typography className={classes.cardHeading} variant="h5" component="h2">
+                  {todo.title}
+                </Typography>
+                <Typography variant="body2" component="p">
+                  {todo.description}
+                </Typography>
+              </CardContent>
+              <CardActions className={classes.cardActions}>
+                  <IconButton onClick={() => handleOpenModal(todo)} aria-label="update">
+                    <EditIcon />
+                  </IconButton> 
+                <IconButton onClick={() => handleOpenDialog(todo)} aria-label="delete" color='secondary'>
+                  <DeleteIcon />
+                </IconButton>
+              </CardActions>
+            </Card>
+          </Grid>
+           )
+        } else {
+          return null
+        }
+      })}
     </>
   )
 }