From 3a8411af914d9e088b6bbf257194bd89247dc512 Mon Sep 17 00:00:00 2001
From: dm1sh <me@dmitriy.icu>
Date: Tue, 19 Oct 2021 12:15:34 +0300
Subject: [PATCH] Added empty task list placeholder

---
 src/components/EmptyList.tsx | 20 ++++++++++++++++++++
 src/components/Layout.tsx    |  2 +-
 src/components/TodoList.tsx  | 15 ++++++++++-----
 3 files changed, 31 insertions(+), 6 deletions(-)
 create mode 100644 src/components/EmptyList.tsx

diff --git a/src/components/EmptyList.tsx b/src/components/EmptyList.tsx
new file mode 100644
index 0000000..f93c8b5
--- /dev/null
+++ b/src/components/EmptyList.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+
+import Typography from "@mui/material/Typography";
+import Box from "@mui/material/Box";
+import InboxIcon from "@mui/icons-material/Inbox";
+
+export const EmptyList: React.FC = () => (
+  <Box
+    sx={{
+      padding: (theme) => theme.spacing(1),
+      paddingBottom: (theme) => theme.spacing(3),
+      textAlign: "center",
+    }}
+  >
+    <InboxIcon sx={{ fontSize: "10rem" }} color={"primary"} />
+    <Typography variant={"h6"}>Empty in tasks</Typography>
+    <Typography>Write first task to save it here</Typography>
+    <Typography>To insert new line in task, press Shift+Enter</Typography>
+  </Box>
+);
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index f91a965..bc1f919 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -29,7 +29,7 @@ export const Layout: React.FC<LayoutProps> = ({ appBar, content, title }) => {
       <CssBaseline />
       <Box sx={{ padding: (theme) => theme.spacing(2, 2, 10, 2) }}>
         <Typography variant="h4" sx={{ paddingLeft: 2, marginBottom: 2 }}>
-          <Checkbox sx={{ visibility: "hidden" }} />
+          <Checkbox aria-hidden={true} sx={{ visibility: "hidden" }} />
           {title}
         </Typography>
         {content}
diff --git a/src/components/TodoList.tsx b/src/components/TodoList.tsx
index a04b964..d198178 100644
--- a/src/components/TodoList.tsx
+++ b/src/components/TodoList.tsx
@@ -5,17 +5,22 @@ import Paper from "@mui/material/Paper";
 
 import { TodoItem } from "./TodoItem";
 import { useAppSelector } from "../hooks";
+import { EmptyList } from "./EmptyList";
 
 export const TodoList: React.FC = () => {
   const tasks = useAppSelector((state) => state.todo.tasks);
 
   return (
     <Paper variant="outlined">
-      <List>
-        {tasks.map((task, index) => (
-          <TodoItem key={task.id} task={task} index={index} />
-        ))}
-      </List>
+      {tasks.length ? (
+        <List>
+          {tasks.map((task, index) => (
+            <TodoItem key={task.id} task={task} index={index} />
+          ))}
+        </List>
+      ) : (
+        <EmptyList />
+      )}
     </Paper>
   );
 };