adds download asset sorting

Author: fdoflorenzano

src/hooks/download.js

@@ -51,7 +51,8 @@ export const usePreparedReleases = (releases) => {
           month: 'long',
           day: 'numeric'
         }),
-        assets: []
+        assets: [],
+        assetsByOs: { Windows: [], MacOS: [], Linux: [] }
       };
 
       // Prepare release assets
@@ -66,6 +67,20 @@ export const usePreparedReleases = (releases) => {
         });
       }
 
+      for (let asset of item.assets) {
+        if (asset.os in item.assetsByOs) {
+          item.assetsByOs[asset.os].push(asset);
+        }
+      }
+      for (let os in item.assetsByOs) {
+        item.assetsByOs[os].sort((a, b) => {
+          if (a.bit === b.bit) return 0;
+          if (a.bit != null && a.bit.includes('Intel')) return -1;
+          if (b.bit != null && b.bit.includes('Intel')) return 1;
+          return 0;
+        });
+      }
+
       prepared.push(item);
     }
 
@@ -87,13 +102,13 @@ export const useMachineOS = (releases) => {
     [setSelected]
   );
 
-  const selectOS = (os) => {
-    const osReleases = releases[os];
-    const lastAsset = osReleases[osReleases.length - 1];
-    selectAsset(lastAsset);
-  };
-
   useEffect(() => {
+    const selectOS = (os) => {
+      const osReleases = releases[os];
+      const firstAsset = osReleases[0];
+      selectAsset(firstAsset);
+    };
+
     const { userAgent } = navigator;
     if (userAgent.search('Windows') !== -1) {
       selectOS('Windows');
@@ -104,7 +119,7 @@ export const useMachineOS = (releases) => {
     } else {
       selectOS('Windows');
     }
-  }, []);
+  }, [releases, selectAsset]);
 
   return [selected, selectAsset];
 };

src/templates/download.js

@@ -1,4 +1,4 @@
-import React, { memo, useMemo } from 'react';
+import React, { memo } from 'react';
 import { navigate, graphql } from 'gatsby';
 import { useIntl } from 'react-intl';
 import classnames from 'classnames';
@@ -120,17 +120,7 @@ const Download = ({ data }) => {
 const DownloadSection = memo(({ release, onAfterDownload }) => {
   const intl = useIntl();
 
-  const releasesObject = useMemo(() => {
-    const assetsObject = { Windows: [], MacOS: [], Linux: [] };
-    for (let asset of release.assets) {
-      if (asset.os in assetsObject) {
-        assetsObject[asset.os].push(asset);
-      }
-    }
-    return assetsObject;
-  }, [release]);
-
-  const [selected] = useMachineOS(releasesObject);
+  const [selected] = useMachineOS(release.assetsByOs);
 
   return (
     <div className={css.downloadSection}>
@@ -157,21 +147,21 @@ const DownloadSection = memo(({ release, onAfterDownload }) => {
         <OSSection
           logoComponent={<LogoWindows />}
           osName="Windows"
-          assets={releasesObject.Windows}
+          assets={release.assetsByOs.Windows}
           selected={selected}
           onAfterDownload={onAfterDownload}
         />
         <OSSection
           logoComponent={<LogoMac />}
           osName="MacOS"
-          assets={releasesObject.MacOS}
+          assets={release.assetsByOs.MacOS}
           selected={selected}
           onAfterDownload={onAfterDownload}
         />
         <OSSection
           logoComponent={<LogoLinux />}
           osName="Linux"
-          assets={releasesObject.Linux}
+          assets={release.assetsByOs.Linux}
           selected={selected}
           onAfterDownload={onAfterDownload}
         />