refolder & some fixes

Author: maxchistt

src/App.js

@@ -5,14 +5,15 @@ import CardList from './Cards/CardList'
 import AddCard from './Cards/AddCard'
 import Context from './context'
 import Loader from './Content/Loader'
-import ModalCardEdit from './Modal/ModalCardEdit'
-import ModalLogin from './Modal/ModalLogin'
-import DataService from './DataService'
+import ModalCardEdit from './Cards/ModalCardEdit'
+import ModalLogin from './Login/ModalLogin'
+import DataService from './Services/DataService'
 
 const { loadData, postData, setDataServLogin } = DataService()
 const testText = "Notes App"
 
 var cardCount = 0
+
 function calcCount(cards) {
   let id = cardCount;
   [...cards].forEach(element => {
@@ -53,22 +54,28 @@ function checkCardFields(card) {
   return res
 }
 
-var timer
+function useUpdater() {
+  const [updaterVal, setUpdaterVal] = React.useState(null)
+  const timer = React.useRef()
+  if (timer.current) clearTimeout(timer.current)
+  timer.current = setTimeout(() => setUpdaterVal(Date.now()), 60 * 1000) // обновяем через минуту
+  return [updaterVal]
+}
 
 function App() {
   const [cardsArr, setCards] = useCardsArr([])
   const [editCardId, setEditCardId] = React.useState(null)
   const [loading, setLoading] = React.useState(false)
+
+  const [openLogin, setOpenLogin] = React.useState(false)
   const [logged, setLogged] = React.useState(false)
   const [userName, setUserName] = React.useState(undefined)
 
-  const [timerVal, setTimerVal] = React.useState(null)
-  if (timer) clearInterval(timer)
-  timer = setInterval(() => setTimerVal(Date.now()), 60 * 1000) // обновяем через минуту
+  const [updaterVal] = useUpdater()
+
   React.useEffect(onLogout, [logged, userName])// eslint-disable-line react-hooks/exhaustive-deps
-  React.useEffect(loadDataFromServer, [logged, userName, timerVal]) // eslint-disable-line react-hooks/exhaustive-deps
+  React.useEffect(loadDataFromServer, [logged, userName, updaterVal]) // eslint-disable-line react-hooks/exhaustive-deps
   React.useEffect(loadDataToServer, [cardsArr]) // eslint-disable-line react-hooks/exhaustive-deps
-  const [openLogin, setOpenLogin] = React.useState(false)
 
   ///////////
   function tryLogin(login) {
@@ -85,7 +92,7 @@ function App() {
             )
             .catch(
               e => {
-                console.log("setDataServLogin in Try login", "catch", e);
+                console.log("setDataServLogin catch in Try login", e)
                 rej(e)
               }
             )

src/Cards/CardItem.js

@@ -10,33 +10,35 @@ function createHTML(text) {
 
 function CardItem(props) {
     const { removeCard, changeCardState, setEditCard } = useContext(Context)
+    const { card, index } = props
     const lineClip = 12
+    const [color, btcolor] = card && card.completed ? ["green", "success"] : ["red", "danger"]
     return (
 
         <div className="p-1" >
-            <div className="card" style={{ color: "white", backgroundColor: props.card.completed ? "green" : "red" }} >
+            <div className="card" style={{ color: "white", backgroundColor: color }} >
 
-                <div className="card-body" onClick={() => setEditCard(props.index)} >
-                    <h5 className="card-title">Id: {props.card.id}</h5>
+                <div className="card-body" onClick={() => setEditCard(index)} >
+                    <h5 className="card-title">Id: {card.id}</h5>
                     <p
                         className="card-text"
                         style={{ overflow: "hidden", display: "-webkit-box", WebkitLineClamp: String(lineClip), WebkitBoxOrient: "vertical" }}
-                        dangerouslySetInnerHTML={createHTML(props.card.text)}
+                        dangerouslySetInnerHTML={createHTML(card.text)}
                     />
                 </div>
 
                 <div className="card-body pt-0">
                     <button
-                        className={`btn btn-${props.card.completed ? "success" : "danger"} p-0`}
+                        className={`btn btn-${btcolor} p-0`}
                         style={{ width: "1.8em", height: "1.8em", float: "right", borderColor: "transparent", backgroundColor: "transparent" }}
-                        onClick={() => removeCard(props.index)}
+                        onClick={() => removeCard(index)}
                     >
                         &#10007;
                     </button>
                     <button
-                        className={`btn btn-${props.card.completed ? "success" : "danger"} p-0 mx-2`}
+                        className={`btn btn-${btcolor} p-0 mx-2`}
                         style={{ width: "1.8em", height: "1.8em", float: "right", borderColor: "transparent", backgroundColor: "transparent" }}
-                        onClick={() => changeCardState(props.index)}
+                        onClick={() => changeCardState(index)}
                     >
                         &#10003;
                     </button>

src/Modal/ModalCardEdit.js renamed to src/Cards/ModalCardEdit.js

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import Context from '../context'
 import TextareaAutosize from 'react-textarea-autosize'
-import Modal, { ModalProps } from "./Modal"
+import Modal, { ModalProps } from "../Modal/Modal"
 
 function calcMaxRows() {
     const small = 576
@@ -62,6 +62,9 @@ function ModalCardEdit(props) {
         close()
     }
 
+    // eslint-disable-next-line no-unused-vars
+    const [color, btcolor] = card&&card.completed ? ["green", "success"] : ["red", "danger"]
+
     return (
         <Modal {...modalProps.bind()}>
             <div className="container p-2">
@@ -72,7 +75,7 @@ function ModalCardEdit(props) {
                             <h1 className="mb-2">Id: {card.id}</h1>
                             <h5 className="mb-2">Completed:
                             <span
-                                    className={`px-2 py-1 m-1 d-inline-block text-center badge ${card.completed ? "badge-success" : "badge-danger"}`}
+                                    className={`px-2 py-1 m-1 d-inline-block text-center badge bage-${btcolor}`}
                                     style={{ width: "3em" }}
                                 >
                                     {String(card.completed)}

src/Modal/ModalLogin.js renamed to src/Login/ModalLogin.js

@@ -1,5 +1,5 @@
 import React from "react"
-import Modal, { ModalProps } from "./Modal"
+import Modal, { ModalProps } from "../Modal/Modal"
 import PropTypes from 'prop-types'
 
 function checkUsername(str) {