From 680697b78cde025048afc979fabf4eccd94a60d5 Mon Sep 17 00:00:00 2001
From: smoothwizz <popa.mares@gmail.com>
Date: Tue, 2 Apr 2024 19:29:49 +0300
Subject: [PATCH] feat(dashboard): simplify task editor

---
 client/components/common/Modal/Modal.tsx      | 48 +++++++++++
 client/components/common/Modal/index.ts       |  3 +
 .../components/forms/buttons/ButtonCircle.tsx | 11 +--
 .../DescriptionField.component.tsx            |  2 -
 .../components/overview/OverviewSection.tsx   | 83 ++++++++-----------
 .../TemplateSection.component.tsx             | 79 ++++++++++++++----
 .../overview/TemplateSection/templates.ts     |  2 +-
 7 files changed, 156 insertions(+), 72 deletions(-)
 create mode 100644 client/components/common/Modal/Modal.tsx
 create mode 100644 client/components/common/Modal/index.ts

diff --git a/client/components/common/Modal/Modal.tsx b/client/components/common/Modal/Modal.tsx
new file mode 100644
index 0000000..e0b1c14
--- /dev/null
+++ b/client/components/common/Modal/Modal.tsx
@@ -0,0 +1,48 @@
+// Modal as a separate component
+import ButtonSecondary from '@/components/forms/buttons/ButtonSecondary'
+import { useEffect, useRef } from 'react'
+
+interface Props {
+  isOpen: boolean
+  children: React.ReactElement
+  onModalClose: () => void
+}
+function Modal({ isOpen, children, onModalClose }: Props) {
+  const ref = useRef<HTMLDialogElement>(null)
+
+  useEffect(() => {
+    if (isOpen) {
+      ref.current?.showModal()
+    } else {
+      ref.current?.close()
+    }
+  }, [isOpen])
+
+  return (
+    <dialog ref={ref} onCancel={onModalClose}>
+      <div
+        className="relative z-10"
+        aria-labelledby="modal-title"
+        role="dialog"
+        aria-modal="true"
+      >
+        <div className="fixed inset-0 z-10 w-screen overflow-y-auto">
+          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <div className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
+              <div className="bg-white dark:bg-slate-700 px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
+                <div className="sm:flex sm:items-start">{children}</div>
+              </div>
+              <div className="bg-gray-200 dark:bg-slate-600 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
+                <ButtonSecondary action={() => onModalClose()}>
+                  Cancel
+                </ButtonSecondary>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </dialog>
+  )
+}
+
+export default Modal
diff --git a/client/components/common/Modal/index.ts b/client/components/common/Modal/index.ts
new file mode 100644
index 0000000..498702f
--- /dev/null
+++ b/client/components/common/Modal/index.ts
@@ -0,0 +1,3 @@
+import Modal from './Modal'
+
+export default Modal
diff --git a/client/components/forms/buttons/ButtonCircle.tsx b/client/components/forms/buttons/ButtonCircle.tsx
index a9e6305..1844af0 100644
--- a/client/components/forms/buttons/ButtonCircle.tsx
+++ b/client/components/forms/buttons/ButtonCircle.tsx
@@ -1,13 +1,13 @@
 import React from 'react'
 
 interface Props {
-  text: string
+  children: string | React.ReactElement
   action: () => void
   isDisabled?: boolean
   style?: string
 }
 
-const ButtonCircle = ({ text, action, isDisabled, style = '' }: Props) => {
+const ButtonCircle = ({ children, action, isDisabled, style = '' }: Props) => {
   return (
     <button
       className={`${buttonStyles} ${style}`}
@@ -17,15 +17,16 @@ const ButtonCircle = ({ text, action, isDisabled, style = '' }: Props) => {
       role="button"
       disabled={isDisabled}
     >
-      {text}
+      {children}
     </button>
   )
 }
 
-const buttonStyles = `mx-auto w-6 h-6 rounded-full text-white font-medium text-xs leading-tight
+const buttonStyles = `w-6 h-6 rounded-full text-white font-medium text-xs leading-tight
                       uppercase shadow-md cursor-pointer
-                      border border-gray-800 bg-gray-600
+                      border border-gray-800 dark:border-slate-600 bg-gray-600
                       hover:bg-gray-800 hover:shadow-lg hover:outline-none hover:ring-0
+                      flex justify-center items-center
                       focus:bg-gray-800 focus:shadow-lg focus:outline-none focus:ring-0
                       disabled:pointer-events-none active:bg-gray-800 active:shadow-lg disabled:opacity-25 transition duration-150 ease-in-out`
 
diff --git a/client/components/overview/DescriptionField/DescriptionField.component.tsx b/client/components/overview/DescriptionField/DescriptionField.component.tsx
index b667901..089fee6 100644
--- a/client/components/overview/DescriptionField/DescriptionField.component.tsx
+++ b/client/components/overview/DescriptionField/DescriptionField.component.tsx
@@ -24,8 +24,6 @@ const DescriptionField = () => {
         label="Task Details"
         value={description}
         handleCursorPositionUpdate={(pos: number) => setCursorPosition(pos)}
-        helpText="* A brief overview of what needs to be accomplished, in which you can
-        use markdown for detailed formatting."
       />
     </section>
   )
diff --git a/client/components/overview/OverviewSection.tsx b/client/components/overview/OverviewSection.tsx
index 78f9128..fc85fe6 100644
--- a/client/components/overview/OverviewSection.tsx
+++ b/client/components/overview/OverviewSection.tsx
@@ -10,8 +10,6 @@ import Seo from '../Seo'
 import SnippetsSection from './SnippetsSection/SnippetsSection'
 import Timer from '../timer'
 import MarkdownPreview from './MarkdownPreview'
-import Tabs from '../tabs'
-import { Tab, TabVariant } from '../tabs/Tabs'
 import TaskDetails from './TaskDetails'
 import SubtasksSection from './SubtasksSection'
 import Greeting from '../common/Greeting'
@@ -25,6 +23,8 @@ import {
 } from './TemplateSection/templates'
 import { TemplateVariant } from './TemplateSection/TemplateSection.component'
 import { getCurrentDate } from 'utils/functions'
+import ButtonCircle from '../forms/buttons/ButtonCircle'
+import { FaEye, FaEyeSlash } from 'react-icons/fa'
 
 type Props = {
   handleReset: () => void
@@ -37,7 +37,8 @@ const OverviewSection = ({ handleReset }: Props) => {
   const pageTitle = OVERVIEW_PAGE_TITLE
   const myStore = createStore()
   const [showConfetti, setShowConfetti] = useState(false)
-  const [activeTab, setActiveTab] = useState<TabVariant>('edit')
+  const [isPreview, setIsPreview] = useState(false)
+
   const [, setTitle] = useAtom(atom_title)
   const [, setDescription] = useAtom(atom_description)
 
@@ -66,48 +67,37 @@ const OverviewSection = ({ handleReset }: Props) => {
   )
 
   function renderTaskDashboard() {
-    const tabList: Array<Tab> = [
-      {
-        id: 1,
-        name: 'edit',
-        label: 'Plan & Write',
-      },
-      {
-        id: 2,
-        name: 'preview',
-        label: 'Focused Task',
-      },
-    ]
-
     return (
       <div className="my-4 md:md-0">
-        {activeTab === 'edit' && (
-          <>
-            <div className="w-full">
-              <h2 className="text-3xl font-bold mt-3 mb-3">
-                Ready for a focused session?
-              </h2>
-              <>
-                <p className="my-5 mx-auto text-xl">Define your task.</p>
-                <p className="text-xs text-gray-500 -mt-4 mb-4 dark:text-gray-400">
-                  <ButtonLink action={handleTutorialStart()}>
-                    Need help getting started?
-                  </ButtonLink>
-                </p>
-              </>
-            </div>
-            <TemplateSection handleTemplateChange={loadTemplate} />
-            <TaskDetails />
-          </>
-        )}
-        {activeTab === 'preview' && <MarkdownPreview />}
-
-        <Tabs
-          tabs={tabList}
-          activeTab={activeTab}
-          handleTabChange={(tab) => setActiveTab(tab)}
-        />
-        {activeTab === 'preview' && renderInfoMessages()}
+        <div>
+          <div className="w-full">
+            <h2 className="text-3xl font-bold mt-3 mb-3">
+              Ready for a focused session?
+            </h2>
+            <>
+              <p className="my-5 mx-auto text-xl">Define your task.</p>
+              <p className="text-xs text-gray-500 -mt-4 mb-4 dark:text-gray-400">
+                <ButtonLink action={handleTutorialStart()}>
+                  Need help getting started?
+                </ButtonLink>
+              </p>
+            </>
+          </div>
+          <div className="w-full flex gap-4 items-center justify-between">
+            <ButtonCircle action={() => setIsPreview(!isPreview)}>
+              {isPreview ? <FaEyeSlash /> : <FaEye />}
+            </ButtonCircle>
+            <TemplateSection
+              handleTemplateChange={(variant) => {
+                loadTemplate(variant)
+                setIsPreview(false)
+              }}
+            />
+          </div>
+          {!isPreview && <TaskDetails />}
+          {isPreview && <MarkdownPreview />}
+        </div>
+        {renderInfoMessages()}
         <Timer />
         <div className="grid md:grid-cols-2	md:gap-8">
           <SubtasksSection />
@@ -123,8 +113,8 @@ const OverviewSection = ({ handleReset }: Props) => {
 
   function handleTutorialStart(): () => void {
     return () => {
+      setIsPreview(true)
       loadTemplate('tutorial')
-      setActiveTab('preview')
     }
   }
 
@@ -137,7 +127,7 @@ const OverviewSection = ({ handleReset }: Props) => {
     }
 
     return (
-      <>
+      <section className="mt-4">
         <Alert style="info">
           {showConfetti
             ? 'Congratulations! Starting up a new one...'
@@ -149,14 +139,13 @@ const OverviewSection = ({ handleReset }: Props) => {
           )}
           {showConfetti && <ConfettiExplosion {...confettiConfigProps} />}
         </Alert>
-      </>
+      </section>
     )
   }
 
   function markTaskAsCompleted() {
     setShowConfetti(true)
     setTimeout(() => {
-      setActiveTab('edit')
       handleReset()
       setShowConfetti(false)
     }, CONFETTI_TIMER - 1000)
diff --git a/client/components/overview/TemplateSection/TemplateSection.component.tsx b/client/components/overview/TemplateSection/TemplateSection.component.tsx
index e104795..3261974 100644
--- a/client/components/overview/TemplateSection/TemplateSection.component.tsx
+++ b/client/components/overview/TemplateSection/TemplateSection.component.tsx
@@ -1,5 +1,7 @@
+import Modal from '@/components/common/Modal'
+import ButtonFontIcon from '@/components/forms/buttons/ButtonFontIcon'
 import ButtonSecondary from '@/components/forms/buttons/ButtonSecondary'
-import React from 'react'
+import React, { useState } from 'react'
 
 export type TemplateVariant =
   | 'feature'
@@ -10,9 +12,9 @@ export type TemplateVariant =
   | 'tutorial'
 
 type Template = {
-  id: number
   name: TemplateVariant
   label: string
+  description: string
 }
 
 interface Props {
@@ -20,49 +22,92 @@ interface Props {
 }
 
 const TemplateSection = ({ handleTemplateChange }: Props) => {
+  const [isModalOpen, setIsModalOpen] = useState(false)
+
   const templateList: Array<Template> = [
     {
-      id: 0,
       name: 'generic',
       label: 'Generic',
+      description: 'Provides a flexible outline for any coding task.',
     },
     {
-      id: 1,
       name: 'feature',
       label: 'Feature',
+      description: 'Plan the development of a new feature, step by step.',
     },
     {
-      id: 2,
       name: 'bug',
       label: 'Bug',
+      description:
+        'Document the steps to reproduce a bug and outline a potential fix.',
     },
     {
-      id: 3,
       name: 'code_review',
       label: 'Code Review ',
+      description: 'Create a systematic checklist for evaluating code quality.',
     },
     {
-      id: 4,
       name: 'blank',
       label: 'Blank',
+      description: 'Start with a clean slate for maximum customization.',
     },
   ]
 
   return (
     <>
-      <div className="my-2 flex flex-wrap gap-2">
-        {templateList.map((template) => (
-          <ButtonSecondary
-            key={template.id}
-            action={() => handleTemplateChange(template.name)}
-            style={template.name === 'tutorial' ? 'bg-blue-300' : ''}
-          >
-            {template.label}
-          </ButtonSecondary>
-        ))}
+      <div className="max-w-[250px]">
+        <ButtonSecondary action={() => setIsModalOpen(true)}>
+          Choose a template
+        </ButtonSecondary>
+        {renderModal()}
       </div>
     </>
   )
+
+  function renderModal() {
+    return (
+      <Modal isOpen={isModalOpen} onModalClose={() => setIsModalOpen(false)}>
+        <div className="my-2 flex flex-wrap gap-2">
+          <h2>Choose a Template</h2>
+          <table className="min-w-full divide-y divide-gray-200 dark:divide-slate-600">
+            <thead>
+              <tr>
+                <th className="px-6 py-3 text-left text-xs font-medium tracking-wider">
+                  Name
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium tracking-wider">
+                  Description
+                </th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-200">
+              {templateList.map((template) => (
+                <tr key={template.name}>
+                  <td className="px-6 py-4 whitespace-nowrap">
+                    <ButtonFontIcon
+                      action={() => {
+                        onTemplateSelect(template.name)
+                      }}
+                    >
+                      {template.label}
+                    </ButtonFontIcon>
+                  </td>
+                  <td className="px-6 py-4 whitespace-normal">
+                    {template.description}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </Modal>
+    )
+  }
+
+  function onTemplateSelect(variant: TemplateVariant) {
+    setIsModalOpen(false)
+    handleTemplateChange(variant)
+  }
 }
 
 export default TemplateSection
diff --git a/client/components/overview/TemplateSection/templates.ts b/client/components/overview/TemplateSection/templates.ts
index 6809f95..6aabdd6 100644
--- a/client/components/overview/TemplateSection/templates.ts
+++ b/client/components/overview/TemplateSection/templates.ts
@@ -155,7 +155,7 @@ dd.mm.yyyy`,
     * **Tips Section:**
         * Get actionable tips to optimize your focus, reduce coding errors, and problem-solve more effectively.  
 
-7. **Click on Plan & Write to get started** ✨ `,
+7. **Click on the "Choose a template" to get started** ✨ `,
   },
 }