chore: add TodoMVC as example

ReactiveDB · Jan 21, 2019 · 7d959fc · 7d959fc
1 parent 2311825
commit 7d959fc
Show file tree

Hide file tree

Showing 24 changed files with 4,999 additions and 243 deletions.
diff --git a/example/consumer/index.ts b/example/consumer/index.ts
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Demo</title>
+    <link rel="stylesheet" href="todo.css">
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="/dist/main.js"></script>
+  </body>
+</html>
diff --git a/example/package.json b/example/package.json
@@ -1,32 +1,34 @@
 {
-  "name": "reactivedb-expmple",
-  "version": "0.7.0",
-  "description": "Example for ReactiveDB",
-  "main": "index.ts",
+  "name": "reactivedb-todo-mvc",
+  "version": "0.0.1",
+  "description": "",
+  "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "dev": "cross-env NODE_ENV=development webpack-dev-server --hot --port 9999",
+    "build": "cross-env NODE_ENV=production webpack"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/teambition/ReactiveDB.git"
-  },
-  "keywords": [
-    "ReactiveDB",
-    "RxJS",
-    "Lovefield"
-  ],
-  "author": "[email protected]",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/teambition/ReactiveDB/issues"
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@types/react": "^16.7.20",
+    "@types/react-dom": "^16.0.11",
+    "cross-env": "^5.2.0",
+    "ts-loader": "^5.2.2",
+    "tslint": "^5.11.0",
+    "tslint-config-standard": "^8.0.1",
+    "tslint-loader": "^3.5.4",
+    "typescript": "^3.2.4",
+    "webpack": "^4.23.1",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.1.10"
   },
-  "homepage": "https://github.com/teambition/ReactiveDB#readme",
   "dependencies": {
-    "antd": "^2.7.3",
-    "react": "^15.4.2",
-    "react-dom": "^15.4.2"
-  },
-  "devDependencies": {
-    "typescript": "^2.2.1"
+    "@types/classnames": "^2.2.6",
+    "classnames": "^2.2.6",
+    "react": "^16.8.0-alpha.0",
+    "react-dom": "16.8.0-alpha.0",
+    "reactivedb": "0.12.0-alpha.1-incremental",
+    "rxjs": "^6.3.3"
   }
 }
diff --git a/example/rdb/Database.ts b/example/rdb/Database.ts
diff --git a/example/rdb/defineSchema.ts b/example/rdb/defineSchema.ts
diff --git a/example/rdb/index.ts b/example/rdb/index.ts
diff --git a/example/src/TodoMVC.tsx b/example/src/TodoMVC.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react'
+
+import { TodoList, Filter, Header } from './components'
+
+export const TodoMVC = () => {
+  return (
+    <>
+      <Header />
+      <TodoList />
+      <Filter />
+    </>
+  )
+}
diff --git a/example/src/components/filter.component.tsx b/example/src/components/filter.component.tsx
@@ -0,0 +1,52 @@
+import * as React from 'react'
+import { useContext } from 'react'
+import cx from 'classnames'
+
+import { source, TodoContext } from '../controller'
+import { useObservable } from '../hooks'
+
+export const Filter = React.memo(() => {
+  const filter = useObservable(source.filter, 'all')
+  const context = useContext(TodoContext)
+
+  const setAll = () => context.setFilter('all')
+  const setActive = () => context.setFilter('active')
+  const setCompleted = () => context.setFilter('completed')
+
+  const handlers = [
+    {
+      href: '#/',
+      className: cx({ selected: filter === 'all' }),
+      onClick: setAll,
+      children: 'All'
+    },
+    {
+      href: '#/active',
+      className: cx({ selected: filter === 'active' }),
+      onClick: setActive,
+      children: 'Active'
+    },
+    {
+      href: '#/completed',
+      className: cx({ selected: filter === 'completed' }),
+      onClick: setCompleted,
+      children: 'Complete'
+    }
+  ]
+
+  const items = handlers.map((item) => {
+    return (
+      <li key={ item.href }>
+        <a { ...item } />
+      </li>
+    )
+  })
+
+  return (
+    <footer className='footer'>
+      <ul className="filters">
+        { items }
+      </ul>
+    </footer>
+  )
+})
diff --git a/example/src/components/header.component.tsx b/example/src/components/header.component.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react'
+import { useState, useContext } from 'react'
+
+import { TodoContext } from '../controller'
+
+export const Header = () => {
+  const [ newItem, setValue ] = useState('')
+  const context = useContext(TodoContext)
+
+  const onInput = (e: React.SyntheticEvent<HTMLInputElement>) => {
+    const target = e.target as HTMLInputElement
+    setValue(target.value)
+  }
+
+  const onAdd = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    const target = e.target as HTMLInputElement
+    if (e.key === 'Enter') {
+      context.addItem(target.value)
+      setValue('')
+    }
+  }
+
+  return (
+    <header className='header'>
+      <h1>todos</h1>
+      <input
+        className='new-todo'
+        value={ newItem }
+        placeholder='What needs to be done?'
+        onKeyPress={ onAdd }
+        onChange={ onInput }
+      />
+    </header>
+  )
+}
diff --git a/example/src/components/index.ts b/example/src/components/index.ts
@@ -0,0 +1,4 @@
+export * from './filter.component'
+export * from './list.component'
+export * from './header.component'
+export * from './item.component'