data upd

Author: maxchistt

src/App.js

@@ -37,7 +37,6 @@ function checkCardsArr(cardsArr) {
   if (!Array.isArray(cardsArr)) return false
   else if (cardsArr.length === 0) return true
   else {
-    //console.log('check array')
     cardsArr.forEach((card) => {
       if (typeof card !== "object") return false
       else if (!checkCardFields(card)) return false
@@ -52,41 +51,51 @@ function checkCardFields(card) {
     typeof card.completed === "boolean" &&
     typeof card.text === "string"
   )
-  //console.log('check fields',!isNaN(card.id),typeof card.completed === "boolean", typeof card.text === "string",res)
   return res
 }
 
 function App() {
   const [cardsArr, setCards] = useCardsArr([])
   const [editCardId, setEditCardId] = React.useState(null)
   const [loading, setLoading] = React.useState(true)
+  const [logged, setLogged] = React.useState(false)
   React.useEffect(tryLogin, []) // eslint-disable-line react-hooks/exhaustive-deps
-  React.useEffect(loadDataFromServer, []) // eslint-disable-line react-hooks/exhaustive-deps
+  React.useEffect(loadDataFromServer, [logged]) // eslint-disable-line react-hooks/exhaustive-deps
   React.useEffect(loadDataToServer, [cardsArr]) // eslint-disable-line react-hooks/exhaustive-deps
 
+
   ///////////
   function tryLogin() {
     try {
-      login().then(loadDataFromServer, alert)
+      login().then(setLogged, alert)
     } catch (e) {
       console.error(e)
     }
   }
+  ///////////
 
+  ///////////
   function loadDataToServer() {
-    //console.log("***\n[HOOK] - loadDataToServer (onCardsArr)\n***")
     try {
-      postData(cardsArr).then(console.log, dataError)
+      if (logged) postData(cardsArr).then((res) => {
+        console.log('[onPostData]', res)
+      }, dataError)
     }
     catch (e) {
       console.error(e)
     }
   }
 
   function loadDataFromServer() {
-    //console.log("[HOOK]  - loadDataFromServer")
     try {
-      loadData().then(setLoadedCards, dataError)
+      if (logged) {
+        setLoading(true)
+        loadData().then(data => {
+          console.log('[onLoadData]', 'Данные с сервера загружены')
+          setLoadedCards(data)
+          setLoading(false)
+        }, dataError)
+      }
     }
     catch (e) {
       console.error(e)
@@ -96,15 +105,14 @@ function App() {
   function dataError(msg) {
     console.log(`Data request error. Response: ${msg}`)
   }
+  ///////////
 
+  ///////////
   function setLoadedCards(cards) {
     setCards([...cards])
     cardCount = calcCount(cards)
-    setLoading(false)
   }
-  ///////////
 
-  ///////////
   function removeCard(index) {
     cardsArr.splice(index, 1)
     setCards([...cardsArr])
@@ -124,7 +132,6 @@ function App() {
         }
       ])
     )
-
   }
 
   function changeCardState(index) {
@@ -152,16 +159,17 @@ function App() {
 
 
   return (
-    <Context.Provider value={{ removeCard, changeCardState, setEditCard, unsetEditCard, editCardContent }}>
+    <Context.Provider value={{ removeCard, changeCardState, setEditCard, unsetEditCard, editCardContent, editCardId }}>
       <div className="App">
         <header className="p-1 h2 text-center">
           <img src={logo} className="App-logo" alt="logo" />
           <h1 className="d-inline-block h2">{testText}</h1>
-          <p className="show_login"></p>
+          <p className="show_login" onClick={(e) => { e.target.style.opacity = e.target.style.opacity !== '0' ? '0' : '1' }}>
+            {logged && `Login: ${logged}`}
+          </p>
         </header>
 
         <main className="p-1">
-
           <AddCard onCreate={addCard} onDeleteAll={deleteAll} />
           <Modal component={ModalCardEdit} componentProps={{ card: getCardByIndex(editCardId), index: editCardId }} />
           {loading && <Loader />}
@@ -172,7 +180,6 @@ function App() {
               <p className="m-3 p-3 h5 text-muted">No cards. You can add a new one!</p>
             </div>
           )}
-
         </main>
       </div>
     </Context.Provider>

src/DataService.js

@@ -20,10 +20,7 @@ export default function DataService() {
             function onLogin(username) {
                 user = username
                 submit(username)
-                console.log('Login: ', user)
-                const label = document.getElementsByClassName("show_login")[0]
-                label.textContent = ''
-                label.onclick = () => label.style.opacity = label.style.opacity !== '0' ? '0' : '1'
+                console.log('Login:', user)
             }
             function onDismiss() {
                 user = null