Make commits count as default for preview (#255)

We execute the sort by commits when the page is loaded, to achieve that we use `useEffect` hook that runs a specified effect immediately after rendering the page. --------- Co-authored-by: Ahmed Basem <[email protected]>
aiidateam · Aug 17, 2023 · 967026a · 967026a
1 parent 4fa0f1d
commit 967026a
Showing 1 changed file with 20 additions and 11 deletions.
diff --git a/aiida-registry-app/src/Components/MainIndex.jsx b/aiida-registry-app/src/Components/MainIndex.jsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { Link, Route, Routes } from 'react-router-dom';
 import jsonData from '../plugins_metadata.json'
 import base64Icon from '../base64Icon';
@@ -16,9 +16,24 @@ const length = Object.keys(plugins).length;
 const currentPath = import.meta.env.VITE_PR_PREVIEW_PATH || "/aiida-registry/";
 
 function MainIndex() {
-    const [sortOption, setSortOption] = useState('alpha');
+    const [sortOption, setSortOption] = useState('commits');
     const [sortedData, setSortedData] = useState(plugins);
-    document.documentElement.style.scrollBehavior = 'auto';
+
+    useEffect(() => {
+      document.documentElement.style.scrollBehavior = 'auto';
+      setSortedData(sortByCommits(plugins));
+      setupScrollBehavior();
+    }, [plugins, setSortedData]);
+
+    function sortByCommits(plugins) {
+      const pluginsArray = Object.entries(plugins);
+
+      // Sort the array based on the commit_count value
+      pluginsArray.sort(([, pluginA], [, pluginB]) => pluginB.commits_count - pluginA.commits_count);
+
+      // Return a new object with the sorted entries
+      return Object.fromEntries(pluginsArray);
+    }
 
     function setupScrollBehavior() {
       var prevScrollpos = window.scrollY;
@@ -42,13 +57,7 @@ function MainIndex() {
 
       let sortedPlugins;
       if (option === 'commits') {
-        const pluginsArray = Object.entries(plugins);
-
-        // Sort the array based on the commit_count value
-        pluginsArray.sort(([, pluginA], [, pluginB]) => pluginB.commits_count - pluginA.commits_count);
-
-        // Create a new object with the sorted entries
-        sortedPlugins = Object.fromEntries(pluginsArray);
+        sortedPlugins = sortByCommits(plugins);
       }
       else if (option == 'alpha') {
         sortedPlugins = plugins;
@@ -89,8 +98,8 @@ function MainIndex() {
               <Select
                 value={sortOption} label = "Sort" onChange={(e) => handleSort(e.target.value)}
               >
-                <MenuItem value= 'alpha'>Alphabetical</MenuItem>
                 <MenuItem value='commits'>Commits Count</MenuItem>
+                <MenuItem value= 'alpha'>Alphabetical</MenuItem>
               </Select>
             </FormControl>
           </Box>