From 7daa60af14ff09851cc6964a654793581a45d138 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 23 Mar 2020 01:28:19 +0100
Subject: [PATCH] add update notification

---
 src/renderer/Layout.jsx                   |  2 ++
 src/renderer/Layout.module.css            |  5 +----
 src/renderer/components/Update.jsx        | 26 +++++++++++++++++++++++
 src/renderer/components/Update.module.css | 20 +++++++++++++++++
 4 files changed, 49 insertions(+), 4 deletions(-)
 create mode 100644 src/renderer/components/Update.jsx
 create mode 100644 src/renderer/components/Update.module.css

diff --git a/src/renderer/Layout.jsx b/src/renderer/Layout.jsx
index 29d2b5d..a93e5e1 100644
--- a/src/renderer/Layout.jsx
+++ b/src/renderer/Layout.jsx
@@ -5,6 +5,7 @@ import shortid from 'shortid'
 import { defaultAnimation } from './components/Animations'
 import Titlebar from './components/Titlebar'
 import styles from './Layout.module.css'
+import Update from './components/Update'
 
 const Animation = posed.div(defaultAnimation)
 
@@ -13,6 +14,7 @@ export default function Layout({ children }) {
     <>
       {process.platform === 'darwin' && <Titlebar />}
       <div className={styles.app}>
+        <Update />
         <PoseGroup animateOnMount>
           <Animation key={shortid.generate()}>{children}</Animation>
         </PoseGroup>
diff --git a/src/renderer/Layout.module.css b/src/renderer/Layout.module.css
index fee0a99..fabbf8d 100644
--- a/src/renderer/Layout.module.css
+++ b/src/renderer/Layout.module.css
@@ -5,12 +5,9 @@
   width: 100%;
   height: 100%;
   overflow-y: auto;
+  position: relative;
 }
 
 :global(.darwin) .app {
   padding-top: calc(35px + 10%);
 }
-
-:global(.fullscreen.darwin) .app {
-  transform: translate3d(0, -36px, 0);
-}
diff --git a/src/renderer/components/Update.jsx b/src/renderer/components/Update.jsx
new file mode 100644
index 0000000..239288e
--- /dev/null
+++ b/src/renderer/components/Update.jsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import useSWR from 'swr'
+import pkg from '../../../package.json'
+import { openUrl, fetchData } from '../../utils'
+import styles from './Update.module.css'
+
+export default function Update() {
+  const url =
+    'https://api.github.com/repos/kremalicious/blowfish/releases/latest'
+  const { data } = useSWR(url, fetchData)
+
+  if (!data || !data.tag_name) return null
+
+  const hasUpdate = data.tag_name !== `v${pkg.version}`
+
+  return hasUpdate ? (
+    <a
+      onClick={() =>
+        openUrl('https://github.com/kremalicious/blowfish/releases')
+      }
+      className={styles.update}
+    >
+      Update available
+    </a>
+  ) : null
+}
diff --git a/src/renderer/components/Update.module.css b/src/renderer/components/Update.module.css
new file mode 100644
index 0000000..d0d6c35
--- /dev/null
+++ b/src/renderer/components/Update.module.css
@@ -0,0 +1,20 @@
+.update {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.75rem;
+  padding: 0.2rem 0.5rem;
+  font-size: 0.8rem;
+  font-weight: bold;
+  border: 1px solid transparent;
+  border-radius: 0.2rem;
+}
+
+.update:hover,
+.update:focus {
+  border-color: rgba(0, 0, 0, 0.1);
+}
+
+:global(.dark) .update:hover,
+:global(.dark) .update:focus {
+  border-color: rgba(255, 255, 255, 0.2);
+}