feat: adds infinite scrolling for blogposts

Author: corp-0

Diff for: components/uiLibrary/spinner.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+const Spinner: React.FC = () => {
+    return (
+        <div
+            className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]"
+            role="status">
+            <span
+                className="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">
+                    Loading...
+            </span>
+        </div>
+    );
+};
+
+export default Spinner;

Diff for: pages/blog.tsx

@@ -1,22 +1,50 @@
 import {NextPage} from "next";
-import {useEffect, useState} from "react";
+import {useCallback, useEffect, useRef, useState} from "react";
 import Post from "../components/blog/post";
 import {BlogPostsResponse} from "../types/blogPostsResponse";
 import Head from "next/head";
 import Container from "../components/uiLibrary/container";
+import {BlogPost} from "../types/blogPost";
+import Spinner from "../components/uiLibrary/spinner";
 
 
 const Blog: NextPage = () => {
-    const [posts, setPosts] = useState({} as BlogPostsResponse);
-    const [currentPage, setCurrentPage] = useState(1);
+    const [postsResponse, setPostsResponse] = useState<BlogPostsResponse>();
+    const [posts, setPosts] = useState<BlogPost[]>([]);
     const [loading, setLoading] = useState(true);
+    const INITIAL_PAGE = "https://changelog.unitystation.org/posts/?page=1";
+
+    const fetchPosts = async (url: string) : Promise<BlogPostsResponse> => {
+        setLoading(true);
+        const response = await fetch(url);
+        return await response.json();
+    };
+
+    useEffect(() => {
+        fetchPosts(INITIAL_PAGE)
+            .then(json => {
+                setPostsResponse(json);
+                setPosts(json.results);
+            })
+            .finally(() => setLoading(false));
+    }, []);
+
+    const handleScroll = useCallback(async () => {
+        if (window.innerHeight + document.documentElement.scrollTop !== document.documentElement.offsetHeight || !postsResponse?.next) return;
+        setLoading(true);
+
+        const json = await fetchPosts(postsResponse.next);
+
+        setPosts((prevPosts) => [...prevPosts, ...json.results]);
+        setPostsResponse(json);
+
+        setLoading(false);
+    }, [postsResponse]);
 
     useEffect(() => {
-        fetch(`https://changelog.unitystation.org/posts`)
-            .then(response => response.json())
-            .then(json => setPosts(json))
-            .then(() => setLoading(false))
-    }, [currentPage]);
+        window.addEventListener('scroll', handleScroll);
+        return () => window.removeEventListener('scroll', handleScroll);
+    }, [handleScroll]);
 
     return (
         <>
@@ -39,8 +67,9 @@ const Blog: NextPage = () => {
                 />
             </Head>
             <Container>
-                    {!loading && <div>
-                        {posts.results.map((post) => {
+                <ul id="posts">
+                    {posts &&
+                        posts.map((post) => {
                             return (
                                 <Post
                                     key={post.slug}
@@ -52,9 +81,10 @@ const Blog: NextPage = () => {
                                     state={post.state}
                                     type={post.type}
                                 />
-                            )
+                            );
                         })}
-                    </div>}
+                </ul>
+                {loading && <Spinner/>}
             </Container>
         </>
     )