Frontend-api

.gitignore

@@ -0,0 +1 @@
+node_modules

bundle.js

@@ -0,0 +1,144 @@
+(() => {
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __commonJS = (cb, mod) => function __require() {
+    return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+  };
+
+  // chitterApi.js
+  var require_chitterApi = __commonJS({
+    "chitterApi.js"(exports, module) {
+      var ChitterApi2 = class {
+        loadPeeps(callback) {
+          fetch("https://chitter-backend-api-v2.herokuapp.com/peeps").then((response) => response.json()).then((data) => {
+            callback(data);
+          });
+        }
+        loadPeepsById(id, callback) {
+          fetch("https://chitter-backend-api-v2.herokuapp.com/peeps/" + id).then((response) => response.json()).then((data) => {
+            callback(data);
+          });
+        }
+        createUser(username, password, callback) {
+          fetch("https://chitter-backend-api-v2.herokuapp.com/users", {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json"
+            },
+            body: JSON.stringify({ "user": { "handle": username, "password": password } })
+          }).then((response) => response.json()).then((data) => {
+            callback(data);
+            console.log(data);
+          }).catch((error) => {
+            console.log("Looks like there was a problem", error);
+          });
+        }
+      };
+      module.exports = ChitterApi2;
+    }
+  });
+
+  // chitterModel.js
+  var require_chitterModel = __commonJS({
+    "chitterModel.js"(exports, module) {
+      var ChitterModel2 = class {
+        constructor() {
+          this.peeps = [];
+          this.userId = null;
+          this.sessionKey = null;
+        }
+        getPeeps() {
+          return this.peeps;
+        }
+        setPeeps(apiPeeps) {
+          this.peeps = apiPeeps;
+        }
+        getUserId() {
+          return this.userId;
+        }
+        setUserId(userId) {
+          this.userId = userId;
+        }
+        getSessionKey() {
+          return this.sessionKey;
+        }
+        setUserId(sessionKey) {
+          this.sessionKey = sessionKey;
+        }
+      };
+      module.exports = ChitterModel2;
+    }
+  });
+
+  // chitterView.js
+  var require_chitterView = __commonJS({
+    "chitterView.js"(exports, module) {
+      var ChitterView2 = class {
+        constructor(model2, api2) {
+          this.model = model2;
+          this.body = document.querySelector("body");
+          this.api = api2;
+          this.displayPeepsFromApi();
+        }
+        displayPeeps() {
+          let peeps = [];
+          document.querySelector("#see-peeps").addEventListener("click", () => {
+            this.displayPeepsFromApi();
+            peeps = this.model.getPeeps();
+            console.log(peeps);
+            peeps.forEach((peep) => {
+              const peepEl = document.createElement("div");
+              peepEl.textContent = peep.body;
+              peepEl.className = "peep";
+              console.log(peepEl);
+              this.body.append(peepEl);
+            });
+          });
+        }
+        displayPeepsFromApi() {
+          if (this.api != null) {
+            this.api.loadPeeps((data) => {
+              this.model.setPeeps(data);
+              console.log(data);
+            });
+          }
+        }
+        displayPeepsById() {
+          document.querySelector("#search-peeps-id").addEventListener("click", () => {
+            const id = document.querySelector("#id-input").value;
+            this.api.loadPeepsById(id, (data) => {
+              if (data != null) {
+                const peepEl = document.createElement("div");
+                peepEl.textContent = data.body;
+                peepEl.className = "peep";
+                console.log(peepEl);
+                this.body.append(peepEl);
+              }
+            });
+          });
+        }
+        registerUser() {
+          document.querySelector("#sign-up-btn").addEventListener("click", () => {
+            const user = document.querySelector("#user").value;
+            const password = document.querySelector("#password").value;
+            this.api.createUser(user, password, (response) => {
+              console.log(response);
+            });
+          });
+        }
+      };
+      module.exports = ChitterView2;
+    }
+  });
+
+  // index.js
+  var ChitterApi = require_chitterApi();
+  var ChitterModel = require_chitterModel();
+  var ChitterView = require_chitterView();
+  var model = new ChitterModel();
+  console.log(model.getPeeps());
+  var api = new ChitterApi();
+  var view = new ChitterView(model, api);
+  view.displayPeeps();
+  view.displayPeepsById();
+  view.registerUser();
+})();

chitterApi.js

@@ -0,0 +1,66 @@
+class ChitterApi {
+  loadPeeps(callback) {
+    fetch('https://chitter-backend-api-v2.herokuapp.com/peeps')
+      .then(response => response.json())
+      .then(data => {
+        callback(data)
+      });
+  }
+
+  loadPeepsById(id, callback) {
+    fetch('https://chitter-backend-api-v2.herokuapp.com/peeps/' + id)
+      .then(response => response.json())
+      .then(data => {
+        callback(data)
+      });
+  }
+
+  createUser (username, password, callback) {
+    fetch('https://chitter-backend-api-v2.herokuapp.com/users', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({"user": {"handle": username, "password": password}})
+    })
+    .then(response => response.json())
+    .then(data => {
+      callback(data)
+      console.log(data)
+      })
+    .catch(error => {
+      console.log('Looks like there was a problem', error);
+    })
+
+  }
+
+  // createSession (user, callback) {
+  //   fetch('https://chitter-backend-api-v2.herokuapp.com/sessions', {
+  //     method: 'POST',
+  //     headers: {
+  //       'Content-Type': 'application/json'
+  //     },
+  //     body: JSON.stringify({ "session": {"handle": username, "password": password}})
+  //   })
+  //   .then(response => response.json())
+  //   .then(data => {
+  //     callback(data)
+  //     });
+  // }
+
+
+  // createPeep (peep, callback) {
+  //   fetch('https://chitter-backend-api-v2.herokuapp.com/users', {
+  //     method: 'POST',
+  //     headers: {
+  //       'Content-Type': 'application/json'
+  //     },
+  //     body: JSON.stringify({ "session": {"handle":"kay", "password":"mypassword" })
+  //   })
+  //   .then(response => response.json())
+  //   .then(data => {
+  //     callback(data)
+  //     });
+  // }
+  }
+  module.exports = ChitterApi;

chitterApi.test.js

@@ -0,0 +1,28 @@
+const ChitterApi = require('./chitterApi');
+require('jest-fetch-mock').enableMocks();
+
+describe('API class', () =>
+  it('displays peeps from the API', () => {
+
+    const api = new ChitterApi();
+
+    fetch.mockResponseOnce(
+          JSON.stringify({ body: 'my first peep'})
+        );
+
+    api.loadPeeps((data) => {
+      expect(data.body).toBe('my first peep');
+    });
+}))
+
+it('creates a user', () => {
+  const api = new ChitterApi();
+  fetch.mockResponse(JSON.stringify({ user_id: 1, session_key: "1234567abcd" }));
+  api.createUser("user", "password", (response) => {
+    expect(response.user_id).toEqual(1);
+    expect(response.session_key).toEqual('1234567abcd');
+  });
+})
+
+
+

chitterModel.js

@@ -0,0 +1,37 @@
+class ChitterModel {
+  constructor() {
+    this.peeps = [];
+    this.userId = null;
+    this.sessionKey = null;
+  }
+
+  getPeeps() {
+    return this.peeps
+  }
+
+  setPeeps(apiPeeps) {
+    this.peeps = apiPeeps;
+  }
+
+  getUserId() {
+    return this.userId
+  }
+
+
+  setUserId(userId) {
+    this.userId = userId
+
+  }
+
+  getSessionKey() {
+    return this.sessionKey
+  }
+
+
+  setUserId(sessionKey) {
+    this.sessionKey = sessionKey
+
+  }
+
+}
+module.exports = ChitterModel;

chitterView.js

@@ -0,0 +1,69 @@
+class ChitterView {
+  constructor(model, api) {
+    this.model = model;
+    this.body = document.querySelector('body');
+    this.api = api;
+
+    // document.querySelector('#see-peeps').addEventListener('click', () => {
+    //   const newNote = document.querySelector('#add-note-input').value;
+    this.displayPeepsFromApi();
+  };
+
+  displayPeeps() {
+    let peeps = []
+    document.querySelector('#see-peeps').addEventListener('click', () => {
+      this.displayPeepsFromApi()
+      peeps = this.model.getPeeps()
+      console.log(peeps)
+      peeps.forEach(peep => {
+        const peepEl = document.createElement('div');
+        peepEl.textContent = peep.body;
+        peepEl.className = 'peep';
+        console.log(peepEl);
+        this.body.append(peepEl);
+      });
+    });
+    // document.querySelector('#add-note-input').value = '';
+  }
+
+  displayPeepsFromApi() {
+      if (this.api != null){
+      this.api.loadPeeps(data => {
+        this.model.setPeeps(data)
+        console.log(data);
+      });
+  }}
+
+    // displayOnePeep() {
+  displayPeepsById() {
+    document.querySelector('#search-peeps-id').addEventListener('click', () => { 
+          // if (document.querySelector('#peeps')) {
+          //   document.querySelector('#peep').remove();
+          // }
+      const id = document.querySelector('#id-input').value;
+        this.api.loadPeepsById(id, data => {
+          if (data != null) {
+            const peepEl = document.createElement('div');
+            peepEl.textContent = data.body;
+            peepEl.className = 'peep';
+            console.log(peepEl);
+            this.body.append(peepEl);
+          }
+        })
+    })
+  }
+
+  registerUser() {
+    document.querySelector('#sign-up-btn').addEventListener('click', () => { 
+      const user = document.querySelector('#user').value;
+      const password = document.querySelector('#password').value;
+      this.api.createUser(user, password, response => {
+        console.log(response);
+      });
+
+    });
+  }
+
+}
+
+module.exports = ChitterView;

index.html

@@ -0,0 +1,39 @@
+<!doctype html>
+<html>
+  <link rel="stylesheet" href="style.css">
+   <head>
+      <title>Chitter</title>
+   </head>
+   <body>
+      <h1>Welcome to Chitter</h1>
+      <!-- <form> -->
+        <div class="container">
+          <h3>Sign Up</h3>
+          <p>Please fill in this form to create an account.</p>
+          <hr>
+
+          <label for="handle"><b>Username</b></label>
+          <input id="user" type="text" placeholder="Enter username" name="handle" required>
+
+          <label for="password"><b>Password</b></label>
+          <input id="password" type="password" placeholder="Enter password" name="password" required>
+
+          <button id="sign-up-btn" type="text">Sign up</button> <br />
+        </div>
+      <!-- </form> -->
+
+
+      <div id="main-container"> 
+      <!-- <input type="text" id="add-note-input" /> 
+      <button id="add-note-btn">Post a peep note</button> -->
+      <!-- <button id="hide-message-button">Hide message</button> -->
+      <br> <input type="id" id="id-input" placeholder="Enter Peep ID"/>
+      <button id="search-peeps-id" type="text">Search</button> <br />
+      <br><button id="see-peeps">See latest peeps</button><br />
+      <!-- <button id="hide-message-button">Hide message</button> -->
+
+
+      </div>
+      <script type="text/javascript" src="bundle.js"></script>
+   </body>
+</html>