From e98252ad008577179267724c7e8c43a87d8dded5 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Sat, 21 Sep 2024 17:20:52 +0200
Subject: [PATCH] add more hrefs for faster loading

---
 src/lib/components/IndustryTable.svelte      | 22 +++++---------------
 src/routes/industry/+page.svelte             | 18 +++++-----------
 src/routes/industry/all/+page.svelte         | 11 +++++-----
 src/routes/industry/sectors/+page.svelte     | 19 +++++------------
 src/routes/list/industry/[slug]/+page.svelte |  8 ++++---
 5 files changed, 26 insertions(+), 52 deletions(-)

diff --git a/src/lib/components/IndustryTable.svelte b/src/lib/components/IndustryTable.svelte
index b3b34c29..86bb7476 100644
--- a/src/lib/components/IndustryTable.svelte
+++ b/src/lib/components/IndustryTable.svelte
@@ -1,21 +1,8 @@
 <script lang="ts">
     import { abbreviateNumber } from '$lib/utils';
-    import { goto } from '$app/navigation';
     export let charNumber;
     export let industryList
 
-function formatFilename(industryName) {
-    // Replace spaces with hyphens
-    let formattedName = industryName?.replace(/ /g, '-');
-    // Replace "&" with "and"
-    formattedName = formattedName?.replace(/&/g, 'and');
-    // Remove any extra hyphens (e.g., from consecutive spaces)
-    formattedName = formattedName?.replace(/-{2,}/g, '-');
-    // Convert to lowercase for consistency
-    goto("/list/industry/"+formattedName?.toLowerCase())
-}
-
-
 
 </script>
 
@@ -38,12 +25,13 @@ function formatFilename(industryName) {
     <tbody>
         {#each industryList as item}
         <!-- row -->
-        <tr on:click={() => formatFilename(item?.industry)} class="cursor-pointer sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]">
-        <td class="hover:sm:text-white text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
-            {item?.industry?.length > charNumber ? item?.industry?.slice(0,charNumber) + "..." : item?.industry}
+        <tr class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]">
+        <td class="font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
+            <a href={`/list/industry/${item?.industry?.replace(/ /g, '-')?.replace(/&/g, 'and')?.replace(/-{2,}/g, '-')?.toLowerCase()}`} class="sm:hover:text-white text-blue-400">
+                {item?.industry?.length > charNumber ? item?.industry?.slice(0,charNumber) + "..." : item?.industry}
+            </a>
         </td>
 
-
         <td class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
             {item?.numStocks}
         </td>
diff --git a/src/routes/industry/+page.svelte b/src/routes/industry/+page.svelte
index e9eafaa2..90d0ab8c 100644
--- a/src/routes/industry/+page.svelte
+++ b/src/routes/industry/+page.svelte
@@ -58,16 +58,6 @@ const sectorNavigation = [
     },
 ]
 
-function sectorSelector(sector) {
-    const selectedSector = sectorNavigation?.find(item => item?.title === sector);
-
-    if (selectedSector) {
-      goto(selectedSector?.link);
-    } else {
-      // Handle the case when the sector is not found
-      console.error(`Sector not found: ${sector}`);
-    }
-  }
 
 
 
@@ -93,11 +83,13 @@ $: charNumber = $screenWidth < 640 ? 20 : 30;
               <!-- Content area -->
               <div class="w-full">
                 {#each sectorList as sector}
-                    <h2 on:click={() => sectorSelector(sector)} class="cursor-pointer text-white sm:hover:underline font-semibold text-lg sm:text-xl mt-5">
+                <div class="mt-4">
+                    <a href={sectorNavigation?.find(item => item?.title === sector)?.link} class=" cursor-pointer text-white sm:hover:underline font-semibold text-lg sm:text-xl ">
                         Sector: {sector} <svg class="inline-block h-6 w-6 -mt-1" viewBox="0 0 20 20" fill="white" style="max-width:40px"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
-                    </h2>
+                    </a>
+                </div>
                     
-                    <div class="border-t border-gray-600 mt-5"/>
+                    <div class="border-t border-gray-600 mt-5 "/>
 
                     <IndustryTable charNumber = {charNumber} industryList = {rawData[sector]} />
                     <div class="border-t border-gray-600 mt-5"/>
diff --git a/src/routes/industry/all/+page.svelte b/src/routes/industry/all/+page.svelte
index 30b1ad7e..ae81dcb3 100644
--- a/src/routes/industry/all/+page.svelte
+++ b/src/routes/industry/all/+page.svelte
@@ -1,7 +1,6 @@
 <script lang='ts'>
 import { screenWidth } from '$lib/store';
 import { abbreviateNumber } from '$lib/utils';
-import { goto } from '$app/navigation';
 
 export let data;
 let rawData = data?.getIndustryOverview;
@@ -14,7 +13,7 @@ function formatFilename(industryName) {
     // Remove any extra hyphens (e.g., from consecutive spaces)
     formattedName = formattedName?.replace(/-{2,}/g, '-');
     // Convert to lowercase for consistency
-    goto("/list/industry/"+formattedName?.toLowerCase())
+   return "/list/industry/"+formattedName?.toLowerCase();
 }
 
 
@@ -52,9 +51,11 @@ $: charNumber = $screenWidth < 640 ? 20 : 30;
                     <tbody>
                         {#each rawData as item}
                         <!-- row -->
-                        <tr on:click={() => formatFilename(item?.industry)} class="cursor-pointer sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]">
-                        <td class="hover:sm:text-white text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
-                            {item?.industry?.length > charNumber ? item?.industry?.slice(0,charNumber) + "..." : item?.industry}
+                        <tr class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]">
+                        <td class="font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
+                            <a href={`/list/industry/${item?.industry?.replace(/ /g, '-')?.replace(/&/g, 'and')?.replace(/-{2,}/g, '-')?.toLowerCase()}`} class="sm:hover:text-white text-blue-400">
+                                {item?.industry?.length > charNumber ? item?.industry?.slice(0,charNumber) + "..." : item?.industry}
+                            </a>
                         </td>
 
 
diff --git a/src/routes/industry/sectors/+page.svelte b/src/routes/industry/sectors/+page.svelte
index c844c32c..442eb632 100644
--- a/src/routes/industry/sectors/+page.svelte
+++ b/src/routes/industry/sectors/+page.svelte
@@ -57,17 +57,6 @@ const sectorNavigation = [
     },
 ]
 
-function sectorSelector(sector) {
-    const selectedSector = sectorNavigation?.find(item => item?.title === sector);
-
-    if (selectedSector) {
-      goto(selectedSector?.link);
-    } else {
-      // Handle the case when the sector is not found
-      console.error(`Sector not found: ${sector}`);
-    }
-  }
-
 
 $: charNumber = $screenWidth < 640 ? 20 : 30;
 
@@ -102,9 +91,11 @@ $: charNumber = $screenWidth < 640 ? 20 : 30;
                     <tbody>
                         {#each rawData as item}
                         <!-- row -->
-                        <tr on:click={() => sectorSelector(item?.sector)} class="cursor-pointer sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]">
-                        <td class="hover:sm:text-white text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
-                            {item?.sector?.length > charNumber ? item?.sector?.slice(0,charNumber) + "..." : item?.sector}
+                        <tr class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]">
+                        <td class="font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
+                            <a href={sectorNavigation?.find(listItem => listItem?.title === item?.sector)?.link} class="sm:hover:text-white text-blue-400">
+                                {item?.sector?.length > charNumber ? item?.sector?.slice(0,charNumber) + "..." : item?.sector}
+                            </a>
                         </td>
 
 
diff --git a/src/routes/list/industry/[slug]/+page.svelte b/src/routes/list/industry/[slug]/+page.svelte
index dbe1e34a..249eec52 100644
--- a/src/routes/list/industry/[slug]/+page.svelte
+++ b/src/routes/list/industry/[slug]/+page.svelte
@@ -192,11 +192,13 @@ function getPlotOptions() {
                           <tbody>
                             {#each stockList as item}
     
-                            <tr on:click={() => goto(`/stocks/${item?.symbol}`)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] cursor-pointer">
+                            <tr class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A]">
    
 
-                            <td class="text-sm sm:text-[1rem] whitespace-nowrap text-start text-blue-400">
-                                {item?.symbol}
+                            <td class="text-sm sm:text-[1rem] whitespace-nowrap text-start">
+                              <a href={`/stocks/${item?.symbol}`} class="sm:hover:text-white text-blue-400">
+                                 {item?.symbol}
+                              </a>
                             </td>
 
                             <td class="hidden sm:table-cell text-white text-sm sm:text-[1rem] whitespace-nowrap text-white text-start">