turtle-DB · maxiappleton · Jul 5, 2018
diff --git a/README.md b/README.md
@@ -1,7 +1 @@
-## Running Locally
-
-```
-cd turtleDB
-npm install
-npm start
-```
+# TurtleDB MVP Testing
diff --git a/package.json b/package.json
@@ -1,24 +1,15 @@
 {
-  "name": "turtledb",
+  "name": "turtledb2",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "axios": "^0.18.0",
-    "idb": "^2.1.3",
-    "node-sass-chokidar": "0.0.3",
-    "npm-run-all": "^4.1.3",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
-    "react-scripts": "1.1.4",
-    "react-syntax-highlighter": "^7.0.4"
+    "react-scripts": "1.1.4"
   },
   "scripts": {
-    "build-css": "node-sass-chokidar src/ -o src/",
-    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
-    "start-js": "react-scripts start",
-    "start": "PORT=3001 npm-run-all -p watch-css start-js",
-    "build-js": "react-scripts build",
-    "build": "npm-run-all build-css build-js",
+    "start": "react-scripts start",
+    "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }

diff --git a/public/index.html b/public/index.html
@@ -1,17 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="theme-color" content="#000000">
-    <!--
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="theme-color" content="#000000">
+  <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
-    <!--
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
+  <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -20,15 +21,15 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+  <title>React App</title>
+</head>
 
-  </head>
-  <body>
-    <noscript>
-      You need to enable JavaScript to run this app.
-    </noscript>
-    <div id="root"></div>
-    <!--
+<body>
+  <noscript>
+    You need to enable JavaScript to run this app.
+  </noscript>
+  <div id="root"></div>
+  <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -38,11 +39,8 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-    <!-- <script src="../node_modules/axios/dist/axios.min.js"></script> -->
-    <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
-    <!-- <script src="../node_modules/idb/lib/idb.js"></script> -->
-    <!-- <script src="./scripts/idb.js"></script> -->
-    <script src="./scripts/turtle.js"></script>
-    <script src="./scripts/listeners.js"></script>
-  </body>
-</html>
+  <script src="./scripts/turtle.js"></script>
+  <script src="./scripts/listeners.js"></script>
+</body>
+
+</html>
diff --git a/public/scripts/listeners.js b/public/scripts/listeners.js
@@ -1,12 +1,18 @@
-////2nd file
+let dbName = 'turtleDB';
 
-const turtle = new TurtleDB('turtleDB');
+const turtle = new TurtleDB(dbName);
+
+function setHeader() {
+  var dbHeader = document.getElementById("db-name");
+  dbHeader.innerHTML = dbName;
+}
 
 function eventListeners() {
   document.getElementById("insert-form")
-    .addEventListener("submit", function (event) {
-      // event.preventDefault();
+    .addEventListener("submit", (event) => {
+      event.preventDefault();
       addDocWithID(event.target);
+      renderAllDocs();
     });
 
   document.getElementById("all-docs")
@@ -16,29 +22,49 @@ function eventListeners() {
     });
 
   document.getElementById("fetch-form")
-    .addEventListener("submit", function (event) {
+    .addEventListener("submit", (event) => {
       event.preventDefault();
       fetchWithID(event.target.id.value);
     });
 
+  document.getElementById('update-form')
+    .addEventListener("", (event) => {
+      updateDoc(event.target);
+    });
+
+  document.getElementById('delete-db')
+    .addEventListener('click', (event) => {
+      event.preventDefault();
+      deleteDatabase();
+    });
+
   renderAllDocs();
+  setHeader();
 }
 
-function consoleLogDocs() {
-  turtle.allDocs()
-    .then((res) => {
+function addDocWithID(form) {
+  turtle.set({
+    id: form.id.value,
+    title: form.title.value
+  })
+    .then(function (res) {
       console.log(res);
-    }).catch((err) => {
-      console.log(err);
+      form.id.value = '';
+      form.title.value = '';
+    })
+    .catch(function (err) {
+      console.error(err);
     });
 }
 
-function renderDoc(doc) {
-  console.log(doc);
-  var li = document.createElement("li");
-  li.classList.add("list-group-item");
-  li.innerHTML = `ID: ${doc._id}, Title: ${doc.title}`;
-  return li;
+function renderAllDocs() {
+  turtle.allDocs()
+    .then((res) => {
+      renderDocs(res);
+    })
+    .catch(function (err) {
+      console.error(err);
+    });
 }
 
 function renderDocs(docs) {
@@ -49,41 +75,42 @@ function renderDocs(docs) {
   });
 }
 
-function renderAllDocs() {
+function renderDoc(doc) {
+  var li = document.createElement("li");
+  li.classList.add("list-group-item");
+  li.innerHTML = `ID: ${doc.id}, Title: ${doc.title}`;
+  return li;
+}
+
+function consoleLogDocs() {
   turtle.allDocs()
     .then((res) => {
-      renderDocs(res);
-    })
-    .catch(function (err) {
-      console.error(err);
+      console.log(res);
+    }).catch((err) => {
+      console.log(err);
     });
 }
 
-function addDocWithID(form) {
-  turtle.set({
-    title: form.title.value,
-    _id: form.id.value,
-    done: false
-  })
-    .then(function (res) {
+function fetchWithID(id) {
+  turtle.get(id)
+    .then((res) => {
       console.log(res);
-      form.title.value = "";
-      form.title.id = "";
-      form.title.focus();
-      renderAllDocs();
-    })
-    .catch(function (err) {
-      console.error(err);
+    }).catch((err) => {
+      console.log(err);
     });
 }
 
-function fetchWithID(id) {
-  turtle.get(id)
+function updateDoc(form) {
+  // turtle.update?
+}
+
+function deleteDatabase() {
+  turtle.delete()
     .then((res) => {
       console.log(res);
     }).catch((err) => {
       console.log(err);
     });
 }
 
-window.addEventListener("DOMContentLoaded", eventListeners);
+window.addEventListener("DOMContentLoaded", eventListeners);
diff --git a/public/scripts/turtle.js b/public/scripts/turtle.js
@@ -1,5 +1,6 @@
 class TurtleDB {
   constructor(name) {
+    this.name = name;
     this.ready = new Promise((resolve, reject) => {
       var request = window.indexedDB.open(name);
 
@@ -19,44 +20,45 @@ class TurtleDB {
       };
     });
   }
-}
 
-TurtleDB.prototype.get = function(key) {
-  return this.ready.then(() => {
-    return new Promise((resolve, reject) => {
-      var request = this.getStore().get(key);
-      request.onsuccess = e => resolve(e.target.result);
-      request.onerror = reject;
+  get(key) {
+    return this.ready.then(() => {
+      return new Promise((resolve, reject) => {
+        var request = this.getStore().get(key);
+        request.onsuccess = e => resolve(e.target.result);
+        request.onerror = reject;
+      });
     });
-  });
-};
-
-TurtleDB.prototype.getStore = function() {
-  return this.db
-    .transaction(['store'], 'readwrite')
-    .objectStore('store');
-};
-
-TurtleDB.prototype.set = function(obj) {
-  return this.ready.then(() => {
-    return new Promise((resolve, reject) => {
-      var request = this.getStore();
-      request.put(obj, obj._id);
-      request.onsuccess = resolve;
-      request.onerror = reject;
+  }
+
+  getStore() {
+    return this.db
+      .transaction(['store'], 'readwrite')
+      .objectStore('store');
+  }
+
+  set(obj) {
+    return this.ready.then(() => {
+      return new Promise((resolve, reject) => {
+        var request = this.getStore();
+        request.put(obj, obj.id);
+        request.onsuccess = resolve;
+        request.onerror = reject;
+      });
     });
-  });
-};
+  }
 
-TurtleDB.prototype.delete = function(key, value) {
-  window.indexedDB.deleteDatabase(location.origin);
-}
+  delete() {
+    window.indexedDB.deleteDatabase(this.name);
+  }
 
-TurtleDB.prototype.allDocs = function() {
-  return this.ready.then(() => {
-    return new Promise((resolve, reject) => {
-      var request = this.getStore().getAll();
-      request.onsuccess = e => resolve(e.target.result);
+  allDocs() {
+    return this.ready.then(() => {
+      return new Promise((resolve, reject) => {
+        var request = this.getStore().getAll();
+        request.onsuccess = e => resolve(e.target.result);
+        request.onerror = reject;
+      });
     });
-  });
+  }
 }