Slava's frontend api challenge (incomplete)

.eslintrc.js

@@ -0,0 +1,13 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
+  extends: ['wesbos'],
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  rules: {},
+};

.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+bundle.js
+coverage/
+.vscode

README.md

@@ -1,12 +1,11 @@
 # Chitter API Frontend Challenge
 
-* Feel free to use Google, your notes, books, etc. but work on your own
-* If you refer to the solution of another coach or student, please put a link to that in your README
-* If you have a partial solution, **still check in a partial solution**
-* You must submit a pull request to this repo with your code by 9am Monday morning
+- Feel free to use Google, your notes, books, etc. but work on your own
+- If you refer to the solution of another coach or student, please put a link to that in your README
+- If you have a partial solution, **still check in a partial solution**
+- You must submit a pull request to this repo with your code by 9am Monday morning
 
-Challenge:
--------
+## Challenge:
 
 As usual please start by forking this repo.
 
@@ -18,20 +17,20 @@ Your task is to build a front-end single-page-app to interface with this API. Yo
 
 Here are some interactions the API supports. Implement as many as you see fit.
 
-* Creating Users
-* Logging in
-* Posting Peeps
-* Viewing all Peeps *(I suggest you start here)*
-* Viewing individual Peeps
-* Deleting Peeps
-* Liking Peeps
-* Unliking Peeps
+- Creating Users
+- Logging in
+- Posting Peeps
+- Viewing all Peeps _(I suggest you start here)_
+- Viewing individual Peeps
+- Deleting Peeps
+- Liking Peeps
+- Unliking Peeps
 
 We are looking for well tested, easy to read, easy to change code. This is more important than the number of interactions you implement.
 
 Note that others may be doing the same task at the same time, so the data may change as you are using it.
 
 ## Utilities you might find useful
 
-* [The Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) for making requests.
-* [Postman](https://www.getpostman.com/) or [Insomnia](https://insomnia.rest/) for exploring the API.
+- [The Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) for making requests.
+- [Postman](https://www.getpostman.com/) or [Insomnia](https://insomnia.rest/) for exploring the API.

apiChitter.js

@@ -0,0 +1,28 @@
+class ApiChitter {
+  constructor(api = 'https://chitter-backend-api-v2.herokuapp.com/peeps') {
+    this.api = api;
+  }
+
+  loadPeeps(callback) {
+    fetch(this.api)
+      .then((response) => response.json())
+      .then((data) => callback(data));
+  }
+
+  createPeep(body, handle, callback) {
+    fetch(this.api, {
+      headers: { 'Content-Type': 'application/json' },
+      method: 'POST',
+      body: JSON.stringify({
+        user: {
+          body: 'body',
+          handle: 'handle',
+        },
+      }),
+    })
+      .then((response) => response.json())
+      .then((data) => callback(data));
+  }
+}
+
+module.exports = ApiChitter;

apiChitter.test.js

@@ -0,0 +1,67 @@
+const ApiChitter = require('./apiChitter');
+
+require('jest-fetch-mock').enableMocks();
+
+describe('ApiChitter', () => {
+  describe('loadPeeps', () => {
+    it('returns peeps from the HerokuApp back end server', () => {
+      const api = new ApiChitter();
+
+      fetch.mockResponseOnce(
+        JSON.stringify([
+          {
+            id: 1111,
+            body: 'first peep',
+            created_at: '2022-06-05T15:48:31.210Z',
+            updated_at: '2022-06-05T15:48:31.210Z',
+            user: {
+              id: 111,
+              handle: 'Slava',
+            },
+            likes: [],
+          },
+        ])
+      );
+
+      api.loadPeeps((callback) => {
+        expect(callback).toEqual([
+          {
+            id: 1111,
+            body: 'first peep',
+            created_at: '2022-06-05T15:48:31.210Z',
+            updated_at: '2022-06-05T15:48:31.210Z',
+            user: {
+              id: 111,
+              handle: 'Slava',
+            },
+            likes: [],
+          },
+        ]);
+      });
+    });
+  });
+
+  describe('createPeep', () => {
+    it('creates the peep on the HerokuApp back end server', () => {
+      const api = new ApiChitter();
+
+      fetch.mockResponseOnce(
+        JSON.stringify([
+          {
+            body: 'first peep',
+            handle: 'slava',
+          },
+        ])
+      );
+
+      api.createPeep('first peep', 'slava', (data) => {
+        expect(data).toEqual([
+          {
+            body: 'first peep',
+            handle: 'slava',
+          },
+        ]);
+      });
+    });
+  });
+});

chitterModel.js

@@ -0,0 +1,19 @@
+class ChitterModel {
+  constructor() {
+    this.peeps = [];
+  }
+
+  getPeeps() {
+    return this.peeps;
+  }
+
+  addPeep(peep) {
+    this.peeps.push(peep);
+  }
+
+  setPeeps(peeps) {
+    this.peeps = peeps;
+  }
+}
+
+module.exports = ChitterModel;

chitterModel.test.js

@@ -0,0 +1,25 @@
+const ChitterModel = require('./chitterModel');
+
+describe('ChitterModel', () => {
+  let model;
+
+  beforeEach(() => {
+    model = new ChitterModel();
+  });
+
+  it('returns a list of peeps', () => {
+    expect(model.getPeeps()).toEqual([]);
+  });
+
+  it('adds a peep to peeps list', () => {
+    model.addPeep('first peep');
+
+    expect(model.getPeeps()).toEqual(['first peep']);
+  });
+
+  it('sets peeps from peeps list', () => {
+    model.setPeeps(['first peep', 'second peep']);
+
+    expect(model.getPeeps()).toEqual(['first peep', 'second peep']);
+  });
+});

chitterView.js

@@ -0,0 +1,22 @@
+class ChitterView {
+  constructor(model, api) {
+    this.model = model;
+    this.api = api;
+    this.mainContainerEl = document.querySelector('#main-container');
+  }
+
+  displayPeeps() {
+    const headlines = this.model.getPeeps();
+
+    console.log(headlines); // <- for dev tools
+
+    headlines.forEach((headline) => {
+      const headlineEl = document.createElement('p');
+      headlineEl.className = 'headline';
+
+      this.mainContainerEl.append(headlineEl);
+    });
+  }
+}
+
+module.exports = ChitterView;

chitterView.test.js

@@ -0,0 +1,32 @@
+/**
+ * @jest-environment jsdom
+ */
+
+const fs = require('fs');
+const ApiChitter = require('./apiChitter');
+const ChitterModel = require('./chitterModel');
+const ChitterView = require('./chitterView');
+
+require('jest-fetch-mock').enableMocks();
+
+describe('ChitterView', () => {
+  let view;
+  let model;
+  let api;
+
+  beforeEach(() => {
+    document.body.innerHTML = fs.readFileSync('./index.html');
+    api = new ApiChitter();
+    model = new ChitterModel();
+    view = new ChitterView(model, api);
+  });
+
+  it('displays the peeps', () => {
+    model.addPeep('first peep');
+    model.addPeep('second peep');
+
+    view.displayPeeps();
+
+    expect(document.querySelectorAll('.headline').length).toEqual(2);
+  });
+});

index.html

@@ -0,0 +1,19 @@
+<!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">
+    <title>Chitter</title>
+    <link rel="stylesheet" href="./assets/styles.css">
+  </head>
+
+  <body>
+
+    <div id="main-container">
+    </div>
+
+    <script type="text/javascript" src="bundle.js"></script>
+  </body>
+</html>

index.js

@@ -0,0 +1,14 @@
+const ApiChitter = require('./apiChitter');
+const ChitterModel = require('./chitterModel');
+const ChitterView = require('./chitterView');
+
+const api = new ApiChitter();
+const model = new ChitterModel();
+const view = new ChitterView(model, api);
+
+api.loadPeeps((peep) => {
+  model.addPeep(peep);
+  view.displayPeeps();
+});
+
+console.log('Hello!');