Add useBrowsePath

Author: brendan-kellam

packages/web/src/app/[domain]/browse/hooks/useBrowseNavigation.ts

@@ -13,15 +13,46 @@ export type BrowseHighlightRange = {
 
 export const HIGHLIGHT_RANGE_QUERY_PARAM = 'highlightRange';
 
-interface NavigateToPathOptions {
+export interface GetBrowsePathProps {
     repoName: string;
     revisionName?: string;
     path: string;
     pathType: 'blob' | 'tree';
     highlightRange?: BrowseHighlightRange;
     setBrowseState?: Partial<BrowseState>;
+    domain: string;
 }
 
+export const getBrowsePath = ({
+    repoName,
+    revisionName = 'HEAD',
+    path,
+    pathType,
+    highlightRange,
+    setBrowseState,
+    domain,
+}: GetBrowsePathProps) => {
+    const params = new URLSearchParams();
+
+    if (highlightRange) {
+        const { start, end } = highlightRange;
+
+        if ('column' in start && 'column' in end) {
+            params.set(HIGHLIGHT_RANGE_QUERY_PARAM, `${start.lineNumber}:${start.column},${end.lineNumber}:${end.column}`);
+        } else {
+            params.set(HIGHLIGHT_RANGE_QUERY_PARAM, `${start.lineNumber},${end.lineNumber}`);
+        }
+    }
+
+    if (setBrowseState) {
+        params.set(SET_BROWSE_STATE_QUERY_PARAM, JSON.stringify(setBrowseState));
+    }
+
+    const browsePath = `/${domain}/browse/${repoName}@${revisionName}/-/${pathType}/${path}${params.keys.length > 0 ? `?${params.toString()}` : ''}`;
+    return browsePath;
+}
+
+
 export const useBrowseNavigation = () => {
     const router = useRouter();
     const domain = useDomain();
@@ -33,24 +64,18 @@ export const useBrowseNavigation = () => {
         pathType,
         highlightRange,
         setBrowseState,
-    }: NavigateToPathOptions) => {
-        const params = new URLSearchParams();
-
-        if (highlightRange) {
-            const { start, end } = highlightRange;
-
-            if ('column' in start && 'column' in end) {
-                params.set(HIGHLIGHT_RANGE_QUERY_PARAM, `${start.lineNumber}:${start.column},${end.lineNumber}:${end.column}`);
-            } else {
-                params.set(HIGHLIGHT_RANGE_QUERY_PARAM, `${start.lineNumber},${end.lineNumber}`);
-            }
-        }
-
-        if (setBrowseState) {
-            params.set(SET_BROWSE_STATE_QUERY_PARAM, JSON.stringify(setBrowseState));
-        }
+    }: Omit<GetBrowsePathProps, 'domain'>) => {
+        const browsePath = getBrowsePath({
+            repoName,
+            revisionName,
+            path,
+            pathType,
+            highlightRange,
+            setBrowseState,
+            domain,
+        });
 
-        router.push(`/${domain}/browse/${repoName}@${revisionName}/-/${pathType}/${path}?${params.toString()}`);
+        router.push(browsePath);
     }, [domain, router]);
 
     return {

packages/web/src/app/[domain]/browse/hooks/useBrowsePath.ts

@@ -0,0 +1,32 @@
+'use client';
+
+import { useMemo } from "react";
+import { getBrowsePath, GetBrowsePathProps } from "./useBrowseNavigation";
+import { useDomain } from "@/hooks/useDomain";
+
+export const useBrowsePath = ({
+    repoName,
+    revisionName,
+    path,
+    pathType,
+    highlightRange,
+    setBrowseState,
+}: Omit<GetBrowsePathProps, 'domain'>) => {
+    const domain = useDomain();
+
+    const browsePath = useMemo(() => {
+        return getBrowsePath({
+            repoName,
+            revisionName,
+            path,
+            pathType,
+            highlightRange,
+            setBrowseState,
+            domain,
+        });
+    }, [repoName, revisionName, path, pathType, highlightRange, setBrowseState, domain]);
+
+    return {
+        path: browsePath,
+    }
+}