Merge pull request #46 from oss-slu/fix_sorting_behavior

Fully implemented sorting behavior for tools

web/js/tools.js

@@ -21,30 +21,29 @@ function getRecentlyUsedTools() {
  * Save recently used tools to local storage.
  */
 function saveRecentlyUsedTools(recentTools) {
-    console.log("Saving recent tools:", recentTools);
     localStorage.setItem(RECENTLY_USED_KEY, JSON.stringify(recentTools));
 }
 
 /**
  * Update recently used tools, move the clicked tool to the top.
  */
 function updateRecentlyUsedTools(clickedTool) {
-    // const recentTools = getRecentlyUsedTools();
-    // const existingIndex = recentTools.findIndex(tool => tool.label.toLowerCase() === clickedTool.label.toLowerCase());
-
-    // if (existingIndex !== -1) {
-    //     recentTools.splice(existingIndex, 1);
-    // }
-    console.log("updateRecentlyUsedTools called with:", clickedTool);
-    let recentTools = getRecentlyUsedTools();
-
-    // Remove the tool if it exists in recentTools, then add it to the top
-    recentTools = recentTools.filter(tool => tool.label.toLowerCase() !== clickedTool.label.toLowerCase());
-    recentTools.unshift(clickedTool);
-
-    const topThreeTools = recentTools.slice(0, 3);
-    saveRecentlyUsedTools(topThreeTools);
-    console.log("updated recent tools after click:", topThreeTools);
+    let allTools = getRecentlyUsedTools();
+
+    allTools = allTools.filter(
+        tool => tool.label.toLowerCase() !== clickedTool.label.toLowerCase()
+    );
+
+    allTools.unshift(clickedTool);
+
+    const updatedTools = [
+        ...allTools,
+        ...ToolsCatalog.filter(tool =>
+            !allTools.some(recentTool => recentTool.label === tool.label)
+        ),
+    ];
+
+    saveRecentlyUsedTools(updatedTools);
 }
 
 /**
@@ -87,7 +86,6 @@ function initializeTechnologies(config) {
  * Render tools, higlighting recently used ones.
  */
 function renderTools() {
-    console.log("renderTools is running");
     const toolSetContainer = document.getElementById('tool_set');
     if (!toolSetContainer) {
         console.error("Tool set container not found.");
@@ -97,33 +95,17 @@ function renderTools() {
     toolSetContainer.innerHTML = '';
 
     const recentTools = getRecentlyUsedTools();
-    const hasRecentlyUsedTools = recentTools.length > 0;
-
-    // Divide ToolsCatalog into recently used tools and non-recently-used tools
-    const recentlyUsedLabels = recentTools.map(tool => tool.label.toLowerCase());
-    const recentToolsSet = new Set(recentlyUsedLabels);
 
-    const recentlyUsedTools = ToolsCatalog.filter(tool =>
-        recentToolsSet.has(tool.label.toLowerCase())
-    );
-
-    const nonRecentlyUsedTools = ToolsCatalog.filter(tool =>
-        !recentToolsSet.has(tool.label.toLowerCase())
-    );
-
-    // Sort recently used tools based on their order in recentTools array
-    const sortedRecentlyUsedTools = recentlyUsedTools.sort(
-        (a, b) =>
-            recentToolsSet.has(a.label.toLowerCase()) - recentToolsSet.has(b.label.toLowerCase())
-    );
-
-    // Combine sorted recently used tools and non-recently-used tools
-    const sortedTools = [...sortedRecentlyUsedTools, ...nonRecentlyUsedTools];
+    const toolsToRender = recentTools.length > 0
+        ? [...recentTools, ...ToolsCatalog.filter(tool =>
+            !recentTools.some(recentTool => recentTool.label === tool.label)
+        )]
+        : [...ToolsCatalog];
 
     const toolsWrapper = document.createElement('div');
 
-    sortedTools.forEach((tool, index) => {
-        const isRecentlyUsed = hasRecentlyUsedTools && index < 3 && recentToolsSet.has(tool.label.toLowerCase()) ? `<span class="recent-badge">Recently used</span>` : '';
+    toolsToRender.forEach((tool, index) => {
+        const isRecentlyUsed = index < 3 ? `<span class="recent-badge">Recently used</span>` : '';
         const toolHTML = `
             <a href="${tool.view}" target="_blank" class="catalogEntry">
                 <figure class="thumb">
@@ -148,8 +130,6 @@ function renderTools() {
             handleToolClick(toolLabel);
         });
     });
-
-    console.log("rendered tool order:", sortedTools.map(tool => tool.label));
 }
 
 /**
@@ -189,8 +169,10 @@ window.onload = function() {
  * Handle tool click event to manage recently used logic and allow default navigation
  */
 function handleToolClick(toolLabel) {
-    console.log("handleToolClick called with:", toolLabel);
-    const clickedTool = ToolsCatalog.find(tool => tool.label === toolLabel);
+    const clickedTool = ToolsCatalog.find(
+        tool => tool.label.toLowerCase() === toolLabel.toLowerCase()
+    );
+
     if (clickedTool) {
         updateRecentlyUsedTools(clickedTool);
         renderTools();