From 5ac73718cf477c5aaf13d8e899658ef755278f78 Mon Sep 17 00:00:00 2001
From: Max Leiter <maxwell.leiter@gmail.com>
Date: Sat, 26 Mar 2022 00:24:18 -0700
Subject: [PATCH] server/client: add post deletion

---
 client/components/new-post/post.module.css    | 39 ++++++++++---------
 client/components/post-list/index.tsx         | 25 +++++++++---
 client/components/post-list/list-item.tsx     |  8 ++--
 .../components/view-document-list/index.tsx   | 22 -----------
 client/components/view-document/index.tsx     |  9 +++--
 server/src/routes/posts.ts                    |  1 -
 6 files changed, 50 insertions(+), 54 deletions(-)
 delete mode 100644 client/components/view-document-list/index.tsx

diff --git a/client/components/new-post/post.module.css b/client/components/new-post/post.module.css
index 9925298..1a57424 100644
--- a/client/components/new-post/post.module.css
+++ b/client/components/new-post/post.module.css
@@ -1,28 +1,29 @@
 .buttons {
-  position: relative;
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-  margin-top: var(--gap-double);
+	position: relative;
+	display: flex;
+	justify-content: space-between;
+	width: 100%;
+	margin-top: var(--gap-double);
 }
 
 .title {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: var(--gap);
 }
 
 @media screen and (max-width: 650px) {
-  .title {
-    align-items: flex-start;
-    flex-direction: column;
-  }
+	.title {
+		align-items: flex-start;
+		flex-direction: column;
+	}
 
-  .buttons {
-    flex-direction: column;
-    margin: 0;
-    justify-content: space-between;
-    min-height: 95px;
-  }
+	.buttons {
+		flex-direction: column;
+		margin: 0;
+		justify-content: space-between;
+		min-height: 95px;
+	}
 }
diff --git a/client/components/post-list/index.tsx b/client/components/post-list/index.tsx
index 194d45c..feba682 100644
--- a/client/components/post-list/index.tsx
+++ b/client/components/post-list/index.tsx
@@ -6,7 +6,7 @@ import styles from './post-list.module.css'
 import ListItemSkeleton from "./list-item-skeleton"
 import ListItem from "./list-item"
 import { Post } from "@lib/types"
-import { ChangeEvent, MouseEventHandler, useCallback, useEffect, useMemo, useState } from "react"
+import { ChangeEvent, useCallback, useEffect, useMemo, useState } from "react"
 import debounce from "lodash.debounce"
 import Cookies from "js-cookie"
 
@@ -36,9 +36,7 @@ const PostList = ({ morePosts, initialPosts, error }: Props) => {
                         }
                     }
                 )
-                console.log(res)
                 const json = await res.json()
-                console.log(json)
                 setPosts([...posts, ...json.posts])
                 setHasMorePosts(json.morePosts)
             }
@@ -85,6 +83,23 @@ const PostList = ({ morePosts, initialPosts, error }: Props) => {
         }
     }, [debouncedSearchHandler]);
 
+    const deletePost = useCallback((postId: string) => async () => {
+        const res = await fetch(`/server-api/posts/${postId}`, {
+            method: "DELETE",
+            headers: {
+                "Content-Type": "application/json",
+                "Authorization": `Bearer ${Cookies.get("drift-token")}`
+            },
+        })
+
+        if (!res.ok) {
+            console.error(res)
+            return
+        } else {
+            setPosts((posts) => posts.filter(post => post.id !== postId))
+        }
+    }, [])
+
     return (
         <div className={styles.container}>
             <div className={styles.searchContainer}>
@@ -94,7 +109,7 @@ const PostList = ({ morePosts, initialPosts, error }: Props) => {
                     onChange={debouncedSearchHandler} />
             </div>
             {error && <Text type='error'>Failed to load.</Text>}
-            {!posts && searching && <ul>
+            {!posts.length && searching && <ul>
                 <li>
                     <ListItemSkeleton />
                 </li>
@@ -107,7 +122,7 @@ const PostList = ({ morePosts, initialPosts, error }: Props) => {
                 posts?.length > 0 && <div>
                     <ul>
                         {posts.map((post) => {
-                            return <ListItem post={post} key={post.id} />
+                            return <ListItem deletePost={deletePost(post.id)} post={post} key={post.id} />
                         })}
                     </ul>
                 </div>
diff --git a/client/components/post-list/list-item.tsx b/client/components/post-list/list-item.tsx
index 92b4c55..809fae8 100644
--- a/client/components/post-list/list-item.tsx
+++ b/client/components/post-list/list-item.tsx
@@ -4,12 +4,14 @@ import { useEffect, useMemo, useState } from "react"
 import timeAgo from "@lib/time-ago"
 import VisibilityBadge from "../visibility-badge"
 import getPostPath from "@lib/get-post-path"
-import { Link, Text, Card, Tooltip, Divider, Badge } from "@geist-ui/core"
+import { Link, Text, Card, Tooltip, Divider, Badge, Button } from "@geist-ui/core"
 import { File, Post } from "@lib/types"
 import FadeIn from "@components/fade-in"
+import Trash from "@geist-ui/icons/trash"
+import Cookies from "js-cookie"
 
 // TODO: isOwner should default to false so this can be used generically
-const ListItem = ({ post, isOwner = true }: { post: Post, isOwner?: boolean }) => {
+const ListItem = ({ post, isOwner = true, deletePost }: { post: Post, isOwner?: boolean, deletePost: () => void }) => {
     const createdDate = useMemo(() => new Date(post.createdAt), [post.createdAt])
     const [time, setTimeAgo] = useState(timeAgo(createdDate))
 
@@ -43,7 +45,7 @@ const ListItem = ({ post, isOwner = true }: { post: Post, isOwner?: boolean }) =
                         </span>
                     </div>
                     {isOwner && <span style={{ float: 'right' }}>
-
+                        <Button iconRight={<Trash />} onClick={deletePost} auto />
                     </span>}
                 </Text>
 
diff --git a/client/components/view-document-list/index.tsx b/client/components/view-document-list/index.tsx
deleted file mode 100644
index e032303..0000000
--- a/client/components/view-document-list/index.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import type { Document } from "@lib/types"
-import DocumentComponent from "@components/edit-document"
-import { memo, } from "react"
-
-const DocumentList = ({ docs }: {
-    docs: Document[],
-}) => {
-    return (<>{
-        docs.map(({ content, id, title }) => {
-            return (
-                <DocumentComponent
-                    key={id}
-                    content={content}
-                    title={title}
-                />
-            )
-        })
-    }
-    </>)
-}
-
-export default memo(DocumentList)
diff --git a/client/components/view-document/index.tsx b/client/components/view-document/index.tsx
index 592d0ed..37edca9 100644
--- a/client/components/view-document/index.tsx
+++ b/client/components/view-document/index.tsx
@@ -8,6 +8,7 @@ import Skeleton from "react-loading-skeleton"
 
 import { Button, Text, ButtonGroup, Spacer, Tabs, Textarea, Tooltip, Link, Tag } from "@geist-ui/core"
 import HtmlPreview from "@components/preview"
+import FadeIn from "@components/fade-in"
 
 // import Link from "next/link"
 type Props = {
@@ -82,7 +83,7 @@ const Document = ({ content, title, initialTab = 'edit', skeleton, id }: Props)
 
 
     return (
-        <>
+        <FadeIn>
             <Spacer height={1} />
             <div className={styles.card}>
                 <Link href={`#${title}`} className={styles.fileNameContainer}>
@@ -114,9 +115,9 @@ const Document = ({ content, title, initialTab = 'edit', skeleton, id }: Props)
                             </div>
                         </Tabs.Item>
                     </Tabs>
-                </div >
-            </div >
-        </>
+                </div>
+            </div>
+        </FadeIn>
     )
 }
 
diff --git a/server/src/routes/posts.ts b/server/src/routes/posts.ts
index c8ea6a9..8ce914b 100644
--- a/server/src/routes/posts.ts
+++ b/server/src/routes/posts.ts
@@ -104,7 +104,6 @@ posts.get("/", secretKey, async (req, res, next) => {
 		const posts = await Post.findAll({
 			attributes: ["id", "title", "visibility", "createdAt"]
 		})
-
 		res.json(posts)
 	} catch (e) {
 		next(e)