feat: show version and show button if new release is available on admin page

backend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "pingvin-share-backend",
-  "version": "0.0.1",
+  "version": "0.5.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "pingvin-share-backend",
-      "version": "0.0.1",
+      "version": "0.5.0",
       "dependencies": {
         "@nestjs/common": "^9.2.1",
         "@nestjs/config": "^2.2.0",

backend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pingvin-share-backend",
-  "version": "0.0.1",
+  "version": "0.5.0",
   "scripts": {
     "build": "nest build",
     "dev": "nest start --watch",

frontend/next.config.js

@@ -1,8 +1,14 @@
 /** @type {import('next').NextConfig} */
 
+const { version } = require('./package.json');
+
 const withPWA = require("next-pwa")({
   dest: "public",
   disable: process.env.NODE_ENV == "development",
 });
 
-module.exports = withPWA({ output: "standalone" });
+module.exports = withPWA({
+  output: "standalone", env: {
+    VERSION: version,
+  },
+});

frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
-  "name": "pingvin-share",
-  "version": "0.0.1",
+  "name": "pingvin-share-frontend",
+  "version": "0.5.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "pingvin-share",
-      "version": "0.0.1",
+      "name": "pingvin-share-frontend",
+      "version": "0.5.0",
       "dependencies": {
         "@emotion/react": "^11.10.5",
         "@emotion/server": "^11.10.0",

frontend/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "pingvin-share",
-  "version": "0.0.1",
+  "name": "pingvin-share-frontend",
+  "version": "0.5.0",
   "scripts": {
     "dev": "next dev",
     "build": "next build",

frontend/src/pages/_app.tsx

@@ -28,7 +28,6 @@ function App({ Component, pageProps }: AppProps) {
   const systemTheme = useColorScheme();
   const router = useRouter();
   const preferences = usePreferences();
-
   const [colorScheme, setColorScheme] = useState<ColorScheme>("light");
   const [isLoading, setIsLoading] = useState(true);
   const [user, setUser] = useState<CurrentUser | null>(null);
@@ -89,7 +88,7 @@ function App({ Component, pageProps }: AppProps) {
                     <Container>
                       <Component {...pageProps} />
                     </Container>
-                  </UserContext.Provider>{" "}
+                  </UserContext.Provider>
                 </ConfigContext.Provider>
               )}
             </GlobalLoadingContext.Provider>

frontend/src/pages/admin/index.tsx

@@ -1,19 +1,17 @@
-import { Col, createStyles, Grid, Paper, Text } from "@mantine/core";
+import {
+  Center,
+  Col,
+  createStyles,
+  Grid,
+  Paper,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
 import Link from "next/link";
-import { TbSettings, TbUsers } from "react-icons/tb";
-
-const managementOptions = [
-  {
-    title: "User management",
-    icon: TbUsers,
-    route: "/admin/users",
-  },
-  {
-    title: "Configuration",
-    icon: TbSettings,
-    route: "/admin/config",
-  },
-];
+import { useEffect, useState } from "react";
+import { TbRefresh, TbSettings, TbUsers } from "react-icons/tb";
+import configService from "../../services/config.service";
 
 const useStyles = createStyles((theme) => ({
   item: {
@@ -33,27 +31,69 @@ const useStyles = createStyles((theme) => ({
 const Admin = () => {
   const { classes, theme } = useStyles();
 
+  const [managementOptions, setManagementOptions] = useState([
+    {
+      title: "User management",
+      icon: TbUsers,
+      route: "/admin/users",
+    },
+    {
+      title: "Configuration",
+      icon: TbSettings,
+      route: "/admin/config",
+    },
+  ]);
+
+  useEffect(() => {
+    configService.isNewReleaseAvailable().then((isNewReleaseAvailable) => {
+      if (isNewReleaseAvailable) {
+        setManagementOptions([
+          ...managementOptions,
+          {
+            title: "Update",
+            icon: TbRefresh,
+            route:
+              "https://github.com/stonith404/pingvin-share/releases/tag/v0.5.0",
+          },
+        ]);
+      }
+    });
+  }, []);
+
   return (
-    <Paper withBorder p={40}>
-      <Grid mt="md">
-        {managementOptions.map((item) => {
-          return (
-            <Col xs={6} key={item.route}>
-              <Paper
-                withBorder
-                component={Link}
-                href={item.route}
-                key={item.title}
-                className={classes.item}
-              >
-                <item.icon color={theme.colors.victoria[8]} size={35} />
-                <Text mt={7}>{item.title}</Text>
-              </Paper>
-            </Col>
-          );
-        })}
-      </Grid>
-    </Paper>
+    <>
+      <Title mb={30} order={3}>
+        Administration
+      </Title>
+      <Stack justify="space-between" style={{ height: "calc(100vh - 180px)" }}>
+        <Paper withBorder p={40}>
+          <Grid>
+            {managementOptions.map((item) => {
+              return (
+                <Col xs={6} key={item.route}>
+                  <Paper
+                    withBorder
+                    component={Link}
+                    href={item.route}
+                    key={item.title}
+                    className={classes.item}
+                  >
+                    <item.icon color={theme.colors.victoria[8]} size={35} />
+                    <Text mt={7}>{item.title}</Text>
+                  </Paper>
+                </Col>
+              );
+            })}
+          </Grid>
+        </Paper>
+
+        <Center>
+          <Text size="xs" color="dimmed">
+            Version {process.env.VERSION}
+          </Text>
+        </Center>
+      </Stack>
+    </>
   );
 };
 

frontend/src/services/config.service.ts

@@ -1,3 +1,4 @@
+import axios from "axios";
 import Config, { AdminConfig, UpdateConfig } from "../types/config.type";
 import api from "./api.service";
 
@@ -36,6 +37,15 @@ const sendTestEmail = async (email: string) => {
   await api.post("/configs/admin/testEmail", { email });
 };
 
+const isNewReleaseAvailable = async () => {
+  const response = (
+    await axios.get(
+      "https://api.github.com/repos/stonith404/pingvin-share/releases/latest"
+    )
+  ).data;
+  return response.tag_name.replace("v", "") != process.env.VERSION;
+};
+
 export default {
   list,
   listForAdmin,
@@ -43,4 +53,5 @@ export default {
   get,
   finishSetup,
   sendTestEmail,
+  isNewReleaseAvailable,
 };