CoastalCommitsPastes/client/app/components/post-list/index.tsx

162 lines
3.7 KiB
TypeScript
Raw Normal View History

2022-11-10 02:11:36 -05:00
"use client"
2022-04-09 20:48:19 -04:00
import styles from "./post-list.module.css"
2022-03-09 20:11:37 -05:00
import ListItemSkeleton from "./list-item-skeleton"
import ListItem from "./list-item"
2022-11-10 02:11:36 -05:00
import { ChangeEvent, useCallback, useEffect, useState } from "react"
import useDebounce from "@lib/hooks/use-debounce"
2022-11-12 04:28:06 -05:00
import Link from "@components/link"
import type { PostWithFiles } from "@lib/server/prisma"
import Input from "@components/input"
import Button from "@components/button"
2022-03-06 19:46:59 -05:00
type Props = {
initialPosts: string | PostWithFiles[]
2022-04-09 20:48:19 -04:00
morePosts: boolean
userId?: string
2022-03-06 19:46:59 -05:00
}
const PostList = ({
morePosts,
initialPosts: initialPostsMaybeJSON,
userId
}: Props) => {
const initialPosts =
typeof initialPostsMaybeJSON === "string"
? JSON.parse(initialPostsMaybeJSON)
: initialPostsMaybeJSON
2022-04-09 20:48:19 -04:00
const [search, setSearchValue] = useState("")
const [posts, setPosts] = useState<PostWithFiles[]>(initialPosts)
2022-04-09 20:48:19 -04:00
const [searching, setSearching] = useState(false)
const [hasMorePosts, setHasMorePosts] = useState(morePosts)
const debouncedSearchValue = useDebounce(search, 200)
2022-04-09 20:48:19 -04:00
const loadMoreClick = useCallback(
(e: React.MouseEvent<HTMLButtonElement>) => {
e.preventDefault()
if (hasMorePosts) {
async function fetchPosts() {
const res = await fetch(`/server-api/posts/mine`, {
method: "GET",
headers: {
"Content-Type": "application/json",
"x-page": `${posts.length / 10 + 1}`
}
})
const json = await res.json()
setPosts([...posts, ...json.posts])
setHasMorePosts(json.morePosts)
}
fetchPosts()
}
},
[posts, hasMorePosts]
)
2022-04-09 20:48:19 -04:00
// update posts on search
useEffect(() => {
if (debouncedSearchValue) {
setSearching(true)
async function fetchPosts() {
2022-04-09 20:48:19 -04:00
const res = await fetch(
`/api/post/search?q=${encodeURIComponent(
debouncedSearchValue
)}&userId=${userId}`,
2022-04-09 20:48:19 -04:00
{
method: "GET",
headers: {
2022-11-12 21:39:03 -05:00
"Content-Type": "application/json"
2022-04-09 20:48:19 -04:00
}
}
)
const json = await res.json()
setPosts(json.posts)
2022-04-09 20:48:19 -04:00
setSearching(false)
}
fetchPosts()
2022-04-09 20:48:19 -04:00
} else {
setPosts(initialPosts)
}
// TODO: fix cyclical dependency issue
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [debouncedSearchValue, userId])
2022-04-09 20:48:19 -04:00
const handleSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
setSearchValue(e.target.value)
}
2022-04-09 20:48:19 -04:00
const deletePost = useCallback(
(postId: string) => async () => {
const res = await fetch(`/api/post/${postId}`, {
2022-04-09 20:48:19 -04:00
method: "DELETE",
})
2022-03-26 03:24:18 -04:00
2022-04-09 20:48:19 -04:00
if (!res.ok) {
console.error(res)
return
} else {
setPosts((posts) => posts.filter((post) => post.id !== postId))
}
},
[]
)
2022-03-26 03:24:18 -04:00
2022-04-09 20:48:19 -04:00
return (
<div className={styles.container}>
<div className={styles.searchContainer}>
<Input
placeholder="Search..."
onChange={handleSearchChange}
disabled={Boolean(!posts?.length)}
style={{ maxWidth: 300 }}
2022-04-09 20:48:19 -04:00
/>
</div>
{!posts && <p style={{color: 'var(--warning)'}}>Failed to load.</p>}
{!posts?.length && searching && (
2022-04-09 20:48:19 -04:00
<ul>
<li>
<ListItemSkeleton />
</li>
<li>
<ListItemSkeleton />
</li>
</ul>
)}
2022-11-10 02:11:36 -05:00
{posts?.length === 0 && posts && (
<p>
2022-04-09 20:48:19 -04:00
No posts found. Create one{" "}
<Link colored href="/new">
here
</Link>
2022-04-09 20:48:19 -04:00
.
</p>
2022-04-09 20:48:19 -04:00
)}
{posts?.length > 0 && (
<div>
<ul>
{posts.map((post) => {
return (
<ListItem
deletePost={deletePost(post.id)}
post={post}
key={post.id}
/>
)
})}
</ul>
</div>
)}
{hasMorePosts && !setSearchValue && (
<div className={styles.moreContainer}>
<Button width={"100%"} onClick={loadMoreClick}>
Load more
</Button>
</div>
)}
</div>
)
2022-03-06 19:46:59 -05:00
}
2022-03-09 20:11:37 -05:00
export default PostList