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

better loading

Browse Source
This commit is contained in:
Stepan Usatiuk
2018-06-03 15:25:22 +03:00
parent b33cc6fb13
commit 87ec2f8b80
12 changed files with 112 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,6 +10,8 @@ export const VALIDATE_LISTS = 'VALIDATE_LISTS';
export const CHANGE_LIST = 'CHANGE_LIST';
export const START_CREATE_LIST = 'START_CREATE_LIST';
export const START_EDIT_LIST = 'START_EDIT_LIST';
export const STOP_CREATE_LIST = 'STOP_CREATE_LIST';
export const STOP_EDIT_LIST = 'STOP_EDIT_LIST';
function requestLists() {
return { type: REQUEST_LISTS };
@@ -34,6 +36,12 @@ export function startCreateList() {
export function startEditList() {
return { type: START_EDIT_LIST };
}
export function stopCreateList() {
return { type: STOP_CREATE_LIST };
}
export function stopEditList() {
return { type: STOP_EDIT_LIST };
}
function addListToState(list) {
return { type: ADD_LIST, list };
}

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

@@ -11,6 +11,11 @@
max-width: 50%;
}
.loading {
align-self: center;
margin-left: 2rem;
}
#listactions {
display: flex;
flex-direction: column;
@@ -47,7 +52,7 @@
#input {
color: black;
background: white;
font-family: "Roboto";
font-family: 'Roboto';
box-sizing: border-box;
font-size: 1rem;
flex-grow: 1;

4
react/src/components/Header.js
View File

@@ -2,7 +2,7 @@ import React from 'react';
import FilterLink from '../containers/FilterLink';
import LogoutLink from '../containers/LogoutLink';
import { VisibilityFilters } from '../actions/todos';
import Lists from '../components/Lists';
import ListsContainer from '../containers/ListsContainer';
export default function Header() {
return (
@@ -11,7 +11,7 @@ export default function Header() {
<LogoutLink>logout</LogoutLink>
</div>
<div id="lists-header">
<Lists />
<ListsContainer />
<div id="filters">
<FilterLink filter={VisibilityFilters.SHOW_ALL}>all</FilterLink>
<FilterLink filter={VisibilityFilters.SHOW_ACTIVE}>active</FilterLink>

32
react/src/components/ListActions.js
View File

@@ -8,25 +8,28 @@ export default function ListActions({
removeList,
startEditList,
creating,
editing,
list,
}) {
const editRemoveButtons = list
? [
<button onClick={() => removeList()}>
<FontAwesomeIcon icon={faTrash} />
</button>,
<button onClick={() => startEditList()}>
<FontAwesomeIcon icon={faEdit} />
</button>,
]
: null;
return (
<div id="listactions">
<button onClick={() => startCreateList()}>
<FontAwesomeIcon icon={faPlus} />
</button>
{!creating && (
<button onClick={() => startCreateList()}>
<FontAwesomeIcon icon={faPlus} />
</button>
)}
{!list && !creating ? 'add list' : null}
{editRemoveButtons}
{list && (
<button onClick={() => removeList()}>
<FontAwesomeIcon icon={faTrash} />
</button>
)}
{list &&
!editing && (
<button onClick={() => startEditList()}>
<FontAwesomeIcon icon={faEdit} />
</button>
)}
</div>
);
}
@@ -40,5 +43,6 @@ ListActions.propTypes = {
removeList: PropTypes.func.isRequired,
startEditList: PropTypes.func.isRequired,
creating: PropTypes.bool.isRequired,
editing: PropTypes.bool.isRequired,
list: PropTypes.string,
};

24
react/src/components/Lists.js
View File

@@ -1,12 +1,26 @@
import React from 'react';
import PropTypes from 'prop-types';
import ListActionsContainer from '../containers/ListActionsContainer';
import SelectorContainer from '../containers/SelectorContainer';
export default function Lists() {
export default function Lists({ userLoaded, listsLoaded }) {
return (
<div id="lists">
<ListActionsContainer />
<SelectorContainer />
</div>
<React.Fragment>
{userLoaded &&
listsLoaded && (
<div id="lists">
<ListActionsContainer />
<SelectorContainer />
</div>
)}
{!userLoaded && <span className="loading">loading.</span>}
{userLoaded && !listsLoaded && <span className="loading">loading..</span>}
</React.Fragment>
);
}
Lists.propTypes = {
userLoaded: PropTypes.bool.isRequired,
listsLoaded: PropTypes.bool.isRequired,
};

14
react/src/components/Selector.js
View File

@@ -50,19 +50,15 @@ export default function Selector({
</div>
);
}
if (list === null && dirty) {
return <div id="listselector">loading</div>;
}
const listElements = Object.values(lists.lists).map(elem => (
<option key={elem.id} value={elem.id}>
{elem.name}
</option>
));
if (list) {
return (
<div id="listselector">
<select value={list} onChange={e => onChange(e.target.value)}>
{listElements}
{Object.values(lists.lists).map(elem => (
<option key={elem.id} value={elem.id}>
{elem.name}
</option>
))}
</select>
</div>
);

10
react/src/containers/ListActionsContainer.js
View File

@@ -3,9 +3,14 @@ import ListActions from '../components/ListActions';
import { startCreateList, startEditList, removeList } from '../actions/lists';
function mapStateToProps(state) {
const editing =
state.lists.list && !state.lists.dirty
? state.lists.lists[state.lists.list].editing
: false;
return {
list: state.lists.list,
creating: state.lists.creating,
editing,
};
}
function mapDispatchToProps(dispatch) {
@@ -16,4 +21,7 @@ function mapDispatchToProps(dispatch) {
};
}
export default connect(mapStateToProps, mapDispatchToProps)(ListActions);
export default connect(
mapStateToProps,
mapDispatchToProps,
)(ListActions);

11
react/src/containers/ListsContainer.js Normal file
View File

@@ -0,0 +1,11 @@
import { connect } from 'react-redux';
import Lists from '../components/Lists';
function mapStateToProps(state) {
return {
userLoaded: state.user.loaded,
listsLoaded: state.lists.loaded,
};
}
export default connect(mapStateToProps)(Lists);

5
react/src/containers/LogoutLink.js
View File

@@ -30,4 +30,7 @@ function mapDispatchToProps(dispatch) {
};
}
export default connect(null, mapDispatchToProps)(Link);
export default connect(
null,
mapDispatchToProps,
)(Link);

5
react/src/containers/SelectorContainer.js
View File

@@ -24,4 +24,7 @@ function mapDispatchToProps(dispatch) {
};
}
export default connect(mapStateToProps, mapDispatchToProps)(Selector);
export default connect(
mapStateToProps,
mapDispatchToProps,
)(Selector);

21
react/src/reducers/lists.js
View File

@@ -9,6 +9,8 @@ import {
EDIT_LIST_NAME,
START_CREATE_LIST,
START_EDIT_LIST,
STOP_CREATE_LIST,
STOP_EDIT_LIST,
} from '../actions/lists';
import {
ADD_TODO,
@@ -27,6 +29,7 @@ export default function lists(
dirty: true,
fetching: false,
lists: null,
loaded: false,
creating: false,
list: null,
},
@@ -39,6 +42,7 @@ export default function lists(
return {
...state,
dirty: false,
loaded: true,
fetching: false,
lists: action.lists,
};
@@ -47,6 +51,11 @@ export default function lists(
...state,
creating: true,
};
case STOP_CREATE_LIST:
return {
...state,
creating: false,
};
case ADD_LIST:
return {
...state,
@@ -73,6 +82,18 @@ export default function lists(
},
};
}
case STOP_EDIT_LIST: {
return {
...state,
lists: {
...state.lists,
[state.list]: {
...state.lists[state.list],
editing: false,
},
},
};
}
case EDIT_LIST_NAME: {
return {
...state,

5
react/src/reducers/user.js
View File

@@ -14,6 +14,7 @@ export default function user(
dirty: true,
fetching: false,
user: null,
loaded: false,
errors: null,
},
action,
@@ -36,6 +37,7 @@ export default function user(
user: action.user,
errors: null,
dirty: false,
loaded: true,
fetching: false,
};
case SIGNUP_FAIL:
@@ -46,17 +48,20 @@ export default function user(
errors: action.error,
dirty: false,
fetching: false,
loaded: false,
};
case RESET_USER:
return {
...state,
fetching: false,
loaded: false,
user: null,
errors: null,
};
case LOGOUT:
return {
...state,
loaded: false,
user: null,
};
default: