Added notification to show when an update is ava

ilable
pelaxa · Sep 12, 2024 · 88028dc · 88028dc
1 parent 62bd1c8
commit 88028dc
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 7 deletions.
diff --git a/.env b/.env
@@ -1 +1,3 @@
-PORT = 3000
+PORT = 3000
+REACT_APP_VERSION = $npm_package_version
+REACT_APP_NAME = $npm_package_name
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ff3-ofx",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "homepage": "./",
   "private": true,
   "licenses": [

diff --git a/src/App.tsx b/src/App.tsx
@@ -7,7 +7,7 @@ import { FF3Account, FF3AddTransactionWrapper, FF3Error, FF3TransactionSplit, FF
 import Button from '@mui/material/Button';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import CheckIcon from '@mui/icons-material/Check';
-import { Box, Checkbox, Collapse, FormControlLabel, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography } from '@mui/material';
+import { Alert, Box, Checkbox, Collapse, FormControlLabel, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography } from '@mui/material';
 import FileDrop from 'components/FileDrop';
 import * as OFXParser from 'node-ofx-parser';
 import Summary from 'components/Summary';
@@ -48,6 +48,17 @@ function App() {
     // The current progress for the transactions being processed
     const [showFileDrop, setShowFileDrop] = useState(true);
     const [errorMessage, setErrorMessage] = useState<string>('');
+    // Set to true if an update is available
+    const [updateAvailable, setUpdateAvailable] = useState(false);
+
+    const checkForUpdates = useCallback(async () => {
+        const myVersion = `${process.env.REACT_APP_VERSION}`;
+        const latestVersion = await ApiService.getLatestVersion();
+        if (myVersion !== latestVersion?.substring(1)) {
+            console.error('THERE IS A NEW VERSION OUT', myVersion, latestVersion);
+            setUpdateAvailable(true);
+        }
+    }, []);
 
     /**
      * Fetch the list of accounts
@@ -404,11 +415,20 @@ function App() {
         }
     }, [accounts, init]);
 
+    useEffect(() => {
+        checkForUpdates();
+    }, [checkForUpdates]);
+
 
     const bankBalance: number = ofxData ? parseFloat(parseFloat('' + ofxData.balance).toFixed(2)) : 0;
 
     return (
         <div className="App">
+            {updateAvailable && (
+                <Alert variant="filled" severity="info">
+                    You are currently running <b>{process.env.REACT_APP_NAME}</b> version <b>{process.env.REACT_APP_VERSION}</b>.  There is a new version available <a href="https://github.com/pelaxa/ff3-ofx/releases/latest" target="_new">here</a>.
+                </Alert>
+            )}
             <div className="App-header">
                 <Collapse in={!token}>
                     <Box sx={{ width: '50%', margin: '0 auto' }}>
@@ -449,7 +469,7 @@ function App() {
                             <Table stickyHeader aria-label="collapsible sticky table">
                                 <TableHead>
                                     <TableRow>
-                                        <TableCell colSpan={3} style={{backgroundColor: '#eee'}}>
+                                        <TableCell colSpan={3} style={{ backgroundColor: '#eee' }}>
                                             <Typography sx={{ m: 1 }}>
                                                 <b>Account Number:</b> {ofxData?.accountNumber}, <b>Account Type:</b> {ofxData?.accountType}, <b>Org:</b> {ofxData?.org}, <b>Bank:</b> {bankName} ({ofxData?.intuitId})
                                             </Typography>

diff --git a/src/lib/apiService.ts b/src/lib/apiService.ts
@@ -17,11 +17,12 @@ const reset = () => {
     myHttpClient = undefined;
 }
 
-const getHttp = (token?: string| null) => {
+const getHttp = (token?: string| null, url?: string | null) => {
     if (token === null) {
-        myHttpClient = undefined;
-    } else if (!myHttpClient && token) {
+        reset();
+    } else if (token) {
         console.info('Creating http client...');
+        reset();
         myHttpClient = axios.create({
             baseURL: BASE_URL,
             headers: {
@@ -30,11 +31,41 @@ const getHttp = (token?: string| null) => {
             'Authorization': `Bearer ${token}`
             },
         });
+    } else if (!!url) {
+        reset();
+        myHttpClient = axios.create({
+            baseURL: url,
+            headers: {
+            'Content-type': 'application/json',
+            'Accept': 'application/json'
+            },
+        });
     }
 
     return myHttpClient;
 }
 
+const getLatestVersion = async(): Promise<string | null> => {
+    const response = await axios.get('https://api.github.com/repos/pelaxa/ff3-ofx/tags',{
+        headers: {
+            'Content-type': 'application/json',
+            'Accept': 'application/json'
+        },
+        ...exceptionHandling
+    } );
+
+    if (response && response.status) {
+        if (response.status === 200 && response.data.length > 0) {
+            console.info('tags', response.data);
+            return response.data[0].name;  // latest tag is on top
+          }
+    }
+
+    // Return null
+    return null;
+
+}
+
 const getAccounts = async(currentToken?: string): Promise<FF3Wrapper<FF3Account>[] | null> => {
     const http = getHttp(currentToken);
 
@@ -138,6 +169,7 @@ const ApiService = {
     getTransactions,
     getAccountTransactions,
     addTransaction,
+    getLatestVersion,
 };
 
 export default ApiService;