Persist update notification on reload (OctoLinker#839)

Co-authored-by: Stefan Buck <[email protected]>
stefanbuck · Mar 11, 2020 · fdb9e46 · fdb9e46
1 parent fa30637
commit fdb9e46
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 4 deletions.
diff --git a/packages/core/notification.js b/packages/core/notification.js
@@ -1,11 +1,24 @@
 import * as storage from '@octolinker/helper-settings';
 import { showNotification } from '@octolinker/user-interface';
 
+let notificationEl;
 const pkgVersion = require('./package.json')
   .version.split('.')
   .slice(0, -1)
   .join('.');
 
+document.body.addEventListener('click', event => {
+  if (
+    event.target.classList.contains('js-hide-new-version') ||
+    event.target.classList.contains('js-flash-close-update-info')
+  ) {
+    storage.set('showUpdateInfo', false);
+    if (notificationEl) {
+      notificationEl.remove();
+    }
+  }
+});
+
 export default async function() {
   const showUpdateNotification = storage.get('showUpdateNotification');
 
@@ -18,6 +31,10 @@ export default async function() {
   storage.set('version', pkgVersion);
 
   if (installedVersion && installedVersion !== pkgVersion) {
+    storage.set('showUpdateInfo', true);
+  }
+
+  if (storage.get('showUpdateInfo')) {
     const response = await fetch(
       'https://api.github.com/repos/OctoLinker/OctoLinker/releases/latest',
     );
@@ -26,8 +43,8 @@ export default async function() {
     const url = json.html_url;
     const version = json.tag_name.replace('v', '');
 
-    const body = `${description} &ndash; see what's new in OctoLinker ${version}! <a href="${url}" target="_blank">Learn more</a>`;
+    const body = `${description} &ndash; see what's new in OctoLinker ${version}! <a href="${url}" target="_blank" class="js-hide-new-version">Learn more</a>`;
 
-    showNotification({ body });
+    notificationEl = showNotification({ body, id: 'update-info' });
   }
 }
diff --git a/packages/helper-settings/index.js b/packages/helper-settings/index.js
@@ -24,6 +24,8 @@ export const set = async (key, value) => {
     [key]: value,
   };
 
+  Object.assign(store, data);
+
   return browser.storage.local.set(data);
 };
 

diff --git a/packages/user-interface/index.js b/packages/user-interface/index.js
@@ -1,6 +1,6 @@
 import './style.css';
 
-export const showNotification = ({ body, type = 'info' }) => {
+export const showNotification = ({ body, type = 'info', id = 'common' }) => {
   const typeClass = {
     info: 'flash-info',
     warn: 'flash-warn',
@@ -10,7 +10,7 @@ export const showNotification = ({ body, type = 'info' }) => {
   const el = document.createElement('div');
   el.innerHTML = `<div class="js-octolinker-flash flash flash-full ${typeClass[type]}">
     <div class="container">
-      <button class="flash-close js-flash-close" type="button" aria-label="Dismiss this message">
+      <button class="flash-close js-flash-close js-flash-close-${id}" type="button" aria-label="Dismiss this message">
         <svg aria-hidden="true" class="octicon octicon-x" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48z"></path></svg>
       </button>
        <div class="octolinker-flash-image"></div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -24,6 +24,8 @@ export const set = async (key, value) => { @@
         [key]: value,
       };
+      Object.assign(store, data);
       return browser.storage.local.set(data);
     };
@@ Expand Down @@