CardContext fix

Author: maxchistt

client/src/App.js

@@ -3,7 +3,7 @@ import logo from './Shared/Logo/logo.svg';
 import './App.css';
 import CardList from './Cards/CardList'
 import AddCard from './Cards/AddCard'
-import Context from './context'
+import CardsContext from './Context/cardsContext'
 import Loader from './Shared/Loader'
 import ModalCardEdit from './Cards/ModalCardEdit'
 import ModalLogin from './Login/ModalLogin'
@@ -167,10 +167,6 @@ function App() {
     setCards([...cardsArr])
   }
 
-  function deleteAll() {
-    setCards([])
-  }
-
   function addCard(cardData = {}) {
     const newCard = new Card({ id: ++cardCount, name: cardData.name, color: cardData.color, text: cardData.text })
     setCards(
@@ -208,7 +204,7 @@ function App() {
   ///////////
 
   return (
-    <Context.Provider value={{ removeCard, changeCardColor, setEditCard, unsetEditCard, editCardContent, editCardId }}>
+    <CardsContext.Provider value={{ addCard, 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">
@@ -232,7 +228,7 @@ function App() {
         </header>
 
         <main className="p-1 pb-3 mb-3">
-          <AddCard onCreate={addCard} onDeleteAll={deleteAll} />
+          <AddCard />
           <ModalCardEdit card={getCardByIndex(editCardId)} index={editCardId} />
 
           {cardsArr && cardsArr.length ? (
@@ -260,7 +256,7 @@ function App() {
           }
         </main>
       </div>
-    </Context.Provider>
+    </CardsContext.Provider>
   );
 }
 

client/src/Cards/AddCard.js

@@ -3,8 +3,10 @@ import PropTypes from 'prop-types'
 import TextareaAutosize from 'react-textarea-autosize'
 import Palette, { colors } from './palette/palette'
 import useInputValue from '../Shared/useInputValue.hook'
+import CardsContext from '../Context/cardsContext'
 
-function AddCard({ onCreate, onDeleteAll }) {
+function AddCard() {
+  const { addCard } = React.useContext(CardsContext)
   const input = useInputValue('')
 
   const defColor = colors[0]
@@ -25,7 +27,7 @@ function AddCard({ onCreate, onDeleteAll }) {
 
   function submitHandler() {
     if (String(input.value).trim() && String(color).trim()) {
-      onCreate({ name: String(input.value).trim(), text: "", color: String(color) })
+      addCard({ name: String(input.value).trim(), text: "", color: String(color) })
       input.clear()
       setColor(defColor)
     }
@@ -70,7 +72,6 @@ function AddCard({ onCreate, onDeleteAll }) {
 }
 
 AddCard.propTypes = {
-  onCreate: PropTypes.func.isRequired,
   onDeleteAll: PropTypes.func.isRequired
 }
 

client/src/Cards/CardItem.js

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react'
 import PropTypes from 'prop-types'
-import Context from '../context'
+import CardsContext from '../Context/cardsContext'
 import Card, { PropTypeCard } from './cardType/Card'
 import ReactMarkdown from 'react-markdown'
 import gfm from 'remark-gfm'
@@ -10,7 +10,7 @@ function fixLineBreaks(mdStr) {
 }
 
 function CardItem({ card = new Card(), index }) {
-    const { removeCard, setEditCard } = useContext(Context)
+    const { removeCard, setEditCard } = useContext(CardsContext)
     const lineClip = 12
     const bgColor = card.color
 

client/src/Cards/ModalCardEdit.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Context from '../context'
+import CardsContext from '../Context/cardsContext'
 import TextareaAutosize from 'react-textarea-autosize'
 import Modal, { ModalProps } from "../Shared/Modal/Modal"
 import Card, { PropTypeCard } from './cardType/Card'
@@ -20,7 +20,7 @@ function calcMaxRows() {
 }
 
 function ModalCardEdit({ card = new Card(), index }) {
-    const { removeCard, changeCardColor, unsetEditCard, editCardContent } = React.useContext(Context)
+    const { removeCard, changeCardColor, unsetEditCard, editCardContent } = React.useContext(CardsContext)
     React.useEffect(() => { if (card !== null) open() }, [card])
 
     const [showForm, setShowForm] = React.useState(false)

client/src/Context/cardsContext.js

@@ -0,0 +1,5 @@
+import React from 'react'
+
+const CardsContext = React.createContext()
+
+export default CardsContext