delete doc ux

This commit is contained in:
Timur Ercan
2023-02-09 18:39:29 +01:00
parent 8e719480d5
commit 6916d8b0aa

View File

@ -1,4 +1,4 @@
import { ReactElement, useState } from "react"; import { ReactElement, useEffect, useState } from "react";
import Layout from "../components/layout"; import Layout from "../components/layout";
import type { NextPageWithLayout } from "./_app"; import type { NextPageWithLayout } from "./_app";
import Head from "next/head"; import Head from "next/head";
@ -22,8 +22,8 @@ import { Button } from "@documenso/ui";
const DocumentsPage: NextPageWithLayout = (props: any) => { const DocumentsPage: NextPageWithLayout = (props: any) => {
const router = useRouter(); const router = useRouter();
const [documents = [], setDocuments] = useState(props.documents); const [documents, setDocuments]: any[] = useState([]);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(true);
const getDocuments = async () => { const getDocuments = async () => {
if (!documents.length) setLoading(true); if (!documents.length) setLoading(true);
@ -39,6 +39,10 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
}); });
}; };
useEffect(() => {
getDocuments();
}, []);
function showDocument(documentId: number) { function showDocument(documentId: number) {
router.push("/documents/" + documentId); router.push("/documents/" + documentId);
} }
@ -125,7 +129,7 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-gray-200 bg-white"> <tbody className="divide-y divide-gray-200 bg-white">
{documents.map((document: any) => ( {documents.map((document: any, index: number) => (
<tr <tr
key={document.id} key={document.id}
className="hover:bg-gray-100 cursor-pointer" className="hover:bg-gray-100 cursor-pointer"
@ -233,11 +237,24 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
"Are you sure you want to delete this document" "Are you sure you want to delete this document"
) )
) { ) {
const documentsWithoutIndex = [...documents];
const removedItem: any =
documentsWithoutIndex.splice(index, 1);
setDocuments(documentsWithoutIndex);
fetch(`/api/documents/${document.id}`, { fetch(`/api/documents/${document.id}`, {
method: "DELETE", method: "DELETE",
}).then(() => { })
getDocuments(); .catch((err) => {
}); documentsWithoutIndex.splice(
index,
0,
removedItem
);
setDocuments(documentsWithoutIndex);
})
.then(() => {
getDocuments();
});
} }
}} }}
/> />
@ -299,13 +316,13 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
); );
}; };
export async function getServerSideProps(context: any) { // export async function getServerSideProps(context: any) {
return { // return {
props: { // props: {
documents: await getDocumentsForUserFromToken(context), // documents: await getDocumentsForUserFromToken(context),
}, // },
}; // };
} // }
function formatDocumentStatus(status: DocumentStatus) { function formatDocumentStatus(status: DocumentStatus) {
switch (status) { switch (status) {