Skip to content

Commit f64face

Browse files
maxchisttmaxchistt
committed
loading undebugged
1 parent ce985f4 commit f64face

File tree

5 files changed

+142
-45
lines changed

5 files changed

+142
-45
lines changed

‎package-lock.json‎

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
"@testing-library/react": "^11.2.5",
88
"@testing-library/user-event": "^12.8.3",
99
"bootstrap": "^4.6.0",
10+
"jquery": "^3.6.0",
1011
"react": "^17.0.2",
1112
"react-dom": "^17.0.2",
1213
"react-scripts": "4.0.3",

‎src/App.js‎

Lines changed: 133 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,115 @@ import AddCard from './Cards/AddCard'
66
import Context from './context'
77
import Loader from './Content/Loader'
88
import Modal from './Modal/Modal'
9-
import { loadData, saveData } from './DataService'
9+
import $ from "jquery";
10+
//import { } from './DataService'
11+
12+
const url = 'http://php-server-notes/'
13+
let user = null
14+
15+
let recuestCount = 1;
16+
17+
function request(target, data, clb) {
18+
const rc = recuestCount++
19+
console.log(` \nrequest ${rc} - "${target}" started`)
20+
console.log(`params - user:"${user}" target:"${target}" data:"${data}"`)
21+
return new Promise((res, rej) => {
22+
$.ajax({
23+
url: url,
24+
type: "POST",
25+
dataType: "html",
26+
data: {
27+
user: user,
28+
target: target,
29+
data: data,
30+
},
31+
})
32+
.always((data) => console.log(`requested - newUser:"${user}" target:"${target}" resolveData:"${trimStr(data)}"`))
33+
.done((data) => { if (clb) clb(data); res(data) })
34+
.fail((data) => { console.error(data); rej(data) })
35+
.always(() => console.log(`request ${rc} - "${target}" ended \n `))
36+
})
37+
38+
}
39+
40+
///////////////////////////////////
41+
42+
function requestUser(clb) {
43+
return request('ip', null,
44+
clb !== undefined
45+
? clb
46+
: (usr) => {
47+
user = String(usr)
48+
console.log(`[req-clb-done] requestUser: ${usr}`)
49+
})
50+
}
51+
52+
function requestGetData(clb) {
53+
return request('getData', null,
54+
clb !== undefined
55+
? clb
56+
: (data) => {
57+
console.log(`[req-clb-done] requestGetData - data: ${trimStr(data)}`)
58+
})
59+
}
60+
61+
function requestPostData(data = [], clb) {
62+
return request('setData', data,
63+
clb !== undefined
64+
? clb
65+
: (req) => {
66+
console.log(`[req-clb-done] requestPostData - req: ${req}`)
67+
})
68+
}
69+
70+
//////////////
71+
function trimStr(str) {
72+
const trimLen = 50;
73+
return (str.length > trimLen) ? str.slice(0, trimLen) + "..." : str
74+
}
75+
76+
function tryParce(str) {
77+
try {
78+
return JSON.parse(str);
79+
} catch (e) {
80+
return str;
81+
}
82+
}
83+
//////////////
84+
85+
86+
87+
////////////////////////////
88+
var cardsLoadedArr = [];
89+
function loadData() {
90+
return new Promise((res, rej) => {
91+
(user === null
92+
? requestUser(null)
93+
: Promise.resolve(null))
94+
.then(() => requestGetData(null))
95+
.then((d) => {
96+
let data = tryParce(d)//here we parce json
97+
console.log("data from loadData(): ", trimStr(data))
98+
cardsLoadedArr = data
99+
100+
res(data)
101+
})
102+
.catch(rej)
103+
})
104+
}
105+
106+
function postData(postData) {
107+
(user === null
108+
? loadData(null)
109+
: Promise.resolve(null))
110+
.then((data) => {
111+
let pDat = cardsLoadedArr == null ? postData.concat(data) : postData
112+
requestPostData(pDat)
113+
})
114+
}
115+
116+
//////////////////
117+
10118

11119
const testText = "My little cards-app c:";
12120

@@ -23,14 +131,31 @@ function App() {
23131
const [cardsArr, setCards] = React.useState([])
24132
const [editCardId, setEditCardId] = React.useState(null)
25133
const [loading, setLoading] = React.useState(true)
26-
// eslint-disable-next-line react-hooks/exhaustive-deps
27-
React.useEffect(() => { setLoading(true); loadData(setLoadedCards); }, [])
28-
React.useEffect(() => { saveData(cardsArr) }, [cardsArr])
29134

30-
function setLoadedCards(cards) {
31-
setCards([...cards])
32-
setLoading(false)
135+
React.useEffect(() => { console.log("hook-cardsArr"); console.log(trimStr(cardsArr)) }, [cardsArr])
136+
React.useEffect(loadDataFromServer, [])
137+
138+
139+
function loadDataFromServer() {
140+
console.log("hook - loadDataFromServer")
141+
loadData().then(setLoadedCards)
142+
}
143+
144+
145+
146+
function setLoadedCards(cardsLoadedArr) {
147+
console.log("hook's then - set loaded cards")
148+
console.log(trimStr(cardsLoadedArr))
149+
150+
console.log("\n \n *** \n ")
151+
let valToSet = tryParce(cardsLoadedArr)
152+
console.log("let valToSet = tryParce(cardsLoadedArr) :")
153+
console.log(valToSet)
154+
console.log("\n *** \n \n")
155+
156+
setCards(valToSet)
33157
cardCount = calcCount(cardsArr)
158+
setLoading(false)
34159
}
35160

36161

@@ -90,7 +215,7 @@ function App() {
90215
<main className="p-1">
91216

92217
<AddCard onCreate={addCard} onDeleteAll={deleteAll} />
93-
<Modal card={getCardById(editCardId)} index={editCardId} />
218+
{getCardById(editCardId) && <Modal card={getCardById(editCardId)} index={editCardId} />}
94219
{loading && <Loader />}
95220
{cardsArr.length ? (
96221
<CardList cards={cardsArr} />

‎src/Cards/CardList.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,11 +43,11 @@ function CardList(props) {
4343

4444
return (
4545
<StackGrid className="container p-0" {...gridSettings}>
46-
{props.cards.map((card, index) => {
46+
{props.cards.map ? (props.cards.map((card, index) => {
4747
return (
4848
<CardItem card={card} key={index} index={index} />
4949
)
50-
})}
50+
})) : null}
5151
</StackGrid>
5252
)
5353
}

‎src/DataService.js‎

Lines changed: 1 addition & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1 @@
1-
const url = 'http://php-server-notes.std-1033.ist.mospolytech.ru/'
2-
const user = fetch("https://l2.io/ip.json").then(response => response.json()['ip']) || "default" // parses JSON response into native JavaScript objects
3-
4-
export function loadData(after) {
5-
console.log("loadData");
6-
console.log("user " + user);
7-
fetch(url, {
8-
method: 'GET', // *GET, POST, PUT, DELETE, etc.
9-
headers: {
10-
'Content-Type': 'application/json',
11-
'user': String(user)
12-
},
13-
})
14-
.then(response => response.json()) // parses JSON response into native JavaScript objects
15-
.then((data) => {
16-
data ? after(data) : console.log("not loaded")
17-
return data
18-
})
19-
.then(console.log)
20-
}
21-
22-
export function saveData(data) {
23-
console.log("saveData"); console.log(data);
24-
console.log("user " + user);
25-
fetch(url, {
26-
method: 'POST', // *GET, POST, PUT, DELETE, etc.
27-
headers: {
28-
'Content-Type': 'application/json',
29-
'user': String(user)
30-
},
31-
body: JSON.stringify(data) // body data type must match "Content-Type" header
32-
})
33-
.then(response => response.json()) // parses JSON response into native JavaScript objects
34-
.then(console.log)
35-
}
1+
import $ from "jquery";

0 commit comments

Comments
 (0)