stepus53/ustk-todolist
1
0
Fork 0
mirror of https://github.com/usatiuk/ustk-todolist.git synced 2025-10-28 23:57:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

use localforage for storing data

Browse Source
This commit is contained in:
Stepan Usatiuk
2018-06-08 21:06:43 +03:00
parent 846a42f616
commit 0d45a772fc
9 changed files with 54 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
react/package-lock.json generated
View File

@@ -5239,6 +5239,11 @@
"resolved": "https://registry.npmjs.org/ignore/-/ignore-3.3.8.tgz", "resolved": "https://registry.npmjs.org/ignore/-/ignore-3.3.8.tgz",
"integrity": "sha1-P46cNdOHCKOn4Omrtsc+fudweys=" "integrity": "sha1-P46cNdOHCKOn4Omrtsc+fudweys="
}, },
"immediate": {
"version": "3.0.6",
"resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
"integrity": "sha1-nbHb0Pr43m++D13V5Wu2BigN5ps="
},
"import-lazy": { "import-lazy": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-2.1.0.tgz", "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-2.1.0.tgz",
@@ -6710,6 +6715,14 @@
"type-check": "~0.3.2" "type-check": "~0.3.2"
} }
}, },
"lie": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/lie/-/lie-3.1.1.tgz",
"integrity": "sha1-mkNrLMd0bKWd56QfpGmz77dr2H4=",
"requires": {
"immediate": "~3.0.5"
}
},
"load-json-file": { "load-json-file": {
"version": "1.1.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz", "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
@@ -6783,6 +6796,14 @@
"json5": "^0.5.0" "json5": "^0.5.0"
} }
}, },
"localforage": {
"version": "1.7.1",
"resolved": "https://registry.npmjs.org/localforage/-/localforage-1.7.1.tgz",
"integrity": "sha1-5JJ+BCMCuGTbMPMhHxO1xvDell0=",
"requires": {
"lie": "3.1.1"
}
},
"locate-path": { "locate-path": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",

1
react/package.json
View File

@@ -5,6 +5,7 @@
"dependencies": { "dependencies": {
"@material-ui/core": "^1.1.0", "@material-ui/core": "^1.1.0",
"@material-ui/icons": "^1.1.0", "@material-ui/icons": "^1.1.0",
"localforage": "^1.7.1",
"prop-types": "^15.6.1", "prop-types": "^15.6.1",
"react": "^16.4.0", "react": "^16.4.0",
"react-dom": "^16.4.0", "react-dom": "^16.4.0",

15
react/src/actions/lists.js
View File

@@ -1,3 +1,4 @@
import localforage from 'localforage';
import { API_ROOT, getToken } from './util'; import { API_ROOT, getToken } from './util';
import { RECIEVE_TODOS } from './todos'; import { RECIEVE_TODOS } from './todos';
@@ -50,7 +51,7 @@ export function addList(name) {
const response = await fetch(`${API_ROOT}/lists`, { const response = await fetch(`${API_ROOT}/lists`, {
body: JSON.stringify({ name }), body: JSON.stringify({ name }),
headers: { headers: {
Authorization: `Bearer ${getToken()}`, Authorization: `Bearer ${await getToken()}`,
'content-type': 'application/json', 'content-type': 'application/json',
}, },
method: 'POST', method: 'POST',
@@ -70,7 +71,7 @@ export function removeList() {
dispatch(invalidateLists()); dispatch(invalidateLists());
const response = await fetch(`${API_ROOT}/lists/${list}`, { const response = await fetch(`${API_ROOT}/lists/${list}`, {
headers: { headers: {
Authorization: `Bearer ${getToken()}`, Authorization: `Bearer ${await getToken()}`,
'content-type': 'application/json', 'content-type': 'application/json',
}, },
method: 'DELETE', method: 'DELETE',
@@ -95,7 +96,7 @@ export function editList(name) {
const response = await fetch(`${API_ROOT}/lists/${list}`, { const response = await fetch(`${API_ROOT}/lists/${list}`, {
body: JSON.stringify({ name }), body: JSON.stringify({ name }),
headers: { headers: {
Authorization: `Bearer ${getToken()}`, Authorization: `Bearer ${await getToken()}`,
'content-type': 'application/json', 'content-type': 'application/json',
}, },
method: 'PATCH', method: 'PATCH',
@@ -126,7 +127,7 @@ export function fetchLists() {
dispatch(requestLists()); dispatch(requestLists());
const response = await fetch(`${API_ROOT}/lists`, { const response = await fetch(`${API_ROOT}/lists`, {
headers: { headers: {
Authorization: `Bearer ${getToken()}`, Authorization: `Bearer ${await getToken()}`,
}, },
}); });
const json = await response.json(); const json = await response.json();
@@ -148,7 +149,7 @@ export function fetchLists() {
if (lists.length !== 0) { if (lists.length !== 0) {
dispatch(changeList(listsObj[Object.keys(listsObj)[0]].id)); dispatch(changeList(listsObj[Object.keys(listsObj)[0]].id));
} }
localStorage.setItem('lists', JSON.stringify(listsObj)); await localforage.setItem('lists', JSON.stringify(listsObj));
}; };
} }
@@ -157,12 +158,12 @@ export function loadLists() {
dispatch(requestLists()); dispatch(requestLists());
try { try {
const listsJson = localStorage.getTodo('lists'); const listsJson = await localforage.getTodo('lists');
const listsObj = JSON.parse(listsJson); const listsObj = JSON.parse(listsJson);
dispatch(recieveLists(listsObj)); dispatch(recieveLists(listsObj));
dispatch(changeList(listsObj[Object.keys(listsObj)[0]].id)); dispatch(changeList(listsObj[Object.keys(listsObj)[0]].id));
} catch (e) { } catch (e) {
localStorage.removeItem('lists'); await localforage.removeItem('lists');
} }
dispatch(fetchLists()); dispatch(fetchLists());

10
react/src/actions/todos.js
View File

@@ -36,7 +36,7 @@ export function addTodo(text) {
const response = await fetch(`${API_ROOT}/lists/${list}/todos`, { const response = await fetch(`${API_ROOT}/lists/${list}/todos`, {
body: JSON.stringify({ text }), body: JSON.stringify({ text }),
headers: { headers: {
Authorization: `Bearer ${getToken()}`, Authorization: `Bearer ${await getToken()}`,
'content-type': 'application/json', 'content-type': 'application/json',
}, },
method: 'POST', method: 'POST',
@@ -54,7 +54,7 @@ export function removeTodo(id) {
dispatch(invalidateTodos()); dispatch(invalidateTodos());
const response = await fetch(`${API_ROOT}/todos/${id}`, { const response = await fetch(`${API_ROOT}/todos/${id}`, {
headers: { headers: {
Authorization: `Bearer ${getToken()}`, Authorization: `Bearer ${await getToken()}`,
'content-type': 'application/json', 'content-type': 'application/json',
}, },
method: 'DELETE', method: 'DELETE',
@@ -76,7 +76,7 @@ export function toggleTodo(id) {
const response = await fetch(`${API_ROOT}/todos/${id}`, { const response = await fetch(`${API_ROOT}/todos/${id}`, {
body: JSON.stringify({ completed }), body: JSON.stringify({ completed }),
headers: { headers: {
Authorization: `Bearer ${getToken()}`, Authorization: `Bearer ${await getToken()}`,
'content-type': 'application/json', 'content-type': 'application/json',
}, },
method: 'PATCH', method: 'PATCH',
@@ -95,7 +95,7 @@ export function editTodo(id, text) {
const response = await fetch(`${API_ROOT}/todos/${id}`, { const response = await fetch(`${API_ROOT}/todos/${id}`, {
body: JSON.stringify({ text }), body: JSON.stringify({ text }),
headers: { headers: {
Authorization: `Bearer ${getToken()}`, Authorization: `Bearer ${await getToken()}`,
'content-type': 'application/json', 'content-type': 'application/json',
}, },
method: 'PATCH', method: 'PATCH',
@@ -114,7 +114,7 @@ export function fetchTodos(list) {
dispatch({ type: REQUEST_TODOS, list }); dispatch({ type: REQUEST_TODOS, list });
const response = await fetch(`${API_ROOT}/todos`, { const response = await fetch(`${API_ROOT}/todos`, {
headers: { headers: {
Authorization: `Bearer ${getToken()}`, Authorization: `Bearer ${await getToken()}`,
}, },
}); });
const json = await response.json(); const json = await response.json();

21
react/src/actions/user.js
View File

@@ -1,3 +1,4 @@
import localforage from 'localforage';
import { API_ROOT, getToken } from './util'; import { API_ROOT, getToken } from './util';
import { loadLists } from './lists'; import { loadLists } from './lists';
@@ -29,17 +30,17 @@ function validateUser() {
export function loadUser() { export function loadUser() {
return async dispatch => { return async dispatch => {
if (getToken()) { if (await getToken()) {
const response = await fetch(`${API_ROOT}/users/user`, { const response = await fetch(`${API_ROOT}/users/user`, {
headers: { headers: {
Authorization: `Bearer ${getToken()}`, Authorization: `Bearer ${await getToken()}`,
'content-type': 'application/json', 'content-type': 'application/json',
}, },
method: 'GET', method: 'GET',
}); });
const json = await response.json(); const json = await response.json();
if (json.success) { if (json.success) {
localStorage.setItem('jwt', json.data.jwt); await localforage.setItem('jwt', json.data.jwt);
dispatch(loginSuccess(json.data)); dispatch(loginSuccess(json.data));
dispatch(loadLists()); dispatch(loadLists());
} else { } else {
@@ -63,7 +64,7 @@ export function login(user) {
}); });
const json = await response.json(); const json = await response.json();
if (json.success) { if (json.success) {
localStorage.setItem('jwt', json.data.jwt); await localforage.setItem('jwt', json.data.jwt);
dispatch(loginSuccess(json.data)); dispatch(loginSuccess(json.data));
dispatch(loadLists()); dispatch(loadLists());
} else { } else {
@@ -92,7 +93,7 @@ export function signup(user) {
}); });
const json = await response.json(); const json = await response.json();
if (json.success) { if (json.success) {
localStorage.setItem('jwt', json.data.jwt); await await localforage.setItem('jwt', json.data.jwt);
dispatch(signupSuccess(json.data)); dispatch(signupSuccess(json.data));
dispatch(loadLists()); dispatch(loadLists());
} else { } else {
@@ -106,8 +107,10 @@ export function reset() {
} }
export function logout() { export function logout() {
localStorage.removeItem('jwt'); return async dispatch => {
localStorage.removeItem('lists'); await localforage.removeItem('jwt');
localStorage.removeItem('items'); await localforage.removeItem('lists');
return { type: LOGOUT }; await localforage.removeItem('items');
dispatch({ type: LOGOUT });
};
} }

6
react/src/actions/util.js
View File

@@ -1,5 +1,7 @@
import localforage from 'localforage';
export const API_ROOT = '/api'; export const API_ROOT = '/api';
export function getToken() { export async function getToken() {
return localStorage.getItem('jwt'); return localforage.getItem('jwt');
} }

2
react/src/components/App.css
View File

@@ -8,7 +8,7 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-grow: 0; flex-grow: 0;
max-width: 45%; max-width: 40%;
} }
.loading { .loading {

2
react/src/components/user/LoginForm.js
View File

@@ -51,7 +51,7 @@ function LoginForm({ handleSubmit, onLogin, user, history, resetUser }) {
type="password" type="password"
/> />
<div id="submitbutton"> <div id="submitbutton">
<Button variant="contained" color="primary" type="submit"> <Button variant="raised" color="primary" type="submit">
Login Login
</Button> </Button>
</div> </div>

2
react/src/components/user/SignupForm.js
View File

@@ -66,7 +66,7 @@ function SignupForm({ handleSubmit, onSignup, user, history, resetUser }) {
type="password" type="password"
/> />
<div id="submitbutton"> <div id="submitbutton">
<Button variant="contained" color="primary" type="submit"> <Button variant="raised" color="primary" type="submit">
Signup Signup
</Button> </Button>
</div> </div>