Skip to content

Commit 35bd79e

Browse files
maxchisttmaxchistt
authored
Merge pull request #10 from maxchistt/auth-api
Api Update
2 parents cb02f23 + 861fecb commit 35bd79e

34 files changed

+984
-773
lines changed

‎app.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const app = express()
1515
app.use(express.json({ extended: true }))
1616

1717
app.use('/api/auth', require('./routes/auth.routes'))
18-
app.use('/api/server', require('./routes/phpserver.routes'))
18+
app.use('/api/notes', require('./routes/notes.routes'))
1919

2020
if (httpsRedirect) app.use(httpToHttps)
2121

‎client/package-lock.json‎

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

‎client/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"react": "^17.0.2",
1313
"react-dom": "^17.0.2",
1414
"react-markdown": "^6.0.2",
15+
"react-router-dom": "^5.2.0",
1516
"react-scripts": "4.0.3",
1617
"react-stack-grid": "^0.7.1",
1718
"react-textarea-autosize": "^8.3.3",

‎client/src/App.css‎

Lines changed: 0 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,3 @@
1-
.App-logo {
2-
height: 3em;
3-
pointer-events: none;
4-
user-select: none;
5-
}
6-
7-
@media (prefers-reduced-motion: no-preference) {
8-
.App-logo {
9-
animation: App-logo-spin infinite 20s linear;
10-
}
11-
}
12-
13-
@keyframes App-logo-spin {
14-
from {
15-
transform: rotate(0deg);
16-
}
17-
to {
18-
transform: rotate(360deg);
19-
}
20-
}
21-
22-
.card:hover {
23-
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
24-
}
25-
26-
.card {
27-
transition: box-shadow 0.3s;
28-
}
29-
30-
.card-text > h1 {
31-
font-size: 1.625em;
32-
}
33-
.card-text > h2 {
34-
font-size: 1.5em;
35-
}
36-
.card-text > h3 {
37-
font-size: 1.375em;
38-
}
39-
.card-text > h4 {
40-
font-size: 1.25em;
41-
}
42-
.card-text > h5 {
43-
font-size: 1.125em;
44-
}
45-
461
.lds-dual-ring {
472
display: inline-block;
483
height: 1em;
@@ -68,12 +23,3 @@
6823
transform: rotate(360deg);
6924
}
7025
}
71-
72-
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap");
73-
74-
.brand {
75-
font-family: "Roboto", sans-serif;
76-
padding-top: 0.2rem !important;
77-
pointer-events: none;
78-
user-select: none;
79-
}

‎client/src/App.js‎

Lines changed: 31 additions & 251 deletions
Original file line numberDiff line numberDiff line change
@@ -1,267 +1,47 @@
11
import React from 'react';
2-
import logo from './Shared/Logo/logo.svg';
3-
import './App.css';
4-
import CardList from './Cards/CardList'
5-
import AddCard from './Cards/AddCard'
6-
import Context from './context'
7-
import Loader from './Shared/Loader'
8-
import ModalCardEdit from './Cards/ModalCardEdit'
9-
import ModalLogin from './Login/ModalLogin'
10-
import DataService from './Services/DataService'
11-
import Card, { checkCardsArr } from './Cards/cardType/Card'
12-
//import useDebouncedEffect from './Shared/useDebouncedEffect.hook'
13-
14-
const { loadData, postData, updDataServLogin } = DataService()
15-
16-
const brandText = "Notes"
17-
18-
var cardCount = 0
19-
20-
function calcCount(cards) {
21-
let id = cardCount;
22-
[...cards].forEach(element => {
23-
if (Number(element.id) >= id) id = Number(element.id)
24-
});
25-
return id
26-
}
272

28-
function useCardsArr(defaultValue) {
29-
const [value, setValue] = React.useState(defaultValue)
3+
import './App.css';
304

31-
function trySetValue(cardsArr) {
32-
if (checkCardsArr(cardsArr) || cardsArr === null) setValue(cardsArr)
33-
else console.error('Массив cardsArr не прошел проверку \n', cardsArr)
34-
}
5+
import Loader from './shared/Loader'
356

36-
return [value, trySetValue]
37-
}
38-
39-
function useUpdater() {
40-
const [updaterVal, setUpdaterVal] = React.useState(null)
41-
const timer = React.useRef()
42-
if (timer.current) clearTimeout(timer.current)
43-
timer.current = setTimeout(() => {
44-
console.log("Timed update")
45-
setUpdaterVal(Date.now())
46-
}, 60 * 1000) // обновяем через минуту
47-
return [updaterVal]
48-
}
7+
import { BrowserRouter as Router } from 'react-router-dom'
8+
import { useRoutes } from './routes'
9+
import { useAuth } from './hooks/auth.hook'
10+
import { AuthContext } from './context/AuthContext'
11+
import { PageContext } from './context/PageContext'
12+
import Header from './pages/SharedComponents/Header'
4913

5014
function App() {
51-
const [cardsArr, setCards] = useCardsArr(null)
52-
const [editCardId, setEditCardId] = React.useState(null)
53-
const [loading, setLoading] = React.useState({ state: false, res: false })
15+
const { token, login, logout, userId, email, ready } = useAuth()
16+
const isAuthenticated = !!token
17+
const routes = useRoutes(isAuthenticated)
5418

55-
const [openLogin, setOpenLogin] = React.useState(false)
56-
const [logged, setLogged] = React.useState(false)
57-
const [userName, setUserName] = React.useState(undefined)
19+
const [nav, setNav] = React.useState()
5820

59-
const [updaterVal] = useUpdater()
60-
61-
React.useEffect(loadDataFromServer, [logged, userName, updaterVal]) // eslint-disable-line react-hooks/exhaustive-deps
62-
//useDebouncedEffect(loadDataToServer, [cardsArr], 300) // eslint-disable-line react-hooks/exhaustive-deps
63-
React.useEffect(loadDataToServer, [cardsArr]) // eslint-disable-line react-hooks/exhaustive-deps
64-
React.useEffect(clearOldData, [logged, userName]) // eslint-disable-line react-hooks/exhaustive-deps
65-
66-
///////////
67-
function onLogin(login) {
68-
//console.log("onLogin", login)
69-
return new Promise((res, rej) => {
70-
onLogout()
71-
.then(() => {
72-
//console.log("onLogin", login, "onLogout.then")
73-
updDataServLogin(login)
74-
.then(r => {
75-
//console.log("onLogin", login, "onLogout.then", "updDataServLogin.then")
76-
setLogged(Boolean(r))
77-
setUserName(login)
78-
res(r)
79-
})
80-
.catch(e => {
81-
//console.log("onLogin", login, "onLogout.then", "updDataServLogin.catch", e)
82-
rej(e)
83-
})
84-
})
85-
.catch(e => console.log("logout catch in onLogin", e))
86-
})
87-
}
88-
89-
function onLogout() {
90-
//console.log("onLogout")
91-
return new Promise((res) => {
92-
updDataServLogin(null)
93-
.finally(() => {
94-
if (logged) {
95-
//console.log("onLogout - was logged, dislogin")
96-
setUserName(undefined)
97-
setLogged(false)
98-
} else {
99-
//console.log("onLogout - also not logged")
100-
clearOldData()
101-
}
102-
})
103-
.finally(res)
104-
.catch(e => console.log("Data service dislogin failed", e))
105-
})
106-
}
107-
108-
function clearOldData() {
109-
//console.log("clearOldData, logged:", logged)
110-
if (!logged) setCards(null)
111-
}
112-
///////////
113-
114-
///////////
115-
function loadDataToServer() {
116-
try {
117-
let startUsername = userName
118-
if (logged && userName) postData(cardsArr)
119-
.then(res => {
120-
if (!cardsArr) console.log("empty post!")
121-
console.log('[onPostData]', res)
122-
if (startUsername !== userName) {
123-
console.log("упс, несостыковочка с userName");
124-
loadDataToServer()
125-
}
126-
})
127-
.catch(e => console.log(`Data post request error. Response: ${e}`))
128-
}
129-
catch (e) {
130-
console.error(e)
131-
}
132-
}
133-
134-
function loadDataFromServer() {
135-
try {
136-
let startUsername = userName
137-
if (logged && userName) {
138-
setLoading({ state: true, res: loading.res })
139-
loadData()
140-
.then(data => {
141-
console.log('[onLoadData]', 'Данные с сервера загружены')
142-
if (startUsername === userName) setLoadedCards(data)
143-
else console.log("упс, несостыковочка с userName");
144-
setLoading({ state: false, res: true })
145-
})
146-
.catch(e => {
147-
console.log(`Data load request error. Response:`, e)
148-
setLoading({ state: false, res: false })
149-
})
150-
}
151-
}
152-
catch (e) {
153-
setLoading({ state: false, res: false })
154-
console.error(e)
155-
}
156-
}
157-
///////////
158-
159-
///////////
160-
function setLoadedCards(cards) {
161-
setCards([...cards])
162-
cardCount = calcCount(cards)
163-
}
164-
165-
function removeCard(index) {
166-
cardsArr.splice(index, 1)
167-
setCards([...cardsArr])
168-
}
169-
170-
function deleteAll() {
171-
setCards([])
172-
}
173-
174-
function addCard(cardData = {}) {
175-
const newCard = new Card({ id: ++cardCount, name: cardData.name, color: cardData.color, text: cardData.text })
176-
setCards(
177-
178-
(cardsArr != null) ? cardsArr.concat([newCard]) : [newCard]
21+
if (!ready) {
22+
return (
23+
<div className="container display-4 text-center p-3" >
24+
<Loader />
25+
</div>
17926
)
18027
}
18128

182-
function changeCardColor(index, color) {
183-
cardsArr[index].color = color
184-
setCards([...cardsArr])
185-
}
186-
187-
function editCardContent(index, name, text) {
188-
if (cardsArr[index]) {
189-
let card = new Card(cardsArr[index])
190-
card.name = name
191-
card.text = text
192-
cardsArr[index] = card
193-
}
194-
setCards([...cardsArr])
195-
}
196-
///////////
197-
198-
///////////
199-
function getCardByIndex(index) {
200-
return index !== null ? cardsArr[index] : null
201-
}
202-
function setEditCard(index) {
203-
setEditCardId(index)
204-
}
205-
function unsetEditCard() {
206-
setEditCardId(null)
207-
}
208-
///////////
20929

21030
return (
211-
<Context.Provider value={{ removeCard, changeCardColor, setEditCard, unsetEditCard, editCardContent, editCardId }}>
212-
<div className="App pb-3 mb-3">
213-
<header className="p-1">
214-
<nav className="d-flex container px-0 flex-wrap-reverse justify-content-around">
215-
<div className="text-center d-flex p-1 align-items-center justify-content-center flex-wrap">
216-
<img src={logo} className="App-logo" alt="logo" />
217-
<h1 className="h2 m-0 text-dark pr-3 brand">{brandText}</h1>
218-
</div>
219-
<div className="text-center d-flex p-0 align-items-center flex-wrap ml-auto">
220-
{logged &&
221-
<button className="btn btn-light m-1" onClick={loadDataFromServer}>
222-
{loading.state ? <Loader className='px-1' /> : <i className="bi bi-arrow-clockwise px-1"></i>}
223-
<span className='d-xl-inline d-none'>Update</span>
224-
</button>
225-
}
226-
<button className="btn btn-light m-1" onClick={() => setOpenLogin(true)}>
227-
{logged ? <span><i className="bi bi-person"></i> {userName}</span> : <span><i className="bi bi-arrow-right-circle"></i> LOG IN</span>}
228-
</button>
229-
</div>
230-
</nav>
231-
<ModalLogin onLogin={onLogin} onLogout={onLogout} logged={logged} userName={userName} isOpen={openLogin} setOpenState={setOpenLogin} />
232-
</header>
233-
234-
<main className="p-1 pb-3 mb-3">
235-
<AddCard onCreate={addCard} onDeleteAll={deleteAll} />
236-
<ModalCardEdit card={getCardByIndex(editCardId)} index={editCardId} />
237-
238-
{cardsArr && cardsArr.length ? (
239-
<CardList cards={cardsArr} />
240-
) : (loading.state || !loading.res) ? null : logged ? (
241-
<div className="container text-center">
242-
<p className="m-3 p-3 h5 text-muted">No cards. You can add a new one!</p>
243-
</div>
244-
) : (
245-
<div className="container text-center">
246-
<p className="m-3 p-3 h5 text-muted">Unlogged</p>
247-
</div>
248-
)}
249-
250-
{(logged && !loading.state && !loading.res) && (
251-
<div className="container text-center">
252-
<p className="m-3 p-3 h5 text-muted">Data not loaded</p>
253-
</div>
254-
)}
255-
256-
{loading.state &&
257-
<div className="container display-4 text-center p-3" >
258-
<Loader />
259-
</div>
260-
}
261-
</main>
262-
</div>
263-
</Context.Provider>
264-
);
31+
<AuthContext.Provider value={{
32+
token, login, logout, userId, email, isAuthenticated
33+
}}>
34+
<PageContext.Provider value={{setNav}}>
35+
<Router>
36+
<Header>{nav}</Header>
37+
<div className="App pb-3 mb-3">
38+
{routes}
39+
</div>
40+
</Router>
41+
</PageContext.Provider>
42+
43+
</AuthContext.Provider>
44+
)
26545
}
26646

26747
export default App;

0 commit comments

Comments
 (0)