From b3e5c5a05d64e51306f0d8768177e18ce8095225 Mon Sep 17 00:00:00 2001
From: WillDotWhite <will.white01@bbc.co.uk>
Date: Wed, 7 Aug 2024 18:26:39 +0100
Subject: [PATCH] Use react-query to improve query performance and add post
 limit for same

---
 .../repositories/PostRepository.kt            |  2 +-
 ui/src/api/post.ts                            | 30 ++++++++++++++++++-
 ui/src/pages/home/Home.tsx                    | 28 ++++-------------
 ui/src/pages/home/components/SearchForm.tsx   | 10 ++++++-
 4 files changed, 45 insertions(+), 25 deletions(-)

diff --git a/api/src/main/kotlin/com/gmtkgamejam/repositories/PostRepository.kt b/api/src/main/kotlin/com/gmtkgamejam/repositories/PostRepository.kt
index bad26b7..1f3646c 100644
--- a/api/src/main/kotlin/com/gmtkgamejam/repositories/PostRepository.kt
+++ b/api/src/main/kotlin/com/gmtkgamejam/repositories/PostRepository.kt
@@ -40,7 +40,7 @@ open class PostRepositoryImpl(val client: MongoClient) : PostRepository {
 
     // Un-paginated version should be used for Admin endpoints
     override fun getPosts(filter: Bson, sort: Bson): List<PostItem> {
-        return col.find(filter).sort(sort).toList()
+        return col.find(filter).sort(sort).limit(40).toList()
     }
 
     override fun getPost(id: String) : PostItem? {
diff --git a/ui/src/api/post.ts b/ui/src/api/post.ts
index f3d8e24..9d9ec06 100644
--- a/ui/src/api/post.ts
+++ b/ui/src/api/post.ts
@@ -1,7 +1,35 @@
-import {useMutation, UseMutationOptions, UseMutationResult, useQueryClient} from "react-query";
+import {
+    useMutation,
+    UseMutationOptions,
+    UseMutationResult,
+    useQuery,
+    useQueryClient,
+    UseQueryResult
+} from 'react-query';
 import {useApiRequest} from "./apiRequest.ts";
 import {Post, PostApiResult, postFromApiResult} from "../common/models/post.ts";
+import {useAuth} from './AuthContext.tsx';
+import {useSearchParams} from 'react-router-dom';
 
+export function usePosts(): UseQueryResult<Post[], Error> {
+    const [searchParams, _] = useSearchParams();
+    const { token } = useAuth() ?? {};
+    const apiRequest = useApiRequest();
+
+    const isOnlyBookmarked = searchParams.get('bookmarked') === "true"
+    const path = isOnlyBookmarked ? "posts/favourites" : "posts"
+    const url = `/${path}?${searchParams}`
+
+    return useQuery(
+        ["posts", "list", searchParams.toString() ?? ""],
+        () => {
+            return apiRequest<PostApiResult[]>(url, {method: "GET", authToken: token});
+        },
+        {
+            select: (posts: PostApiResult[]) => posts.map(postFromApiResult),
+        }
+    );
+}
 
 const REPORT_POST_QUERY_KEY = ["posts", "report"] as const;
 
diff --git a/ui/src/pages/home/Home.tsx b/ui/src/pages/home/Home.tsx
index 513d3f6..511b6e4 100644
--- a/ui/src/pages/home/Home.tsx
+++ b/ui/src/pages/home/Home.tsx
@@ -5,46 +5,30 @@ import {useEffect, useState} from "react";
 import {PostTile} from "../../common/components/PostTile.tsx";
 import {Onboarding} from "./components/Onboarding.tsx";
 import {SiteIntro} from "./components/SiteIntro.tsx";
-import {useAuth} from "../../api/AuthContext.tsx";
-import {Post} from "../../common/models/post.ts";
+import {Post} from '../../common/models/post.ts';
+import {usePosts} from '../../api/post.ts';
 
 export const Home: React.FC = () => {
     const [searchParams, setSearchParams] = useSearchParams();
-    const [posts, setPosts] = useState<Post[]>([]);
     const [isViewingBookmarks, setIsViewingBookmarks] = useState<boolean>(searchParams.get('bookmarked') === "true");
-    const { token } = useAuth() ?? {};
+
+    const posts = usePosts();
 
     // Trigger API call every time query string changes
     // Not sure if we actually need react-query here, but I'm keeping it everywhere else for now to avoid unnecessary work
     useEffect(() => {
         const isOnlyBookmarked = searchParams.get('bookmarked') === "true"
-        const path = isOnlyBookmarked ? "posts/favourites" : "posts"
         setIsViewingBookmarks(isOnlyBookmarked)
-        searchParams.delete('bookmarked')
-
-        const url = new URL(path + "?" + searchParams.toString(), import.meta.env.VITE_API_URL)
-        const init: RequestInit = {method: "GET", headers: {"Content-Type": "application/json"}}
-
-        if (token) {
-            // @ts-ignore
-            init.headers['Authorization'] = `Bearer ${token}`
-        }
-
-        fetch(url, init)
-            .then(res => res.json())
-            .then(setPosts)
     }, [searchParams])
 
-    // console.log(posts)
-
     return (
         <main>
             <Onboarding />
             <SiteIntro />
             <SearchFormWrapper searchParams={searchParams} setSearchParams={setSearchParams} />
 
-            {posts?.length > 0
-                ? <PostsToDisplay posts={posts} />
+            {(posts?.data?.length || 0) > 0
+                ? <PostsToDisplay posts={posts.data!} />
                 : <NoPostsToDisplay isViewingBookmarks={isViewingBookmarks} />
             }
         </main>
diff --git a/ui/src/pages/home/components/SearchForm.tsx b/ui/src/pages/home/components/SearchForm.tsx
index abf55a1..3f21ce0 100644
--- a/ui/src/pages/home/components/SearchForm.tsx
+++ b/ui/src/pages/home/components/SearchForm.tsx
@@ -10,10 +10,12 @@ import {useState} from "react";
 import {SortingOptions} from "./SortingOptions.tsx";
 import {iiicon} from "../../../common/utils/iiicon.tsx";
 import {blankSearchParameters} from "../models/SearchParameters.ts";
+import {useSearchParams} from 'react-router-dom';
 
 export const SearchForm: React.FC<{
     params: FormikSearchFormParameters
 }> = ({params}) => {
+    const [searchParams, _] = useSearchParams();
     const {values, handleChange, handleBlur} = params;
     const [showAdvancedSearchOptions, setShowAdvancedSearchOptions] = useState(false);
 
@@ -62,7 +64,13 @@ export const SearchForm: React.FC<{
                     <div className="text-center">
                         <button
                             id="clear-search-button"
-                            onClick={() => {params.resetForm({values: blankSearchParameters})}}
+                            onClick={() => {
+                                const isOnlyBookmarked = searchParams.get('bookmarked') === "true"
+                                params.resetForm({values: blankSearchParameters})
+                                if (isOnlyBookmarked) {
+                                    searchParams.set('bookmarked', 'true');
+                                }
+                            }}
                             type="button"
                         >
                             Clear Search