feat: add file tree repository view

Signed-off-by: roman-kiselenko <roman.kiselenko.dev@gmail.com>

Author: roman-kiselenko

README.md

@@ -28,9 +28,8 @@
 
 ### Preview
 
-<p align="center">
-   <img src="assets/web_1.png" alt="screenshot" width="700" />
-</p>
+<img src="assets/dark.png" alt="screenshot" width="45%" />
+<img src="assets/light.png" alt="screenshot" width="45%" />
 
 ### Getting Started
 

assets/dark.png

@@ -12,65 +12,30 @@ import columns from '@/components/views/ColumnDef';
 import { Input } from '@/components/ui/input';
 import { useAuth } from '@/context/AuthProvider';
 
-type FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] };
+// type FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] };
 
 export function RepoViewPage() {
   const { user, repoPath } = useParams<{ user: string; repoPath: string }>();
   const repos = useReposState();
   const repoFiles = useRepoFilesState();
   const [searchQuery, setSearchQuery] = useState('');
   const { logout, AuthDisabled } = useAuth();
-  const fileTree: FileTreeItem[] = [
-    {
-      name: 'components',
-      items: [
-        {
-          name: 'ui',
-          items: [
-            { name: 'button.tsx' },
-            { name: 'card.tsx' },
-            { name: 'dialog.tsx' },
-            { name: 'input.tsx' },
-            { name: 'select.tsx' },
-            { name: 'table.tsx' },
-          ],
-        },
-        { name: 'login-form.tsx' },
-        { name: 'register-form.tsx' },
-      ],
-    },
-    {
-      name: 'lib',
-      items: [{ name: 'utils.ts' }, { name: 'cn.ts' }, { name: 'api.ts' }],
-    },
-    {
-      name: 'hooks',
-      items: [
-        { name: 'use-media-query.ts' },
-        { name: 'use-debounce.ts' },
-        { name: 'use-local-storage.ts' },
-      ],
-    },
-    {
-      name: 'types',
-      items: [{ name: 'index.d.ts' }, { name: 'api.d.ts' }],
-    },
-    {
-      name: 'public',
-      items: [{ name: 'favicon.ico' }, { name: 'logo.svg' }, { name: 'images' }],
-    },
-    { name: 'app.tsx' },
-    { name: 'layout.tsx' },
-    { name: 'globals.css' },
-    { name: 'package.json' },
-    { name: 'tsconfig.json' },
-    { name: 'README.md' },
-    { name: '.gitignore' },
-  ];
+
+  useEffect(() => {
+    if (!repoPath) return;
+    if (!repos.repos.get().length) {
+      getRepos('');
+    }
+  }, [repoPath]);
+
+  useEffect(() => {
+    if (!user || !repoPath) return;
+    getRepoFiles(user, repoPath);
+  }, [user]);
 
   return (
     <div className="flex-grow overflow-auto">
-      <div className="flex flex-row py-2 px-2 items-center justify-between">
+      <div className="flex flex-row py-2 px-2 items-center justify-between mx-3">
         <Input
           placeholder="Filter by name..."
           className="placeholder:text-muted-foreground flex h-6 w-full rounded-md bg-transparent py-2 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50"
@@ -83,23 +48,24 @@ export function RepoViewPage() {
         )}
       </div>
 
+      <div className="flex flex-row py-2 px-2 items-center justify-between mx-3">
+        <div className="text-sm">Author: {repoFiles.author.get()}</div>
+        <div className="text-sm">Email: {repoFiles.email.get()}</div>
+        <div className="text-sm">Date: {repoFiles.date.get()}</div>
+        <div className="text-sm">Hash: {repoFiles.hash.get()}</div>
+      </div>
       <div className="grid grid-cols-1">
         <div className="mx-3">
-          <div className="flex flex-col gap-1">{fileTree.map((item) => renderItem(item))}</div>
-          {/* <DataTable
-            menuDisabled={true}
-            kind="repo"
-            noResult={false}
-            columns={columns as any}
-            data={repoFiles.files.get() as any}
-          /> */}
+          <div className="flex flex-col gap-1">
+            {(repoFiles.files.get() || []).map((item) => renderItem(item))}
+          </div>
         </div>
       </div>
     </div>
   );
 }
 
-const renderItem = (fileItem: FileTreeItem) => {
+const renderItem = (fileItem: any) => {
   if ('items' in fileItem) {
     return (
       <Collapsible key={fileItem.name}>

assets/light.png

@@ -2,21 +2,33 @@ import { hookstate, useHookstate } from '@hookstate/core';
 import { toast } from 'sonner';
 import { call } from '@/lib/api';
 
-export const repoFilesState = hookstate<{ files: object[] }>({
+export const repoFilesState = hookstate<{
+  files: object[];
+  hash: '';
+  message: '';
+  author: '';
+  email: '';
+  date: '';
+}>({
   files: [],
+  hash: '',
+  message: '',
+  author: '',
+  email: '',
+  date: '',
 });
 
-export async function getRepoFiles(query: string, userName: string | undefined, repoName: string | undefined) {
+export async function getRepoFiles(userName: string | undefined, repoName: string | undefined) {
   try {
-    let { files } = await call<any[]>(`repos/files/${userName}/${repoName}`);
-    if (query !== '') {
-      files = files.filter((c) => {
-        return String(c.filename || '')
-          .toLowerCase()
-          .includes(query.toLowerCase());
-      });
-    }
-    repoFilesState.files.set(files);
+    let response = await call<any[]>(`repos/files/${userName}/${repoName}`);
+    repoFilesState.set({
+      files: response.files,
+      hash: response.hash,
+      message: response.message,
+      author: response.author,
+      email: response.email,
+      date: response.date,
+    });
   } catch (error: any) {
     toast.error('Error! Cant load files\n' + error.message);
     console.error('Error! Cant load files\n' + error.message);

assets/web_1.png

@@ -0,0 +1,157 @@
+package route
+
+import (
+	"log/slog"
+	"net/http"
+	"strings"
+
+	"smolgit/pkg/model"
+
+	"github.com/gin-gonic/gin"
+	gogit "github.com/go-git/go-git/v5"
+	"github.com/go-git/go-git/v5/plumbing/object"
+)
+
+// type Node struct {
+// 	Name     string           `json:"filename"`
+// 	IsDir    bool             `json:"is_dir"`
+// 	Children map[string]*Node `json:"children"`
+// 	Path     string           `json:"path"`
+// }
+
+type Node struct {
+	Name  string `json:"name,omitempty"`
+	Items []Node `json:"items,omitempty"`
+}
+
+// buildFileTree constructs the hierarchical tree from a list of file paths
+func buildFileTree(paths []string) *Node {
+	root := &Node{
+		Name:  "",
+		Items: []Node{},
+	}
+
+	for _, path := range paths {
+		isDir := strings.HasSuffix(path, "/")
+		path = strings.TrimSuffix(path, "/") // Remove trailing slash
+
+		parts := strings.Split(path, "/")
+		current := root
+
+		// Traverse through the directory structure
+		for i := 0; i < len(parts)-1; i++ {
+			part := parts[i]
+			found := false
+
+			// Check if a child with this name already exists
+			for j := range current.Items {
+				if current.Items[j].Name == part {
+					current = &current.Items[j]
+					found = true
+					break
+				}
+			}
+
+			if !found {
+				// Create a new directory node
+				newNode := &Node{
+					Name:  part,
+					Items: []Node{},
+				}
+				current.Items = append(current.Items, *newNode)
+				current = newNode
+			}
+		}
+
+		// Handle the final part (file or directory)
+		lastPart := parts[len(parts)-1]
+		if isDir {
+			// Add a new directory node
+			newNode := &Node{
+				Name:  lastPart,
+				Items: []Node{},
+			}
+			current.Items = append(current.Items, *newNode)
+		} else {
+			// Add a file node
+			current.Items = append(current.Items, Node{Name: lastPart})
+		}
+	}
+
+	return root
+}
+
+// collectFlatNodes returns a flat list of nodes, with each directory containing its items
+func collectFlatNodes(node *Node) []Node {
+	var result []Node
+
+	// Function to recursively traverse the tree
+	var traverse func(*Node)
+	traverse = func(n *Node) {
+		// Add current node to the result
+		result = append(result, Node{Name: n.Name, Items: n.Items})
+
+		// If this node has children, recursively process them
+		for _, child := range n.Items {
+			traverse(&child)
+		}
+	}
+
+	traverse(node)
+	return result
+}
+
+func (r *Route) Files(c *gin.Context) {
+	user, repoPath := c.Param("user"), c.Param("path")
+	fullPath := "/" + user + "/" + repoPath
+	// TODO more secure way to open repo
+	// check user permissions
+	slog.Debug("open repository", "fullpath", r.cfg.GitPath+fullPath)
+	repo, err := gogit.PlainOpen(r.cfg.GitPath + fullPath)
+	if err != nil {
+		slog.Error("cant find repository", "err", err)
+		c.JSON(http.StatusNotFound, gin.H{"title": "cant find any repository"})
+		return
+	}
+	headRef, err := repo.Head()
+	if err != nil {
+		slog.Error("cant get repo HEAD", "err", err)
+		c.JSON(http.StatusNotFound, gin.H{"title": "cant get repo HEAD"})
+		return
+	}
+	lastCommit, err := repo.CommitObject(headRef.Hash())
+	if err != nil {
+		slog.Error("cant get commit object", "err", err)
+		c.JSON(http.StatusNotFound, gin.H{"title": "cant get commit object"})
+		return
+	}
+	files, err := lastCommit.Files()
+	if err != nil {
+		slog.Error("cant get commit files", "err", err)
+		c.JSON(http.StatusNotFound, gin.H{"title": "cant get commit files"})
+		return
+	}
+
+	// Build file tree
+	paths := []string{}
+	if err := files.ForEach(func(f *object.File) error {
+		paths = append(paths, f.Name)
+		return nil
+	}); err != nil {
+		slog.Error("repo files", "err", err)
+		c.JSON(http.StatusNotFound, gin.H{"title": repoPath + " not found"})
+		return
+	}
+	root := buildFileTree(paths)
+
+	c.JSON(http.StatusOK, gin.H{
+		"hash":    lastCommit.Hash.String(),
+		"message": lastCommit.Message,
+		"author":  lastCommit.Author.Name,
+		"email":   lastCommit.Author.Email,
+		"date":    lastCommit.Author.When,
+		"title":   "Files",
+		"repo":    model.Repository{Path: repoPath, User: &model.User{Name: user}},
+		"files":   root.Items,
+	})
+}

frontend/src/components/views/RepoViewPage.tsx

@@ -0,0 +1,60 @@
+package route
+
+import (
+	"log/slog"
+	"net/http"
+	"slices"
+	"time"
+
+	"smolgit/pkg/model"
+
+	"github.com/gin-gonic/gin"
+	"github.com/golang-jwt/jwt/v5"
+	"golang.org/x/crypto/bcrypt"
+)
+
+type creds struct {
+	Username string `json:"username"`
+	Password string `json:"password"`
+}
+
+func (r *Route) Login(c *gin.Context) {
+	var req creds
+	if err := c.ShouldBindJSON(&req); err != nil {
+		slog.Error("parsing", "err", err.Error())
+		c.JSON(http.StatusBadRequest, gin.H{"message": err.Error()})
+		return
+	}
+	index := slices.IndexFunc(r.users, func(u model.User) bool {
+		return u.Name == req.Username
+	})
+	if index == -1 {
+		slog.Error("no such user", "user", req.Username)
+		c.JSON(http.StatusUnauthorized, gin.H{"message": "invalid credentials"})
+		return
+	}
+	u := r.users[index]
+	if bcrypt.CompareHashAndPassword([]byte(u.Password), []byte(req.Password)) != nil {
+		slog.Error("bad password", "user", req.Username, "password", req.Password)
+		c.JSON(http.StatusUnauthorized, gin.H{"message": "invalid credentials"})
+		return
+	}
+
+	exp := time.Now().Add(1 * time.Hour)
+	claims := &model.Claims{
+		Username: u.Name,
+		Role:     u.Role,
+		RegisteredClaims: jwt.RegisteredClaims{
+			ExpiresAt: jwt.NewNumericDate(exp),
+		},
+	}
+	token := jwt.NewWithClaims(jwt.SigningMethodHS256, claims)
+	t, err := token.SignedString([]byte(r.cfg.ServerJWTKey))
+	if err != nil {
+		slog.Error("cant sign token", "user", req.Username, "password", req.Password)
+		c.JSON(http.StatusUnauthorized, gin.H{"message": "invalid credentials"})
+		return
+	}
+
+	c.JSON(http.StatusOK, gin.H{"token": t})
+}