Skip to content

Commit 9953750

Browse files
maxchisttmaxchistt
committed
make auth and other api
1 parent a7d0ced commit 9953750

30 files changed

+949
-770
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: 25 additions & 250 deletions
Original file line numberDiff line numberDiff line change
@@ -1,263 +1,38 @@
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 CardsContext from './Context/CardsContext'
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'
4911

5012
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 })
54-
55-
const [openLogin, setOpenLogin] = React.useState(false)
56-
const [logged, setLogged] = React.useState(false)
57-
const [userName, setUserName] = React.useState(undefined)
58-
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 addCard(cardData = {}) {
171-
const newCard = new Card({ id: ++cardCount, name: cardData.name, color: cardData.color, text: cardData.text })
172-
setCards(
173-
174-
(cardsArr != null) ? cardsArr.concat([newCard]) : [newCard]
13+
const { token, login, logout, userId, email, ready } = useAuth()
14+
const isAuthenticated = !!token
15+
const routes = useRoutes(isAuthenticated)
16+
17+
if (!ready) {
18+
return (
19+
<div className="container display-4 text-center p-3" >
20+
<Loader />
21+
</div>
17522
)
17623
}
17724

178-
function changeCardColor(index, color) {
179-
cardsArr[index].color = color
180-
setCards([...cardsArr])
181-
}
182-
183-
function editCardContent(index, name, text) {
184-
if (cardsArr[index]) {
185-
let card = new Card(cardsArr[index])
186-
card.name = name
187-
card.text = text
188-
cardsArr[index] = card
189-
}
190-
setCards([...cardsArr])
191-
}
192-
///////////
193-
194-
///////////
195-
function getCardByIndex(index) {
196-
return index !== null ? cardsArr[index] : null
197-
}
198-
function setEditCard(index) {
199-
setEditCardId(index)
200-
}
201-
function unsetEditCard() {
202-
setEditCardId(null)
203-
}
204-
///////////
205-
20625
return (
207-
<CardsContext.Provider value={{ addCard, removeCard, changeCardColor, setEditCard, unsetEditCard, editCardContent, editCardId }}>
208-
<div className="App pb-3 mb-3">
209-
<header className="p-1">
210-
<nav className="d-flex container px-0 flex-wrap-reverse justify-content-around">
211-
<div className="text-center d-flex p-1 align-items-center justify-content-center flex-wrap">
212-
<img src={logo} className="App-logo" alt="logo" />
213-
<h1 className="h2 m-0 text-dark pr-3 brand">{brandText}</h1>
214-
</div>
215-
<div className="text-center d-flex p-0 align-items-center flex-wrap ml-auto">
216-
{logged &&
217-
<button className="btn btn-light m-1" onClick={loadDataFromServer}>
218-
{loading.state ? <Loader className='px-1' /> : <i className="bi bi-arrow-clockwise px-1"></i>}
219-
<span className='d-xl-inline d-none'>Update</span>
220-
</button>
221-
}
222-
<button className="btn btn-light m-1" onClick={() => setOpenLogin(true)}>
223-
{logged ? <span><i className="bi bi-person"></i> {userName}</span> : <span><i className="bi bi-arrow-right-circle"></i> LOG IN</span>}
224-
</button>
225-
</div>
226-
</nav>
227-
<ModalLogin onLogin={onLogin} onLogout={onLogout} logged={logged} userName={userName} isOpen={openLogin} setOpenState={setOpenLogin} />
228-
</header>
229-
230-
<main className="p-1 pb-3 mb-3">
231-
<AddCard />
232-
<ModalCardEdit card={getCardByIndex(editCardId)} index={editCardId} />
233-
234-
{cardsArr && cardsArr.length ? (
235-
<CardList cards={cardsArr} />
236-
) : (loading.state || !loading.res) ? null : logged ? (
237-
<div className="container text-center">
238-
<p className="m-3 p-3 h5 text-muted">No cards. You can add a new one!</p>
239-
</div>
240-
) : (
241-
<div className="container text-center">
242-
<p className="m-3 p-3 h5 text-muted">Unlogged</p>
243-
</div>
244-
)}
245-
246-
{(logged && !loading.state && !loading.res) && (
247-
<div className="container text-center">
248-
<p className="m-3 p-3 h5 text-muted">Data not loaded</p>
249-
</div>
250-
)}
251-
252-
{loading.state &&
253-
<div className="container display-4 text-center p-3" >
254-
<Loader />
255-
</div>
256-
}
257-
</main>
258-
</div>
259-
</CardsContext.Provider>
260-
);
26+
<AuthContext.Provider value={{
27+
token, login, logout, userId, email, isAuthenticated
28+
}}>
29+
<Router>
30+
<div className="App pb-3 mb-3">
31+
{routes}
32+
</div>
33+
</Router>
34+
</AuthContext.Provider>
35+
)
26136
}
26237

26338
export default App;

‎client/src/Cards/AddCard.js‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import React from 'react'
2-
import PropTypes from 'prop-types'
32
import TextareaAutosize from 'react-textarea-autosize'
43
import Palette, { colors } from './palette/palette'
5-
import useInputValue from '../Shared/useInputValue.hook'
6-
import CardsContext from '../Context/CardsContext'
4+
import useInputValue from '../hooks/useInputValue.hook'
5+
import CardsContext from '../context/CardsContext'
76

87
function AddCard() {
98
const { addCard } = React.useContext(CardsContext)
@@ -71,8 +70,4 @@ function AddCard() {
7170
)
7271
}
7372

74-
AddCard.propTypes = {
75-
onDeleteAll: PropTypes.func.isRequired
76-
}
77-
7873
export default AddCard

‎client/src/Cards/CardItem.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useContext } from 'react'
22
import PropTypes from 'prop-types'
3-
import CardsContext from '../Context/CardsContext'
3+
import CardsContext from '../context/CardsContext'
44
import Card, { PropTypeCard } from './cardType/Card'
55
import ReactMarkdown from 'react-markdown'
66
import gfm from 'remark-gfm'

0 commit comments

Comments
 (0)