Fix section delete (octokatherine#190)

* Fix section delete * Individual section reset
hbcbh1999 · Sep 8, 2021 · 4be36f5 · 4be36f5
1 parent 22b193d
commit 4be36f5
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 11 deletions.
diff --git a/components/SectionsColumn.js b/components/SectionsColumn.js
@@ -21,6 +21,7 @@ export const SectionsColumn = ({
   setSectionSlugs,
   setFocusedSectionSlug,
   focusedSectionSlug,
+  templates,
   originalTemplate,
   setTemplates,
   getTemplate,
@@ -37,7 +38,7 @@ export const SectionsColumn = ({
   const [addAction, setAddAction] = useState(false)
   const [currentSlugList, setCurrentSlugList] = useState([])
   const [slugsFromPreviousSession, setSlugsFromPreviousSession] = useState([])
-  const { deleteBackup } = useLocalStorage()
+  const { saveBackup, deleteBackup } = useLocalStorage()
 
   useEffect(() => {
     var slugsFromPreviousSession =
@@ -96,6 +97,20 @@ export const SectionsColumn = ({
     localStorage.setItem('current-focused-slug', 'noEdit')
   }
 
+  const onResetSection = (e, sectionSlug) => {
+    e.stopPropagation()
+    const originalSection = originalTemplate.find((s) => s.slug === sectionSlug)
+    const newTemplates = templates.map((s) => {
+      if (s.slug === originalSection.slug) {
+        return originalSection
+      }
+
+      return s
+    })
+    setTemplates(newTemplates)
+    saveBackup(newTemplates)
+  }
+
   const resetSelectedSections = () => {
     const data = localStorage.getItem('current-slug-list')
 
@@ -161,6 +176,7 @@ export const SectionsColumn = ({
                     focusedSectionSlug={focusedSectionSlug}
                     setFocusedSectionSlug={setFocusedSectionSlug}
                     onDeleteSection={onDeleteSection}
+                    onResetSection={onResetSection}
                   />
                 )))
               }

diff --git a/components/SortableItem.js b/components/SortableItem.js
@@ -18,6 +18,15 @@ export function SortableItem(props) {
     props.onDeleteSection(e, props.section.slug)
   }
 
+  const onClickReset = (e) => {
+    const sectionResetConfirmed = window.confirm(
+      'The section will be reset to default template; to continue, click OK'
+    )
+    if (sectionResetConfirmed === true) {
+      props.onResetSection(e, props.section.slug)
+    }
+  }
+
   const onKeyUp = (e) => {
     if (e.key.toLowerCase() === 'enter') {
       onClickSection()
@@ -31,27 +40,37 @@ export function SortableItem(props) {
       {...attributes}
       onClick={onClickSection}
       onKeyUp={onKeyUp}
-      className={`bg-white shadow rounded-md pl-3 pr-6 py-2 flex items-center cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-400 relative select-none ${
+      className={`bg-white shadow rounded-md pl-1 pr-14 py-2 flex items-center cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-400 relative select-none ${
         props.section.slug === props.focusedSectionSlug ? 'ring-2 ring-emerald-400' : ''
       }`}
     >
       <button
         type="button"
-        className="mr-2 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-400"
+        className="mr-1 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-400"
         {...listeners}
       >
         <img className="w-5 h-5" src="drag.svg" />
       </button>
       <p>{props.section.name}</p>
       {props.section.slug === props.focusedSectionSlug && (
-        <button
-          className="focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-400 absolute right-2"
-          type="button"
-          aria-label="Delete section"
-          onClick={onClickTrash}
-        >
-          <img className="w-auto h-5" src="trash.svg" alt="trash-icon" />
-        </button>
+        <>
+          <button
+            className="focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-400 absolute right-8"
+            type="button"
+            aria-label="Reset section"
+            onClick={onClickReset}
+          >
+            <img className="w-auto h-5" src="reset.svg" alt="reset-icon" />
+          </button>
+          <button
+            className="focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-400 absolute right-2"
+            type="button"
+            aria-label="Delete section"
+            onClick={onClickTrash}
+          >
+            <img className="w-auto h-5" src="trash.svg" alt="trash-icon" />
+          </button>
+        </>
       )}
     </li>
   )

diff --git a/pages/editor.js b/pages/editor.js
@@ -84,6 +84,7 @@ export default function Editor({ sectionTemplate }) {
             setSectionSlugs={setSectionSlugs}
             setFocusedSectionSlug={setFocusedSectionSlug}
             focusedSectionSlug={focusedSectionSlug}
+            templates={templates}
             originalTemplate={sectionTemplate}
             setTemplates={setTemplates}
             getTemplate={getTemplate}