feat(front): display server's status and app version (#4)

fix #2

Author: bemble

Dockerfile

@@ -30,6 +30,9 @@ RUN [[ -d /app/public ]] || CI=false GENERATE_SOURCEMAP=false npm run build:dock
 # Final image
 FROM scratch
 
+ARG APP_VERSION
+ENV APP_VERSION=${APP_VERSION}
+
 # copy front files
 COPY --from=front-builder /app/public /app/public
 

README.md

@@ -141,7 +141,7 @@ Your web browser should open on `http://localhost:3000`. The app is configured t
 - [x] optimize build time
 - [x] allow user to set the public url for shortened content
 - [x] move from sqlite3 to modernc.org/sqlite to compile without CGO (and use scratch, lighter image)
-- [ ] display status with version
+- [x] display status with version
 - [ ] allow user to change language
 - [ ] add all options in front when create a new text
 - [ ] error handling (on add and delete)

front/src/App.tsx

@@ -31,12 +31,13 @@ function App() {
       <ThemeProvider theme={theme}>
         <AppContext.Provider value={appContextValue}>
           <div className={classes.root}>
-            {!isLoading ? <><MainMenu />
-            <Content>
-              <Route path="/" element={<Links />} />
-              <Route path="/texts" element={<Texts />} />
-              <Route path="/files" element={<Files />} />
-            </Content>
+            {!isLoading ? <>
+              <MainMenu />
+              <Content>
+                <Route path="/" element={<Links />} />
+                <Route path="/texts" element={<Texts />} />
+                <Route path="/files" element={<Files />} />
+              </Content>
             </> : null}
           </div>
         </AppContext.Provider>

front/src/components/main_menu/index.tsx

@@ -1,3 +1,4 @@
+import { useContext } from "react";
 import classes from "./styles.module.scss";
 import Item from "./item";
 
@@ -6,10 +7,14 @@ import {Link as LinkIcon, TextSnippetOutlined as TextIcon, FilePresent as FileIc
 import { AppBar, Drawer, Toolbar } from "@mui/material";
 import { useTranslation } from "react-i18next";
 
+import AppContext from "../../app_context";
+import classNames from "classnames";
+
 const MainMenu:React.FC = () => {
   const {t} = useTranslation();
+  const app = useContext(AppContext);
 
-    return <>
+  return <>
     <AppBar position="fixed" className={classes.root_bottom} sx={{ display: { xs: 'block', md: 'none' }, top: 'auto', bottom: 0 }}>
       <Toolbar>
         <Item to="/" color="blue"><LinkIcon />{t("menu.links")}</Item>
@@ -22,6 +27,8 @@ const MainMenu:React.FC = () => {
         <Item to="/" color="blue"><LinkIcon />{t("menu.links")}</Item>
         <Item to="/texts" color="purple"><TextIcon />{t("menu.texts")}</Item>
         <Item to="/files" color="pink"><FileIcon />{t("menu.files")}</Item>
+        <div className={classes.spacer} />
+        <div className={classes.info}><span className={classNames(classes.status, {[classes.up]: app?.status === "up"})} /> {app?.version}</div>
     </Drawer>
   </>;
 };

front/src/components/main_menu/styles.module.scss

@@ -41,4 +41,25 @@
   .spacer {
     flex-grow: 1;
   }
+
+  .info {
+    width: 100%;
+    text-align: center;
+    font-family: monospace;
+    font-size: 12px;
+    color: $gray-400;
+  }
+
+  .status {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    border-radius: 4px;
+    background: $red-400;
+
+
+    &.up {
+      background: $green-400;
+    }
+  }
 }