CreateOrEditTaskCard - use better combined crate/edit task card component

src/features/TaskCard/TaskCard.js

@@ -1,15 +1,30 @@
 import React, { useState } from "react";
-import { useSelector, useDispatch } from "react-redux";
-import { createList } from "../../storeSlices/boardSlice";
+
+import { CreateOrEditTaskCard } from "./CreateOrEditTaskCard";
 
 import styles from "./TaskCard.module.css";
 
-export function TaskCard({ cardData }) {
-  const dispatch = useDispatch();
+export function TaskCard({ cardData, listID }) {
+  const [isEditing, setIsEditing] = useState(false);
 
-  return (
-    <div className={styles.cardContainer} tabIndex={1} contentEditable="true">
+  const stopEditing = () => setIsEditing(false);
+
+  return !isEditing ? (
+    <div
+      className={styles.cardContainer}
+      tabIndex={1}
+      onDoubleClick={e => setIsEditing(true)}
+    >
       {cardData.text}
     </div>
+  ) : (
+    <CreateOrEditTaskCard
+      cardID={cardData.id}
+      listID={listID}
+      defaultCardText={cardData.text}
+      mode="edit"
+      onSubmit={stopEditing}
+      onCancel={stopEditing}
+    />
   );
 }