Fix card bugs

src/components/Card/Content.jsx

@@ -1,30 +1,44 @@
 import React from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 
 import * as actions from '../../store/actionIndex';
-import ContentTextarea from '../UI/Inputs/ContentTextarea';
+import * as hooks from './hooks';
 
 import './index.scss';
 
 const Content = ({
   cardId,
   setEditingCard,
+  text,
 }) => {
   const dispatch = useDispatch();
 
-  // STORE SELECTORS
-  const cardText = useSelector(state => state.campaignData.present.cards[cardId].content.text);
-
-  // FUNCTIONS
-
-  // STYLES
+  const {
+    readOnly,
+    contentRef,
+    contentValue,
+    changeContentValue,
+    beginContentEdit,
+    endContentEdit,
+  } = hooks.useContentHooks({
+    saveNewValue: (value) => dispatch(actions.updCardText(cardId, value)),
+    setEditingCard,
+    value: text,
+  });
 
   return (
     <div className="content">
-      <ContentTextarea className="text"
-        value={cardText}
-        saveValue={v => dispatch(actions.updCardText(cardId, v))}
-        setEditingParent={setEditingCard}
+      <textarea
+        className='text'
+        onBlur={endContentEdit}
+        onChange={(e) => changeContentValue(e.target.value)}
+        onClick={beginContentEdit}
+        onDragOver={(e) => e.preventDefault()}
+        onWheel={(e) => e.stopPropagation()}
+        placeholder="Fill me in!"
+        readOnly={readOnly}
+        ref={contentRef}
+        value={contentValue}
       />
     </div>
   );

src/components/Card/Title.jsx

@@ -32,9 +32,8 @@ const Title = ({
     endTitleEdit,
     handleTitleKeyPress,
   } = hooks.useTitleHooks({
-    color,
     saveNewValue: (value) => dispatch(actions.updCardTitle(cardId, value)),
-    setIsEditingParent: setEditingCard,
+    setEditingCard,
     value: title,
   });
 
@@ -70,11 +69,9 @@ const Title = ({
           onKeyDown={handleTitleKeyPress}
           readOnly={readOnly}
           ref={titleRef}
-          required
-          size=''
           title={titleValue}
           type='text'
-          value={titleValue ?? ''}
+          value={titleValue}
         />
       </div>
       <button

src/components/Card/hooks.js

@@ -9,9 +9,8 @@ import RedTrashIcon from '../../assets/icons/red-trash.png';
 import { PopupKeys } from '../Popup/PopupKey';
 
 export const useTitleHooks = ({
-  color,
   saveNewValue,
-  setIsEditingParent,
+  setEditingCard,
   value,
 }) => {
   const [ titleValue, setTitleValue ] = useState('');
@@ -20,18 +19,32 @@ export const useTitleHooks = ({
 
   useEffect(() => {
     setTitleValue(value);
-  }, [setTitleValue, value]);
+  }, [value]);
+
+  const beginTitleEdit = () => {
+    if (!isEditing) {
+      setIsEditing(true);
+      setEditingCard(true);
+      titleRef.current.focus();
+      titleRef.current.setSelectionRange(
+        titleRef.current.value.length,
+        titleRef.current.value.length,
+      );
+    }
+  };
 
-  const endEdit = () => {
+  const endTitleEdit = () => {
     if (isEditing) {
       document.getSelection().removeAllRanges();
-      if (titleValue !== value) {
-        saveNewValue(titleValue);
-      }
+      saveNewValue(titleValue);
       setIsEditing(false);
-      if (setIsEditingParent) {
-        setIsEditingParent(false);
-      }
+      setEditingCard(false);
+    }
+  };
+
+  const handleTitleKeyPress = (event) => {
+    if(event.key === 'Enter' || event.key === 'Tab') {
+      endTitleEdit();
     }
   };
 
@@ -41,27 +54,9 @@ export const useTitleHooks = ({
     readOnly: !isEditing,
     inputClassName: isEditing ? 'editing' : '',
     changeTitleValue: (newValue) => setTitleValue(newValue),
-    beginTitleEdit: () => {
-      if (!isEditing) {
-        setIsEditing(true);
-        if(setIsEditingParent) {
-          setIsEditingParent(true);
-        }
-        titleRef.current.focus();
-        titleRef.current.setSelectionRange(
-          titleRef.current.value.length,
-          titleRef.current.value.length,
-        );
-      }
-    },
-    endTitleEdit: endEdit,
-    handleTitleKeyPress: (event) => {
-      if (isEditing) {
-        if(event.key === 'Enter' || event.key === 'Tab') {
-          endEdit();
-        }
-      }
-    },
+    beginTitleEdit,
+    endTitleEdit,
+    handleTitleKeyPress,
   };
 };
 
@@ -137,3 +132,47 @@ export const useOptionsDropdownHooks = ({
     closeOptionsDropdown: () => setIsOptionDropdownOpen(false),
   };
 };
+
+export const useContentHooks = ({
+  saveNewValue,
+  setEditingCard,
+  value,
+}) => {
+  const [ contentValue, setContentValue ] = useState('');
+  const [ isEditing, setIsEditing ] = useState(false);
+  const contentRef = useRef();
+
+  useEffect(() => {
+    setContentValue(value);
+  }, [value]);
+
+  const beginContentEdit = () => {
+    if (!isEditing) {
+      setIsEditing(true);
+      setEditingCard(true);
+      contentRef.current.focus();
+      contentRef.current.setSelectionRange(
+        contentRef.current.value.length,
+        contentRef.current.value.length,
+      );
+    }
+  };
+
+  const endContentEdit = () => {
+    if (isEditing) {
+      document.getSelection().removeAllRanges();
+      saveNewValue(contentValue);
+      setIsEditing(false);
+      setEditingCard(false);
+    }
+  };
+
+  return {
+    contentRef,
+    contentValue,
+    readOnly: !isEditing,
+    changeContentValue: (newValue) => setContentValue(newValue),
+    beginContentEdit,
+    endContentEdit,
+  };
+};

src/components/Card/index.jsx

@@ -2,21 +2,22 @@ import React, { useState, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Rnd } from 'react-rnd';
 
-import './index.scss';
-import { GRID } from '../../shared/constants/grid';
-
 import useOutsideClick from '../../utils/useOutsideClick';
 import * as actions from '../../store/actionIndex';
 
 import Title from './Title';
 import Content from './Content';
 
+import './index.scss';
+import { GRID } from '../../shared/constants/grid';
+
 export const Card = ({
   cardId,
   toolMenuRef, 
   cardAnimation,
   setCardAnimation,
 }) => {
+  // TODO move logic into hooks.js file
   const dispatch = useDispatch();
 
   // STATES
@@ -32,6 +33,7 @@ export const Card = ({
   const cardSize = useSelector(state => state.campaignData.present.cards[cardId].views[activeViewId].size);
   const cardColor = useSelector(state => state.campaignData.present.cards[cardId].color);
   const cardTitle = useSelector(state => state.campaignData.present.cards[cardId].title);
+  const cardText = useSelector(state => state.campaignData.present.cards[cardId].content.text);
 
   // REFS
   const cardRef = useRef();
@@ -130,7 +132,11 @@ export const Card = ({
           setEditingCard={setEditingCard}
           title={cardTitle}
         />
-        <Content cardId={cardId} setEditingCard={setEditingCard} />
+        <Content
+          cardId={cardId}
+          setEditingCard={setEditingCard}
+          text={cardText}
+        />
       </div>
     </Rnd>
   );

src/components/Card/index.scss

@@ -64,17 +64,18 @@ $title-height: 32px;
 
   button {
     padding: 0;
-    background-color: transparent;
     justify-content: center;
     display: flex;
   }
 
   .color-btn {
+    background-color: transparent;
     img { padding-top: 2px; }
     &:hover > img { content: url('../../assets/icons/rounded-square-hover.svg'); }
   }
 
   .dropdown-btn {
+    background-color: transparent;
     img { transition-duration: .5s; }
     &:hover > img { transform: translateY(3px); }
   }