feat: add delete to the course title

package.json

@@ -10,7 +10,7 @@
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-scripts": "3.0.1",
-    "styled-components": "^4.3.0"
+    "styled-components": "^4.3.2"
   },
   "scripts": {
     "start": "react-scripts start",

src/component/app/app.style.js

@@ -5,4 +5,5 @@ export const StyledApp = styled.div`
   display: grid;
   grid-template-columns: 2fr 1fr;
   padding: 1rem;
+  grid-gap: 1rem;
 `

src/component/app/course-item/course-item.component.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { StyledCourseItem } from './course-item.style';
+
+const CourseItem = ({ id, title, deleteItem, editItem }) => {
+  const handleDeleteItem = () => {
+    deleteItem && deleteItem(id)
+  }
+
+  return (
+    <StyledCourseItem>
+      <div>{title}</div>
+      <button onClick={editItem}>💾</button>
+      <button onClick={handleDeleteItem}>&times;</button>
+    </StyledCourseItem>
+  )
+}
+
+export default CourseItem

src/component/app/course-item/course-item.style.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components'
+
+export const StyledCourseItem = styled.div`
+  display: grid;
+  grid-template-columns: 1fr auto auto;
+`
+

src/component/app/course-item/index.js

@@ -0,0 +1 @@
+export { default } from './course-item.component'

src/component/course-list/course-list.component.jsx

@@ -1,16 +1,25 @@
 import React, { useEffect, useReducer } from 'react'
 import { db } from '../data/firebase'
+import CourseItem from '../app/course-item';
 
 const ADD_COURSE = '[Course list] -> ADD_COURSE'
+const REMOVE_COURSE = '[Course list] -> REMOVE_COURSE'
 const addCourseAction = course => ({
   type: ADD_COURSE,
   course,
 })
 
+const removeCourseAction = course => ({
+  type: REMOVE_COURSE,
+  course,
+})
+
 const courseListReducer = (state = [], action) => {
   switch(action.type) {
     case ADD_COURSE:
       return [...state, { title: action.course.title, id: action.course.id }]
+    case REMOVE_COURSE:
+      return state.filter(course => course.id !== action.course.id)
     default:
       return state
   }
@@ -25,23 +34,40 @@ const CourseList = () => {
       .onSnapshot(snapList => {
         snapList.docChanges().forEach(change => {
           const title = change.doc.data()
-          console.log(title)
+          console.log(title, change.type)
           if (change.type === 'added') {
             dispatch(addCourseAction({
               title: title.courseTitle,
               id: change.doc.id,
             }))
           }
+          else if (change.type === 'removed') {
+            dispatch(removeCourseAction({
+              id: change.doc.id,
+            }))
+          }
         })
       })
   }, [])
 
+  const deleteItem = id => {
+    console.log('deleteItem', id)
+    db
+      .collection('course')
+      .doc(id)
+      .delete()
+      .then(aaa => {
+        console.log(`Item with id: ${id} is no longer with us`)
+      })
+      .catch(message => console.log(`Weird message!`, message))
+  }
+
   return (
     <div>
       <h1>
         Course List
       </h1>
-      {courseList.map(({ title, id }) => <div key={id}>{title}</div>)}
+      {courseList.map(course => <CourseItem key={course.id} {...{...course, deleteItem}} />)}
     </div>
   )
 }