connect to server

Author: maxchistt

src/App.js

@@ -1,45 +1,40 @@
 import logo from './logo.svg';
 import './App.css';
-
 import React from 'react'
 import CardList from './Cards/CardList'
 import AddCard from './Cards/AddCard'
 import Context from './context'
 import Loader from './Content/Loader'
 import Modal from './Modal/Modal'
-
-import { lorem } from './Content/Lorem'
+import { loadData, saveData } from './DataService'
 
 const testText = "My little cards-app c:";
 
 let cardCount = 1;
-
-function generateCardsArr() {
-  let arr = []
-  for (let index = 0; index < 8; index++) {
-    let len = Math.floor(Math.random() * lorem.length);
-    arr.push({
-      id: Number(cardCount++),
-      completed: Boolean(Math.floor(Math.random() * 2)),
-      text: lorem.slice(0, len)
-    })
-  }
-  return arr
-};
+function calcCount(cardsArr) {
+  let id = cardCount;
+  new Array(...cardsArr).forEach(element => {
+    if (Number(element.id) >= id) id = Number(element.id)
+  });
+  return id
+}
 
 function App() {
   const [cardsArr, setCards] = React.useState([])
   const [editCardId, setEditCardId] = React.useState(null)
   const [loading, setLoading] = React.useState(true)
-  React.useEffect(loadCards, [])
-
-  function loadCards() {
-    setTimeout(() => {
-      setCards(generateCardsArr())
-      setLoading(false)
-    }, 200)
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  React.useEffect(() => { setLoading(true); loadData(setLoadedCards); }, [])
+  React.useEffect(() => { saveData(cardsArr) }, [cardsArr])
+
+  function setLoadedCards(cards) {
+    setCards([...cards])
+    setLoading(false)
+    cardCount = calcCount(cardsArr)
   }
 
+
+
   function removeCard(index) {
     cardsArr.splice(index, 1)
     setCards([...cardsArr])

src/Content/Lorem.js

@@ -0,0 +1,35 @@
+const url = 'http://php-server-notes.std-1033.ist.mospolytech.ru/'
+const user = fetch("https://l2.io/ip.json").then(response => response.json()['ip']) || "default" // parses JSON response into native JavaScript objects
+
+export function loadData(after) {
+    console.log("loadData");
+    console.log("user " + user);
+    fetch(url, {
+        method: 'GET', // *GET, POST, PUT, DELETE, etc.
+        headers: {
+            'Content-Type': 'application/json',
+            'user': String(user)
+        },
+    })
+        .then(response => response.json()) // parses JSON response into native JavaScript objects
+        .then((data) => {
+            data ? after(data) : console.log("not loaded")
+            return data
+        })
+        .then(console.log)
+}
+
+export function saveData(data) {
+    console.log("saveData"); console.log(data);
+    console.log("user " + user);
+    fetch(url, {
+        method: 'POST', // *GET, POST, PUT, DELETE, etc.
+        headers: {
+            'Content-Type': 'application/json',
+            'user': String(user)
+        },
+        body: JSON.stringify(data) // body data type must match "Content-Type" header
+    })
+        .then(response => response.json()) // parses JSON response into native JavaScript objects
+        .then(console.log)
+}