From a182c38d9516717b8058482b7de2fbca60db213d Mon Sep 17 00:00:00 2001 From: nickwlong Date: Fri, 16 Sep 2022 08:21:05 +0100 Subject: [PATCH 01/17] Project setup --- .gitignore | 2 ++ __tests__/user.test.js | 0 index.html | 30 ++++++++++++++++++++++++++++++ package.json | 13 +++++++++++++ src/index.js | 0 src/model/user.js | 0 src/views/userView.js | 0 style/style.css | 0 8 files changed, 45 insertions(+) create mode 100644 .gitignore create mode 100644 __tests__/user.test.js create mode 100644 index.html create mode 100644 package.json create mode 100644 src/index.js create mode 100644 src/model/user.js create mode 100644 src/views/userView.js create mode 100644 style/style.css diff --git a/.gitignore b/.gitignore new file mode 100644 index 000000000..d1c1dbe22 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +node_modules +bundle.js diff --git a/__tests__/user.test.js b/__tests__/user.test.js new file mode 100644 index 000000000..e69de29bb diff --git a/index.html b/index.html new file mode 100644 index 000000000..1b2bd91a5 --- /dev/null +++ b/index.html @@ -0,0 +1,30 @@ + + + + + + + + + + Welcome to Chitter! + + + +
+ + +
+ +
+ + +
+ +
+ + +
+ + + \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 000000000..e112da0de --- /dev/null +++ b/package.json @@ -0,0 +1,13 @@ +{ + "name": "chitter-frontend-challenge", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1", + "build": "esbuild index.js --bundle --outfile=bundle.js --watch" + }, + "keywords": [], + "author": "", + "license": "ISC" +} diff --git a/src/index.js b/src/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/src/model/user.js b/src/model/user.js new file mode 100644 index 000000000..e69de29bb diff --git a/src/views/userView.js b/src/views/userView.js new file mode 100644 index 000000000..e69de29bb diff --git a/style/style.css b/style/style.css new file mode 100644 index 000000000..e69de29bb From ff80416165f057f7a9ff8dd14a8981171c45b146 Mon Sep 17 00:00:00 2001 From: nickwlong Date: Fri, 16 Sep 2022 11:14:26 +0100 Subject: [PATCH 02/17] Created index page and playing around with hiding elements --- __tests__/api.test.js | 31 ++++++++++ index.html | 17 +++++- package-lock.json | 127 +++++++++++++++++++++++++++++++++++++++++ package.json | 7 ++- src/api.js | 33 +++++++++++ src/index.js | 3 + src/interface.js | 12 ++++ src/views/peepsView.js | 13 +++++ src/views/userView.js | 0 9 files changed, 240 insertions(+), 3 deletions(-) create mode 100644 __tests__/api.test.js create mode 100644 package-lock.json create mode 100644 src/api.js create mode 100644 src/interface.js create mode 100644 src/views/peepsView.js delete mode 100644 src/views/userView.js diff --git a/__tests__/api.test.js b/__tests__/api.test.js new file mode 100644 index 000000000..c3c3889be --- /dev/null +++ b/__tests__/api.test.js @@ -0,0 +1,31 @@ +const Api = require("../src/api"); + +const api = new Api; + +require('jest-fetch-mock').enableMocks() + +describe('Api', () => { + test('Creates a session', ( ) => { + fetch.mockResponseOnce(JSON.stringify({ + user_id: 1, + session_key: "Test key" + })) + api.createSession("user", "pass", (data) => { + expect(data.user_id).toEqual(1); + expect(data.session_key).toEqual("Test key") + }) + + }) + + test('Creates a user', () => { + fetch.mockResponseOnce(JSON.stringify({ + "id" : 1, + "handle" : "testUser" + })) + api.createUser("username", "password", (data) => { + expect(data.id).toEqual(1), + expect(data.handle).toEqual("testUser") + }) + }) +}) + diff --git a/index.html b/index.html index 1b2bd91a5..376e5b310 100644 --- a/index.html +++ b/index.html @@ -12,8 +12,23 @@
+
+ + + + +
- +
+ +
diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 000000000..38d34f900 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,127 @@ +{ + "name": "chitter-frontend-challenge", + "version": "1.0.0", + "lockfileVersion": 2, + "requires": true, + "packages": { + "": { + "name": "chitter-frontend-challenge", + "version": "1.0.0", + "license": "ISC", + "dependencies": { + "jest-fetch-mock": "^3.0.3" + } + }, + "node_modules/cross-fetch": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz", + "integrity": "sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==", + "dependencies": { + "node-fetch": "2.6.7" + } + }, + "node_modules/jest-fetch-mock": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/jest-fetch-mock/-/jest-fetch-mock-3.0.3.tgz", + "integrity": "sha512-Ux1nWprtLrdrH4XwE7O7InRY6psIi3GOsqNESJgMJ+M5cv4A8Lh7SN9d2V2kKRZ8ebAfcd1LNyZguAOb6JiDqw==", + "dependencies": { + "cross-fetch": "^3.0.4", + "promise-polyfill": "^8.1.3" + } + }, + "node_modules/node-fetch": { + "version": "2.6.7", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz", + "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==", + "dependencies": { + "whatwg-url": "^5.0.0" + }, + "engines": { + "node": "4.x || >=6.0.0" + }, + "peerDependencies": { + "encoding": "^0.1.0" + }, + "peerDependenciesMeta": { + "encoding": { + "optional": true + } + } + }, + "node_modules/promise-polyfill": { + "version": "8.2.3", + "resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-8.2.3.tgz", + "integrity": "sha512-Og0+jCRQetV84U8wVjMNccfGCnMQ9mGs9Hv78QFe+pSDD3gWTpz0y+1QCuxy5d/vBFuZ3iwP2eycAkvqIMPmWg==" + }, + "node_modules/tr46": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz", + "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==" + }, + "node_modules/webidl-conversions": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz", + "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==" + }, + "node_modules/whatwg-url": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz", + "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==", + "dependencies": { + "tr46": "~0.0.3", + "webidl-conversions": "^3.0.0" + } + } + }, + "dependencies": { + "cross-fetch": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz", + "integrity": "sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==", + "requires": { + "node-fetch": "2.6.7" + } + }, + "jest-fetch-mock": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/jest-fetch-mock/-/jest-fetch-mock-3.0.3.tgz", + "integrity": "sha512-Ux1nWprtLrdrH4XwE7O7InRY6psIi3GOsqNESJgMJ+M5cv4A8Lh7SN9d2V2kKRZ8ebAfcd1LNyZguAOb6JiDqw==", + "requires": { + "cross-fetch": "^3.0.4", + "promise-polyfill": "^8.1.3" + } + }, + "node-fetch": { + "version": "2.6.7", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz", + "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==", + "requires": { + "whatwg-url": "^5.0.0" + } + }, + "promise-polyfill": { + "version": "8.2.3", + "resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-8.2.3.tgz", + "integrity": "sha512-Og0+jCRQetV84U8wVjMNccfGCnMQ9mGs9Hv78QFe+pSDD3gWTpz0y+1QCuxy5d/vBFuZ3iwP2eycAkvqIMPmWg==" + }, + "tr46": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz", + "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==" + }, + "webidl-conversions": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz", + "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==" + }, + "whatwg-url": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz", + "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==", + "requires": { + "tr46": "~0.0.3", + "webidl-conversions": "^3.0.0" + } + } + } +} diff --git a/package.json b/package.json index e112da0de..60219d6a1 100644 --- a/package.json +++ b/package.json @@ -5,9 +5,12 @@ "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", - "build": "esbuild index.js --bundle --outfile=bundle.js --watch" + "build": "esbuild src/index.js --bundle --outfile=bundle.js --watch" }, "keywords": [], "author": "", - "license": "ISC" + "license": "ISC", + "dependencies": { + "jest-fetch-mock": "^3.0.3" + } } diff --git a/src/api.js b/src/api.js new file mode 100644 index 000000000..793490075 --- /dev/null +++ b/src/api.js @@ -0,0 +1,33 @@ +class Api { + loadPeeps(callback){} + + createSession(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)) + } + + 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)) + } +} + +module.exports = Api \ No newline at end of file diff --git a/src/index.js b/src/index.js index e69de29bb..f12eba0e9 100644 --- a/src/index.js +++ b/src/index.js @@ -0,0 +1,3 @@ +const Api = require("./api"); + +const api = new Api \ No newline at end of file diff --git a/src/interface.js b/src/interface.js new file mode 100644 index 000000000..d3b01432b --- /dev/null +++ b/src/interface.js @@ -0,0 +1,12 @@ +document.addEventListener("DOMContentLoaded", () => { + +//Create User + document.querySelector('#showCreateUser').addEventListener('click', () => { + document.querySelector('#container-createUser').style.visibility = 'visible' + }) + + + + +}) + diff --git a/src/views/peepsView.js b/src/views/peepsView.js new file mode 100644 index 000000000..078c6d913 --- /dev/null +++ b/src/views/peepsView.js @@ -0,0 +1,13 @@ +class PeepsView { + constructor(model, api) { + this.model = model + this.api = api + }; + + createUser() { + + const username = document.querySelector('#create-username').value + const password = document.querySelector('#create-password').value + this.api.createUser(username, password) + } +} \ No newline at end of file diff --git a/src/views/userView.js b/src/views/userView.js deleted file mode 100644 index e69de29bb..000000000 From 2f808ca30bdc9fa76c9678de5b1b3346346177aa Mon Sep 17 00:00:00 2001 From: nickwlong Date: Fri, 16 Sep 2022 14:15:25 +0100 Subject: [PATCH 03/17] Adding a user to the API works --- __tests__/peepsView.test.js | 0 index.html | 21 +++++++++++---------- src/api.js | 18 ++++++++++-------- src/index.js | 7 ++++++- src/interface.js | 12 ------------ src/model/user.js | 5 +++++ src/views/peepsView.js | 35 ++++++++++++++++++++++++++++++----- 7 files changed, 62 insertions(+), 36 deletions(-) create mode 100644 __tests__/peepsView.test.js diff --git a/__tests__/peepsView.test.js b/__tests__/peepsView.test.js new file mode 100644 index 000000000..e69de29bb diff --git a/index.html b/index.html index 376e5b310..24523b3bf 100644 --- a/index.html +++ b/index.html @@ -6,28 +6,29 @@ - + Welcome to Chitter!
-
+ - + - + +
- -