makersacademy · RedPRO16 · Sep 4, 2022 · Curtis-Turk · Sep 5, 2022 · Curtis-Turk
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+node_modules/
+bundle.js
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,6 @@
+{
+  "cSpell.words": [
+    "JHCC",
+    "Wopu"
+  ]
+}
diff --git a/chitterAPI.js b/chitterAPI.js
@@ -0,0 +1,46 @@
+class ChitterAPI {
+  loadPosts(callback) {
+    fetch("https://chitter-backend-api-v2.herokuapp.com/peeps")
+      .then(response => response.json())
+      .then(data => {
+        callback(data);
+      })
+  }
+
+  createPost(userId, session_key, post, callback){
+    fetch('https://chitter-backend-api-v2.herokuapp.com/peeps', {
+        method: 'POST',
+        headers: {
+          'Authorization': `Token token=${session_key}`,
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          peep: {
+            user_id: `${userId}`,
+            body: `${post}`
+          }
+        })
+      })
+      .then(response => response.json())
+      .then(data => callback(data))
+  }
+
+  newSession(username, password, 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))
+  }
+}
+
+module.exports = ChitterAPI;
diff --git a/chitterAPI.test.js b/chitterAPI.test.js
@@ -0,0 +1,51 @@
+require('jest-fetch-mock').enableMocks();
+const ChitterAPI = require('./chitterAPI');
+
+let api;
+
+describe('ChitterAPI', () => {
+  beforeEach(() => {
+    api = new ChitterAPI();
+  })
+
+  describe('loadPosts', () => {
+    it('fetches notes from the server', async () => {
+      let samplePosts = ['Peep', 'Peep2'];
+
+      fetch.mockResponseOnce(JSON.stringify({
+        samplePosts
+      }));
+
+      api.loadPosts( (apiPosts) => {
+        expect(apiPosts.samplePosts).toEqual(samplePosts);
+      })
+    })
+  })
+
+  describe('createPost', () => {
+    it('adds a post to the server', async () => {
+      fetch.mockResponseOnce(JSON.stringify({
+          user_id: 1,
+          body: "Test Peep"
+      }));
+      api.createPost(1, "Sample_Session_Key", "Peep", (post) => {
+        expect(post.body).toEqual("Test Peep");
+      })
+    })
+  })
+
+  describe('newSession', () => {
+    it('starts a session for a user', async () => {
+      fetch.mockResponseOnce(JSON.stringify({
+        user_id: 0,
+        session_key: "session_key"
+      }))
+    api.newSession("username", "password", (session) => {
+      expect(session.user_id).toEqual(0);
+      expect(session.session_key).toEqual("session_key");
+    })
+    })
+
+  })
+
+})
diff --git a/index.html b/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="stylesheet" href="styles.css">
+
+  <title>Chitter Challenge</title>
+</head>
+
+<body>
+  <div id="login-container">
+    <input type="text" id="input-username" placeholder="Username"/>
+    <input type="password" id="input-password" placeholder="Password"/>
+    <button id="submit-login">Login</button>
+    <div id="logged-in"></div>
+  </div>
+  <h1>Chitter Challenge</h1>
+  <input type="text" id="input-new-post"/>
+  <button id="add-new-post">Peep!</button>
+  <p>Welcome to Chitter</p>
+  <div id="post-container">
+
+  </div>
+
+  <script type="text/javascript" src="bundle.js"></script>
+</body>
+
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,14 @@
+const ChitterAPI = require("./chitterAPI");
+const Posts = require("./postsModel");
+const PostsView = require("./postsView");
+
+console.log('Chitter!');
+
+const api = new ChitterAPI();
+const posts = new Posts();
+const view = new PostsView(posts, api);
+
+api.loadPosts((loaded_posts) => {
+  posts.setPosts(loaded_posts);
+  view.displayPosts();
+})