feat: repo content navigation (#45)

* feat: add content forward navigation

* feat: navigation functions with proper rendering

---------

Co-authored-by: stabldev <stabldev@gmail.com>

Author: stabldev

src/app/(app)/[repo]/_components/content-item.tsx

@@ -7,11 +7,20 @@ interface Props {
   username: string | undefined;
   repo: string;
   content: Content;
+  navigateTo: (path: string) => void;
 }
 
-export default function ContentItem({ username, repo, content }: Props) {
+export default function ContentItem({ username, repo, content, navigateTo }: Props) {
   const Icon = content.type === 'dir' ? Folder : File;
 
+  function handleClick() {
+    if (content.type === 'dir') {
+      navigateTo(content.path);
+    } else {
+      // handle file click
+    }
+  }
+
   return (
     <div key={content.path} className="hover:bg-secondary/50 grid grid-cols-5 gap-2 p-3">
       <div className="col-span-2 flex items-center gap-2">
@@ -21,7 +30,9 @@ export default function ContentItem({ username, repo, content }: Props) {
             content.type === 'dir' && 'fill-muted-foreground',
           )}
         />
-        <button className="text-sm hover:underline">{content.name}</button>
+        <button className="text-sm hover:underline" onClick={handleClick}>
+          {content.name}
+        </button>
       </div>
       <a
         href={`https://github.com/${username}/${repo}/commit/${content.lastCommit.sha}`}

src/app/(app)/[repo]/_components/repo-contents.tsx

@@ -5,7 +5,7 @@ import useRepoContents from '@/hooks/use-repo-contents';
 import { useStableSession } from '@/hooks/use-stable-session';
 import { getRepoConfig } from '@/lib/api/github';
 import { useRepoStore } from '@/stores/repo.store';
-import { Plus, Search } from 'lucide-react';
+import { Folder, Plus, Search } from 'lucide-react';
 import { useCallback, useEffect } from 'react';
 import { toast } from 'sonner';
 import ContentItem from './content-item';
@@ -19,7 +19,7 @@ interface Props {
 export default function RepoContents({ repo, setIsConfigDialogOpen }: Props) {
   const { session, status } = useStableSession();
   const { setConfig, setIsValid } = useRepoStore((state) => state);
-  const { contents, isLoading } = useRepoContents(repo);
+  const { contents, isLoading, navigateTo, navigateBack, canGoBack } = useRepoContents(repo);
 
   const loadConfigFilePromise = useCallback(
     () =>
@@ -99,6 +99,15 @@ export default function RepoContents({ repo, setIsConfigDialogOpen }: Props) {
           <span className="col-span-2">Last commit message</span>
           <span className="ml-auto">Last commit date</span>
         </div>
+        {canGoBack && (
+          <button
+            className="hover:bg-secondary/50 flex w-full items-center gap-2 p-3"
+            onClick={navigateBack}
+          >
+            <Folder className="text-muted-foreground fill-muted-foreground size-4" />
+            <span className="text-muted-foreground text-sm">..</span>
+          </button>
+        )}
         {isLoading || status === 'loading' || !contents ? (
           <ContentsSkeleton />
         ) : (
@@ -108,6 +117,7 @@ export default function RepoContents({ repo, setIsConfigDialogOpen }: Props) {
               username={session?.user?.username}
               repo={repo}
               content={content}
+              navigateTo={navigateTo}
             />
           ))
         )}

src/hooks/use-repo-contents.ts

@@ -1,39 +1,94 @@
-import { getLastCommit } from '@/lib/api/github';
+import { getLastCommit, getPathContents } from '@/lib/api/github';
 import { useRepoStore } from '@/stores/repo.store';
 import { Content } from '@/types/github';
 import { useQuery } from '@tanstack/react-query';
+import { useCallback, useMemo, useState } from 'react';
 import { useStableSession } from './use-stable-session';
 
 export default function useRepoContents(repo: string) {
   const { session } = useStableSession();
   const { config } = useRepoStore((state) => state);
 
-  async function getRootContent(path: string): Promise<Content> {
-    const lastCommit = await getLastCommit({
+  const [history, setHistory] = useState<string[]>(['<root>']);
+  const currentPath = history[history.length - 1];
+  const canGoBack = history.length > 1;
+
+  const fetchParams = useMemo(
+    () => ({
       accessToken: session?.accessToken,
       username: session?.user?.username,
       repo,
-      path,
-    });
+    }),
+    [session, repo],
+  );
 
-    return {
-      lastCommit,
-      name: path,
-      path,
-      type: 'dir',
-    };
-  }
+  const _getContentDetails = useCallback(
+    async (path: string, type: Content['type']): Promise<Content> => {
+      const lastCommit = await getLastCommit({
+        ...fetchParams,
+        path,
+      });
 
-  const { data: contents, isLoading } = useQuery<Content[]>({
-    queryKey: ['repoContents', repo],
-    queryFn: async () => {
-      if (!config) return [];
+      return {
+        lastCommit,
+        name: path.split('/').pop() ?? path,
+        path,
+        type,
+      };
+    },
+    [fetchParams],
+  );
+
+  const _getRootContents = useCallback(async (): Promise<Content[]> => {
+    if (!config) return [];
+
+    const paths = [...Object.values(config.contentTypes).map((item) => item.path), '.gitloom'];
+    return Promise.all(paths.map((path) => _getContentDetails(path, 'dir')));
+  }, [config, _getContentDetails]);
+
+  const _getPathContents = useCallback(
+    async (path: string): Promise<Content[]> => {
+      const contents = await getPathContents({
+        ...fetchParams,
+        path,
+      });
 
-      const paths = [...Object.values(config.contentTypes).map((item) => item.path), '.gitloom'];
-      return Promise.all(paths.map((path) => getRootContent(path)));
+      return Promise.all(contents.map((item) => _getContentDetails(item.path, item.type)));
     },
+    [fetchParams, _getContentDetails],
+  );
+
+  const { data: contents, isLoading } = useQuery<Content[]>({
+    queryKey: ['repoContents', repo, currentPath],
+    queryFn: async () =>
+      currentPath === '<root>' ? await _getRootContents() : await _getPathContents(currentPath),
     enabled: !!config,
   });
 
-  return { contents, isLoading };
+  const navigateTo = useCallback((path: string) => {
+    setHistory((prev) => [...prev, path]);
+  }, []);
+
+  const navigateBack = useCallback(() => {
+    setHistory((prev) => prev.slice(0, prev.length - 1));
+  }, []);
+
+  const navigateBackTo = useCallback((path: string) => {
+    setHistory((prev) => {
+      const targetIdx = prev.findIndex((p) => p === path);
+      if (targetIdx === -1) return prev;
+
+      return prev.slice(0, targetIdx + 1);
+    });
+  }, []);
+
+  return {
+    contents,
+    isLoading,
+    currentPath,
+    navigateTo,
+    navigateBack,
+    navigateBackTo,
+    canGoBack,
+  };
 }

src/lib/api/github.ts

@@ -129,7 +129,7 @@ export async function createContent({
  * Returns the contents inside a specific path.
  * Includes both files and directories.
  */
-export async function getFolderContents({
+export async function getPathContents({
   accessToken,
   username,
   repo,