Fix issue with task list not updating if markdown was found in the ta…

…sk description - Add a regexp to filter the tasks, making it easier to manipulate data - Add a function that retrieves task data from the card, including number of completed tasks vs total tasks - This can be used later to add a graphic indicator of the number of tasks per card - Tested with bold and other markdown markers - Update react showdown repository - Close #PM151
mdyna · Apr 22, 2019 · 177de29 · 177de29
1 parent 8bbebb4
commit 177de29
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 14 deletions.
diff --git a/app/components/UI/TaskListInput.jsx b/app/components/UI/TaskListInput.jsx
@@ -1,10 +1,51 @@
 import React, { Component } from 'react';
+import regexp from 'Utils/regexp';
 import PropTypes from 'prop-types';
 
-class TaskListInput extends Component {
+const FORBIDDEN_CHARACTERS = ['#', '*', '´', '~', '`'];
 
+function dropMdChars(text) {
+  const textArray = [];
+  const isNotForbidden = char => FORBIDDEN_CHARACTERS.indexOf(char) === -1;
+  for (let i = 0; i < text.length; i += 1) {
+    const char = text[i];
+    if (isNotForbidden(char)) {
+      textArray.push(char);
+    }
+  }
+  return textArray.join('');
+}
+
+function getTaskDataFromInput(text) {
+  const taskData = {
+    tasks: [],
+    completed: 0,
+  };
+  const tasks = text.match(regexp.extractTasksFromMarkdownRegExp)[0].split('- ');
+  for (let i = 0; i < tasks.length; i += 1) {
+    const task = tasks[i];
+    if (task) {
+      const rawContent = task.slice(4, task.length - 1).trim();
+      const completed = (task.slice(0, 3) === '[X]' && true) || false;
+      const textContent = dropMdChars(rawContent).trim();
+      taskData.tasks.push({
+        rawContent,
+        completed,
+        textContent,
+      });
+      if (completed) {
+        taskData.completed += 1;
+      }
+    }
+  }
+  return taskData;
+}
+
+class TaskListInput extends Component {
   render() {
-    const { text, editCard, defaultChecked } = this.props;
+    const {
+      text, editCard, defaultChecked,
+    } = this.props;
 
     return (
       <React.Fragment>
@@ -15,19 +56,18 @@ class TaskListInput extends Component {
           onChange={(e) => {
             e.stopPropagation();
             const { card, saveFunc } = editCard;
-            const inputTextContent = e.target.parentElement.textContent;
+            const taskData = getTaskDataFromInput(text);
             let newText = '';
-            if (e.target.checked) {
-              const inputText = `[ ]${inputTextContent}`;
-              newText = text.replace(inputText, `[X]${inputTextContent}`);
-            } else {
-              const inputText =
-                (text.indexOf(`[X]${inputTextContent}`) !== -1 && `[X]${inputTextContent}`) ||
-                (text.indexOf(`[x]${inputTextContent}`) !== -1 && `[x]${inputTextContent}`) ||
-                null;
-              newText = text.replace(inputText, `[ ] ${inputTextContent}`);
+            const taskIndex = taskData.tasks
+              .map(t => t.textContent)
+              .indexOf(e.target.parentElement.textContent.trim());
+            if (taskIndex !== -1) {
+              const task = taskData.tasks[taskIndex];
+              const { rawContent, completed } = task;
+              const newRawContent = completed ? `[ ] ${rawContent}` : `[X] ${rawContent}`;
+              const targetContent = completed ? `[X] ${rawContent}` : `[ ] ${rawContent}`;
+              newText = text.replace(targetContent, newRawContent);
             }
-
             saveFunc({
               ...card,
               text: newText,

diff --git a/app/package.json b/app/package.json
@@ -31,7 +31,7 @@
     "react-masonry-component": "^6.2.1",
     "react-redux": "^5.0.6",
     "react-router-dom": "4.1.1",
-    "react-showdown": "https://github.com/psybork/react-showdown.git",
+    "react-showdown": "https://github.com/dmorais92/react-showdown.git",
     "react-simplemde-editor": "^3.6.16",
     "react-tooltip": "^3.10.0",
     "recompose": "^0.30.0",

diff --git a/app/utils/regexp.js b/app/utils/regexp.js
@@ -1,7 +1,9 @@
 const codeRegExp = new RegExp(/`{3}[\s\S]*?`{3}/g);
 const backticksRegExp = new RegExp(/(?:```[a-z]*)/g);
+const extractTasksFromMarkdownRegExp = new RegExp(/^((?:- )?\[( |X)\] [\#\S\w\s\`\*\~]*([\w]*[\`\*\~]+[\w\S\. ]*))/m);
 
 export default {
   codeRegExp,
+  extractTasksFromMarkdownRegExp,
   backticksRegExp,
 };