systems-obscure/src/pages/posts.tsx

// @ts-nocheck
import { useMemo, useEffect } from "react"
import MainTemplate from "@/templates/MainTemplate"
import { useParams, useNavigate } from "react-router"
import { convertDate } from "@/utils/convertDate"
import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination"
import {
  Card,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Link } from "react-router"
import { usePosts } from "@/hooks/usePosts"

const PostsPage = () => {
  const { page } = useParams()

  const navigate = useNavigate()

  const { posts } = usePosts()
  const postsPerPage = 10

  const currentPage = Number(page) || 1
  const totalPages = Math.ceil(posts.length / postsPerPage)

  useEffect(() => {
    if (currentPage < 1 || currentPage > totalPages) {
      navigate(`/posts/page/1`, { replace: true })
    }
  }, [currentPage, totalPages, navigate])

  const currentPosts = useMemo(() => {
    const startIndex = (currentPage - 1) * postsPerPage
    const endIndex = startIndex + postsPerPage
    return posts.slice(startIndex, endIndex)
  }, [posts, currentPage, postsPerPage])

  const hasNextPage = currentPage < totalPages
  const hasPrevPage = currentPage > 1

  const goToNextPage = () => {
    if (hasNextPage) {
      navigate(`/posts/page/${currentPage + 1}`)
    }
  }

  const goToPrevPage = () => {
    if (hasPrevPage) {
      navigate(`/posts/page/${currentPage - 1}`)
    }
  }

  return (
    <MainTemplate>
      <div className="mb-5 ">
        <h2 className="scroll-m-20 text-2xl font-semibold lg:text-2xl border-b pb-3">
          All posts
        </h2>
      </div>
      <div className="min-h-[calc(100vh-200px)] flex flex-col">
        <div className="grid grid-cols-1 md:grid-cols-1 gap-3 flex-grow">
          {currentPosts.map((post) => (
            <Link
              to={`/posts/${post.slug}`}
              key={post.slug}
              className="block no-underline"
            >
              <Card
                key={post.slug}
                className="flex flex-col h-full hover:bg-primary/5 py-4 px-0 rounded-none"
              >
                <CardHeader>
                  <CardTitle className="leading-snug font-semibold">
                    {post.title}
                  </CardTitle>
                  <CardDescription className="text-sm text-muted-foreground">
                    <div className="flex justify-between gap-2">
                      <span className="text-sm">{convertDate(post.date)}</span>
                      <div className="hidden md:block">
                        {post.tags.map((tag, i) => (
                          <Badge
                            className="ml-2 cursor-pointer"
                            key={i}
                            variant="secondary"
                            onClick={(e) => {
                              e.preventDefault()
                              e.stopPropagation()
                              navigate(`/tags/${tag}`)
                            }}
                          >
                            {tag}
                          </Badge>
                        ))}
                      </div>
                    </div>
                  </CardDescription>
                </CardHeader>
              </Card>
            </Link>
          ))}
        </div>
        <Pagination className="mt-4">
          <PaginationContent>
            <PaginationItem>
              <PaginationPrevious
                className={`select-none ${hasPrevPage ? "cursor-pointer" : "cursor-not-allowed opacity-50"}`}
                onClick={goToPrevPage}
              />
            </PaginationItem>
            <PaginationItem>
              <PaginationNext
                className={`select-none ${hasNextPage ? "cursor-pointer" : "cursor-not-allowed opacity-50"}`}
                onClick={goToNextPage}
              />
            </PaginationItem>
          </PaginationContent>
        </Pagination>
      </div>
    </MainTemplate>
  )
}

export { PostsPage }