Skip to content

Commit 57853af

Browse files
maxchisttmaxchistt
committed
it works!!!
1 parent f64face commit 57853af

File tree

3 files changed

+73
-92
lines changed

3 files changed

+73
-92
lines changed

‎src/App.js‎

Lines changed: 65 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,15 @@ import Modal from './Modal/Modal'
99
import $ from "jquery";
1010
//import { } from './DataService'
1111

12-
const url = 'http://php-server-notes/'
13-
let user = null
1412

15-
let recuestCount = 1;
13+
///////////////////////////////////
1614

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}"`)
15+
const url = 'http://php-server-notes/'
16+
let user = null
17+
//let recuestCount = 1;
18+
function request(target, data) {
19+
//const rc = recuestCount++
20+
//console.log(` \nrequest ${rc} - "${target}" started \n params - user:"${user}" data:"${trimStr(data)}"`)
2121
return new Promise((res, rej) => {
2222
$.ajax({
2323
url: url,
@@ -29,63 +29,51 @@ function request(target, data, clb) {
2929
data: data,
3030
},
3131
})
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 `))
32+
.done(data => res(data))
33+
.fail(data => rej(data))
34+
//.always(() => console.log(`requested - newUser:"${user}" resolveData:"${trimStr(data)}" \n request ${rc} - "${target}" ended \n `))
3635
})
37-
3836
}
39-
4037
///////////////////////////////////
4138

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-
})
39+
///////////////////////////////////
40+
function requestUser() {
41+
return request('ip', null)
5042
}
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-
})
43+
function requestGetData() {
44+
return request('getData', null)
5945
}
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-
})
46+
function requestPostData(data) {
47+
return request('setData', data || [])
6848
}
49+
///////////////////////////////////
6950

70-
//////////////
51+
///
7152
function trimStr(str) {
72-
const trimLen = 50;
73-
return (str.length > trimLen) ? str.slice(0, trimLen) + "..." : str
53+
const trimLen = 50
54+
try {
55+
return (str.length > trimLen) ? str.slice(0, trimLen) + "..." : str
56+
} catch (e) {
57+
return str
58+
}
7459
}
75-
7660
function tryParce(str) {
7761
try {
78-
return JSON.parse(str);
62+
return JSON.parse(str,reviver);
7963
} catch (e) {
8064
return str;
8165
}
8266
}
83-
//////////////
84-
85-
67+
function reviver(key, value) {
68+
if (typeof value == 'string' && (Boolean(value) !== undefined)) {
69+
if(value==="false")return false;
70+
if(value==="true")return true;
71+
}
72+
return value;
73+
}
74+
///
8675

87-
////////////////////////////
88-
var cardsLoadedArr = [];
76+
//////////////
8977
function loadData() {
9078
return new Promise((res, rej) => {
9179
(user === null
@@ -94,25 +82,21 @@ function loadData() {
9482
.then(() => requestGetData(null))
9583
.then((d) => {
9684
let data = tryParce(d)//here we parce json
97-
console.log("data from loadData(): ", trimStr(data))
98-
cardsLoadedArr = data
99-
85+
console.log("[DATA] from loadData(): ", data)
10086
res(data)
10187
})
10288
.catch(rej)
10389
})
10490
}
105-
10691
function postData(postData) {
10792
(user === null
10893
? loadData(null)
10994
: Promise.resolve(null))
11095
.then((data) => {
111-
let pDat = cardsLoadedArr == null ? postData.concat(data) : postData
96+
let pDat = postData == null ? postData.concat(data) : postData
11297
requestPostData(pDat)
11398
})
11499
}
115-
116100
//////////////////
117101

118102

@@ -121,7 +105,7 @@ const testText = "My little cards-app c:";
121105
let cardCount = 1;
122106
function calcCount(cardsArr) {
123107
let id = cardCount;
124-
new Array(...cardsArr).forEach(element => {
108+
[...cardsArr].forEach(element => {
125109
if (Number(element.id) >= id) id = Number(element.id)
126110
});
127111
return id
@@ -131,35 +115,28 @@ function App() {
131115
const [cardsArr, setCards] = React.useState([])
132116
const [editCardId, setEditCardId] = React.useState(null)
133117
const [loading, setLoading] = React.useState(true)
134-
135-
React.useEffect(() => { console.log("hook-cardsArr"); console.log(trimStr(cardsArr)) }, [cardsArr])
118+
// eslint-disable-next-line react-hooks/exhaustive-deps
136119
React.useEffect(loadDataFromServer, [])
120+
React.useEffect(loadDataToServer, [cardsArr])
137121

122+
function loadDataToServer() {
123+
//console.log("***\n[HOOK] - loadDataToServer (onCardsArr)\n***")
124+
postData(cardsArr)
125+
}
138126

139127
function loadDataFromServer() {
140-
console.log("hook - loadDataFromServer")
128+
//console.log("[HOOK] - loadDataFromServer")
141129
loadData().then(setLoadedCards)
142130
}
143131

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)
157-
cardCount = calcCount(cardsArr)
132+
function setLoadedCards(cards) {
133+
cards = tryParce(cards)
134+
setCards([...cards])
135+
cardCount = calcCount(tryParce(cards))
158136
setLoading(false)
159137
}
160138

161-
162-
139+
///////////
163140
function removeCard(index) {
164141
cardsArr.splice(index, 1)
165142
setCards([...cardsArr])
@@ -182,18 +159,6 @@ function App() {
182159
cardCount++
183160
}
184161

185-
function getCardById(index) {
186-
return index !== null ? cardsArr[index] : null
187-
}
188-
189-
function setEditCard(index) {
190-
setEditCardId(index)
191-
}
192-
193-
function unsetEditCard() {
194-
setEditCardId(null)
195-
}
196-
197162
function changeCardState(index) {
198163
cardsArr[index].completed = !cardsArr[index].completed
199164
setCards([...cardsArr])
@@ -203,6 +168,20 @@ function App() {
203168
if (cardsArr[index]) cardsArr[index].text = text
204169
setCards([...cardsArr])
205170
}
171+
///////////
172+
173+
///
174+
function getCardByIndex(index) {
175+
return index !== null ? cardsArr[index] : null
176+
}
177+
function setEditCard(index) {
178+
setEditCardId(index)
179+
}
180+
function unsetEditCard() {
181+
setEditCardId(null)
182+
}
183+
///
184+
206185

207186
return (
208187
<Context.Provider value={{ removeCard, changeCardState, setEditCard, unsetEditCard, editCardContent }}>
@@ -215,7 +194,7 @@ function App() {
215194
<main className="p-1">
216195

217196
<AddCard onCreate={addCard} onDeleteAll={deleteAll} />
218-
{getCardById(editCardId) && <Modal card={getCardById(editCardId)} index={editCardId} />}
197+
{getCardByIndex(editCardId) && <Modal card={getCardByIndex(editCardId)} index={editCardId} />}
219198
{loading && <Loader />}
220199
{cardsArr.length ? (
221200
<CardList cards={cardsArr} />

‎src/Cards/CardItem.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ function CardItem(props) {
2020
<h5 className="card-title">Id: {props.card.id}</h5>
2121
<p
2222
className="card-text"
23-
style={{ overflow: "hidden", display: "-webkit-box", webkitLineClamp: String(lineClip), WebkitBoxOrient: "vertical" }}
23+
style={{ overflow: "hidden", display: "-webkit-box", webKitLineClamp: String(lineClip), WebkitBoxOrient: "vertical" }}
2424
dangerouslySetInnerHTML={createHTML(props.card.text)}
2525
/>
2626
</div>

‎src/Cards/CardList.js‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import StackGrid, { transitions } from "react-stack-grid"
55
import sizeMe from 'react-sizeme'
66
const { scaleDown } = transitions
77

8-
var grid = null
8+
99

1010
function calcWidth() {
1111
const small = 576
@@ -21,15 +21,17 @@ function calcWidth() {
2121
else return '100%'
2222
}
2323

24-
function gridRedraw(delay = 10) {
25-
setTimeout(() => { if (grid) if (grid.updateLayout) grid.updateLayout() }, delay)
26-
}
24+
2725

2826
function CardList(props) {
27+
const [grid, setGrid] = React.useState(null)
2928
gridRedraw()
29+
function gridRedraw(delay = 10) {
30+
setTimeout(() => { if (grid && grid.updateLayout) grid.updateLayout() }, delay)
31+
}
3032

3133
const gridSettings = {
32-
gridRef: gridR => grid = gridR,
34+
gridRef: setGrid,
3335
columnWidth: calcWidth(),
3436
gutterWidth: 0,
3537
gutterHeight: 0,

0 commit comments

Comments
 (0)