Implement Delete Icon ❌

Author: deadcoder0904

src/components/Main/DeleteTodo.js

@@ -0,0 +1,70 @@
+import React from "react";
+import styled from "react-emotion";
+import { withTheme } from "emotion-theming";
+import { Query, Mutation } from "react-apollo";
+import Icon from "react-icons-kit";
+import { bin } from "react-icons-kit/icomoon/bin";
+
+import { DELETE_TODO } from "../../graphql/mutation/DELETE_TODO";
+import { GET_TODOS_BY_PRODUCT } from "../../graphql/queries/GET_TODOS_BY_PRODUCT";
+
+const BinIcon = styled(Icon)`
+  padding-left: 1rem;
+`;
+
+const DeleteTodoContainer = ({ id, productId, completed, theme }) => {
+  return (
+    <Mutation
+      mutation={DELETE_TODO}
+      optimisticResponse={{
+        __typename: "Mutation",
+        deleteTodo: {
+          __typename: "Todo",
+          id,
+        },
+      }}
+      update={(cache, { data }) => {
+        // delete todo item
+        const cacheData = cache.readQuery({
+          query: GET_TODOS_BY_PRODUCT,
+          variables: {
+            id: productId,
+            completed,
+          },
+        });
+
+        const todos = cacheData.product.todos.filter(t => t.id !== id); // make a shallow copy otherwise error "Object is not extensible" is thrown
+
+        const newData = {
+          ...cacheData,
+          product: {
+            ...cacheData.product,
+            todos: todos,
+          },
+        };
+
+        cache.writeQuery({
+          query: GET_TODOS_BY_PRODUCT,
+          variables: {
+            id: productId,
+            completed,
+          },
+          data: newData,
+        });
+      }}
+    >
+      {mutate => (
+        <BinIcon
+          onClick={() => {
+            mutate({ variables: { id } });
+          }}
+          icon={bin}
+          color={theme.binIcon.color}
+          size={16}
+        />
+      )}
+    </Mutation>
+  );
+};
+
+export const DeleteTodo = withTheme(DeleteTodoContainer);

src/components/Main/index.js

@@ -9,6 +9,7 @@ import { checkmark } from "react-icons-kit/icomoon/checkmark";
 import { cross } from "react-icons-kit/icomoon/cross";
 
 import { CreateTodo } from "./CreateTodo";
+import { DeleteTodo } from "./DeleteTodo";
 import { Loading } from "../Loading/index";
 import { Error } from "../Error/index";
 import { Status } from "./Status";
@@ -210,12 +211,11 @@ class MainContainer extends React.Component {
                               }}
                             >
                               {mutate => (
-                                <TodoBox
-                                  onClick={() => {
-                                    mutate({ variables: { id: todo.id } });
-                                  }}
-                                >
+                                <TodoBox>
                                   <StatusIcon
+                                    onClick={() => {
+                                      mutate({ variables: { id: todo.id } });
+                                    }}
                                     icon={completed ? checkmark : cross}
                                     color={
                                       completed
@@ -226,6 +226,11 @@ class MainContainer extends React.Component {
                                   />
                                   <Todo>
                                     {this._getHashtag(todo.body, hashtag)}
+                                    <DeleteTodo
+                                      id={todo.id}
+                                      productId={productId}
+                                      completed={completed}
+                                    />
                                   </Todo>
                                 </TodoBox>
                               )}

src/graphql/mutation/DELETE_TODO.js

@@ -1,7 +1,7 @@
 import gql from "graphql-tag";
 
 export const DELETE_TODO = gql`
-  mutation($id: ID!) {
+  mutation deleteTodo($id: ID!) {
     deleteTodo(id: $id)
   }
 `;

src/styles/theme.js

@@ -48,6 +48,9 @@ export const theme = {
       doneColor: "#000000",
       pendingColor: "#000000",
     },
+    binIcon: {
+      color: "#000000",
+    },
   },
   DARK: {
     global: {
@@ -95,5 +98,8 @@ export const theme = {
       doneColor: "#ffffff",
       pendingColor: "#ffffff",
     },
+    binIcon: {
+      color: "#ffffff",
+    },
   },
 };