Merge pull request #25 from SundeepChand/feat/templates

Initial Request templates implementation

Author: kaybhutani

package-lock.json

@@ -4,8 +4,6 @@
   "private": false,
   "homepage": "https://userstory.eosdesignsystem.com/",
   "dependencies": {
-    "@ckeditor/ckeditor5-build-classic": "^19.0.2",
-    "@ckeditor/ckeditor5-react": "^2.1.0",
     "@reach/router": "^1.2.1",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
@@ -14,6 +12,7 @@
     "better-docs": "^2.0.1",
     "eos-icons": "^4.0.3",
     "i18next": "^19.4.5",
+    "markdown-it": "^12.0.6",
     "node-sass": "^4.13.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
@@ -22,6 +21,7 @@
     "react-hook-form": "^6.3.2",
     "react-i18next": "^11.5.0",
     "react-markdown": "^5.0.2",
+    "react-markdown-editor-lite": "^1.2.4",
     "react-promise-tracker": "^2.1.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",

package.json

@@ -0,0 +1,40 @@
+import React, { useState } from 'react'
+import MarkdownIt from 'markdown-it'
+import MdEditor from 'react-markdown-editor-lite'
+import 'react-markdown-editor-lite/lib/index.css'
+
+const mdParser = new MarkdownIt().set({ html: true })
+
+function MarkdownEditor({ value, callback }) {
+  const [userInput, setUserInput] = useState('')
+
+  return (
+    <MdEditor
+      config={{
+        view: {
+          html: false
+        }
+      }}
+      plugins={[
+        'header',
+        'font-bold',
+        'font-italic',
+        'list-unordered',
+        'list-ordered',
+        'link',
+        'mode-toggle'
+      ]}
+      style={{ height: '350px' }}
+      renderHTML={(text) => mdParser.render(text)}
+      onChange={({ html, text }) => {
+        if (typeof value === typeof undefined) {
+          setUserInput(text)
+        }
+        callback(html, text)
+      }}
+      value={value ?? userInput}
+    />
+  )
+}
+
+export default MarkdownEditor

src/components/MarkdownEditor.js

@@ -1,8 +1,8 @@
 import React, { useLayoutEffect, useState, useEffect, useContext } from 'react'
 import { useForm } from 'react-hook-form'
 
-import CKEditor from '@ckeditor/ckeditor5-react'
-import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
+import MarkdownEditor from '../components/MarkdownEditor'
+import { filterDescriptionText } from '../utils/filterText'
 import axios from 'axios'
 import { apiURL } from '../config.json'
 import { trackPromise, usePromiseTracker } from 'react-promise-tracker'
@@ -18,13 +18,25 @@ import { navigate } from '@reach/router'
 import Context from '../modules/Context'
 import Login from './Login'
 
+const initialDescriptionInputsValue = {
+  None: ''
+}
+
 const NewStory = () => {
   const { state } = useContext(Context)
 
-  const { register, handleSubmit, errors, setValue, watch } = useForm()
+  const { register, handleSubmit, errors, watch } = useForm()
+
+  const [currentProductSelected, setCurrentProductSelected] = useState('None')
 
   const [descriptionError, setDescriptionError] = useState(false)
 
+  const [descriptionInputs, setDescriptionInputs] = useState(
+    initialDescriptionInputsValue
+  )
+
+  const [description, setDescription] = useState('')
+
   const [categories, setCategories] = useState([])
 
   const [priorities, setPriorities] = useState([])
@@ -69,14 +81,24 @@ const NewStory = () => {
           products {
             id
             Name
+            user_story_template
           }
         }`
         },
         {
           withCredentials: true
         }
       )
-      setProducts(response.data.data.products)
+      const { products } = response.data.data
+      setProducts(products)
+      const productToTemplateTextMap = {}
+      products.forEach((product) => {
+        productToTemplateTextMap[product.id] = product.user_story_template ?? ''
+      })
+      setDescriptionInputs({
+        ...initialDescriptionInputsValue,
+        ...productToTemplateTextMap
+      })
     }
 
     trackPromise(fetchProducts())
@@ -131,13 +153,18 @@ const NewStory = () => {
   }
   feature coming in next PR
   */
+  const handleProductSelectChange = (event) => {
+    const id = event.target.value
+    const selectedProduct = products.find((product) => product.id === id)
+    setCurrentProductSelected(selectedProduct?.id ?? 'None')
+  }
 
   const onSubmit = async (data) => {
-    if (data.description === undefined || data.description.length === 0) {
+    if (!description?.length) {
       setDescriptionError(true)
       return
     }
-    data.description = data.description.replace(/"/g, '\\"') // Replace all occurences of " with \"
+    data.description = filterDescriptionText(description)
     await axios.post(
       `${apiURL}/graphql`,
       {
@@ -148,7 +175,6 @@ const NewStory = () => {
                 Description: "${data.description}"
                 Title: "${data.title}"
                 Category: ${data.category}
-                user_story_status: "5f0f33205f5695666b0d2e7e"
                 product: "${data.product}"
                 Priority: ${data.priority}
               }
@@ -165,9 +191,6 @@ const NewStory = () => {
     )
     navigate('/')
   }
-  useEffect(() => {
-    register('description')
-  })
 
   return state.auth ? (
     <>
@@ -208,6 +231,7 @@ const NewStory = () => {
                   <select
                     className='select-default'
                     name='product'
+                    onChange={handleProductSelectChange}
                     ref={register({ required: true })}
                   >
                     <option defaultValue={true} value=''>
@@ -268,25 +292,18 @@ const NewStory = () => {
                 </div>
                 <div className='form-element'>
                   <label htmlFor='description'>Description</label>
-                  <CKEditor
-                    editor={ClassicEditor}
-                    config={{
-                      toolbar: [
-                        'heading',
-                        '|',
-                        'bold',
-                        'italic',
-                        '|',
-                        'link',
-                        'bulletedList',
-                        'numberedList'
-                      ]
-                    }}
-                    onChange={(event, editor) => {
-                      setValue('description', editor.getData())
+                  <MarkdownEditor
+                    callback={(html, text) => {
+                      const result = {}
+                      result[currentProductSelected] = text
+                      setDescription(html)
                       setDescriptionError(false)
+                      setDescriptionInputs({
+                        ...descriptionInputs,
+                        ...result
+                      })
                     }}
-                    ref={register}
+                    value={descriptionInputs[currentProductSelected]}
                   />
                   {descriptionError && <FormError type='emptyDescription' />}
                 </div>

src/pages/NewStory.js

@@ -1,6 +1,4 @@
 import React, { useEffect, useState } from 'react'
-import CKEditor from '@ckeditor/ckeditor5-react'
-import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
 import axios from 'axios'
 import { apiURL } from '../config.json'
 import { trackPromise, usePromiseTracker } from 'react-promise-tracker'
@@ -17,6 +15,8 @@ import {
 
 import { Helmet } from 'react-helmet'
 
+import MarkdownEditor from '../components/MarkdownEditor'
+import { filterDescriptionText } from '../utils/filterText'
 import Comments from '../components/Comments'
 import Timeline from '../components/Timeline'
 import Button from '../components/Button'
@@ -99,15 +99,18 @@ const Story = (props) => {
   }, [storyId, userId])
 
   const save = async (event) => {
+    if (editDescription.length <= 0) {
+      return
+    }
     event.preventDefault()
+    const combinedDescription = story.Description + editDescription
+    const filteredDescription = filterDescriptionText(combinedDescription)
     await axios.post(
       `${apiURL}/graphql`,
       {
         query: `mutation {
           updateUserStory(
-            input: { where: { id: "${storyId}" }, data: { Description: "${
-          story.Description + editDescription
-        }" } }
+            input: { where: { id: "${storyId}" }, data: { Description: "${filteredDescription}" } }
           ) {
             userStory {
               updatedAt
@@ -122,7 +125,7 @@ const Story = (props) => {
     setEditor(false)
     setStory({
       ...story,
-      Description: `${story.Description + editDescription}`
+      Description: `${combinedDescription}`
     })
   }
 
@@ -187,23 +190,9 @@ const Story = (props) => {
 
               {editor ? (
                 <>
-                  <CKEditor
-                    editor={ClassicEditor}
-                    config={{
-                      toolbar: [
-                        'heading',
-                        '|',
-                        'bold',
-                        'italic',
-                        '|',
-                        'link',
-                        'bulletedList',
-                        'numberedList'
-                      ]
-                    }}
-                    onChange={(event, editor) => {
-                      const response = editor.getData()
-                      setDescription(response)
+                  <MarkdownEditor
+                    callback={(html) => {
+                      setDescription(html)
                     }}
                   />
                 </>

src/pages/Story.js

@@ -0,0 +1,5 @@
+export const filterDescriptionText = (text) => {
+  text = text.replace(/\\*"/g, '\\"') // Replace all occurences of " with \"
+  text = text.replace(/[\r\n]/g, '') // Remove the line endings
+  return text
+}