QuivrHQ/quivr
1
1
Fork 0
mirror of https://github.com/QuivrHQ/quivr.git synced 2024-12-14 07:59:00 +03:00
Code Issues Packages Projects Releases Wiki Activity

feature: Loading state for /explore

Browse Source
This commit is contained in:
iMADi-ARCH 2023-05-23 11:04:53 +05:30
parent 02a34a95a1
commit e360683093
1 changed files with 26 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/app/explore/page.tsx
View File

@ -5,15 +5,18 @@ import DocumentItem from "./DocumentItem";
import { Document } from "./types";
import Button from "../components/ui/Button";
import Link from "next/link";
import Spinner from "../components/ui/Spinner";
export default function ExplorePage() {
const [documents, setDocuments] = useState<Document[]>([]);
const [isPending, setIsPending] = useState(true);
useEffect(() => {
fetchDocuments();
}, []);
const fetchDocuments = async () => {
setIsPending(true);
try {
console.log(
`Fetching documents from ${process.env.NEXT_PUBLIC_BACKEND_URL}/explore`
@ -26,6 +29,7 @@ export default function ExplorePage() {
console.error("Error fetching documents", error);
setDocuments([]);
}
setIsPending(false);
};
return (
@ -34,24 +38,28 @@ export default function ExplorePage() {
<h1 className="text-3xl font-bold text-center">Explore Your Brain</h1>
<h2 className="opacity-50">View what&rsquo;s in your second brain</h2>
</div>
<div className="w-full max-w-xl flex flex-col gap-5">
{documents.length !== 0 ? (
documents.map((document, index) => (
<DocumentItem
key={index}
document={document}
setDocuments={setDocuments}
/>
))
) : (
<div className="flex flex-col items-center justify-center mt-10 gap-1">
<p className="text-center">Oh No, Your Brain is empty.</p>
<Link href="/upload">
<Button>Upload Files</Button>
</Link>
</div>
)}
</div>
{isPending ? (
<Spinner />
) : (
<div className="w-full max-w-xl flex flex-col gap-5">
{documents.length !== 0 ? (
documents.map((document, index) => (
<DocumentItem
key={index}
document={document}
setDocuments={setDocuments}
/>
))
) : (
<div className="flex flex-col items-center justify-center mt-10 gap-1">
<p className="text-center">Oh No, Your Brain is empty.</p>
<Link href="/upload">
<Button>Upload Files</Button>
</Link>
</div>
)}
</div>
)}
</div>
);
}