From 0c7606793a686b2eb2f8ea8d63713f9615cd916d Mon Sep 17 00:00:00 2001
From: Aj - Thomas <thomascamlong@gmail.com>
Date: Thu, 12 May 2022 02:41:13 +0200
Subject: [PATCH] Add new update notification on main dashboard

---
 .prettierrc                          |  9 ++++++
 .prettierrc.js                       |  1 -
 components/Settings/SettingsMenu.tsx | 41 +++++++++++++++++++++++++---
 data/constants.ts                    |  2 ++
 4 files changed, 48 insertions(+), 5 deletions(-)
 create mode 100644 .prettierrc
 delete mode 100644 .prettierrc.js
 create mode 100644 data/constants.ts

diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 000000000..48f1261fd
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,9 @@
+{
+  "printWidth": 100,
+  "tabWidth": 2,
+  "parser": "typescript",
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "useTabs": false,
+  "endOfLine": "lf"
+}
\ No newline at end of file
diff --git a/.prettierrc.js b/.prettierrc.js
deleted file mode 100644
index dd23f0d31..000000000
--- a/.prettierrc.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('eslint-config-mantine/.prettierrc.js');
diff --git a/components/Settings/SettingsMenu.tsx b/components/Settings/SettingsMenu.tsx
index 41ef8c9ef..47a41fee1 100644
--- a/components/Settings/SettingsMenu.tsx
+++ b/components/Settings/SettingsMenu.tsx
@@ -7,10 +7,13 @@ import {
   Text,
   Tooltip,
   SegmentedControl,
+  Indicator,
+  Alert,
 } from '@mantine/core';
 import { useColorScheme } from '@mantine/hooks';
-import { useState } from 'react';
-import { Settings as SettingsIcon } from 'tabler-icons-react';
+import { useEffect, useState } from 'react';
+import { AlertCircle, Settings as SettingsIcon } from 'tabler-icons-react';
+import { CURRENT_VERSION, REPO_URL } from '../../data/constants';
 import { useConfig } from '../../tools/state';
 import { ColorSchemeSwitch } from '../ColorSchemeToggle/ColorSchemeSwitch';
 import SaveConfigComponent from '../Config/SaveConfig';
@@ -19,13 +22,23 @@ import ModuleEnabler from './ModuleEnabler';
 function SettingsMenu(props: any) {
   const { config, setConfig } = useConfig();
   const colorScheme = useColorScheme();
+  const { current, latest } = props;
   const matches = [
     { label: 'Google', value: 'https://google.com/search?q=' },
     { label: 'DuckDuckGo', value: 'https://duckduckgo.com/?q=' },
     { label: 'Bing', value: 'https://bing.com/search?q=' },
   ];
+
   return (
     <Group direction="column" grow>
+      <Alert
+        icon={<AlertCircle size={16} />}
+        title="Update available"
+        radius="lg"
+        hidden={current === latest}
+      >
+        Version {latest} is available. Current : {current}
+      </Alert>
       <Group>
         <SegmentedControl
           title="Search engine"
@@ -82,7 +95,20 @@ function SettingsMenu(props: any) {
 }
 
 export function SettingsMenuButton(props: any) {
+  const [update, setUpdate] = useState(false);
   const [opened, setOpened] = useState(false);
+  const [latestVersion, setLatestVersion] = useState(CURRENT_VERSION);
+  useEffect(() => {
+    // Fetch Data here when component first mounted
+    fetch(`https://api.github.com/repos/${REPO_URL}/releases/latest`).then((res) => {
+      res.json().then((data) => {
+        setLatestVersion(data.tag_name);
+        if (data.tag_name !== CURRENT_VERSION) {
+          setUpdate(true);
+        }
+      });
+    });
+  }, []);
   return (
     <>
       <Modal
@@ -91,7 +117,7 @@ export function SettingsMenuButton(props: any) {
         opened={props.opened || opened}
         onClose={() => setOpened(false)}
       >
-        <SettingsMenu />
+        <SettingsMenu current={CURRENT_VERSION} latest={latestVersion} />
       </Modal>
       <ActionIcon
         variant="default"
@@ -102,7 +128,14 @@ export function SettingsMenuButton(props: any) {
         onClick={() => setOpened(true)}
       >
         <Tooltip label="Settings">
-          <SettingsIcon />
+          <Indicator
+            size={12}
+            disabled={CURRENT_VERSION === latestVersion}
+            offset={-3}
+            position="top-end"
+          >
+            <SettingsIcon />
+          </Indicator>
         </Tooltip>
       </ActionIcon>
     </>
diff --git a/data/constants.ts b/data/constants.ts
new file mode 100644
index 000000000..195d0a18d
--- /dev/null
+++ b/data/constants.ts
@@ -0,0 +1,2 @@
+export const REPO_URL = 'ajnart/myhomepage';
+export const CURRENT_VERSION = 'v0.1.5';