axios and backend talking to each other

techwebb · Apr 6, 2019 · 876ce3e · 876ce3e
1 parent 2477860
commit 876ce3e
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 32 deletions.
diff --git a/api/Controller.php b/api/Controller.php
@@ -1,23 +1,52 @@
 <?php
 namespace App;
 
+use App\DB;
+
 class Controller{
-  function __construct(){ }
+
+  private $db;
+
+  function __construct(){ 
+    $this->db = new DB();
+  }
 
   public function getOne($request, $id){
-    $_SESSION['test'] = $id;
-    echo "getting one $id";
+    $result = $this->db->get($id);
+    if(!$result) return ['type'=>'error', 'message'=>'Could not connect to database'];
+
+    return ['type'=>'success', 'data'=>$result];
   }
+
+
   public function getAll($request){
-    echo "getting all".$_SESSION['test'];
+    $result = $this->db->getAll();
+    if($result === false) return ['type'=>'error', 'message'=>'Could not connect to database'];
+
+    return ['type'=>'success', 'data'=>$result];
   }
+
+
   public function createOne($request){
-    echo "createing one";
+    $result = $this->db->store($request);
+    if(!$result) return ['type'=>'error', 'message'=>'Could not connect to database'];
+
+    return ['type'=>'success'];
   }
+
+
   public function updateOne($request, $id){
-    echo "updating one $id";
+    $result = $this->db->update($id, $request);
+    if(!$result) return ['type'=>'error', 'message'=>'Could not connect to database'];
+
+    return ['type'=>'success'];
   }
+
+
   public function deleteOne($request, $id){
-    echo "deleteing one $id";
+    $result = $this->db->delete($id);
+    if(!$result) return ['type'=>'error', 'message'=>'Could not connect to database'];
+
+    return ['type'=>'success'];
   }
 }
diff --git a/api/index.php b/api/index.php
@@ -16,16 +16,15 @@
   $regex = str_replace('/', '\/', 
     preg_replace('/\{.*\}/', '(\w+)', $route[1]));
 
-  if($route[0] == $method && preg_match("/^$regex$/", $request, $matches)){
+  if($route[0] == $method && preg_match("/^$regex\/?$/", $request, $matches)){
 
-    $controller = new Controller;
+    $controller = new Controller();
     $func = $route[2];
     $response = $controller->$func($input, ...array_slice($matches, 1));
 
     header('Content-Type: application/json');
     http_response_code(200);
     echo json_encode($response);
-    var_dump($_SESSION);
     exit;
   }
 }

diff --git a/components.js b/components.js
@@ -63,9 +63,9 @@ const todoItem = Vue.component('todo-item', {
     colorHash(){
       //awesome hash function I found!
       var hash = 0;
-      if (this.todo.text.length == 0) return hash;
-      for(char in this.todo.text.split('')){
-        hash = char.charCodeAt(0) + ((hash << 3) - hash);
+      if (this.newText.length == 0) return hash;
+      for(char in this.newText.split('')){
+        hash = 1.5*char.charCodeAt(0) + ((hash << 3) - hash);
         hash = hash & hash;
       }
       return `hsl(${hash % 360},${this.todo.completed==null?85:25}%,70%)`;
@@ -115,17 +115,20 @@ const todoItem = Vue.component('todo-item', {
       });
     },
     updateValue(){
+      if(!this.isEditText) return;
       this.isEditText = false;
-      this.$set(this.todo, 'text', this.newText);
+      this.todo.text =  this.newText;
+      this.$emit('update-todo', this.todo);
     },
     completeMe(){
-      this.$set(this.todo, 'completed', +new Date());
+      this.todo.completed = true;
+      this.$emit('update-todo', this.todo);
     },
     deleteMe(){
       clearTimeout(this.timer);
       if(this.deleteStatus == 1){
         this.deleteStatus = 0;
-        this.$emit('delete', this.todo.id);
+        this.$emit('delete-todo', this.todo.id);
       }else{
         this.timer = setTimeout(() => {
           this.deleteStatus = 0;

diff --git a/index.html b/index.html
@@ -13,20 +13,25 @@
 <body>
   <div id="app">
     <div id="layout-add">
+      <span v-show="apiResponse">{{apiResponse}}</span>
       <add-new-form @new-todo-item="newTodoItem"></add-new-form>
     </div>
     <div id="layout-list">
-      <todo-item v-for="todo in orderByCompleted" :key="todo.id" :todo="todo" ></todo-item>
+      <todo-item v-for="todo in orderByCompleted" :key="todo.id" 
+        :todo="todo" 
+        @update-todo="updateTodo"
+        @delete-todo="deleteTodo">
+      </todo-item>
     </div>
   </div>
   <script src="components.js"></script>
   <script>
-    // const axios = require('axios');
-
+
     const app = new Vue({
       el: '#app',
       data: {
         message: 'Hello Vue!',
+        apiResponse: '',
         todos: [
           {id:'123', 'text':'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus ullam qui autem. Qui obcaecati adipisci ut mollitia debitis eaque, corrupti aspernatur hic, dolorum rerum cum. Voluptatem deleniti aliquid et nostrum.', created:+new Date(), completed:null},
           {id:'234', 'text':'Get ye flask', 'created': + new Date(), 'completed':null},
@@ -37,10 +42,7 @@
         ]
       },
       mounted(){
-        axios.get('http://benw-todo.herokuapp.com/api/todo/').then(response => {
-          console.log(response);
-          this.todos = response;
-        });
+        this.fetchAll();
       },
       computed:{
         orderByCompleted(){
@@ -49,12 +51,25 @@
       },
       methods:{
         newTodoItem(txt){
-          console.log(txt);
-          this.todos.push({
-            id: Math.floor(Math.random()*1000),
-            text: txt,
-            created: +new Date(),
-            completed: null
+          axios.post('/api/todo', {text:txt}).then( (response) => {
+            this.fetchAll();
+          });
+        },
+        updateTodo(todo){
+          axios.patch(`/api/todo/${todo.id}`, todo).then( (response) => {
+            this.fetchAll();
+          });
+        },
+        deleteTodo(id){
+          axios.delete(`/api/todo/${id}`).then( (response) => {
+            this.fetchAll();
+          });
+        },
+        fetchAll(){
+          axios.get('/api/todo/').then( ({data}) => {
+            this.todos = data.data;
+          }).catch( (res) =>{
+            this.apiResponse = 'We had a problem talking to the api.';
           });
         }
       }

diff --git a/main.css b/main.css
@@ -22,9 +22,8 @@ body{
   grid-column:2/3; 
   display:flex; 
   flex-direction: column; 
-  align-items: center; 
   justify-content: flex-start;
-  align-items: flex-start;
+  align-items: center;
 }
 .newItemInput{
   border: thin solid grey;
@@ -73,7 +72,7 @@ body{
 }
 .todoItemText{
   grid-column: 1/2;
-
+  overflow: hidden;
 }
 .todoItemActions{
   background-color: rgba(0,0,0,0.4);
@@ -114,5 +113,6 @@ body{
     flex-wrap: wrap;
     justify-content: space-between;
     align-content: start;
+    align-items: flex-start;
   }
 }