server/client: add post deletion

client/components/new-post/post.module.css

@@ -11,6 +11,7 @@
 	flex-direction: row;
 	align-items: center;
 	justify-content: space-between;
+	margin-bottom: var(--gap);
 }
 
 @media screen and (max-width: 650px) {

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>

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>
 

client/components/view-document-list/index.tsx

@@ -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)

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>
     )
 }
 

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)