From 75a426437a4182e21da13684066966dd5bf8fc5e Mon Sep 17 00:00:00 2001
From: sct <sctsnipe@gmail.com>
Date: Sun, 27 Dec 2020 10:05:54 +0000
Subject: [PATCH] feat: status checker to prompt users to reload their frontend
 when app version changes

---
 next.config.js                          |  3 ++
 overseerr-api.yml                       | 20 ++++++++
 package.json                            |  2 +-
 server/routes/index.ts                  |  9 ++++
 src/components/Layout/Sidebar/index.tsx | 16 +++----
 src/components/StatusChacker/index.tsx  | 62 +++++++++++++++++++++++++
 src/pages/_app.tsx                      |  2 +
 7 files changed, 103 insertions(+), 11 deletions(-)
 create mode 100644 src/components/StatusChacker/index.tsx

diff --git a/next.config.js b/next.config.js
index a6ea87dfb..8c1766af8 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,4 +1,7 @@
 module.exports = {
+  env: {
+    commitTag: process.env.COMMIT_TAG || 'local',
+  },
   webpack(config) {
     config.module.rules.push({
       test: /\.svg$/,
diff --git a/overseerr-api.yml b/overseerr-api.yml
index cac66b2b7..dccd60ba6 100644
--- a/overseerr-api.yml
+++ b/overseerr-api.yml
@@ -1102,6 +1102,26 @@ components:
       name: X-Api-Key
 
 paths:
+  /status:
+    get:
+      summary: Return Overseerr version
+      description: Returns the current Overseerr version in JSON format
+      security: []
+      tags:
+        - public
+      responses:
+        '200':
+          description: Returned version
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  version:
+                    type: string
+                    example: 1.0.0
+                  commitTag:
+                    type: string
   /settings/main:
     get:
       summary: Returns main settings
diff --git a/package.json b/package.json
index ac3414c12..093f314d8 100644
--- a/package.json
+++ b/package.json
@@ -171,7 +171,7 @@
       [
         "@semantic-release/exec",
         {
-          "prepareCmd": "docker build -t sctx/overseerr ."
+          "prepareCmd": "docker build --build-arg COMMIT_TAG=$GITHUB_SHA -t sctx/overseerr ."
         }
       ],
       "semantic-release-docker",
diff --git a/server/routes/index.ts b/server/routes/index.ts
index bf094ec08..d03ddb696 100644
--- a/server/routes/index.ts
+++ b/server/routes/index.ts
@@ -13,10 +13,19 @@ import tvRoutes from './tv';
 import mediaRoutes from './media';
 import personRoutes from './person';
 import collectionRoutes from './collection';
+import { getAppVersion } from '../utils/appVersion';
 
 const router = Router();
 
 router.use(checkUser);
+
+router.get('/status', (req, res) => {
+  return res.status(200).json({
+    version: getAppVersion(),
+    commitTag: process.env.COMMIT_TAG || 'local',
+  });
+});
+
 router.use('/user', isAuthenticated(Permission.MANAGE_USERS), user);
 router.get('/settings/public', (_req, res) => {
   const settings = getSettings();
diff --git a/src/components/Layout/Sidebar/index.tsx b/src/components/Layout/Sidebar/index.tsx
index b6e44f37d..c85727a9b 100644
--- a/src/components/Layout/Sidebar/index.tsx
+++ b/src/components/Layout/Sidebar/index.tsx
@@ -175,11 +175,9 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
                   >
                     <div className="flex-shrink-0 flex items-center px-4">
                       <span className="text-xl text-gray-50">
-                        <Link href="/">
-                          <a>
-                            <img src="/logo.png" alt="Overseerr Logo" />
-                          </a>
-                        </Link>
+                        <a href="/">
+                          <img src="/logo.png" alt="Overseerr Logo" />
+                        </a>
                       </span>
                     </div>
                     <nav className="mt-5 px-2 space-y-1">
@@ -239,11 +237,9 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
             <div className="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
               <div className="flex items-center flex-shrink-0 px-4">
                 <span className="text-2xl text-gray-50">
-                  <Link href="/">
-                    <a>
-                      <img src="/logo.png" alt="Overseerr Logo" />
-                    </a>
-                  </Link>
+                  <a href="/">
+                    <img src="/logo.png" alt="Overseerr Logo" />
+                  </a>
                 </span>
               </div>
               <nav className="mt-5 flex-1 px-2 bg-gray-800 space-y-1">
diff --git a/src/components/StatusChacker/index.tsx b/src/components/StatusChacker/index.tsx
new file mode 100644
index 000000000..f40ebda4c
--- /dev/null
+++ b/src/components/StatusChacker/index.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import useSWR from 'swr';
+import Modal from '../Common/Modal';
+import Transition from '../Transition';
+
+const StatusChecker: React.FC = () => {
+  const { data, error } = useSWR<{ version: string; commitTag: string }>(
+    '/api/v1/status',
+    {
+      refreshInterval: 60 * 1000,
+    }
+  );
+
+  if (!data && !error) {
+    return null;
+  }
+
+  if (!data) {
+    return null;
+  }
+
+  return (
+    <Transition
+      enter="opacity-0 transition duration-300"
+      enterFrom="opacity-0"
+      enterTo="opacity-100"
+      leave="opacity-100 transition duration-300"
+      leaveFrom="opacity-100"
+      leaveTo="opacity-0"
+      appear
+      show={data.commitTag !== process.env.commitTag}
+    >
+      <Modal
+        iconSvg={
+          <svg
+            className="w-6 h-6"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"
+            />
+          </svg>
+        }
+        title="New Version Available"
+        onOk={() => location.reload()}
+        okText="Reload Overseerr"
+        backgroundClickable={false}
+      >
+        An update is now available. Click the button below to reload the
+        application.
+      </Modal>
+    </Transition>
+  );
+};
+
+export default StatusChecker;
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 974223d2c..7fa512ae7 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -13,6 +13,7 @@ import { LanguageContext, AvailableLocales } from '../context/LanguageContext';
 import Head from 'next/head';
 import Toast from '../components/Toast';
 import { InteractionProvider } from '../context/InteractionContext';
+import StatusChecker from '../components/StatusChacker';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const loadLocaleData = (locale: string): Promise<any> => {
@@ -104,6 +105,7 @@ const CoreApp: Omit<NextAppComponentType, 'origGetInitialProps'> = ({
               <Head>
                 <title>Overseerr</title>
               </Head>
+              <StatusChecker />
               <UserContext initialUser={user}>{component}</UserContext>
             </ToastProvider>
           </InteractionProvider>