feat: format date, sort repository files

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

Author: roman-kiselenko

frontend/src/components/views/ColumnDef.tsx

@@ -7,12 +7,13 @@ import { useEffect, useState } from 'react';
 import { useReposState, getRepos } from '@/store/repositories';
 import { useRepoFilesState, getRepoFiles } from '@/store/repofiles';
 import { Repo } from '@/types';
-import { DataTable } from '@/components/ui/DataTable';
-import columns from '@/components/views/ColumnDef';
 import { Input } from '@/components/ui/input';
 import { useAuth } from '@/context/AuthProvider';
+import { CardContent, CardHeader } from '@/components/ui/card';
+import timeAgo from '@/timeAgo';
+import moment from 'moment';
 
-// 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 }>();
@@ -30,12 +31,12 @@ export function RepoViewPage() {
 
   useEffect(() => {
     if (!user || !repoPath) return;
-    getRepoFiles(user, repoPath);
-  }, [user]);
+    getRepoFiles(searchQuery, user, repoPath);
+  }, [user, searchQuery]);
 
   return (
     <div className="flex-grow overflow-auto">
-      <div className="flex flex-row py-2 px-2 items-center justify-between mx-3">
+      <div className="flex flex-row py-2 px-4 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"
@@ -48,25 +49,31 @@ 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 className="flex flex-row py-2 px-4 items-center justify-between mx-3">
+        <div className="text-sm hover:text-ring">{repoFiles.author.get()}</div>
+        <div className="text-sm hover:text-ring">{repoFiles.email.get()}</div>
+        <div className="text-sm hover:text-ring" title={repoFiles.date.get()}>
+          Last commit: {timeAgo.format(moment(repoFiles.date.get()).toDate(), 'mini')}
+        </div>
+        <div className="text-sm hover:text-ring">Last hash: {repoFiles.hash.get()}</div>
       </div>
-      <div className="grid grid-cols-1">
-        <div className="mx-3">
+      <div className="grid grid-cols-2">
+        <CardContent className="px-4">
           <div className="flex flex-col gap-1">
-            {(repoFiles.files.get() || []).map((item) => renderItem(item))}
+            {repoFiles.files
+              .get()
+              .toSorted((a: any, b: any) => b.items?.length - a.items?.length)
+              .map((item) => renderItem(item as FileTreeItem))}
           </div>
-        </div>
+          <div className="flex flex-col gap-1"></div>
+        </CardContent>
       </div>
     </div>
   );
 }
 
-const renderItem = (fileItem: any) => {
-  if ('items' in fileItem) {
+const renderItem = (fileItem: FileTreeItem) => {
+  if ('items' in fileItem && fileItem.items.length > 0) {
     return (
       <Collapsible key={fileItem.name}>
         <CollapsibleTrigger asChild>

frontend/src/components/views/RepoViewPage.tsx

@@ -18,11 +18,24 @@ export const repoFilesState = hookstate<{
   date: '',
 });
 
-export async function getRepoFiles(userName: string | undefined, repoName: string | undefined) {
+export async function getRepoFiles(
+  query: string,
+  userName: string | undefined,
+  repoName: string | undefined,
+) {
   try {
     let response = await call<any[]>(`repos/files/${userName}/${repoName}`);
+    let files = response.files;
+    if (query !== '') {
+      files = files.filter((c) => {
+        return String(c.name || '')
+          .toLowerCase()
+          .includes(query.toLowerCase());
+      });
+    }
+
     repoFilesState.set({
-      files: response.files,
+      files: files,
       hash: response.hash,
       message: response.message,
       author: response.author,

frontend/src/store/repofiles.ts

@@ -12,16 +12,9 @@ import (
 	"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"`
+	Name  string `json:"name"`
+	Items []Node `json:"items"`
 }
 
 // buildFileTree constructs the hierarchical tree from a list of file paths
@@ -74,7 +67,7 @@ func buildFileTree(paths []string) *Node {
 			current.Items = append(current.Items, *newNode)
 		} else {
 			// Add a file node
-			current.Items = append(current.Items, Node{Name: lastPart})
+			current.Items = append(current.Items, Node{Name: lastPart, Items: []Node{}})
 		}
 	}