Ark/leporello-js
1
0
Fork 0
mirror of https://github.com/leporello-js/leporello-js synced 2026-01-13 21:14:28 -08:00
Code Issues Packages Projects Releases Wiki Activity

finish redux example

Browse Source
This commit is contained in:
Dmitry Vasilev
2023-06-16 00:22:31 +03:00
parent 42b3c9a292
commit af2ea7ea57
6 changed files with 50 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/examples/todos/public/index.html
View File

@@ -10,7 +10,11 @@
<script src='https://unpkg.com/redux'></script> <script src='https://unpkg.com/redux'></script>
<script src='https://unpkg.com/react-redux'></script> <script src='https://unpkg.com/react-redux'></script>
<script type='module' src='../src/index.js'></script> <script type='module'>
if(new URLSearchParams(window.location.search).get('leporello') == null) {
await import('../src/index.js');
}
</script>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

10
docs/examples/todos/src/actions/index.js
View File

@@ -1,7 +1,13 @@
let nextTodoId = 0 const nextTodoId = new Function(`
let nextId = 0
return function() {
return nextId++
}
`)()
export const addTodo = text => ({ export const addTodo = text => ({
type: 'ADD_TODO', type: 'ADD_TODO',
id: nextTodoId++, id: nextTodoId(),
text text
}) })

14
docs/examples/todos/src/containers/AddTodo.js
View File

@@ -3,20 +3,20 @@ import { addTodo } from '../actions/index.js'
const h = React.createElement const h = React.createElement
const AddTodo = ({ dispatch }) => { const AddTodo = ({ dispatch }) => {
let input const inputref = {}
return ( return (
h('div', null, h('div', null,
h('form', { onSubmit: e => { h('form', {
onSubmit: e => {
e.preventDefault() e.preventDefault()
if (!input.value.trim()) { if (inputref.input.value.trim()) {
return dispatch(addTodo(inputref.input.value))
Object.assign(inputref.input, {value: ''})
} }
dispatch(addTodo(input.value))
input.value = ''
} }
}, },
h('input', {ref: node => {input = node}}), h('input', {ref: input => Object.assign(inputref, {input})}),
h('button', {type: 'submit'}, 'Add Todo') h('button', {type: 'submit'}, 'Add Todo')
) )
) )

14
docs/examples/todos/src/containers/VisibleTodoList.js
View File

@@ -3,11 +3,15 @@ import TodoList from '../components/TodoList.js'
import { VisibilityFilters } from '../actions/index.js' import { VisibilityFilters } from '../actions/index.js'
const getVisibleTodos = (todos, filter) => { const getVisibleTodos = (todos, filter) => {
return { if(filter == VisibilityFilters.SHOW_ALL) {
[VisibilityFilters.SHOW_ALL]: todos, return todos
[VisibilityFilters.SHOW_COMPLETED]: todos.filter(t => t.completed), } else if(filter == VisibilityFilters.SHOW_COMPLETED) {
[VisibilityFilters.SHOW_ACTIVE]: todos.filter(t => !t.completed), return todos.filter(t => t.completed)
}[filter] } else if(filter == VisibilityFilters.SHOW_ACTIVE) {
return todos.filter(t => !t.completed)
} else {
throw new Error('Unknown filter: ' + filter)
}
} }
const mapStateToProps = state => ({ const mapStateToProps = state => ({

35
docs/examples/todos/src/reducers/todos.js
View File

@@ -1,22 +1,21 @@
const todos = (state = [], action) => { const todos = (state = [], action) => {
switch (action.type) { if(action.type == 'ADD_TODO') {
case 'ADD_TODO': return [
return [ ...state,
...state, {
{ id: action.id,
id: action.id, text: action.text,
text: action.text, completed: false
completed: false }
} ]
] } else if(action.type == 'TOGGLE_TODO') {
case 'TOGGLE_TODO': return state.map(todo =>
return state.map(todo => (todo.id === action.id)
(todo.id === action.id) ? {...todo, completed: !todo.completed}
? {...todo, completed: !todo.completed} : todo
: todo )
) } else {
default: return state
return state
} }
} }

9
docs/examples/todos/src/reducers/visibilityFilter.js
View File

@@ -1,11 +1,10 @@
import { VisibilityFilters } from '../actions/index.js' import { VisibilityFilters } from '../actions/index.js'
const visibilityFilter = (state = VisibilityFilters.SHOW_ALL, action) => { const visibilityFilter = (state = VisibilityFilters.SHOW_ALL, action) => {
switch (action.type) { if(action.type == 'SET_VISIBILITY_FILTER') {
case 'SET_VISIBILITY_FILTER': return action.filter
return action.filter } else {
default: return state
return state
} }
} }