feat: separate TasksList and TasksListItem

src/components/tasks/TasksList/TasksList.tsx

@@ -1,24 +1,19 @@
 import { Theme } from '@material-ui/core';
 import Box from '@material-ui/core/Box';
-import IconButton from '@material-ui/core/IconButton';
 import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
-import ListItemText from '@material-ui/core/ListItemText';
 import Paper from '@material-ui/core/Paper';
 import { makeStyles } from '@material-ui/core/styles';
-import DeleteIcon from '@material-ui/icons/Delete';
 import Pagination from '@material-ui/lab/Pagination';
 import debug from 'debug';
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
 import React, { useState } from 'react';
 import { When } from 'react-if';
-import { Link } from 'react-router-dom';
-import { useTypedSelector } from '../../../store/index';
+import { tasksPerPage } from '../../../contants';
 import { Task } from '../../../entities/Task';
+import { useTypedSelector } from '../../../store/index';
 import { tasksSelector } from '../../../store/selectors';
-import { tasksPerPage } from '../../../contants';
+import { TasksListItem } from '../TasksListItem';
 
 const log = debug('TasksList');
 
@@ -31,7 +26,7 @@ interface TasksListProps {
 
 export function TasksList({
   loading,
-  tasks,
+  tasks = [],
   canDelete,
   deleteTask,
 }: TasksListProps) {
@@ -47,38 +42,24 @@ export function TasksList({
   log('page: ', page);
   log('numberOfPAges: ', numberOfPAges);
 
-  if (loading) return null;
-  if (isEmpty(tasks) || get(tasks, 'empty')) return null;
+  if (loading || isEmpty(tasks) || get(tasks, 'empty')) {
+    return null;
+  }
   return (
     <Paper className={classes.paper}>
       <List className={classes.list}>
         {tasks.slice(sliceTasksFrom, sliceTasksTo).map((task) => {
-          const text = get(task, 'subtasks[0].name', task.name);
           return (
-            <ListItem
+            <TasksListItem
               key={task.id}
-              component={Link}
-              className={classes.link}
-              to={`/tasks/${task.id}`}
-            >
-              <ListItemText
-                primary={text}
-                classes={{
-                  primary: classes.text,
-                  root: classes.textWrapper,
-                }}
-              />
-              <ListItemSecondaryAction>
-                <DeleteButton
-                  isVisible={canDelete}
-                  onClick={() => deleteTask && deleteTask(task.id)}
-                />
-              </ListItemSecondaryAction>
-            </ListItem>
+              task={task}
+              canDelete={canDelete}
+              deleteTask={deleteTask}
+            />
           );
         })}
       </List>
-      <When condition={tasks?.length > tasksPerPage}>
+      <When condition={tasks.length > tasksPerPage}>
         <Box display="flex" justifyContent="center">
           <Pagination
             count={numberOfPAges}
@@ -90,47 +71,12 @@ export function TasksList({
   );
 }
 
-function DeleteButton({
-  isVisible: canDelete,
-  onClick,
-}: {
-  onClick: () => void;
-  isVisible: TasksListProps['canDelete'];
-}) {
-  return (
-    <When condition={!!canDelete}>
-      <IconButton
-        edge="end"
-        aria-label="Delete"
-        onClick={() => onClick()}
-      >
-        <DeleteIcon />
-      </IconButton>
-    </When>
-  );
-}
-
 function useStyles() {
   return makeStyles((theme: Theme) => {
     return {
       list: {
         width: '100%',
       },
-      link: {
-        textDecoration: 'none',
-        color: theme.palette.text.primary,
-      },
-      textWrapper: {
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        [theme.breakpoints.down('sm')]: {
-          whiteSpace: 'nowrap',
-          maxWidth: '100%',
-        },
-      },
-      text: {
-        display: 'inline',
-      },
       paper: {
         width: '10000px',
         maxWidth: '100%',

src/components/tasks/TasksListItem.stories.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { sections } from '../storybookContants';
+import { TasksListItem } from './TasksListItem';
+
+export default {
+    component: TasksListItem,
+    title: sections.unsorted + 'TasksListItem',
+};
+
+const props = {}
+
+export const Demo = args => <TasksListItem {...args} />
+Demo.args = props

src/components/tasks/TasksListItem.tsx

@@ -0,0 +1,97 @@
+import React, { memo } from 'react';
+import {
+  Box,
+  IconButton,
+  ListItem,
+  ListItemSecondaryAction,
+  ListItemText,
+  Theme,
+} from '@material-ui/core';
+import { makeStyles } from '@material-ui/styles';
+import { Task } from '../../entities/Task';
+import TaskService from '../../services/TaskService';
+import get from 'lodash/get';
+import { Link } from 'react-router-dom';
+import DeleteIcon from '@material-ui/icons/Delete';
+import { When } from 'react-if';
+
+const useStyles = makeStyles((theme: Theme) => ({
+  link: {
+    textDecoration: 'none',
+    color: theme.palette.text.primary,
+  },
+  textWrapper: {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    [theme.breakpoints.down('sm')]: {
+      whiteSpace: 'nowrap',
+      maxWidth: '100%',
+    },
+  },
+  text: {
+    display: 'inline',
+  },
+}));
+
+interface Props {
+  task: Task;
+  canDelete?: boolean;
+  deleteTask?: (id: string) => void;
+}
+
+const TasksListItem = memo(function TasksListItem({
+  task,
+  canDelete,
+  deleteTask,
+}: Props) {
+  const classes = useStyles();
+
+  const isStale = TaskService.isStale(task);
+  console.log('isStale: ', isStale);
+  const text = get(task, 'subtasks[0].name', task.name);
+  return (
+    <ListItem
+      component={Link}
+      className={classes.link}
+      to={`/tasks/${task.id}`}
+    >
+      <ListItemText
+        primary={text}
+        classes={{
+          primary: classes.text,
+          root: classes.textWrapper,
+        }}
+      />
+      <ListItemSecondaryAction>
+        <DeleteButton
+          isVisible={canDelete}
+          onClick={() => deleteTask && deleteTask(task.id)}
+        />
+      </ListItemSecondaryAction>
+    </ListItem>
+  );
+});
+
+function DeleteButton({
+  isVisible: canDelete,
+  onClick,
+}: {
+  onClick: () => void;
+  isVisible: Props['canDelete'];
+}) {
+  return (
+    <When condition={!!canDelete}>
+      <IconButton
+        edge="end"
+        aria-label="Delete"
+        onClick={() => onClick()}
+      >
+        <DeleteIcon />
+      </IconButton>
+    </When>
+  );
+}
+
+TasksListItem.displayName = 'TasksListItem';
+
+export { TasksListItem };