feat: refactor confusing Course and Section

Co-authored-by: Filip Cornel-Cristian <[email protected]> Co-authored-by: Catalin Sandru <[email protected]> Co-authored-by: Tandara Elena <[email protected]>
codetapacademy · Jul 22, 2019 · 336ca31 · 336ca31
1 parent 3cfec68
commit 336ca31
Show file tree

Hide file tree

Showing 5 changed files with 126 additions and 66 deletions.
diff --git a/src/component/course/course.component.jsx b/src/component/course/course.component.jsx
@@ -1,23 +1,11 @@
 import React, { useEffect, useState } from 'react'
 import { WebInfoState } from '../web-info/web-info.context';
-import { db } from '../data/firebase'
 import PanelTitle from '../panel-title';
-import ManageMeta from '../manage-meta';
-import SectionList from '../section-list';
+import SectionPanel from '../section-panel/section-panel.component';
 
-const Section = ({ courseId }) => {
-  const defaultSection = {
-    title: '',
-    description: '',
-    id: null,
-    course: {
-      id: courseId,
-      title: 'Course '
-    },
-  }
-  const { sectionList, courseList } = WebInfoState()
-  const [ section, setSection ] = useState(defaultSection)
-  console.log(sectionList)
+const Course = ({ courseId }) => {
+  const { courseList } = WebInfoState()
+  const [ course, setCourse ] = useState({})
 
   useEffect(() => {
     // sectionList
@@ -28,56 +16,17 @@ const Section = ({ courseId }) => {
     //   })
     const course = courseList.filter(({ id }) => id === courseId)[0]
     if (course && courseList.length) {
-      setSection({
-        ...section,
-        course,
-      })
+      setCourse(course)
     }
   }, [courseList])
 
-  const save = () => {
-    const sectionCollection = db.collection('section')
-    const { id, title, description, course } = section
-    if (id) {
-      // it means we want to update a Section
-      sectionCollection.doc(id).set(
-        { title, description, course },
-        { merge: true }
-      )
-    }
-    else {
-      // we want to add a Section
-      sectionCollection.add({ title, description, course })
-    }
-    setSection(defaultSection)
-  }
-
-  const change = what => {
-    setSection({ ...section, ...what })
-  }
-
-  const cancel = () => {
-    setSection(defaultSection)
-  }
-
-  const getSaveLabel = () => section.id ? "Update section" : "Add section"
-
   return (
     <div>
-      <PanelTitle>{section.course.title}</PanelTitle>
-      <p>{section.course.description}</p>
-      <PanelTitle>Add section</PanelTitle>
-      <ManageMeta
-        label={getSaveLabel()}
-        save={save}
-        change={change}
-        cancel={cancel}
-        data={section}
-      />
-      <PanelTitle>Manage section</PanelTitle>
-      <SectionList data={sectionList} />
+      <PanelTitle>{course.title}</PanelTitle>
+      <p>{course.description}</p>
+      <SectionPanel course={course} />
     </div>
   )
 }
 
-export default Section
+export default Course
diff --git a/src/component/section-item/section-item.component.jsx b/src/component/section-item/section-item.component.jsx
@@ -1,8 +1,23 @@
 import React from 'react'
+import { StyledSectionItem, StyledSectionButton } from './section-item.style';
 
-const SectionItem = ({ title}) => {
+const SectionItem = ({ title, id, update, deleteItem }) => {
   return (
-    <div>{title}</div>
+    <StyledSectionItem>
+      <StyledSectionButton
+        side="left"
+        onClick={() => update(id)}
+      >
+        Edit
+      </StyledSectionButton>
+      {title}
+      <StyledSectionButton
+        side="right"
+        onClick={() => deleteItem(id)}
+      >
+        Delete
+      </StyledSectionButton>
+    </StyledSectionItem>
   )
 }
 

diff --git a/src/component/section-item/section-item.style.js b/src/component/section-item/section-item.style.js
@@ -0,0 +1,18 @@
+import styled from 'styled-components'
+
+export const StyledSectionItem = styled.div`
+  position: relative;
+  overflow: hidden;
+`
+
+export const StyledSectionButton = styled.button`
+  position: absolute;
+  top: 0;
+  transition: 0.25s;
+
+  ${({ side }) => side}: -100px;
+
+  ${StyledSectionItem}:hover > & {
+    ${({ side }) => side}: 0;
+  }
+`
diff --git a/src/component/section-list/section-list.component.jsx b/src/component/section-list/section-list.component.jsx
@@ -1,11 +1,35 @@
 import React from 'react'
 import { StyledSectionList } from './section-list.style';
 import SectionItem from '../section-item';
+import { db } from '../data/firebase'
 
 const SectionList = ({ data = [] }) => {
+
+  const deleteItem = id => {
+    console.log('id to delete:  ' + id)
+    db
+      .collection('section')
+      .doc(id)
+      // TODO, mark as deleted and never delete
+      // some other logic should display data only if not marked as deleted
+      .delete()
+      .then(aaa => {
+        // console.log(`Item with id: ${id} is no longer with us`, aaa)
+      })
+      .catch(message => console.log(`Weird message!`, message))
+  }
+
   return (
     <StyledSectionList>
-      {data.map(({ title }) => <SectionItem title={title} />)}
+      {data.map(({ title, description, id }) => {
+        const sectionItemPropList = {
+          title,
+          description,
+          id,
+          deleteItem,
+        }
+        return <SectionItem key={id} {...sectionItemPropList} />
+      })}
     </StyledSectionList>
   )
 }

diff --git a/src/component/section-panel/section-panel.component.jsx b/src/component/section-panel/section-panel.component.jsx
@@ -1,8 +1,62 @@
-import React from 'react'
+import React, { useState } from 'react'
+import PanelTitle from '../panel-title';
+import { db } from '../data/firebase'
+import ManageMeta from '../manage-meta';
+import SectionList from '../section-list';
+import { WebInfoState } from '../web-info/web-info.context';
+
+const SectionPanel = ({ course }) => {
+  const defaultSection = {
+    title: '',
+    description: '',
+    id: null,
+    course,
+  }
+  const { sectionList } = WebInfoState()
+  const [ section, setSection ] = useState(defaultSection)
+  console.log(sectionList)
+
+  const change = what => {
+    setSection({ ...section, ...what })
+  }
+
+  const save = () => {
+    const sectionCollection = db.collection('section')
+    const { id, title, description } = section
+    if (id) {
+      // it means we want to update a Section
+      sectionCollection.doc(id).set(
+        { title, description, course },
+        { merge: true }
+      )
+    }
+    else {
+      // we want to add a Section
+      sectionCollection.add({ title, description, course })
+    }
+    setSection(defaultSection)
+  }
+
+  const cancel = () => {
+    setSection(defaultSection)
+  }
+
+  const getSaveLabel = () => section.id ? "Update section" : "Add section"
 
-const SectionPanel = () => {
   return (
-    <div>Daca vrem!</div>
+    <div>
+      <PanelTitle>Add section</PanelTitle>
+      <ManageMeta
+        label={getSaveLabel()}
+        save={save}
+        change={change}
+        cancel={cancel}
+        data={section}
+      />
+      <PanelTitle>Manage section</PanelTitle>
+      <SectionList data={sectionList} />
+
+    </div>
   )
 }