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

173 lines
4 KiB
TypeScript
Raw Normal View History

2022-11-10 02:11:36 -05:00
"use client"
2022-11-09 21:38:05 -05:00
import { Button, Input, Text } from "@geist-ui/core/dist"
2022-03-06 19:46:59 -05:00
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"
import Link from "@components/link"
import { TOKEN_COOKIE_NAME } from "@lib/constants"
import { getCookie } from "cookies-next"
2022-11-10 02:11:36 -05:00
import type { PostWithFiles } from "app/prisma"
2022-03-06 19:46:59 -05:00
type Props = {
2022-11-10 02:11:36 -05:00
initialPosts: PostWithFiles[]
2022-04-09 20:48:19 -04:00
morePosts: boolean
2022-03-06 19:46:59 -05:00
}
2022-11-10 02:11:36 -05:00
const PostList = ({ morePosts, initialPosts }: Props) => {
2022-04-09 20:48:19 -04:00
const [search, setSearchValue] = useState("")
2022-11-10 02:11:36 -05:00
const [posts, setPosts] = useState(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",
Authorization: `Bearer ${getCookie(TOKEN_COOKIE_NAME)}`,
2022-04-09 20:48:19 -04:00
"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) {
2022-04-09 20:48:19 -04:00
// fetch results from /server-api/posts/search
const fetchResults = async () => {
setSearching(true)
//encode search
const res = await fetch(
`/server-api/posts/search?q=${encodeURIComponent(
debouncedSearchValue
)}`,
2022-04-09 20:48:19 -04:00
{
method: "GET",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${getCookie(TOKEN_COOKIE_NAME)}`
2022-04-09 20:48:19 -04:00
// "tok": process.env.SECRET_KEY || ''
}
}
)
const data = await res.json()
setPosts(data)
setSearching(false)
}
fetchResults()
} else {
setPosts(initialPosts)
}
}, [initialPosts, debouncedSearchValue])
2022-04-09 20:48:19 -04:00
const handleSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
setSearchValue(e.target.value)
}
// const debouncedSearchHandler = useMemo(
// () => debounce(handleSearchChange, 300),
// []
// )
// useEffect(() => {
// return () => {
// debouncedSearchHandler.cancel()
// }
// }, [debouncedSearchHandler])
2022-04-09 20:48:19 -04:00
const deletePost = useCallback(
(postId: string) => async () => {
const res = await fetch(`/server-api/posts/${postId}`, {
method: "DELETE",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${getCookie(TOKEN_COOKIE_NAME)}`
2022-04-09 20:48:19 -04:00
}
})
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
scale={3 / 2}
clearable
placeholder="Search..."
onChange={handleSearchChange}
2022-04-09 20:48:19 -04:00
/>
</div>
2022-11-10 02:11:36 -05:00
{!posts && <Text type="error">Failed to load.</Text>}
2022-04-09 20:48:19 -04:00
{!posts.length && searching && (
<ul>
<li>
<ListItemSkeleton />
</li>
<li>
<ListItemSkeleton />
</li>
</ul>
)}
2022-11-10 02:11:36 -05:00
{posts?.length === 0 && posts && (
2022-04-09 20:48:19 -04:00
<Text type="secondary">
No posts found. Create one{" "}
<Link colored href="/new">
here
</Link>
2022-04-09 20:48:19 -04:00
.
</Text>
)}
{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