feat: add feedback form to browser action

lfilho · Jul 26, 2020 · 8c390ff · 8c390ff
1 parent 0d2c0dd
commit 8c390ff
Show file tree

Hide file tree

Showing 19 changed files with 201 additions and 18 deletions.
diff --git a/__tests__/src/browser_action/feedback_sender.spec.js b/__tests__/src/browser_action/feedback_sender.spec.js
@@ -0,0 +1,45 @@
+//
+// WIP
+// Will return to this file after https://github.com/lfilho/sample-webextension/issues/38
+//
+/**
+ * @jest-environment jsdom
+ */
+
+/*
+import fs from 'fs';
+import { jest } from '@jest/globals';
+import { submitFeedbackListener } from '../../../src/browser_action/feedback_sender.js';
+
+jest.mock('../../../src/browser_action/feedback_sender.js');
+
+const browserActionPath = `${process.cwd()}/src/browser_action/index.html`;
+const browserActionHtml = fs.readFileSync(browserActionPath).toString();
+
+describe.skip('Browser Action', () => {
+  let $, submitButton, messagesContainer;
+  beforeEach(() => {
+    // document.documentElement.innerHTML = browserActionHtml;
+    $ = document.querySelector.bind(document);
+    submitButton = $('#submit');
+    messagesContainer = $('#messages');
+  });
+
+  afterEach(() => {
+    // restore the original func after test
+    jest.resetModules();
+  });
+
+  it('button exists', (done) => {
+    expect(submitButton).toBeTruthy();
+    submitButton.click();
+    setTimeout(() => {
+      expect(messagesContainer.textContent).toMatch(/Thank you!/);
+      done();
+    }, 5000);
+  });
+});
+*/
+describe.skip('Browser Action', () => {
+  it.skip();
+});
diff --git a/src/browserAction/index.html b/src/browserAction/index.html
diff --git a/src/browserAction/script.js b/src/browserAction/script.js
diff --git a/src/browserAction/style.css b/src/browserAction/style.css
diff --git a/src/browser_action/feedback_sender.js b/src/browser_action/feedback_sender.js
@@ -0,0 +1,58 @@
+import { post } from '../shared/util/fake_fetch.js';
+import { hasMinimalLength } from '../shared/util/validation.js';
+import Logger from '../shared/util/logger.js';
+import { InputTooShortError } from '../shared/model/error.js';
+import { FEEDBACK_ENDPOINT } from '../shared/config.js';
+
+const COMMENT_FIELD_SELECTOR = '#comment-field';
+const MESSAGES_CONTAINER_SELECTOR = '#messages';
+
+const $ = document.querySelector.bind(document);
+
+export async function submitFeedbackListener(event) {
+  event.preventDefault();
+
+  try {
+    const feedback = $(COMMENT_FIELD_SELECTOR).value;
+
+    validate(feedback);
+
+    showWaitingMessage();
+
+    const payload = { feedback };
+    const response = await post(FEEDBACK_ENDPOINT, payload);
+
+    showSuccessMessage();
+    Logger.debug(`Feedback sent! Server returned status: ${response.status}`);
+  } catch (error) {
+    showErrorMessage(error.message);
+    Logger.error(error);
+  }
+}
+
+function showMessage(text, className = '') {
+  const messagesContainer = $(MESSAGES_CONTAINER_SELECTOR);
+  messagesContainer.className = className;
+  messagesContainer.innerText = text;
+}
+
+function showSuccessMessage() {
+  showMessage('✅ Feedback sent! Thank you!', 'success');
+}
+
+function showErrorMessage(message) {
+  showMessage(`❌ ${message}`, 'error');
+}
+
+function showWaitingMessage() {
+  showMessage('Sending...');
+}
+
+function validate(feedback) {
+  const MIN_FEEDBACK_LENGTH = 3;
+  if (!hasMinimalLength(feedback, MIN_FEEDBACK_LENGTH)) {
+    throw new InputTooShortError(
+      `Feedback must have more than ${MIN_FEEDBACK_LENGTH} letters.`
+    );
+  }
+}
diff --git a/src/browser_action/index.html b/src/browser_action/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link href="style.css" rel="stylesheet" />
+  </head>
+  <body>
+    <header>
+      <img
+        src="../icons/duck-with-shades_130.png"
+        alt="Best Tracker Blocker extension logo"
+      />
+      <h1 id="myHeading">Best Tracker Blocker</h1>
+    </header>
+
+    <form id="feedback-form">
+      <label for="comment-field">
+        Thanks for sharing your feedback with us! And don't worry: we're not
+        sending any data apart from what you type below — you know us! 😇
+      </label>
+
+      <textarea id="comment-field"></textarea>
+
+      <input id="submit" type="button" value="Submit feedback 💬" />
+    </form>
+
+    <footer id="messages"></footer>
+
+    <script type="module" src="./index.js"></script>
+  </body>
+</html>
diff --git a/src/browser_action/index.js b/src/browser_action/index.js
@@ -0,0 +1,5 @@
+import { submitFeedbackListener } from './feedback_sender.js';
+
+const SUBMIT_BUTTON_SELECTOR = '#submit';
+const $ = document.querySelector.bind(document);
+$(SUBMIT_BUTTON_SELECTOR).addEventListener('click', submitFeedbackListener);
diff --git a/src/browser_action/style.css b/src/browser_action/style.css
@@ -0,0 +1,39 @@
+body {
+  padding: 2rem;
+  max-width: 25rem;
+  background: repeat url(../icons/duck-pattern.jpg);
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+h1 {
+  font-style: italic;
+}
+
+header,
+#feedback-form {
+  display: grid;
+  grid-gap: 1rem;
+  justify-items: center;
+}
+
+textarea {
+  width: 100%;
+  height: 6rem;
+}
+
+input {
+  font-size: 1rem;
+  padding: 0.5rem;
+}
+
+#messages {
+  text-align: center;
+  padding: 1rem;
+}
+#messages.error {
+  color: darkred;
+}
+
+#messages.success {
+  color: darkgreen;
+}
diff --git a/src/icons/duck-pattern.jpg b/src/icons/duck-pattern.jpg
diff --git a/src/icons/duck-with-shades.png b/src/icons/duck-with-shades.png
diff --git a/src/icons/duck-with-shades_130.png b/src/icons/duck-with-shades_130.png
diff --git a/src/icons/duck-with-shades_16.png b/src/icons/duck-with-shades_16.png
diff --git a/src/icons/duck-with-shades_32.png b/src/icons/duck-with-shades_32.png
diff --git a/src/icons/duck-with-shades_64.png b/src/icons/duck-with-shades_64.png
diff --git a/src/icons/icon.png b/src/icons/icon.png
diff --git a/src/manifest.json b/src/manifest.json
@@ -4,7 +4,9 @@
   "description": "Tracker Blocker extension",
   "version": "1.4.2",
   "icons": {
-    "64": "icons/icon.png"
+    "16": "icons/duck-with-shades_16.png",
+    "32": "icons/duck-with-shades_32.png",
+    "64": "icons/duck-with-shades_64.png"
   },
   "permissions": ["webRequest", "webRequestBlocking", "<all_urls>"],
   "background": {
@@ -20,9 +22,11 @@
   ],
   "browser_action": {
     "default_icon": {
-      "64": "icons/icon.png"
+      "16": "icons/duck-with-shades_16.png",
+      "32": "icons/duck-with-shades_32.png",
+      "64": "icons/duck-with-shades_64.png"
     },
-    "default_popup": "browserAction/index.html",
+    "default_popup": "browser_action/index.html",
     "default_title": "Best Tracker Ext"
   }
 }
diff --git a/src/shared/config.js b/src/shared/config.js
@@ -0,0 +1,4 @@
+const METRIC_ENDPOINT = 'https://fake--endpoint.com/metrics';
+const FEEDBACK_ENDPOINT = 'https://fake--endpoint.com/feedback';
+
+export { METRIC_ENDPOINT, FEEDBACK_ENDPOINT };
diff --git a/src/shared/model/error.js b/src/shared/model/error.js
@@ -41,3 +41,7 @@ export class InvalidMetricDimensionError extends MyProjectError {
 export class ListTypeError extends MyProjectError {
   message = t('List constructor needs a type. See `List.types` for values.');
 }
+
+export class InputTooShortError extends MyProjectError {
+  message = t('The value entered is too short.');
+}
diff --git a/src/shared/util/validation.js b/src/shared/util/validation.js
@@ -0,0 +1,8 @@
+// Most robust validation lib in the world, I know!
+export function isEmpty(string) {
+  return !string || string.length === 0;
+}
+
+export function hasMinimalLength(string, minimalLength) {
+  return !isEmpty(string) && string.length > minimalLength;
+}