From 83287be4f1b8c7c72bfe29b268fb4dd55139df32 Mon Sep 17 00:00:00 2001
From: iMADi-ARCH <nandanaditya985@gmail.com>
Date: Mon, 22 May 2023 23:24:07 +0530
Subject: [PATCH] style: use Dialog component for /explore

---
 frontend/app/components/ui/Card.tsx   | 33 ++++++-----
 frontend/app/explore/DocumentItem.tsx | 34 +++++++++++
 frontend/app/explore/documentItem.tsx | 32 ----------
 frontend/app/explore/loading.tsx      |  9 +++
 frontend/app/explore/page.tsx         | 85 +++++++++++----------------
 frontend/app/explore/types.ts         |  4 ++
 6 files changed, 99 insertions(+), 98 deletions(-)
 create mode 100644 frontend/app/explore/DocumentItem.tsx
 delete mode 100644 frontend/app/explore/documentItem.tsx
 create mode 100644 frontend/app/explore/loading.tsx
 create mode 100644 frontend/app/explore/types.ts

diff --git a/frontend/app/components/ui/Card.tsx b/frontend/app/components/ui/Card.tsx
index 9c62be708..650730201 100644
--- a/frontend/app/components/ui/Card.tsx
+++ b/frontend/app/components/ui/Card.tsx
@@ -1,20 +1,25 @@
 import { cn } from "@/lib/utils";
-import { FC, HTMLAttributes } from "react";
+import { motion } from "framer-motion";
+import { FC, HTMLAttributes, LegacyRef, forwardRef } from "react";
 
 interface CardProps extends HTMLAttributes<HTMLDivElement> {}
 
-const Card: FC<CardProps> = ({ children, className, ...props }) => {
-  return (
-    <div
-      className={cn(
-        "shadow-md dark:shadow-primary/25 hover:shadow-xl transition-shadow rounded-xl overflow-hidden bg-white dark:bg-black border border-black/10 dark:border-white/25",
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-};
+const Card: FC<CardProps> = forwardRef(
+  ({ children, className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref as LegacyRef<HTMLDivElement>}
+        className={cn(
+          "shadow-md dark:shadow-primary/25 hover:shadow-xl transition-shadow rounded-xl overflow-hidden bg-white dark:bg-black border border-black/10 dark:border-white/25",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
 
+export const AnimatedCard = motion(Card);
 export default Card;
diff --git a/frontend/app/explore/DocumentItem.tsx b/frontend/app/explore/DocumentItem.tsx
new file mode 100644
index 000000000..dd7baface
--- /dev/null
+++ b/frontend/app/explore/DocumentItem.tsx
@@ -0,0 +1,34 @@
+"use client";
+import { FC } from "react";
+import { Document } from "./types";
+import Button from "../components/ui/Button";
+import Modal from "../components/ui/Modal";
+import { AnimatedCard } from "../components/ui/Card";
+
+interface DocumentProps {
+  document: Document;
+}
+
+const DocumentItem: FC<DocumentProps> = ({ document }) => {
+  return (
+    <AnimatedCard
+      initial={{ x: -64, opacity: 0 }}
+      animate={{ x: 0, opacity: 1 }}
+      className="flex items-center justify-between w-full p-5 gap-10"
+    >
+      <p className="text-lg leading-tight max-w-sm">{document.name}</p>
+      <Modal
+        title={document.name}
+        desc={""}
+        Trigger={<Button className="">View</Button>}
+      >
+        <div className="bg-white py-10 w-full h-1/2 overflow-auto rounded-lg prose">
+          <pre>{JSON.stringify(document, null, 2)}</pre>
+        </div>
+      </Modal>
+    </AnimatedCard>
+  );
+};
+
+DocumentItem.displayName = "DocumentItem";
+export default DocumentItem;
diff --git a/frontend/app/explore/documentItem.tsx b/frontend/app/explore/documentItem.tsx
deleted file mode 100644
index 45bb4896f..000000000
--- a/frontend/app/explore/documentItem.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { FC } from 'react';
-import { motion } from 'framer-motion';
-
-interface DocumentProps {
-  document: {
-    name: string;
-    size: string;
-  };
-  viewDocument: (document: { name: string; size: string }) => void;
-}
-
-const DocumentItem: FC<DocumentProps> = ({ document, viewDocument }) => {
-  return (
-    <motion.div
-      initial={{ x: -64, opacity: 0 }}
-      animate={{ x: 0, opacity: 1 }}
-      exit={{ x: 64, opacity: 0 }}
-      className="flex items-center justify-between w-1/2 p-4 mb-4 bg-white shadow rounded"
-    >
-      <p className="text-lg">{document.name}</p>
-      <button
-        onClick={() => viewDocument(document)}
-        className="py-2 px-4 bg-blue-500 text-white rounded mr-2 hover:bg-blue-600 transition duration-200"
-      >
-        View
-      </button>
-    </motion.div>
-  );
-};
-
-DocumentItem.displayName = 'DocumentItem';
-export default DocumentItem;
\ No newline at end of file
diff --git a/frontend/app/explore/loading.tsx b/frontend/app/explore/loading.tsx
new file mode 100644
index 000000000..0c3982984
--- /dev/null
+++ b/frontend/app/explore/loading.tsx
@@ -0,0 +1,9 @@
+import { FC } from "react";
+
+interface loadingProps {}
+
+const loading: FC<loadingProps> = ({}) => {
+  return <div>loading...</div>;
+};
+
+export default loading;
diff --git a/frontend/app/explore/page.tsx b/frontend/app/explore/page.tsx
index 00c2c7dce..65fee1f59 100644
--- a/frontend/app/explore/page.tsx
+++ b/frontend/app/explore/page.tsx
@@ -1,58 +1,39 @@
-'use client';
-import { useState, useEffect } from 'react';
-import axios from 'axios';
-import DocumentItem from './documentItem';
-
-interface Document {
-    name: string;
-    size: string;
-}
+"use client";
+import { useState, useEffect } from "react";
+import axios from "axios";
+import DocumentItem from "./DocumentItem";
+import { Document } from "./types";
 
 export default function ExplorePage() {
-    const [documents, setDocuments] = useState<Document[]>([]);
-    const [selectedDocument, setSelectedDocument] = useState<Document | null>(null);
+  const [documents, setDocuments] = useState<Document[]>([]);
 
-    useEffect(() => {
-        fetchDocuments();
-    }, []);
+  useEffect(() => {
+    fetchDocuments();
+  }, []);
 
-    const fetchDocuments = async () => {
-        try {
-            console.log(`Fetching documents from ${process.env.NEXT_PUBLIC_BACKEND_URL}/explore`);
-            const response = await axios.get<{ documents: Document[] }>(`${process.env.NEXT_PUBLIC_BACKEND_URL}/explore`);
-            setDocuments(response.data.documents);
-        } catch (error) {
-            console.error('Error fetching documents', error);
-            setDocuments([]);
-        }
-    };
+  const fetchDocuments = async () => {
+    try {
+      console.log(
+        `Fetching documents from ${process.env.NEXT_PUBLIC_BACKEND_URL}/explore`
+      );
+      const response = await axios.get<{ documents: Document[] }>(
+        `${process.env.NEXT_PUBLIC_BACKEND_URL}/explore`
+      );
+      setDocuments(response.data.documents);
+    } catch (error) {
+      console.error("Error fetching documents", error);
+      setDocuments([]);
+    }
+  };
 
-    const viewDocument = (document: Document) => {
-        setSelectedDocument(document);
-    };
-
-    return (
-        <div className="pt-20 flex flex-col items-center justify-center p-6">
-            <h1 className="text-4xl mb-6">Explore Files</h1>
-            <div className="overflow-y-auto h-[50vh] w-full max-w-xl">
-                {documents.map((document, index) => (
-                    <DocumentItem key={index} document={document} viewDocument={viewDocument} />
-                ))}
-            </div>
-            {selectedDocument && (
-                <div className="fixed inset-0 flex items-center justify-center z-10 bg-black bg-opacity-50">
-                    <div className="bg-white p-6 w-1/2 h-1/2 overflow-auto rounded-lg">
-                        <h2 className="text-2xl mb-4">{selectedDocument.name}</h2>
-                        <pre>{JSON.stringify(selectedDocument, null, 2)}</pre>
-                        <button 
-                            onClick={() => setSelectedDocument(null)}
-                            className="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition duration-200"
-                        >
-                            Close
-                        </button>
-                    </div>
-                </div>
-            )}
-        </div>
-    );
+  return (
+    <div className="pt-20 flex flex-col items-center justify-center p-6">
+      <h1 className="text-4xl mb-6">Explore Files</h1>
+      <div className="w-full max-w-xl flex flex-col gap-5">
+        {documents.map((document, index) => (
+          <DocumentItem key={index} document={document} />
+        ))}
+      </div>
+    </div>
+  );
 }
diff --git a/frontend/app/explore/types.ts b/frontend/app/explore/types.ts
new file mode 100644
index 000000000..5aebb64f1
--- /dev/null
+++ b/frontend/app/explore/types.ts
@@ -0,0 +1,4 @@
+export interface Document {
+  name: string;
+  size: string;
+}