[issue-765] Fix rendering tab based on url (#773)

Author: xavierfacq

src/components/Temurin/Tabs/index.tsx

@@ -47,7 +47,8 @@ const Tabs = ({ updaterAction, Table, openModalWithChecksum }) => {
   const [arch, updateArch] = useState("any")
   const [version, udateVersion] = useState("any")
 
-  const [active, setActive] = useState(data.mostRecentLts.version)
+  const [activeVersionSelectorTab, setActiveVersionSelectorTab] = useState(data.mostRecentLts.version)
+
   const [releases, setReleases] = useState(null)
 
   /**
@@ -87,20 +88,24 @@ const Tabs = ({ updaterAction, Table, openModalWithChecksum }) => {
 
       // init the default selected Version, if any from the param 'version' or from 'variant'
       let defaultSelectedVersion = data.mostRecentLts.version
+      let defaultActiveVersionSelectorTab = data.mostRecentLts.version
       const versionParam = queryStringParams.version
       if (versionParam) {
         let versionParamStr = versionParam.toString()
         let versionParamNum = Number(versionParamStr)
 
         if (versionParamStr.toLowerCase() === "latest") {
           // get the latest version of the list
-          defaultSelectedVersion = LTSVersions.sort(
-            (a, b) => b.node.version - a.node.version,
-          )[0].node.version
-        } else if (
-          LTSVersions.findIndex(version => version.node.version === versionParamNum) >= 0
-        ) {
-          defaultSelectedVersion = versionParamNum
+          defaultSelectedVersion = LTSVersions.sort((a, b) => b.node.version - a.node.version,)[0].node.version;
+          defaultActiveVersionSelectorTab = defaultSelectedVersion;
+        } else if (LTSVersions.findIndex(version => version.node.version === versionParamNum) >= 0) {
+          // it is a valid LTS version
+          defaultSelectedVersion = versionParamNum;
+          defaultActiveVersionSelectorTab = versionParamNum;
+        } else {
+          // it is another valid version
+          defaultSelectedVersion = versionParamNum;
+          defaultActiveVersionSelectorTab = 1;
         }
       }
 
@@ -119,6 +124,7 @@ const Tabs = ({ updaterAction, Table, openModalWithChecksum }) => {
       osUpdater(defaultSelectedOS);
       archUpdater(defaultSelectedArch);
       versionUpdater(defaultSelectedVersion);
+      setActiveVersionSelectorTab(defaultActiveVersionSelectorTab);
 
       // OK we can loaded elements
       setReady(true)
@@ -157,13 +163,13 @@ const Tabs = ({ updaterAction, Table, openModalWithChecksum }) => {
       <section className="py-8 md:pt-16 px-6 w-full">
         <div className="w-full flex flex-col items-start justify-start sm:items-center sm:justify-center">
           <VersionSelector
-            active={active}
-            setActive={setActive}
+            activeVersionTab={activeVersionSelectorTab}
+            setActiveVersionTab={setActiveVersionSelectorTab}
             versions={LTSVersions}
             updateVersion={udateVersion}
             defaultVersion={data.mostRecentLts.version}
           />
-          {active === 1 ? (
+          {activeVersionSelectorTab === 1 ? (
             <ReleaseSelector
               versions={data.allVersions}
               updateVersion={versionUpdater}

src/components/Temurin/VersionSelector/index.tsx

@@ -3,44 +3,44 @@ import React, { useCallback } from "react"
 import { setURLParam } from "../../../util/setURLParam"
 
 const VersionSelector = ({
-  active,
-  setActive,
+  activeVersionTab,
+  setActiveVersionTab,
   versions,
   updateVersion,
   defaultVersion,
 }) => {
-  const setVersion = useCallback(version => {
-    if (version === 1) {
+  const setActiveTabVersion = useCallback(newActiveVersionTab => {
+    if (newActiveVersionTab === 1) {
       setURLParam("version", defaultVersion)
       updateVersion(defaultVersion)
     } else {
-      setURLParam("version", version)
-      updateVersion(version)
+      setURLParam("version", newActiveVersionTab)
+      updateVersion(newActiveVersionTab)
     }
-    setActive(version)
+    setActiveVersionTab(newActiveVersionTab)
   }, [])
 
   return (
     <div className="w-full max-w-[1264px] mx-auto ">
       <div className="overflow-auto relative min-w-full w-full ">
         <span className="h-[1px] w-full bg-[#3E3355] inline-block absolute bottom-0 z-[-1]"></span>
         <div className="flex space-x-10 whitespace-nowrap   lg:justify-center py-3">
-          <button onClick={() => setVersion(1)}>
+          <button onClick={() => setActiveTabVersion(1)}>
             <span
               className={` py-3  w-full text-base font-normal leading-6 
-                outline-none cursor-pointer transition-all duration-200 ease-in-out ${active === 1 ? "border-primary  border-b-[2px] text-white" : "text-[#8a809e] border-transparent  border-b"}`}
+                outline-none cursor-pointer transition-all duration-200 ease-in-out ${activeVersionTab === 1 ? "border-primary  border-b-[2px] text-white" : "text-[#8a809e] border-transparent  border-b"}`}
             >
               All Versions
             </span>
           </button>
           {versions.map((version, index) => (
             <button
               key={index}
-              onClick={() => setVersion(version.node.version)}
+              onClick={() => setActiveTabVersion(version.node.version)}
             >
               <span
                 className={` py-3  w-full text-base font-normal leading-6
-                    outline-none cursor-pointer transition-all duration-200 ease-in-out ${active === version.node.version ? "border-primary  border-b-[2px] text-white" : "text-[#8a809e] border-transparent  border-b"}`}
+                    outline-none cursor-pointer transition-all duration-200 ease-in-out ${activeVersionTab === version.node.version ? "border-primary  border-b-[2px] text-white" : "text-[#8a809e] border-transparent  border-b"}`}
               >
                 JDK {version.node.label}
               </span>