Card class and refolder

Author: maxchistt

src/App.js

@@ -4,11 +4,11 @@ import './App.css';
 import CardList from './Cards/CardList'
 import AddCard from './Cards/AddCard'
 import Context from './context'
-import Loader from './Content/Loader'
+import Loader from './Shared/Loader'
 import ModalCardEdit from './Cards/ModalCardEdit'
 import ModalLogin from './Login/ModalLogin'
 import DataService from './Services/DataService'
-import checkCardsArr from './Shared/Card'
+import Card, { checkCardsArr } from './Shared/Card'
 
 const { loadData, postData, updDataServLogin } = DataService()
 
@@ -162,14 +162,7 @@ function App() {
 
   function addCard(cardData = {}) {
     setCards(
-      cardsArr.concat([
-        {
-          id: Number(++cardCount),
-          name: String(cardData.name),
-          completed: Boolean(cardData.sel),
-          text: String(cardData.text),
-        }
-      ])
+      cardsArr.concat([new Card({ id: ++cardCount, name: cardData.name, completed: cardData.sel, text: cardData.text })])
     )
   }
 
@@ -179,9 +172,13 @@ function App() {
   }
 
   function editCardContent(index, name, text) {
+    
     if (cardsArr[index]) {
-      cardsArr[index].name = name
-      cardsArr[index].text = text
+      let card
+      card = new Card(cardsArr[index])
+      card.name = name
+      card.text = text
+      cardsArr[index]=card
     }
     setCards([...cardsArr])
   }

src/Cards/CardItem.js

@@ -1,6 +1,7 @@
 import React, { useContext } from 'react'
 import PropTypes from 'prop-types'
 import Context from '../context'
+import Card from '../Shared/Card'
 
 function createHTML(text) {
     let el = document.createElement("p")
@@ -11,19 +12,20 @@ function createHTML(text) {
 function CardItem(props) {
     const { removeCard, changeCardState, setEditCard } = useContext(Context)
     const { card, index } = props
+    const cardItem = card && new Card(card)
     const lineClip = 12
-    const [color, btcolor] = card && card.completed ? ["green", "success"] : ["red", "danger"]
+    const [color, btcolor] = cardItem && cardItem.completed ? ["green", "success"] : ["red", "danger"]
     return (
 
         <div className="p-1" >
             <div className="card" style={{ color: "white", backgroundColor: color }} >
 
                 <div className="card-body" onClick={() => setEditCard(index)} >
-                    <h5 className="card-title">{card.name}</h5>
+                    <h5 className="card-title">{cardItem.name}</h5>
                     <p
                         className="card-text"
                         style={{ overflow: "hidden", display: "-webkit-box", WebkitLineClamp: String(lineClip), WebkitBoxOrient: "vertical" }}
-                        dangerouslySetInnerHTML={createHTML(card.text)}
+                        dangerouslySetInnerHTML={createHTML(cardItem.text)}
                     />
                 </div>
 

src/Cards/ModalCardEdit.js

@@ -2,8 +2,9 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import Context from '../context'
 import TextareaAutosize from 'react-textarea-autosize'
-import Modal, { ModalProps } from "../Modal/Modal"
+import Modal, { ModalProps } from "../Shared/Modal/Modal"
 import debounce from '../Shared/debounce'
+import Card from '../Shared/Card'
 
 function calcMaxRows() {
     const small = 576
@@ -21,9 +22,10 @@ function calcMaxRows() {
 function ModalCardEdit(props) {
     const { removeCard, changeCardState, unsetEditCard, editCardContent } = React.useContext(Context)
     const { card, index } = props
-
     React.useEffect(() => { if (card !== null) open() }, [card])
 
+    const cardEdit = card && new Card(card)
+
     const [showForm, setShowForm] = React.useState(false)
 
     const modalProps = new ModalProps()
@@ -48,8 +50,8 @@ function ModalCardEdit(props) {
     }
 
     function onInputCange(e) {
-        let name = card.name
-        let text = card.text
+        let name = cardEdit.name
+        let text = cardEdit.text
         if (e.target.id === "modal-edit-name") name = e.target.value
         if (e.target.id === "modal-edit-text") text = e.target.value
         save(name, text)
@@ -69,14 +71,13 @@ function ModalCardEdit(props) {
     }
 
     // eslint-disable-next-line no-unused-vars
-    const [color, btcolor] = card && card.completed ? ["green", "success"] : ["red", "danger"]
+    const [color, btcolor] = cardEdit && cardEdit.completed ? ["green", "success"] : ["red", "danger"]
 
     return (
         <Modal {...modalProps.bind()}>
             <div className="container p-2">
-
                 <div>
-                    {card ? (
+                    {cardEdit ? (
                         <React.Fragment>
                             <TextareaAutosize
                                 className="form-control form-control-lg p-0 mb-2 bg-light text-dark"
@@ -85,14 +86,14 @@ function ModalCardEdit(props) {
                                 minRows={1}
                                 maxRows={3}
                                 maxLength="100"
-                                value={card.name}
+                                value={cardEdit.name}
                                 onChange={debounce(onInputCange, 700)}
                             />
 
                             <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(card.completed)}
+                                    {String(cardEdit.completed)}
                                 </span>
                             </p>
 
@@ -102,7 +103,7 @@ function ModalCardEdit(props) {
                                 style={{ border: "none", outline: "none", boxShadow: "none", resize: "none" }}
                                 minRows={3}
                                 maxRows={calcMaxRows()}
-                                value={card.text}
+                                value={cardEdit.text}
                                 onChange={debounce(onInputCange, 1000)}
                             />
                         </React.Fragment>
@@ -115,18 +116,18 @@ function ModalCardEdit(props) {
                     <div>
                         <button
                             className="btn btn-light mx-1"
-                            disabled={!card}
+                            disabled={!cardEdit}
                             onClick={tryStateChange}
                         >&#10003;</button>
                         <button
                             className="btn btn-light"
-                            disabled={!card}
+                            disabled={!cardEdit}
                             onClick={tryRemove}
                         >&#10007;</button>
                     </div>
 
                     <div className="mx-auto">
-                        <span style={{ color: "lightgray", fontWeight: "400" }}>Id: {card && card.id}</span>
+                        <span style={{ color: "lightgray", fontWeight: "400" }}>Id: {cardEdit && cardEdit.id}</span>
                     </div>
 
                     <div>
@@ -136,7 +137,6 @@ function ModalCardEdit(props) {
                         >Close</button>
                     </div>
                 </div>
-
             </div>
         </Modal>
     )

src/Login/ModalLogin.js

@@ -1,5 +1,5 @@
 import React from "react"
-import Modal, { ModalProps } from "../Modal/Modal"
+import Modal, { ModalProps } from "../Shared/Modal/Modal"
 import PropTypes from 'prop-types'
 import LoginService from '../Services/LoginService'
 const { logIn, logOut } = LoginService()

src/Services/DataService.js

@@ -1,5 +1,5 @@
 import $ from "jquery"
-import checkCardsArr from '../Shared/Card'
+import { checkCardsArr } from '../Shared/Card'
 
 export default function DataService() {
     ////////////////////////////////////////////////////////////

src/Shared/Card.js

@@ -1,4 +1,4 @@
-function checkCardsArr(cardsArr) {
+export function checkCardsArr(cardsArr) {
     if (!Array.isArray(cardsArr)) return false
     else if (cardsArr.length === 0) return true
     else {
@@ -15,8 +15,18 @@ const checkCard = (card) => {
         (typeof card.id === "number" || typeof card.id === "string") && !isNaN(card.id) &&
         typeof card.name === "string" &&
         typeof card.completed === "boolean" &&
-        typeof card.text === "string"
+        typeof card.text === "string" &&
+        card instanceof Card
     )
 }
 
-export default checkCardsArr
+export class Card {
+    constructor({ id, name, completed, text }) {
+        this.id = Number(id)
+        this.name = String(name)
+        this.completed = Boolean(completed)
+        this.text = String(text)
+    }
+}
+
+export default Card