add palette

Author: maxchistt

src/App.js

@@ -163,23 +163,22 @@ function App() {
 
   function addCard(cardData = {}) {
     setCards(
-      cardsArr.concat([new Card({ id: ++cardCount, name: cardData.name, completed: cardData.sel, text: cardData.text })])
+      cardsArr.concat([new Card({ id: ++cardCount, name: cardData.name, color: cardData.color, text: cardData.text })])
     )
   }
 
-  function changeCardState(index) {
-    cardsArr[index].completed = !cardsArr[index].completed
+  function changeCardColor(index, color) {
+    cardsArr[index].color = color
     setCards([...cardsArr])
   }
 
   function editCardContent(index, name, text) {
-    
     if (cardsArr[index]) {
       let card
       card = new Card(cardsArr[index])
       card.name = name
       card.text = text
-      cardsArr[index]=card
+      cardsArr[index] = card
     }
     setCards([...cardsArr])
   }
@@ -198,7 +197,7 @@ function App() {
   ///////////
 
   return (
-    <Context.Provider value={{ removeCard, changeCardState, setEditCard, unsetEditCard, editCardContent, editCardId }}>
+    <Context.Provider value={{ removeCard, changeCardColor, setEditCard, unsetEditCard, editCardContent, editCardId }}>
       <div className="App pb-3 mb-3">
         <header className="p-1">
           <nav className="d-flex container px-0 flex-wrap-reverse justify-content-around">

src/Cards/AddCard.js

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 import TextareaAutosize from 'react-textarea-autosize'
+import Palette, { colors } from './palette'
 
 function useInputValue(defaultValue) {
   const [value, setValue] = useState(defaultValue)
@@ -16,12 +17,15 @@ function useInputValue(defaultValue) {
 
 function AddCard({ onCreate, onDeleteAll }) {
   const input = useInputValue('')
-  const select = useInputValue(0)
+
+  const defColor = colors[0]
+  const [color, setColor] = React.useState(defColor)
 
   function submitHandler() {
-    if (String(input.value()).trim() && String(select.value()).trim()) {
-      onCreate({ name: String(input.value()).trim(), text: "", sel: Boolean(Number(select.value())) })
+    if (String(input.value()).trim() && String(color).trim()) {
+      onCreate({ name: String(input.value()).trim(), text: "", color: String(color) })
       input.clear()
+      setColor(defColor)
     }
   }
 
@@ -40,10 +44,7 @@ function AddCard({ onCreate, onDeleteAll }) {
         </div>
 
         <div className="col-lg-8 col-md-6 col-sm-4 p-1">
-          <select className="custom-select" id="Status" {...select.bind}>
-            <option value="1">Done</option>
-            <option value="0">Not done</option>
-          </select>
+          <Palette setColor={setColor} className="btn btn-outline-secondary" style={{ width: "100%" }}></Palette>
         </div>
 
         <div className="col-lg-2 col-md-3 col-sm-4 col-6 p-1">

src/Cards/CardItem.js

@@ -2,6 +2,7 @@ import React, { useContext } from 'react'
 import PropTypes from 'prop-types'
 import Context from '../context'
 import Card from '../Shared/Card'
+import Palette from './palette'
 
 function createHTML(text) {
     let el = document.createElement("p")
@@ -10,15 +11,18 @@ function createHTML(text) {
 }
 
 function CardItem(props) {
-    const { removeCard, changeCardState, setEditCard } = useContext(Context)
+    const { removeCard, changeCardColor, setEditCard } = useContext(Context)
     const { card, index } = props
     const cardItem = card && new Card(card)
     const lineClip = 12
-    const [color, btcolor] = cardItem && cardItem.completed ? ["green", "success"] : ["red", "danger"]
+    const bgColor = cardItem.color
+    function tryChangeColor(color) {
+        changeCardColor(index, color)
+    }
     return (
 
         <div className="p-1" >
-            <div className="card" style={{ color: "white", backgroundColor: color }} >
+            <div className="card" style={{ backgroundColor: bgColor }} >
 
                 <div className="card-body" onClick={() => setEditCard(index)} >
                     <h5 className="card-title">{cardItem.name}</h5>
@@ -31,19 +35,17 @@ function CardItem(props) {
 
                 <div className="card-body pt-0">
                     <button
-                        className={`btn btn-${btcolor} p-0`}
+                        className={`btn btn-light p-0`}
                         style={{ width: "1.8em", height: "1.8em", float: "right", borderColor: "transparent", backgroundColor: "transparent" }}
                         onClick={() => removeCard(index)}
                     >
                         &#10007;
                     </button>
-                    <button
-                        className={`btn btn-${btcolor} p-0 mx-2`}
+                    <Palette
+                        className={`btn btn-light p-0 mx-2`}
                         style={{ width: "1.8em", height: "1.8em", float: "right", borderColor: "transparent", backgroundColor: "transparent" }}
-                        onClick={() => changeCardState(index)}
-                    >
-                        &#10003;
-                    </button>
+                        setColor={tryChangeColor}
+                    ></Palette>
                 </div>
 
             </div>

src/Cards/ModalCardEdit.js

@@ -5,6 +5,7 @@ import TextareaAutosize from 'react-textarea-autosize'
 import Modal, { ModalProps } from "../Shared/Modal/Modal"
 import debounce from '../Shared/debounce'
 import Card from '../Shared/Card'
+import Palette from './palette'
 
 function calcMaxRows() {
     const small = 576
@@ -20,7 +21,7 @@ function calcMaxRows() {
 }
 
 function ModalCardEdit(props) {
-    const { removeCard, changeCardState, unsetEditCard, editCardContent } = React.useContext(Context)
+    const { removeCard, changeCardColor, unsetEditCard, editCardContent } = React.useContext(Context)
     const { card, index } = props
     React.useEffect(() => { if (card !== null) open() }, [card])
 
@@ -57,8 +58,8 @@ function ModalCardEdit(props) {
         save(name, text)
     }
 
-    function tryStateChange() {
-        changeCardState(index)
+    function tryChangeColor(color) {
+        changeCardColor(index, color)
     }
     function tryRemove() {
         unsetEditCard();
@@ -70,9 +71,6 @@ function ModalCardEdit(props) {
         close()
     }
 
-    // eslint-disable-next-line no-unused-vars
-    const [color, btcolor] = cardEdit && cardEdit.completed ? ["green", "success"] : ["red", "danger"]
-
     return (
         <Modal {...modalProps.bind()}>
             <div className="container p-2">
@@ -91,9 +89,9 @@ function ModalCardEdit(props) {
                             />
 
                             <p style={{ fontWeight: "500" }} className="mb-2 text-dark">
-                                Completed:
-                                <span className={`m-1 d-inline-block text-center badge badge-${btcolor}`} style={{ width: "3em" }}>
-                                    {String(cardEdit.completed)}
+                                Color:
+                                <span className={`m-1 d-inline-block text-center badge`} style={{ width: "3em", backgroundColor: cardEdit.color }}>
+                                    &nbsp;
                                 </span>
                             </p>
 
@@ -114,11 +112,11 @@ function ModalCardEdit(props) {
 
                 <div style={{ display: "flex", justifyContent: "space-around", alignItems: "center", flexWrap: "wrap" }}>
                     <div>
-                        <button
+                        <Palette
                             className="btn btn-light mx-1"
                             disabled={!cardEdit}
-                            onClick={tryStateChange}
-                        >&#10003;</button>
+                            setColor={tryChangeColor}
+                        ></Palette>
                         <button
                             className="btn btn-light"
                             disabled={!cardEdit}