Import dgraph-js-http and read todos from Dgraph

Author: Paul Korzhyk

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "classnames": "^2.2.6",
+    "dgraph-js-http": "^0.2.0",
     "history": "^4.7.2",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",

src/TodoApp.js

@@ -69,7 +69,7 @@ export default class TodoApp extends React.Component {
     this.props.model.destroy(todo)
 
   edit = todo =>
-    this.setState({ editing: todo.id })
+    this.setState({ editing: todo.uid })
 
   save = (todoToSave, text) => {
     this.props.model.save(todoToSave, text)
@@ -99,12 +99,12 @@ export default class TodoApp extends React.Component {
 
     const todoItems = shownTodos.map(todo => (
       <TodoItem
-        key={todo.id}
+        key={todo.uid}
         todo={todo}
         onToggle={() => this.toggle(todo)}
         onDestroy={() => this.destroy(todo)}
         onEdit={() => this.edit(todo)}
-        editing={editing === todo.id}
+        editing={editing === todo.uid}
         onSave={text => this.save(todo, text)}
         onCancel={this.cancel}
       />

src/TodoModel.js

@@ -1,9 +1,32 @@
 import Utils from './Utils'
 
+import * as dgraph from 'dgraph-js-http'
+
 export default class TodoModel {
-  constructor(key) {
-    this.key = key
-    this.todos = Utils.store(key)
+  constructor() {
+    const clientStub = new dgraph.DgraphClientStub("http://localhost:8080")
+    this.dgraph = new dgraph.DgraphClient(clientStub)
+
+    this.todos = []
+    this.fetchAndInform()
+  }
+
+  async fetchAndInform() {
+    this.todos = await this.fetchTodos()
+    this.inform()
+  }
+
+  async fetchTodos() {
+    const query = `{
+      todos(func: has(is_todo))
+      {
+        uid
+        title
+        completed
+      }
+    }`
+    const res = await this.dgraph.newTxn().query(query)
+    return res.data.todos || []
   }
 
 	onChanges = []
@@ -12,13 +35,12 @@ export default class TodoModel {
 		this.onChanges.push(onChange)
 
 	inform = () => {
-		Utils.store(this.key, this.todos)
 		this.onChanges.forEach(cb => cb())
 	}
 
 	addTodo = title => {
 		this.todos = this.todos.concat({
-			id: Utils.uuid(),
+			uid: 123,
 			title: title,
 			completed: false,
 		})

src/Utils.js

@@ -1,43 +1,5 @@
 export default {
-  uuid: () => {
-    var i, random;
-    var uuid = '';
-
-    for (i = 0; i < 32; i++) {
-      random = Math.random() * 16 | 0;
-      if (i === 8 || i === 12 || i === 16 || i === 20) {
-        uuid += '-';
-      }
-      uuid += (i === 12 ? 4 : (i === 16 ? (random & 3 | 8) : random))
-        .toString(16);
-    }
-
-    return uuid;
-  },
-
   pluralize: (count, word) => {
     return count === 1 ? word : word + 's';
   },
-
-  store: (namespace, data) => {
-    if (data) {
-      return localStorage.setItem(namespace, JSON.stringify(data));
-    }
-
-    var store = localStorage.getItem(namespace);
-    return (store && JSON.parse(store)) || [];
-  },
-
-  extend: function() {
-    var newObj = {};
-    for (var i = 0; i < arguments.length; i++) {
-      var obj = arguments[i];
-      for (var key in obj) {
-        if (obj.hasOwnProperty(key)) {
-          newObj[key] = obj[key];
-        }
-      }
-    }
-    return newObj;
-  },
 }

src/index.js

@@ -5,7 +5,7 @@ import 'todomvc-app-css/index.css'
 import TodoApp from './TodoApp'
 import TodoModel from './TodoModel'
 
-const model = new TodoModel('react-todos')
+const model = new TodoModel()
 
 function render() {
   ReactDOM.render(

yarn.lock

@@ -3078,6 +3078,13 @@ detect-port-alt@1.1.6:
     address "^1.0.1"
     debug "^2.6.0"
 
+dgraph-js-http@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/dgraph-js-http/-/dgraph-js-http-0.2.0.tgz#e424f7286698c7785017039894a89c1546281263"
+  integrity sha512-94BUbAE9S263pwlEeINuTAbMsptdqpQt/3X58Kws/NgGwXvkkWh0YohCb8tXtB4TlrWzp1KSCUFPnOwIRRmbEA==
+  dependencies:
+    isomorphic-fetch "^2.2.1"
+
 diff@^3.2.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
@@ -3273,6 +3280,13 @@ encodeurl@~1.0.2:
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
   integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=
 
+encoding@^0.1.11:
+  version "0.1.12"
+  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
+  integrity sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=
+  dependencies:
+    iconv-lite "~0.4.13"
+
 end-of-stream@^1.0.0, end-of-stream@^1.1.0:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.1.tgz#ed29634d19baba463b6ce6b80a37213eab71ec43"
@@ -4594,7 +4608,7 @@ iconv-lite@0.4.23:
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
-iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4:
+iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4, iconv-lite@~0.4.13:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
   integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
@@ -5102,7 +5116,7 @@ is-root@2.0.0:
   resolved "https://registry.yarnpkg.com/is-root/-/is-root-2.0.0.tgz#838d1e82318144e5a6f77819d90207645acc7019"
   integrity sha512-F/pJIk8QD6OX5DNhRB7hWamLsUilmkDGho48KbgZ6xg/lmAZXHxzXQ91jzB3yRSw5kdQGGGc4yz8HYhTYIMWPg==
 
-is-stream@^1.1.0:
+is-stream@^1.0.1, is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
   integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
@@ -5170,6 +5184,14 @@ isobject@^3.0.0, isobject@^3.0.1:
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
   integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
 
+isomorphic-fetch@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
+  integrity sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=
+  dependencies:
+    node-fetch "^1.0.1"
+    whatwg-fetch ">=0.10.0"
+
 isstream@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
@@ -6374,6 +6396,14 @@ no-case@^2.2.0:
   dependencies:
     lower-case "^1.1.1"
 
+node-fetch@^1.0.1:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
+  integrity sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==
+  dependencies:
+    encoding "^0.1.11"
+    is-stream "^1.0.1"
+
 node-forge@0.7.5:
   version "0.7.5"
   resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.7.5.tgz#6c152c345ce11c52f465c2abd957e8639cd674df"
@@ -9873,7 +9903,7 @@ whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3:
   dependencies:
     iconv-lite "0.4.24"
 
-whatwg-fetch@3.0.0:
+whatwg-fetch@3.0.0, whatwg-fetch@>=0.10.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz#fc804e458cc460009b1a2b966bc8817d2578aefb"
   integrity sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q==