Skip to content

Commit 47fc2ad

Browse files
maxchisttmaxchistt
committed
edit cardname
1 parent 315cefe commit 47fc2ad

File tree

8 files changed

+86
-59
lines changed

8 files changed

+86
-59
lines changed

‎src/App.js‎

Lines changed: 8 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import Loader from './Content/Loader'
88
import ModalCardEdit from './Cards/ModalCardEdit'
99
import ModalLogin from './Login/ModalLogin'
1010
import DataService from './Services/DataService'
11+
import checkCardsArr from './Shared/Card'
1112

1213
const { loadData, postData, updDataServLogin } = DataService()
1314

@@ -34,27 +35,6 @@ function useCardsArr(defaultValue) {
3435
return [value, trySetValue]
3536
}
3637

37-
function checkCardsArr(cardsArr) {
38-
if (!Array.isArray(cardsArr)) return false
39-
else if (cardsArr.length === 0) return true
40-
else {
41-
cardsArr.forEach((card) => {
42-
if (typeof card !== "object") return false
43-
else if (!checkCardFields(card)) return false
44-
})
45-
return true
46-
}
47-
}
48-
49-
function checkCardFields(card) {
50-
let res = (
51-
!isNaN(card.id) &&
52-
typeof card.completed === "boolean" &&
53-
typeof card.text === "string"
54-
)
55-
return res
56-
}
57-
5838
function useUpdater() {
5939
const [updaterVal, setUpdaterVal] = React.useState(null)
6040
const timer = React.useRef()
@@ -185,8 +165,9 @@ function App() {
185165
cardsArr.concat([
186166
{
187167
id: Number(++cardCount),
168+
name: String(cardData.name),
188169
completed: Boolean(cardData.sel),
189-
text: String(cardData.text)
170+
text: String(cardData.text),
190171
}
191172
])
192173
)
@@ -197,8 +178,11 @@ function App() {
197178
setCards([...cardsArr])
198179
}
199180

200-
function editCardContent(index, text) {
201-
if (cardsArr[index]) cardsArr[index].text = text
181+
function editCardContent(index, name, text) {
182+
if (cardsArr[index]) {
183+
cardsArr[index].name = name
184+
cardsArr[index].text = text
185+
}
202186
setCards([...cardsArr])
203187
}
204188
///////////

‎src/Cards/AddCard.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ function AddCard({ onCreate, onDeleteAll }) {
2222

2323
function submitHandler() {
2424
if (String(input.value()).trim() && String(select.value()).trim()) {
25-
onCreate({ text: String(input.value()).trim(), sel: Boolean(Number(select.value())) })
25+
onCreate({ name: String(input.value()).trim(), text: "", sel: Boolean(Number(select.value())) })
2626
input.clear()
2727
}
2828
}
@@ -33,11 +33,12 @@ function AddCard({ onCreate, onDeleteAll }) {
3333
<div className="row my-2 text-center">
3434

3535
<div className="col-lg-12 col-md-12 p-1">
36-
<TextareaAutosize type="text" className="form-control" placeholder="Card text" id="Text"
36+
<TextareaAutosize type="text" className="form-control" placeholder="Card name" id="Text"
3737
{...input.bind}
3838
style={{ resize: "none" }}
3939
minRows={1}
40-
maxRows={7}
40+
maxRows={3}
41+
maxLength="100"
4142
/>
4243
</div>
4344

‎src/Cards/CardItem.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ function CardItem(props) {
1919
<div className="card" style={{ color: "white", backgroundColor: color }} >
2020

2121
<div className="card-body" onClick={() => setEditCard(index)} >
22-
<h5 className="card-title">Id: {card.id}</h5>
22+
<h5 className="card-title">{card.name}</h5>
2323
<p
2424
className="card-text"
2525
style={{ overflow: "hidden", display: "-webkit-box", WebkitLineClamp: String(lineClip), WebkitBoxOrient: "vertical" }}

‎src/Cards/ModalCardEdit.js‎

Lines changed: 34 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
33
import Context from '../context'
44
import TextareaAutosize from 'react-textarea-autosize'
55
import Modal, { ModalProps } from "../Modal/Modal"
6+
import debounce from '../Shared/debounce'
67

78
function calcMaxRows() {
89
const small = 576
@@ -42,11 +43,16 @@ function ModalCardEdit(props) {
4243

4344
/////
4445

45-
function save(text) {
46-
editCardContent(index, text)
46+
function save(name, text) {
47+
editCardContent(index, name, text)
4748
}
49+
4850
function onInputCange(e) {
49-
save(e.target.value)
51+
let name = card.name
52+
let text = card.text
53+
if (e.target.id === "modal-edit-name") name = e.target.value
54+
if (e.target.id === "modal-edit-text") text = e.target.value
55+
save(name, text)
5056
}
5157

5258
function tryStateChange() {
@@ -63,7 +69,7 @@ function ModalCardEdit(props) {
6369
}
6470

6571
// eslint-disable-next-line no-unused-vars
66-
const [color, btcolor] = card&&card.completed ? ["green", "success"] : ["red", "danger"]
72+
const [color, btcolor] = card && card.completed ? ["green", "success"] : ["red", "danger"]
6773

6874
return (
6975
<Modal {...modalProps.bind()}>
@@ -72,30 +78,40 @@ function ModalCardEdit(props) {
7278
<div>
7379
{card ? (
7480
<React.Fragment>
75-
<h1 className="mb-2">Id: {card.id}</h1>
76-
<h5 className="mb-2">Completed:
77-
<span
78-
className={`p-1 m-1 d-inline-block text-center badge badge-${btcolor}`}
79-
style={{ width: "3em" }}
80-
>
81+
<TextareaAutosize
82+
className="form-control form-control-lg p-0 mb-2 bg-light text-dark"
83+
id="modal-edit-name"
84+
style={{ color: "black", fontWeight: "600", fontSize: 'x-large', border: "none", outline: "none", boxShadow: "none", resize: "none" }}
85+
minRows={1}
86+
maxRows={3}
87+
maxLength="100"
88+
value={card.name}
89+
onChange={debounce(onInputCange, 700)}
90+
/>
91+
92+
<p style={{ fontWeight: "500" }} className="mb-2 text-dark">
93+
Completed:
94+
<span className={`m-1 d-inline-block text-center badge badge-${btcolor}`} style={{ width: "3em" }}>
8195
{String(card.completed)}
8296
</span>
83-
</h5>
97+
</p>
98+
8499
<TextareaAutosize
85100
className="form-control p-0 mb-2 bg-light"
101+
id="modal-edit-text"
86102
style={{ border: "none", outline: "none", boxShadow: "none", resize: "none" }}
87103
minRows={3}
88104
maxRows={calcMaxRows()}
89105
value={card.text}
90-
onChange={onInputCange}
106+
onChange={debounce(onInputCange, 1000)}
91107
/>
92108
</React.Fragment>
93109
) : (
94110
<h1>No card</h1>
95111
)}
96112
</div>
97113

98-
<div style={{ display: "flex", justifyContent: "space-between", flexWrap: "wrap" }}>
114+
<div style={{ display: "flex", justifyContent: "space-around", alignItems: "center", flexWrap: "wrap" }}>
99115
<div>
100116
<button
101117
className="btn btn-light mx-1"
@@ -108,6 +124,11 @@ function ModalCardEdit(props) {
108124
onClick={tryRemove}
109125
>&#10007;</button>
110126
</div>
127+
128+
<div className="mx-auto">
129+
<span style={{ color: "lightgray", fontWeight: "400" }}>Id: {card && card.id}</span>
130+
</div>
131+
111132
<div>
112133
<button
113134
className="btn btn-light"

‎src/Modal/Modal.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
.modal-window-body {
1616
width: 100%;
1717
max-width: 620px;
18+
max-height: 100%;
19+
overflow-y: auto;
1820
height: fit-content;
1921
}
20-

‎src/Services/DataService.js‎

Lines changed: 6 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
import $ from "jquery";
1+
import $ from "jquery"
2+
import checkCardsArr from '../Shared/Card'
3+
24
export default function DataService() {
35
////////////////////////////////////////////////////////////
46
var user = null
@@ -78,22 +80,8 @@ export default function DataService() {
7880

7981
function checkData(data) {
8082
//console.log('start check data')
81-
const checkCard = (card) => {
82-
return !(
83-
(typeof card.id === "number" || typeof card.id === "string") &&
84-
!isNaN(card.id) && typeof card.completed === "boolean" &&
85-
typeof card.text === "string"
86-
)
87-
}
88-
const checkArr = (arr) => {
89-
let res = true
90-
arr.forEach(element => {
91-
if (checkCard(element)) res = false
92-
})
93-
return res
94-
}
9583
try {
96-
return data === null || data === [] || checkArr(data)
84+
return data === null || data === [] || checkCardsArr(data)
9785
} catch {
9886
return false
9987
}
@@ -112,7 +100,8 @@ export default function DataService() {
112100
let data = tryParce(d)//here we parce json
113101
//console.log("[DATA] from loadData(): ", data)
114102
if (!checkData(data)) {
115-
console.error("[loadData] Bad data format", data)
103+
console.error("[loadData] Bad data format")
104+
console.log(data)
116105
if (user !== null) {
117106
console.log('clear data')
118107
requestPostData([{ id: 0, completed: false, text: "Данные были очищены из за ошибки" }]).then(() => loadData().then(res, rej), rej)//очистка данных

‎src/Shared/Card.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
function checkCardsArr(cardsArr) {
2+
if (!Array.isArray(cardsArr)) return false
3+
else if (cardsArr.length === 0) return true
4+
else {
5+
cardsArr.forEach((card) => {
6+
if (typeof card !== "object") return false
7+
else if (!checkCard(card)) return false
8+
})
9+
return true
10+
}
11+
}
12+
13+
const checkCard = (card) => {
14+
return (
15+
(typeof card.id === "number" || typeof card.id === "string") && !isNaN(card.id) &&
16+
typeof card.name === "string" &&
17+
typeof card.completed === "boolean" &&
18+
typeof card.text === "string"
19+
)
20+
}
21+
22+
export default checkCardsArr

‎src/Shared/debounce.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export default function debounce(f, ms) {
2+
let isCooldown = false;
3+
return function () {
4+
if (isCooldown) return;
5+
f.apply(this, arguments);
6+
isCooldown = true;
7+
setTimeout(() => isCooldown = false, ms);
8+
};
9+
}

0 commit comments

Comments
 (0)