fix(general fixes): fix Proptypes, linter and give unique id

packages/client/app/ui/editor/MultipleQuestion.js

@@ -135,17 +135,19 @@ const MultipleQuestion = props => {
 }
 
 MultipleQuestion.propTypes = {
-  addOption: PropTypes.func.isRequired,
+  addOption: PropTypes.func,
   questionText: PropTypes.string,
   feedBackText: PropTypes.string,
   questionNumber: PropTypes.number.isRequired,
-  removeOption: PropTypes.func.isRequired,
+  removeOption: PropTypes.func,
   showAddIcon: PropTypes.bool,
   showRemoveIcon: PropTypes.bool,
   readOnly: PropTypes.bool,
 }
 
 MultipleQuestion.defaultProps = {
+  addOption: () => true,
+  removeOption: () => true,
   questionText: '',
   feedBackText: '',
   showAddIcon: true,

packages/client/app/ui/editor/PmEditor.js

@@ -56,12 +56,13 @@ const EditorWrapper = styled.div`
     p.empty-node:first-child::before {
       content: attr(data-content);
     }
+
     .empty-node::before {
       color: rgb(170, 170, 170);
       float: left;
       font-style: italic;
-      pointer-events: none;
       height: 0px;
+      pointer-events: none;
     }
   }
 `
@@ -83,10 +84,12 @@ const PmEditor = props => {
 
 PmEditor.propTypes = {
   content: PropTypes.string,
+  readonly: PropTypes.bool,
 }
 
 PmEditor.defaultProps = {
   content: '',
+  readonly: false,
 }
 
 export default PmEditor

packages/client/stories/editor/Editor.js

-import React from 'react'
-
-const Editor = () => {}
-
-export default Editor

packages/client/stories/editor/MultipleQuestion.stories.js

 import React, { useState } from 'react'
-
 import { lorem } from 'faker'
 import { MultipleQuestion } from 'ui'
 import { last } from 'lodash'
+import { uuid } from '@coko/client'
 
 export const SingleEmptyAnswer = () => {
-  const [data, setData] = useState([1])
+  const [data, setData] = useState([{ id: uuid() }])
 
   const addOption = () => {
-    setData(data.concat(data.length + 1))
+    setData(data.concat(...[{ id: uuid() }]))
   }
 
-  const removeOption = index => {
-    setData(data.filter(element => element !== index))
+  const removeOption = id => {
+    setData(data.filter(element => element.id !== id))
   }
 
-  const answerGroup = data.map(index => {
+  const answerGroup = data.map((element, index) => {
     return (
       <MultipleQuestion
         addOption={addOption}
         feedBackText=""
-        key={index}
+        key={element.id}
         questionNumber={parseInt(index, 10)}
         questionText=""
-        removeOption={() => removeOption(index)}
-        showAddIcon={last(data) === index}
+        removeOption={() => removeOption(element.id)}
+        showAddIcon={data.length === index + 1}
         showRemoveIcon={data.length !== 1}
       />
     )
@@ -34,26 +34,26 @@ export const SingleEmptyAnswer = () => {
 }
 
 export const SingleAnswerWithText = () => {
-  const [data, setData] = useState([1])
+  const [data, setData] = useState([{ id: uuid() }])
 
   const addOption = () => {
-    setData(data.concat(data.length + 1))
+    setData(data.concat(...[{ id: uuid() }]))
   }
 
-  const removeOption = index => {
-    setData(data.filter(element => element !== index))
+  const removeOption = id => {
+    setData(data.filter(element => element.id !== id))
   }
 
-  const answerGroup = data.map(index => {
+  const answerGroup = data.map((element, index) => {
     return (
       <MultipleQuestion
         addOption={addOption}
         feedBackText={data.length > 1 ? '' : lorem.sentences(1)}
-        key={index}
+        key={element.id}
         questionNumber={parseInt(index, 10)}
         questionText={data.length > 1 ? '' : lorem.sentences(3)}
-        removeOption={() => removeOption(index)}
-        showAddIcon={last(data) === index}
+        removeOption={() => removeOption(element.id)}
+        showAddIcon={data.length === index + 1}
         showRemoveIcon={data.length !== 1}
       />
     )
@@ -63,26 +63,16 @@ export const SingleAnswerWithText = () => {
 }
 
 export const AnswerGroupReadOnly = () => {
-  const [data, setData] = useState([1, 2, 3, 4])
+  const data = [{ id: uuid() }, { id: uuid() }, { id: uuid() }, { id: uuid() }]
 
-  const addOption = () => {
-    setData(data.concat(data.length + 1))
-  }
-
-  const removeOption = index => {
-    setData(data.filter(element => element !== index))
-  }
-
-  const answerGroup = data.map(index => {
+  const answerGroup = data.map((element, index) => {
     return (
       <MultipleQuestion
-        addOption={addOption}
         feedBackText={lorem.sentences(1)}
-        key={index}
+        key={element.id}
         questionNumber={parseInt(index, 10)}
         questionText={lorem.sentences(3)}
         readOnly
-        removeOption={() => removeOption(index)}
         showAddIcon={last(data) === index}
         showRemoveIcon={data.length !== 1}
       />
@@ -94,5 +84,5 @@ export const AnswerGroupReadOnly = () => {
 
 export default {
   component: MultipleQuestion,
-  title: 'MultipleChoice/SingleAnswer',
+  title: 'Editor/MultipleChoice',
 }