Partly completed Chitter

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+bundle.js
+coverage

client.js

@@ -0,0 +1,70 @@
+class Client {
+
+  loadPeeps = (displayResult) => {
+    fetch('https://chitter-backend-api-v2.herokuapp.com/peeps')
+    .then((response) => response.json())
+    .then((data) => {
+      displayResult(data);
+    })
+    .catch((error) => {
+      console.log(error); // change to Display Error method
+    })
+  }
+
+  createUser = (inputUsername, inputPassword, displayResult) => {
+    fetch('https://chitter-backend-api-v2.herokuapp.com/users', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({user: {handle:inputUsername, password:inputPassword}})
+    })
+    .then((response) => response.json())
+    .then((output) => {
+      console.log(output); // remove later maybe
+      displayResult(output);
+    })
+    .catch((error) => {
+      console.log(error); // change to Display Error method?
+    })
+  }
+
+  signinUser = (inputUsername, inputPassword, displayResult) => {
+    fetch('https://chitter-backend-api-v2.herokuapp.com/sessions', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({session: {handle:inputUsername, password:inputPassword}})
+    })
+    .then((response) => response.json())
+    .then((output) => {
+      console.log(output); // remove later maybe
+      displayResult(output);
+    })
+    .catch((error) => {
+      console.log(error); // change to Display Error method?
+    })
+  }
+
+  postPeep = (userId, sessionKey, peepBody, displayResult) => {
+    fetch('https://chitter-backend-api-v2.herokuapp.com/peeps', {
+      method: 'POST',
+      headers: {
+        'Authorization': 'Token token=' + sessionKey,
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({peep: {user_id:userId, body:peepBody}})
+    })
+    .then((response) => response.json())
+    .then((output) => {
+      console.log(output); // remove later maybe
+      displayResult(output);
+    })
+    .catch((error) => {
+      console.log(error); // change to Display Error method?
+    })
+  }
+}
+
+module.exports = Client;

client.test.js

@@ -0,0 +1,81 @@
+const Client = require('./client')
+
+require('jest-fetch-mock').enableMocks()
+
+describe('Client', () => {
+
+  beforeEach(() => {
+    fetch.resetMocks();
+  })
+
+  it('Loads peeps from the API', (done) => {
+    const client = new Client;
+
+    fetch.mockResponseOnce(JSON.stringify({
+      id: 1234,
+      body: 'Test peep'
+    }));
+
+    client.loadPeeps((retunedDataFromApi) => {
+      expect(retunedDataFromApi.id).toBe(1234);
+      expect(retunedDataFromApi.body).toBe('Test peep');
+
+      done();
+    });
+  });
+
+  it('Creates new user', (done) => {
+    const client = new Client;
+
+    fetch.mockResponseOnce(JSON.stringify({
+      id : 1,
+      handle : "test_user"
+    }));
+
+    let inputUsername = 'test_user';
+    let inputPassword = 'password123';
+
+    client.createUser(inputUsername, inputPassword, () => {
+      expect(fetch.mock.calls.length).toEqual(1);
+      expect(fetch.mock.calls[0][1].body).toEqual(JSON.stringify({user: {handle:inputUsername, password:inputPassword}}));
+      done();
+    });
+  });
+
+  it('Logins user', (done) => {
+    const client = new Client;
+
+    fetch.mockResponseOnce(JSON.stringify({
+      user_id:1,
+      session_key:"random"
+    }));
+
+    let inputUsername = 'test_user';
+    let inputPassword = 'password123';
+
+    client.signinUser(inputUsername, inputPassword, () => {
+      expect(fetch.mock.calls.length).toEqual(1);
+      expect(fetch.mock.calls[0][1].body).toEqual(JSON.stringify({session: {handle:inputUsername, password:inputPassword}}));
+      done();
+    });
+  });
+
+  it('Posts peep to the server', (done) => {
+    const client = new Client;
+
+    fetch.mockResponseOnce(JSON.stringify({
+      id:1,
+      body:"Test peep"
+    }));
+
+    let userId = 1;
+    let sessionKey = 'random';
+    let peepBody = 'Test peep';
+
+    client.postPeep(userId, sessionKey, peepBody, () => {
+      expect(fetch.mock.calls.length).toEqual(1);
+      expect(fetch.mock.calls[0][1].body).toEqual(JSON.stringify({peep: {user_id:userId, body:peepBody}}));
+      done();
+    });
+  });
+}); 

index.html

@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="styles.css">
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.2.0/css/all.css">
+  <link href="https://fonts.googleapis.com/css?family=Asap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
+
+
+  <title>Chitter</title>
+</head>
+<body>
+  <div id="form-background"></div> 
+  <!-- NAVBAR -->
+  <div class="topnav">
+    <a class="active" href="#home">Home</a>
+    <a id="show-signin">Sign in</a>
+    <a id="show-signup">Sign up</a>
+    <a id="show-peepform">Peep!</a>
+  </div>
+  <!-- NAVBAR ENDS -->
+
+  <!-- POP UP SIGN UP FORM -->
+  <div class="popup-signup">
+    <div class="close-btn-signup">&times;</div>
+    <div class="signup-form">
+      <h2>Sing up</h2>
+      <div class="signup-form-element">
+        <label for="username">Username</label>
+        <input type="text" id="username" placeholder="Enter username">
+      </div>
+      <div class="signup-form-element">
+        <label for="password">Password</label>
+        <input type="password" id="password" placeholder="Enter password">
+      </div>
+      <div class="signup-form-element">
+        <button id="submit-new-user-button">Sign up</button>
+      </div>
+      <template id="signup-message">
+        <div id="status-signup-message">
+        </div>
+      </template>
+    </div>
+  </div>
+  <!-- POP UP SIGN UP FORM ENDS -->
+
+   <!-- POP UP SIGN IN FORM -->
+   <div class="popup-signin">
+    <div class="close-btn-signin">&times;</div>
+    <div class="signin-form">
+      <h2>Sign in</h2>
+      <div class="signin-form-element">
+        <label for="username">Username</label>
+        <input type="text" id="username" placeholder="Enter username">
+      </div>
+      <div class="signin-form-element">
+        <label for="password">Password</label>
+        <input type="password" id="password" placeholder="Enter password">
+      </div>
+      <div class="signin-form-element">
+        <button id="submit-existing-user-button">Sign in</button>
+      </div>
+      <template id="signin-message">
+        <div id="status-signin-message">
+        </div>
+      </template>
+    </div>
+  </div>
+  <!-- POP UP SIGN IN FORM ENDS -->
+
+   <!-- POP UP PEEP FORM -->
+   <div class="popup-peep">
+    <div class="close-btn-peep">&times;</div>
+    <div class="peep-form">
+      <h2>Write peep</h2>
+      <div class="peep-form-element">
+        <label for="peep">Peep here &#128037;</label>
+        <textarea name="peep" id="peep" cols="25" rows="8"></textarea>
+      </div>
+      <div class="peep-form-element">
+        <button id="submit-peep-button">Peep!</button>
+      </div>
+      <template id="peep-message">
+        <div id="status-peep-message">
+        </div>
+      </template>
+    </div>
+  </div>
+  <!-- POP UP PEEP FORM ENDS -->
+
+  <div class="peeps-feed">
+
+    <h1>Welcome to Chitter <span id="welcome-user"></span> &#128075;</h1>
+    <h2>See latest peeps &#128064;</h2>
+
+  <!-- PEEPS FEED -->
+    <div id="main-container">
+
+      <template id="peep-template">
+        <div class="peep-wrap">
+
+          <div class="peep-header">
+            <img src="images/bird-avator.png" alt="avator" class="avator">
+
+            <div class="peep-header-info">
+              <span id="user-name"></span>
+              <span id="time"></span>  
+              <span id="date"></span>
+              <p id="peep-content"></p>
+            </div>
+          </div>
+
+          <div class="likes-container">
+            <div class="likes">
+              <button id="likes-button"> <i class="fa-regular fa-heart"></i></button>
+              <span id="likes-count"></span>
+            </div>
+          </div>
+        </div>
+      </template>
+
+    </div>
+  <!-- PEEPS FEED ENDS -->
+  </div>
+
+  <script src="bundle.js"></script>
+</body>
+</html>

index.js

@@ -0,0 +1,11 @@
+const Client = require("./client");
+const PeepModel = require("./peepModel");
+const UserModel = require("./userModel");
+const View = require("./view");
+
+const client = new Client;
+const peepModel = new PeepModel;
+const userModel = new UserModel;
+const view = new View(peepModel, userModel, client);
+
+view.displayPeepsFromApi();