Turned banner into an element with redux store

src/app/Features/UpdateBanner/UpdateApiFetch.ts

@@ -1,26 +1,25 @@
 import fetch from 'electron-fetch'
 
-import type {Type_GithubRelease} from '@/app/Repositories/Types/GithubRelease'
-
-const fetchVersions = async () => {
+import type { Type_GithubRelease } from '@/app/Repositories/Types/GithubRelease'
 
 
-        try {
-          let response = await fetch('https://api.github.com/repos/coltoneshaw/3c-portfolio-manager/releases?per_page=5',
-            {
-              method: 'GET',
-              timeout: 30000,
-            })
-
-          return await response.json<Type_GithubRelease[] | []>()
-        } catch (e) {
-          console.log(e);
-          return false
-        }
+const fetchVersions = async () => {
+  try {
+    let response = await fetch('https://api.github.com/repos/coltoneshaw/3c-portfolio-manager/releases?per_page=5',
+      {
+        method: 'GET',
+        timeout: 30000,
+      })
+
+    return await response.json<Type_GithubRelease[] | []>()
+  } catch (e) {
+    console.log(e);
+    return false
+  }
 
 }
 
 
 export {
-    fetchVersions
+  fetchVersions
 }

src/app/Features/UpdateBanner/UpdateBanner.tsx

@@ -1,66 +1,40 @@
 import React, {useEffect, useState} from 'react';
 
-// @ts-ignore
-import { version } from '#/package.json';
+
 import { openLink } from '@/utils/helperFunctions';
+import { useAppDispatch, useAppSelector } from '@/app/redux/hooks';
+import {updateBannerData} from './redux/bannerSlice'
 import './UpdateBanner.scss';
 
 import Close from '@mui/icons-material/Close';
 let latestLink = 'https://github.com/coltoneshaw/3c-portfolio-manager/releases'
 
 const UpdateBanner = () => {
 
-    const [show, changeShow] = useState(false)
-    const [latestVersion, updateLatestVersion] = useState('')
-
+    const {show, message, type} = useAppSelector(state => state.banner)
+    const dispatch = useAppDispatch()
 
-    const hideBanner = () => {
-        changeShow( false )
+    const returnBannerElement = (type: 'updateVersion' | '', message: string) => {
+        console.error({type, message})
+        if(type == 'updateVersion') {
+            return (<p> There is a new update available! Click <a  onClick={() => openLink(latestLink + '/tag/' + message)}>here</a> to download {message}.</p>)
+        }
     }
-
-    const openVersionLink = () => openLink(latestLink)
 
-
-    useEffect(() => {
-
-        window.ThreeCPM.Repository.Pm.versions()
-            .then((versionData:any) => {
-
-                if(versionData == undefined || versionData[0] == undefined){
-                    return
-                }
-
-                // check to see if this is a beta version or a full release before displaying
-                const currentVersion = versionData.filter((release:any) => !release.prerelease)[0]
-                updateLatestVersion(currentVersion.tag_name)
-                latestLink = currentVersion.html_url
-                if("v" + version != currentVersion.tag_name) changeShow(true)
-
-            })
-    }, []) 
-
-    // 1. Query the api to see if the version matches
-
-
-
     const renderBanner = () => {
         if(show) {
             return (
                 <div className="update-mainDiv">
-
-                    {/* @ts-ignore */}
-                <p> There is a new update available! Click <a  onClick={() => openVersionLink()} >here</a> to download {latestVersion}.</p>
-                <Close className="closeIcon" onClick={ () => hideBanner()}/>
+                    {returnBannerElement(type, message)}
+                    <Close className="closeIcon" onClick={ () => dispatch( updateBannerData({show: false, message: '', type: ''}))}/>
                 </div>
             )
         }
     }
 
     return (
         <>
-       {
-           renderBanner()
-        }
+            {renderBanner()}
         </>
     )
 }

src/app/Features/UpdateBanner/redux/bannerSlice.ts

@@ -0,0 +1,29 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+type banner = 'updateVersion' | ''
+
+const initialState = {
+    show: false,
+    message: '',
+    type: <banner> ''
+}
+
+
+export const bannerSlice = createSlice({
+    name: 'banner',
+    initialState,
+    reducers: {
+        updateBannerData: (state, action: {payload: {show: boolean, message: string, type: banner}}) => {
+            const {show, message, type} = action.payload
+            state.show = show;
+            state.message = message
+            state.type = type
+        }
+    }
+})
+
+export const {
+    updateBannerData
+} = bannerSlice.actions;
+
+export default bannerSlice.reducer

src/app/app.tsx

@@ -1,34 +1,49 @@
-import React, {useEffect, useLayoutEffect, useState} from 'react';
+import React, { useEffect, useLayoutEffect, useState } from 'react';
 
 import './App.global.scss';
 import Sidebar from './Components/Sidebar/Sidebar';
 import { HashRouter } from 'react-router-dom'
-
 import { MainWindow } from "@/app/Pages/Index"
 
 import { useThemeProvidor } from './Context/ThemeEngine';
 
 import UpdateBanner from './Features/UpdateBanner/UpdateBanner';
 
 
-import { useAppSelector } from '@/app/redux/hooks';
+import { useAppSelector, useAppDispatch } from '@/app/redux/hooks';
 import { updateConfig } from '@/app/redux/config/configActions';
 import { updateAllDataQuery } from './redux/threeCommas/Actions';
 
+// @ts-ignore
+import { version } from '#/package.json';
+import { updateBannerData } from '@/app/Features/UpdateBanner/redux/bannerSlice';
+
 const App = () => {
 
   const themeEngine = useThemeProvidor();
   const currentProfile = useAppSelector(state => state.config.currentProfile)
-  const [profile, updateLocalProfile] = useState( () => currentProfile)
+  const dispatch = useAppDispatch()
+  const [profile, updateLocalProfile] = useState(() => currentProfile)
   const { styles } = themeEngine
-  
+
   useEffect(() => {
     updateConfig();
   }, []);
 
+  useEffect(() => {
+    window.ThreeCPM.Repository.Pm.versions()
+      .then(versionData => {
+        if (!versionData || !versionData[0]) return
+        const currentVersion = versionData.filter((release: any) => !release.prerelease)[0]
+        if ("v" + version != currentVersion.tag_name) {
+          dispatch(updateBannerData({ show: true, message: currentVersion.tag_name, type: 'updateVersion' }))
+        }
+      })
+  }, [])
+
   useLayoutEffect(() => {
-    if(currentProfile.id == profile.id) return
-    if(currentProfile && currentProfile?.statSettings?.reservedFunds.filter(a => a.is_enabled).length > 0) {
+    if (currentProfile.id == profile.id) return
+    if (currentProfile && currentProfile?.statSettings?.reservedFunds.filter(a => a.is_enabled).length > 0) {
       updateAllDataQuery(currentProfile, 'fullSync');
       console.log('Changing to a new profile')
       updateLocalProfile(currentProfile)
@@ -40,9 +55,9 @@ const App = () => {
   return (
     <HashRouter>
       <div style={styles} className="rootDiv">
-          <UpdateBanner />
-          <Sidebar />
-          <MainWindow />
+        <UpdateBanner />
+        <Sidebar />
+        <MainWindow />
       </div>
     </HashRouter>
   )

src/app/redux/store.ts

@@ -1,13 +1,15 @@
 import { configureStore } from '@reduxjs/toolkit'
-import configSlice from './config/configSlice'
-import threeCommasSlice from './threeCommas/threeCommasSlice'
-import settingsSlice from '../Pages/Settings/Redux/settingsSlice'
+import configSlice from '@/app/redux/config/configSlice'
+import threeCommasSlice from '@/app/redux/threeCommas/threeCommasSlice'
+import settingsSlice from '@/app/Pages/Settings/Redux/settingsSlice'
+import bannerSlice from '@/app/Features/UpdateBanner/redux/bannerSlice'
 
 const store = configureStore({
   reducer: {
     config: configSlice,
     threeCommas: threeCommasSlice,
-    settings: settingsSlice
+    settings: settingsSlice,
+    banner: bannerSlice
   },
   devTools​: true
 })

src/types/preload.ts

@@ -47,7 +47,7 @@ export interface binance {
     coinData: () => Promise< BinanceTicketPrice | false >
 }
 export interface pm {
-    versions: () => Promise<Type_GithubRelease | false >
+    versions: () => Promise<Type_GithubRelease[] | false >
 }
 
 interface mainPreload {