Add OpenMemory (#2676)

Co-authored-by: Saket Aryan <94069182+whysosaket@users.noreply.github.com> Co-authored-by: Saket Aryan <saketaryan2002@gmail.com>
2025-05-13 08:30:59 -07:00
parent 8d61d73d2f
commit f51b39db91
172 changed files with 17846 additions and 0 deletions
@@ -0,0 +1,145 @@
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Category, Client } from "../../../components/types";
+import { MemoryTable } from "./MemoryTable";
+import { MemoryPagination } from "./MemoryPagination";
+import { CreateMemoryDialog } from "./CreateMemoryDialog";
+import { PageSizeSelector } from "./PageSizeSelector";
+import { useMemoriesApi } from "@/hooks/useMemoriesApi";
+import { useRouter, useSearchParams } from "next/navigation";
+import { MemoryTableSkeleton } from "@/skeleton/MemoryTableSkeleton";
+
+export function MemoriesSection() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const { fetchMemories } = useMemoriesApi();
+  const [memories, setMemories] = useState<any[]>([]);
+  const [totalItems, setTotalItems] = useState(0);
+  const [totalPages, setTotalPages] = useState(1);
+  const [isLoading, setIsLoading] = useState(true);
+
+  const currentPage = Number(searchParams.get("page")) || 1;
+  const itemsPerPage = Number(searchParams.get("size")) || 10;
+  const [selectedCategory, setSelectedCategory] = useState<Category | "all">(
+    "all"
+  );
+  const [selectedClient, setSelectedClient] = useState<Client | "all">("all");
+
+  useEffect(() => {
+    const loadMemories = async () => {
+      setIsLoading(true);
+      try {
+        const searchQuery = searchParams.get("search") || "";
+        const result = await fetchMemories(
+          searchQuery,
+          currentPage,
+          itemsPerPage
+        );
+        setMemories(result.memories);
+        setTotalItems(result.total);
+        setTotalPages(result.pages);
+      } catch (error) {
+        console.error("Failed to fetch memories:", error);
+      }
+      setIsLoading(false);
+    };
+
+    loadMemories();
+  }, [currentPage, itemsPerPage, fetchMemories, searchParams]);
+
+  const setCurrentPage = (page: number) => {
+    const params = new URLSearchParams(searchParams.toString());
+    params.set("page", page.toString());
+    params.set("size", itemsPerPage.toString());
+    router.push(`?${params.toString()}`);
+  };
+
+  const handlePageSizeChange = (size: number) => {
+    const params = new URLSearchParams(searchParams.toString());
+    params.set("page", "1"); // Reset to page 1 when changing page size
+    params.set("size", size.toString());
+    router.push(`?${params.toString()}`);
+  };
+
+  if (isLoading) {
+    return (
+      <div className="w-full bg-transparent">
+        <MemoryTableSkeleton />
+        <div className="flex items-center justify-between mt-4">
+          <div className="h-8 w-32 bg-zinc-800 rounded animate-pulse" />
+          <div className="h-8 w-48 bg-zinc-800 rounded animate-pulse" />
+          <div className="h-8 w-32 bg-zinc-800 rounded animate-pulse" />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full bg-transparent">
+      <div>
+        {memories.length > 0 ? (
+          <>
+            <MemoryTable />
+            <div className="flex items-center justify-between mt-4">
+              <PageSizeSelector
+                pageSize={itemsPerPage}
+                onPageSizeChange={handlePageSizeChange}
+              />
+              <div className="text-sm text-zinc-500 mr-2">
+                Showing {(currentPage - 1) * itemsPerPage + 1} to{" "}
+                {Math.min(currentPage * itemsPerPage, totalItems)} of{" "}
+                {totalItems} memories
+              </div>
+              <MemoryPagination
+                currentPage={currentPage}
+                totalPages={totalPages}
+                setCurrentPage={setCurrentPage}
+              />
+            </div>
+          </>
+        ) : (
+          <div className="flex flex-col items-center justify-center py-12 text-center">
+            <div className="rounded-full bg-zinc-800 p-3 mb-4">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className="h-6 w-6 text-zinc-400"
+              >
+                <path d="M21 9v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7"></path>
+                <path d="M16 2v6h6"></path>
+                <path d="M12 18v-6"></path>
+                <path d="M9 15h6"></path>
+              </svg>
+            </div>
+            <h3 className="text-lg font-medium">No memories found</h3>
+            <p className="text-zinc-400 mt-1 mb-4">
+              {selectedCategory !== "all" || selectedClient !== "all"
+                ? "Try adjusting your filters"
+                : "Create your first memory to see it here"}
+            </p>
+            {selectedCategory !== "all" || selectedClient !== "all" ? (
+              <Button
+                variant="outline"
+                onClick={() => {
+                  setSelectedCategory("all");
+                  setSelectedClient("all");
+                }}
+              >
+                Clear Filters
+              </Button>
+            ) : (
+              <CreateMemoryDialog />
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}