feat: add browser features to browse by version (#125)

* feat: add browser features to browse by version

* chore: verify whether version exist

* chore: add link on versions

* chore: udpate imports

* chore: use mui links

* test: add unit test

* chore: Add todo list

* chore: remove imports

src/pages/Version/Version.tsx

@@ -19,10 +19,27 @@ export function getRouterPackageName(params): string {
   return packageName;
 }
 
+function fillTitle(text) {
+  return `Verdaccio - ${text}`;
+}
+
+function isVersionValid(packageMeta, packageVersion): boolean {
+  const hasVersion = typeof packageVersion !== 'undefined';
+  if (!hasVersion) {
+    // if is undefined, that means versions does not exist, we continue
+    return true;
+  }
+
+  const hasMatchVersion = Object.keys(packageMeta.versions).includes(packageVersion);
+  return hasMatchVersion;
+}
+
 const Version = ({ match: { params } }) => {
   const pkgName = getRouterPackageName(params);
   const [readMe, setReadme] = useState();
   const [packageName, setPackageName] = useState(pkgName);
+  // eslint-disable-next-line no-unused-vars
+  const [packageVersion, setPackageVersion] = useState(params.version);
   const [packageMeta, setPackageMeta] = useState();
   const [isLoading, setIsLoading] = useState(true);
   const [notFound, setNotFound] = useState(false);
@@ -30,27 +47,37 @@ const Version = ({ match: { params } }) => {
   useEffect(() => {
     (async () => {
       try {
-        const packageMeta = (await callDetailPage(packageName)) as Partial<StateInterface>;
-        const readMe = (await callReadme(packageName)) as Partial<StateInterface>;
-        setReadme(readMe);
-        setPackageMeta(packageMeta);
-        setIsLoading(false);
+        const packageMeta = (await callDetailPage(packageName, packageVersion)) as Partial<StateInterface>;
+        const readMe = (await callReadme(packageName, packageVersion)) as Partial<StateInterface>;
+        if (isVersionValid(packageMeta, packageVersion)) {
+          setReadme(readMe);
+          setPackageMeta(packageMeta);
+          setIsLoading(false);
+        } else {
+          setIsLoading(false);
+          setNotFound(true);
+        }
       } catch (error) {
         setNotFound(true);
         setIsLoading(false);
       }
     })();
-  }, [packageName]);
+  }, [packageName, packageVersion]);
 
   useEffect(() => {
-    document.title = `Verdaccio - ${packageName}`;
-  }, [packageName]);
+    if (!packageVersion) {
+      document.title = fillTitle(packageName);
+    } else {
+      document.title = fillTitle(`${packageName}@${packageVersion}`);
+    }
+  }, [packageName, packageVersion]);
 
   useEffect(() => {
     const pkgName = getRouterPackageName(params);
 
     setPackageName(pkgName);
-  }, [params]);
+    setPackageVersion(params.version);
+  }, [params, setPackageName, setPackageVersion]);
 
   const isNotFound = notFound || typeof packageMeta === 'undefined' || typeof packageName === 'undefined' || typeof readMe === 'undefined';
   const renderContent = (): React.ReactElement<HTMLElement> => {
@@ -63,7 +90,9 @@ const Version = ({ match: { params } }) => {
     }
   };
 
-  return <DetailContextProvider value={{ packageMeta, readMe, packageName, enableLoading: setIsLoading }}>{renderContent()}</DetailContextProvider>;
+  return (
+    <DetailContextProvider value={{ packageMeta, packageVersion, readMe, packageName, enableLoading: setIsLoading }}>{renderContent()}</DetailContextProvider>
+  );
 };
 
 export default Version;

src/pages/Version/types.ts

@@ -2,6 +2,7 @@ import { PackageMetaInterface } from '../../../types/packageMeta';
 
 export interface DetailContextProps {
   packageMeta: PackageMetaInterface;
+  packageVersion?: string;
   readMe: string;
   packageName: string;
   enableLoading: () => void;
@@ -11,6 +12,7 @@ export interface VersionPageConsumerProps {
   packageMeta: PackageMetaInterface;
   readMe: string;
   packageName: string;
+  packageVersion?: string;
   // FIXME: looking for the appropiated type here
   enableLoading: any;
 }