Show the app version on the landing page #2289

globaldothealth · Feb 21, 2022 · 988d50a · 988d50a
1 parent 8837c94
commit 988d50a
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 1 deletion.
diff --git a/verification/curator-service/ui/src/components/landing-page/LandingPage.tsx b/verification/curator-service/ui/src/components/landing-page/LandingPage.tsx
@@ -25,6 +25,8 @@ import { SnackbarAlert } from '../SnackbarAlert';
 import { useParams } from 'react-router-dom';
 
 import Helmet from 'react-helmet';
+import { getVersion } from '../../redux/app/thunk';
+import { selectVersion } from '../../redux/app/selectors';
 
 interface StylesProps {
     smallHeight: boolean;
@@ -102,6 +104,7 @@ const LandingPage = (): JSX.Element => {
         selectForgotPasswordPopupOpen,
     );
     const { open, message } = useAppSelector(selectSnackbar);
+    const version = useAppSelector(selectVersion);
 
     // Url parameters from reset password link
     const { token, id } = useParams<UrlParams>();
@@ -131,6 +134,11 @@ const LandingPage = (): JSX.Element => {
         localStorage.setItem('searchQuery', lastLocation.search);
     }, [lastLocation]);
 
+    // retrieve the app version from the curator service
+    useEffect(() => {
+        dispatch(getVersion());
+    });
+
     return (
         <>
             <Helmet>
@@ -152,6 +160,9 @@ const LandingPage = (): JSX.Element => {
                     <div className={classes.linksContainer}>
                         <div>
                             <Typography>More information</Typography>
+                            <div className={classes.link}>
+                                Version: {version}
+                            </div>
                             <div className={classes.link}>
                                 <a
                                     href="https://global.health/"

diff --git a/verification/curator-service/ui/src/redux/app/selectors.ts b/verification/curator-service/ui/src/redux/app/selectors.ts
@@ -8,3 +8,5 @@ export const selectFilterBreadcrumbs: (state: RootState) => ChipData[] = (
 ) => state.app.filterBreadcrumbs;
 export const selectIsLoading: (state: RootState) => boolean = (state) =>
     state.app.isLoading;
+export const selectVersion: (state: RootState) => string = (state) =>
+    state.app.version;
diff --git a/verification/curator-service/ui/src/redux/app/slice.ts b/verification/curator-service/ui/src/redux/app/slice.ts
@@ -1,17 +1,20 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { ChipData } from '../../components/App/App';
 import { getUserProfile, logout } from '../../redux/auth/thunk';
+import { getVersion } from './thunk';
 
 interface AppState {
     isLoading: boolean;
     searchQuery: string;
     filterBreadcrumbs: ChipData[];
+    version: string;
 }
 
 const initialState: AppState = {
     isLoading: false,
     searchQuery: '',
     filterBreadcrumbs: [],
+    version: 'loading…',
 };
 
 const appSlice = createSlice({
@@ -41,6 +44,13 @@ const appSlice = createSlice({
             state.isLoading = false;
         });
 
+        builder.addCase(getVersion.fulfilled, (state, action) => {
+            state.version = action.payload;
+        });
+        builder.addCase(getVersion.rejected, (state) => {
+            state.version = 'unable to get app version';
+        });
+
         builder.addCase(logout.pending, (state) => {
             state.isLoading = true;
         });

diff --git a/verification/curator-service/ui/src/redux/app/thunk.ts b/verification/curator-service/ui/src/redux/app/thunk.ts
@@ -0,0 +1,7 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+
+export const getVersion = createAsyncThunk('app/getVersion', async () => {
+    const response = await axios.get<string>('/version');
+    return response.data;
+});
diff --git a/verification/curator-service/ui/src/setupProxy.js b/verification/curator-service/ui/src/setupProxy.js
@@ -2,7 +2,7 @@ const { createProxyMiddleware } = require('http-proxy-middleware');
 module.exports = function (app) {
     if (process.env.REACT_APP_PROXY_URL) {
         app.use(
-            /\/(api|auth)/,
+            /\/(api|auth|version)/,
             createProxyMiddleware({
                 // Proxy API requests to curator service.
                 target: process.env.REACT_APP_PROXY_URL,