Skip to content

Commit b4e8d3a

Browse files
maxchisttmaxchistt
committed
separate login service
1 parent ed02ba6 commit b4e8d3a

File tree

4 files changed

+102
-50
lines changed

4 files changed

+102
-50
lines changed

‎src/App.js‎

Lines changed: 45 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ import ModalCardEdit from './Cards/ModalCardEdit'
99
import ModalLogin from './Login/ModalLogin'
1010
import DataService from './Services/DataService'
1111

12-
const { loadData, postData, setDataServLogin } = DataService()
12+
const { loadData, postData, updDataServLogin } = DataService()
13+
1314
const testText = "Notes App"
1415

1516
var cardCount = 0
@@ -58,7 +59,10 @@ function useUpdater() {
5859
const [updaterVal, setUpdaterVal] = React.useState(null)
5960
const timer = React.useRef()
6061
if (timer.current) clearTimeout(timer.current)
61-
timer.current = setTimeout(() => setUpdaterVal(Date.now()), 60 * 1000) // обновяем через минуту
62+
timer.current = setTimeout(() => {
63+
console.log("Timed update")
64+
setUpdaterVal(Date.now())
65+
}, 60 * 1000) // обновяем через минуту
6266
return [updaterVal]
6367
}
6468

@@ -73,45 +77,53 @@ function App() {
7377

7478
const [updaterVal] = useUpdater()
7579

76-
React.useEffect(onLogout, [logged, userName])// eslint-disable-line react-hooks/exhaustive-deps
7780
React.useEffect(loadDataFromServer, [logged, userName, updaterVal]) // eslint-disable-line react-hooks/exhaustive-deps
7881
React.useEffect(loadDataToServer, [cardsArr]) // eslint-disable-line react-hooks/exhaustive-deps
82+
React.useEffect(clearOldData, [logged]) // eslint-disable-line react-hooks/exhaustive-deps
7983

8084
///////////
81-
function tryLogin(login) {
85+
function onLogin(login) {
86+
//console.log("onLogin", login)
8287
return new Promise((res, rej) => {
83-
tryLogout()
88+
onLogout()
8489
.then(() => {
85-
setDataServLogin(login)
86-
.then(
87-
r => {
88-
setLogged(Boolean(r))
89-
setUserName(login)
90-
res(r)
91-
}
92-
)
93-
.catch(
94-
e => {
95-
console.log("setDataServLogin catch in Try login", e)
96-
rej(e)
97-
}
98-
)
90+
//console.log("onLogin", login, "onLogout.then")
91+
updDataServLogin(login)
92+
.then(r => {
93+
//console.log("onLogin", login, "onLogout.then", "updDataServLogin.then")
94+
setLogged(Boolean(r))
95+
setUserName(login)
96+
res(r)
97+
})
98+
.catch(e => {
99+
//console.log("onLogin", login, "onLogout.then", "updDataServLogin.catch", e)
100+
rej(e)
101+
})
99102
})
100-
.catch((e) => console.log("logout catch in tryLogin", e))
103+
.catch(e => console.log("logout catch in onLogin", e))
101104
})
102105
}
103106

104-
function tryLogout() {
107+
function onLogout() {
108+
//console.log("onLogout")
105109
return new Promise((res) => {
106-
if (logged) console.log("Dislogin")
107-
let result = setDataServLogin(null)
108-
setUserName(undefined)
109-
setLogged(false)
110-
result.then(onLogout, onLogout).then(res, res).then(onLogout).catch(e => console.log("Data service dislogif failed", e))
110+
updDataServLogin(null)
111+
.finally(() => {
112+
if (logged) {
113+
//console.log("onLogout - was logged, dislogin")
114+
setUserName(undefined)
115+
setLogged(false)
116+
} else {
117+
//console.log("onLogout - also not logged")
118+
}
119+
})
120+
.finally(res)
121+
.catch(e => console.log("Data service dislogin failed", e))
111122
})
112123
}
113124

114-
function onLogout() {
125+
function clearOldData() {
126+
//console.log("clearOldData, logged:", logged)
115127
if (!logged && !!cardsArr) deleteAll()
116128
}
117129
///////////
@@ -120,9 +132,10 @@ function App() {
120132
function loadDataToServer() {
121133
try {
122134
if (logged && userName) postData(cardsArr)
123-
.then((res) => {
135+
.then(res => {
124136
console.log('[onPostData]', res)
125-
}, e => console.log(`Data post request error. Response: ${e}`))
137+
})
138+
.catch(e => console.log(`Data post request error. Response: ${e}`))
126139
}
127140
catch (e) {
128141
console.error(e)
@@ -138,7 +151,8 @@ function App() {
138151
console.log('[onLoadData]', 'Данные с сервера загружены')
139152
setLoadedCards(data)
140153
setLoading(false)
141-
}, e => {
154+
})
155+
.catch(e => {
142156
console.log(`Data load request error. Response: ${e}`)
143157
setLoading(false)
144158
})
@@ -222,7 +236,7 @@ function App() {
222236
</button>
223237
</div>
224238
</nav>
225-
<ModalLogin login={tryLogin} logout={tryLogout} logged={logged} userName={userName} isOpen={openLogin} setOpenState={setOpenLogin} />
239+
<ModalLogin onLogin={onLogin} onLogout={onLogout} logged={logged} userName={userName} isOpen={openLogin} setOpenState={setOpenLogin} />
226240
</header>
227241

228242
<main className="p-1 pb-3 mb-3">

‎src/Login/ModalLogin.js‎

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import React from "react"
22
import Modal, { ModalProps } from "../Modal/Modal"
33
import PropTypes from 'prop-types'
4+
import LoginService from '../Services/LoginService'
5+
const { logIn, logOut } = LoginService()
46

57
function checkUsername(str) {
68
return str && typeof str === 'string' && str.length > 3 && str.length < 20 && str === validateUsername(str)
@@ -24,7 +26,7 @@ function useInputValue(defaultValue) {
2426
}
2527

2628
function ModalLogin(props) {
27-
const { login, logout, logged, userName, isOpen, setOpenState } = props
29+
const { onLogin, onLogout, logged, userName, isOpen, setOpenState } = props
2830

2931
const input = useInputValue("")
3032

@@ -42,18 +44,19 @@ function ModalLogin(props) {
4244

4345
function close() {
4446
clearInput()
47+
setLabelAlert("")
4548
setOpenState(false)
4649
}
4750

4851
function clearInput() {
4952
input.clear()
50-
setLabelAlert("")
5153
}
5254

5355
function tryLogin() {
5456
if (checkUsername(input.value)) {
55-
login(input.value.trim())
57+
logIn(input.value.trim())
5658
.then((name) => {
59+
onLogin(name)
5760
close()
5861
console.log('Login:', name)
5962
})
@@ -72,14 +75,19 @@ function ModalLogin(props) {
7275
}
7376

7477
function tryLogout() {
78+
logOut()
79+
.then((name) => {
80+
onLogout(name)
81+
console.log('Logged out')
82+
})
83+
.catch((err) => {
84+
console.log("Не удалось разлогиниться")
85+
console.log(err)
86+
setLabelAlert(<div className="alert alert-danger my-1" role="alert">
87+
Не удалось разлогиниться {err && <span className={`badge badge-danger`}>{String(err)}</span>}
88+
</div>)
89+
})
7590
//close()
76-
logout()
77-
console.log('Logged out')
78-
}
79-
80-
function tryClose() {
81-
setLabelAlert("")
82-
close()
8391
}
8492

8593
return (
@@ -115,7 +123,7 @@ function ModalLogin(props) {
115123
<button disabled={!logged} className="btn btn-danger col" onClick={tryLogout}><i className="bi bi-person-x"></i> Logout</button>
116124
</div>
117125
<div className="col-4 col-sm-4 col-md-3 p-1">
118-
<button className="btn btn-secondary col" onClick={tryClose}><i className="bi bi-x d-inline d-sm-none"></i><span className="d-none d-sm-inline">Close</span></button>
126+
<button className="btn btn-secondary col" onClick={close}><i className="bi bi-x d-inline d-sm-none"></i><span className="d-none d-sm-inline">Close</span></button>
119127
</div>
120128
</div>
121129

‎src/Services/DataService.js‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,29 +4,28 @@ export default function DataService() {
44
var user = null
55
const deploy = true
66
const url = deploy ? 'http://php-server-notes.std-1033.ist.mospolytech.ru/' : 'http://php-server-notes/'
7-
//let recuestCount = 1;
87

98
////////////////////////////////////////////////////////////
10-
function setDataServLogin(login) {
9+
function updDataServLogin(login) {
1110
return new Promise((res, rej) => {
1211
if (login && typeof login === "string") {
1312
user = login
1413
//console.log("data serv login set")
1514
res(user)
1615
} else if (login === null) {
1716
user = null
18-
//console.log("data serv dislogin")
17+
//console.log("data serv login unset")
1918
res()
2019
} else {
2120
//console.log("data serv cant set login", login)
2221
rej(login)
2322
}
24-
}).catch(e => { console.log("data serv login not set", e); return e })
25-
23+
})
2624
}
2725
////////////////////////////////////////////////////////////
2826

2927
////////////////////////////////////////////////////////////
28+
//let recuestCount = 1;
3029
function request(target, data) {
3130
//const rc = recuestCount++
3231
//console.log(` \nrequest ${rc} - "${target}" started \n params - user:"${user}" data:"${data}"`)
@@ -121,7 +120,7 @@ export default function DataService() {
121120
} else {
122121
res(data || [])
123122
}
124-
}, rej)
123+
})
125124
.catch(rej)
126125
} catch (e) {
127126
rej(e)
@@ -139,7 +138,7 @@ export default function DataService() {
139138
.then((d) => {
140139
let pDat = data === null ? (d || []) : data
141140
requestPostData(pDat).then(res, rej)
142-
}, rej)
141+
})
143142
.catch(rej)
144143
} catch (e) {
145144
rej(e)
@@ -149,5 +148,5 @@ export default function DataService() {
149148
}
150149
////////////////////////////////////////////////////////////
151150

152-
return { loadData, postData, setDataServLogin }
151+
return { loadData, postData, updDataServLogin }
153152
}

‎src/Services/LoginService.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
export default function DataService() {
2+
3+
var user = null
4+
5+
////////////////////////////////////////////////////////////
6+
7+
function logIn(login) {
8+
return new Promise((res, rej) => {
9+
if (login && typeof login === "string") {
10+
user = login
11+
//console.log("login serv login set")
12+
res(user)
13+
} else {
14+
//console.log("login serv cant set login", login)
15+
rej(login)
16+
}
17+
})
18+
}
19+
20+
function logOut() {
21+
return new Promise((res, rej) => {
22+
user = null
23+
//console.log("login serv dislogin")
24+
res()
25+
})
26+
}
27+
28+
////////////////////////////////////////////////////////////
29+
30+
return { logIn, logOut }
31+
}

0 commit comments

Comments
 (0)