Skip to content

Commit 4bb86ca

Browse files
SaviioSaviio
committed
chore: add TodoMVC as example
1 parent 2311825 commit 4bb86ca

24 files changed

Lines changed: 4999 additions & 243 deletions

‎example/consumer/index.ts‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎example/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Demo</title>
6+
<link rel="stylesheet" href="todo.css">
7+
</head>
8+
<body>
9+
<div id="app"></div>
10+
<script src="/dist/main.js"></script>
11+
</body>
12+
</html>

‎example/package.json‎

Lines changed: 27 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,34 @@
11
{
2-
"name": "reactivedb-expmple",
3-
"version": "0.7.0",
4-
"description": "Example for ReactiveDB",
5-
"main": "index.ts",
2+
"name": "reactivedb-todo-mvc",
3+
"version": "0.0.1",
4+
"description": "",
5+
"main": "index.js",
66
"scripts": {
7-
"test": "echo \"Error: no test specified\" && exit 1"
7+
"dev": "cross-env NODE_ENV=development webpack-dev-server --hot --port 9999",
8+
"build": "cross-env NODE_ENV=production webpack"
89
},
9-
"repository": {
10-
"type": "git",
11-
"url": "git+https://github.com/teambition/ReactiveDB.git"
12-
},
13-
"keywords": [
14-
"ReactiveDB",
15-
"RxJS",
16-
"Lovefield"
17-
],
18-
"author": "lynweklm@gmail.com",
19-
"license": "MIT",
20-
"bugs": {
21-
"url": "https://github.com/teambition/ReactiveDB/issues"
10+
"keywords": [],
11+
"author": "",
12+
"license": "ISC",
13+
"devDependencies": {
14+
"@types/react": "^16.7.20",
15+
"@types/react-dom": "^16.0.11",
16+
"cross-env": "^5.2.0",
17+
"ts-loader": "^5.2.2",
18+
"tslint": "^5.11.0",
19+
"tslint-config-standard": "^8.0.1",
20+
"tslint-loader": "^3.5.4",
21+
"typescript": "^3.2.4",
22+
"webpack": "^4.23.1",
23+
"webpack-cli": "^3.1.2",
24+
"webpack-dev-server": "^3.1.10"
2225
},
23-
"homepage": "https://github.com/teambition/ReactiveDB#readme",
2426
"dependencies": {
25-
"antd": "^2.7.3",
26-
"react": "^15.4.2",
27-
"react-dom": "^15.4.2"
28-
},
29-
"devDependencies": {
30-
"typescript": "^2.2.1"
27+
"@types/classnames": "^2.2.6",
28+
"classnames": "^2.2.6",
29+
"react": "^16.8.0-alpha.0",
30+
"react-dom": "16.8.0-alpha.0",
31+
"reactivedb": "0.12.0-alpha.1-incremental",
32+
"rxjs": "^6.3.3"
3133
}
3234
}

‎example/rdb/Database.ts‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎example/rdb/defineSchema.ts‎

Lines changed: 0 additions & 160 deletions
This file was deleted.

‎example/rdb/index.ts‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎example/src/TodoMVC.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import * as React from 'react'
2+
3+
import { TodoList, Filter, Header } from './components'
4+
5+
export const TodoMVC = () => {
6+
return (
7+
<>
8+
<Header />
9+
<TodoList />
10+
<Filter />
11+
</>
12+
)
13+
}

‎example/src/components/filter.component.tsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import * as React from 'react'
2+
import { useContext } from 'react'
3+
import cx from 'classnames'
4+
5+
import { source, TodoContext } from '../controller'
6+
import { useObservable } from '../hooks'
7+
8+
export const Filter = React.memo(() => {
9+
const filter = useObservable(source.filter, 'all')
10+
const context = useContext(TodoContext)
11+
12+
const setAll = () => context.setFilter('all')
13+
const setActive = () => context.setFilter('active')
14+
const setCompleted = () => context.setFilter('completed')
15+
16+
const handlers = [
17+
{
18+
href: '#/',
19+
className: cx({ selected: filter === 'all' }),
20+
onClick: setAll,
21+
children: 'All'
22+
},
23+
{
24+
href: '#/active',
25+
className: cx({ selected: filter === 'active' }),
26+
onClick: setActive,
27+
children: 'Active'
28+
},
29+
{
30+
href: '#/completed',
31+
className: cx({ selected: filter === 'completed' }),
32+
onClick: setCompleted,
33+
children: 'Complete'
34+
}
35+
]
36+
37+
const items = handlers.map((item) => {
38+
return (
39+
<li key={ item.href }>
40+
<a { ...item } />
41+
</li>
42+
)
43+
})
44+
45+
return (
46+
<footer className='footer'>
47+
<ul className="filters">
48+
{ items }
49+
</ul>
50+
</footer>
51+
)
52+
})

‎example/src/components/header.component.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import * as React from 'react'
2+
import { useState, useContext } from 'react'
3+
4+
import { TodoContext } from '../controller'
5+
6+
export const Header = () => {
7+
const [ newItem, setValue ] = useState('')
8+
const context = useContext(TodoContext)
9+
10+
const onInput = (e: React.SyntheticEvent<HTMLInputElement>) => {
11+
const target = e.target as HTMLInputElement
12+
setValue(target.value)
13+
}
14+
15+
const onAdd = (e: React.KeyboardEvent<HTMLInputElement>) => {
16+
const target = e.target as HTMLInputElement
17+
if (e.key === 'Enter') {
18+
context.addItem(target.value)
19+
setValue('')
20+
}
21+
}
22+
23+
return (
24+
<header className='header'>
25+
<h1>todos</h1>
26+
<input
27+
className='new-todo'
28+
value={ newItem }
29+
placeholder='What needs to be done?'
30+
onKeyPress={ onAdd }
31+
onChange={ onInput }
32+
/>
33+
</header>
34+
)
35+
}

‎example/src/components/index.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export * from './filter.component'
2+
export * from './list.component'
3+
export * from './header.component'
4+
export * from './item.component'

0 commit comments

Comments
 (0)