Add multiple releases to the update notice

src/components/modal/ReleaseNotes.tsx

@@ -1,25 +1,34 @@
 import React, { useEffect, useState } from 'react';
+import { Divider } from 'rsuite';
 import settings from 'electron-settings';
 import { shell } from 'electron';
 import axios from 'axios';
 import { InfoModal } from './Modal';
 import { StyledButton } from '../shared/styled';
 import { ConfigPanel } from '../settings/styled';
+import CenterLoader from '../loader/CenterLoader';
 
 const ReleaseNotes = () => {
   const [show, setShow] = useState(Boolean(settings.getSync('autoUpdateNotice')));
   const [releaseDetails, setReleaseDetails] = useState<any>();
+  const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
+    setIsLoading(true);
     const fetchReleaseNotes = async () => {
       const { data } = await axios.get(
-        'https://api.github.com/repos/jeffvli/sonixd/releases/latest'
+        'https://api.github.com/repos/jeffvli/sonixd/releases?per_page=4'
       );
 
-      setReleaseDetails({ tag: data.tag_name, notes: data.body });
+      setReleaseDetails(
+        data.map((release: any) => {
+          return { tag: release.tag_name, notes: release.body };
+        })
+      );
     };
 
     fetchReleaseNotes();
+    setIsLoading(false);
   }, []);
 
   if (!show) {
@@ -35,10 +44,17 @@ const ReleaseNotes = () => {
       }}
     >
       <ConfigPanel>
+        {isLoading && <CenterLoader />}
+
+        {releaseDetails?.map((release: { tag: string; notes: string }) => {
+          return (
+            <>
               <h1>
-          {releaseDetails?.tag}
+                {release?.tag}
                 <StyledButton
-            onClick={() => shell.openExternal('https://github.com/jeffvli/sonixd/releases/latest')}
+                  onClick={() =>
+                    shell.openExternal(`https://github.com/jeffvli/sonixd/releases/${release.tag}`)
+                  }
                   appearance="primary"
                   size="sm"
                   style={{ marginLeft: '10px' }}
@@ -46,7 +62,11 @@ const ReleaseNotes = () => {
                   View on GitHub
                 </StyledButton>
               </h1>
-        <p>{releaseDetails?.notes}</p>
+              <p>{release?.notes}</p>
+              <Divider />
+            </>
+          );
+        })}
       </ConfigPanel>
     </InfoModal>
   );