From 36831785effd90c7bcf1c97ea39c715410b2383c Mon Sep 17 00:00:00 2001
From: loks0n <22452787+loks0n@users.noreply.github.com>
Date: Fri, 16 Jun 2023 11:31:33 +0100
Subject: [PATCH 1/6] fix: upvotes issue

---
 src/AppwriteService.ts                    |  1 -
 src/components/blocks/Upvote.tsx          | 29 +++++++++++------------
 src/components/layout/Project.tsx         |  2 +-
 src/components/layout/ProjectFeatured.tsx |  6 +----
 src/routes/projects/[projectId]/index.tsx |  2 +-
 5 files changed, 17 insertions(+), 23 deletions(-)

diff --git a/src/AppwriteService.ts b/src/AppwriteService.ts
index d39a8b5..e89b88f 100644
--- a/src/AppwriteService.ts
+++ b/src/AppwriteService.ts
@@ -190,7 +190,6 @@ export const AppwriteService = {
   listUserUpvotes: async (userId: string) => {
     return (
       await databases.listDocuments<ProjectUpvote>("main", "projectUpvotes", [
-        Query.limit(100),
         Query.equal("userId", userId),
         Query.orderDesc("$createdAt"),
       ])
diff --git a/src/components/blocks/Upvote.tsx b/src/components/blocks/Upvote.tsx
index 1728a7f..1b1827f 100644
--- a/src/components/blocks/Upvote.tsx
+++ b/src/components/blocks/Upvote.tsx
@@ -13,17 +13,16 @@ import { AccountContext, UpvotesContext } from "~/routes/layout";
 type Props = {
   projectId: string;
   votes: number;
-  inline?: boolean;
 };
 
 export default component$((props: Props) => {
-  const upvoteContext = useContext(UpvotesContext);
-  const accountContext = useContext(AccountContext);
+  const upvotes = useContext(UpvotesContext);
+  const account = useContext(AccountContext);
 
   const isLoading = useSignal(false);
 
   const isUpvotedServer = useComputed$(() => {
-    return !!upvoteContext.value.find(
+    return !!upvotes.value.find(
       (upvote) => upvote.projectId === props.projectId
     );
   });
@@ -32,14 +31,14 @@ export default component$((props: Props) => {
     return isLoading.value ? isUpvotedClient.value : isUpvotedServer.value;
   });
 
-  const votesServer = useSignal(props.votes);
-  const votes = useComputed$(() => {
+  const countServer = useSignal(props.votes);
+  const count = useComputed$(() => {
     if (isLoading.value) {
       return isUpvotedClient.value
-        ? votesServer.value + 1
-        : votesServer.value - 1;
+        ? countServer.value + 1
+        : countServer.value - 1;
     }
-    return votesServer.value;
+    return countServer.value;
   });
 
   const upvoteProject = $(async (e: QwikMouseEvent) => {
@@ -50,12 +49,12 @@ export default component$((props: Props) => {
 
     try {
       const res = await AppwriteService.upvoteProject(props.projectId);
-      if (accountContext.value) {
-        upvoteContext.value = await AppwriteService.listUserUpvotes(
-          accountContext.value.$id
+      if (account.value) {
+        upvotes.value = await AppwriteService.listUserUpvotes(
+          account.value.$id
         );
       }
-      votesServer.value = res.votes;
+      countServer.value = res.votes;
     } catch (error: unknown) {
       if (error instanceof AppwriteException && error.code === 401) {
         alert("Please sign in first.");
@@ -72,14 +71,14 @@ export default component$((props: Props) => {
     <button
       preventdefault:click
       onClick$={upvoteProject}
-      class={`button upvote-button ${props.inline ? "" : "vertical-button"} ${
+      class={`button upvote-button vertical-button ${
         isUpvoted.value ? "is-primary" : "is-secondary"
       }`}
       aria-label="Upvote"
       aria-pressed={isUpvoted.value}
     >
       <span class="icon-heart" aria-hidden="true"></span>
-      <span class="text">{votes.value}</span>
+      <span class="text">{count.value}</span>
     </button>
   );
 });
diff --git a/src/components/layout/Project.tsx b/src/components/layout/Project.tsx
index ecfe49f..d0c2ac1 100644
--- a/src/components/layout/Project.tsx
+++ b/src/components/layout/Project.tsx
@@ -49,7 +49,7 @@ export default component$((props: { project: Project | null }) => {
                   {project.name}
                 </p>
               </Link>
-              <Upvote projectId={project.$id} votes={project.upvotes} inline />
+              <Upvote projectId={project.$id} votes={project.upvotes} />
             </div>
             <Link href={`/projects/${project.$id}`}>
               <p
diff --git a/src/components/layout/ProjectFeatured.tsx b/src/components/layout/ProjectFeatured.tsx
index 50e1f6b..12c239f 100644
--- a/src/components/layout/ProjectFeatured.tsx
+++ b/src/components/layout/ProjectFeatured.tsx
@@ -29,11 +29,7 @@ export default component$((props: { project: Project }) => {
             >
               {project.name}
             </Link>
-            <Upvote
-              projectId={project.$id}
-              inline={true}
-              votes={project.upvotes}
-            />
+            <Upvote projectId={project.$id} votes={project.upvotes} />
           </div>
 
           <div class="u-stretch">
diff --git a/src/routes/projects/[projectId]/index.tsx b/src/routes/projects/[projectId]/index.tsx
index 564b5bb..6560fb4 100644
--- a/src/routes/projects/[projectId]/index.tsx
+++ b/src/routes/projects/[projectId]/index.tsx
@@ -117,7 +117,7 @@ export default component$(() => {
 
           <div class="u-flex u-gap-16 u-cross-center">
             <h2 class="heading-level-2">{project.name}</h2>
-            <Upvote projectId={project.$id} votes={project.upvotes} inline />
+            <Upvote projectId={project.$id} votes={project.upvotes} />
           </div>
 
           <p style="font-size: 1.2rem; margin-top: -1rem;">{project.tagline}</p>

From a617d082b4e5643d097127f61b7aa668dc8c65c8 Mon Sep 17 00:00:00 2001
From: loks0n <22452787+loks0n@users.noreply.github.com>
Date: Fri, 16 Jun 2023 16:25:56 +0100
Subject: [PATCH 2/6] feat: selective upvote fetching

---
 src/AppwriteService.ts                    | 18 ++++++++----
 src/components/blocks/Upvote.tsx          | 29 ++++++++----------
 src/components/hooks/useUpvotes.ts        | 36 +++++++++++++++++++++++
 src/routes/index.tsx                      | 32 +++++++++++++++++---
 src/routes/layout.tsx                     | 27 +++++++++--------
 src/routes/projects/[projectId]/index.tsx |  6 +++-
 src/routes/search/index.tsx               | 30 +++++++++++++++++--
 7 files changed, 137 insertions(+), 41 deletions(-)
 create mode 100644 src/components/hooks/useUpvotes.ts

diff --git a/src/AppwriteService.ts b/src/AppwriteService.ts
index e89b88f..e049a9d 100644
--- a/src/AppwriteService.ts
+++ b/src/AppwriteService.ts
@@ -187,12 +187,20 @@ export const AppwriteService = {
       )
     ).documents;
   },
-  listUserUpvotes: async (userId: string) => {
+  listUserUpvotes: async (userId: string, queries: string[] = []) => {
+    const defaultQueries = [
+      Query.equal("userId", userId),
+      Query.orderDesc("$createdAt"),
+    ];
+
+    queries = [...queries, ...defaultQueries];
+
     return (
-      await databases.listDocuments<ProjectUpvote>("main", "projectUpvotes", [
-        Query.equal("userId", userId),
-        Query.orderDesc("$createdAt"),
-      ])
+      await databases.listDocuments<ProjectUpvote>(
+        "main",
+        "projectUpvotes",
+        queries
+      )
     ).documents;
   },
   uploadThumbnail: async (file: File) => {
diff --git a/src/components/blocks/Upvote.tsx b/src/components/blocks/Upvote.tsx
index 1b1827f..18fff16 100644
--- a/src/components/blocks/Upvote.tsx
+++ b/src/components/blocks/Upvote.tsx
@@ -6,7 +6,6 @@ import {
   useContext,
   useSignal,
 } from "@builder.io/qwik";
-import { AppwriteException } from "appwrite";
 import { AppwriteService } from "~/AppwriteService";
 import { AccountContext, UpvotesContext } from "~/routes/layout";
 
@@ -22,9 +21,8 @@ export default component$((props: Props) => {
   const isLoading = useSignal(false);
 
   const isUpvotedServer = useComputed$(() => {
-    return !!upvotes.value.find(
-      (upvote) => upvote.projectId === props.projectId
-    );
+    console.log("isUpvotedServer", props.projectId, upvotes[props.projectId]);
+    return upvotes[props.projectId];
   });
   const isUpvotedClient = useSignal(isUpvotedServer.value);
   const isUpvoted = useComputed$(() => {
@@ -44,23 +42,20 @@ export default component$((props: Props) => {
   const upvoteProject = $(async (e: QwikMouseEvent) => {
     e.stopPropagation();
 
+    if (!account.value) {
+      alert("Please sign in first.");
+      return;
+    }
+
     isUpvotedClient.value = !isUpvotedServer.value;
     isLoading.value = true;
 
     try {
-      const res = await AppwriteService.upvoteProject(props.projectId);
-      if (account.value) {
-        upvotes.value = await AppwriteService.listUserUpvotes(
-          account.value.$id
-        );
-      }
-      countServer.value = res.votes;
+      const response = await AppwriteService.upvoteProject(props.projectId);
+      upvotes[props.projectId] = response.isUpvoted;
+      countServer.value = response.votes;
     } catch (error: unknown) {
-      if (error instanceof AppwriteException && error.code === 401) {
-        alert("Please sign in first.");
-      } else {
-        alert("An unexpected error occurred.");
-      }
+      alert("An unexpected error occurred.");
     } finally {
       isUpvotedClient.value = isUpvotedServer.value;
       isLoading.value = false;
@@ -71,7 +66,7 @@ export default component$((props: Props) => {
     <button
       preventdefault:click
       onClick$={upvoteProject}
-      class={`button upvote-button vertical-button ${
+      class={`button upvote-button ${
         isUpvoted.value ? "is-primary" : "is-secondary"
       }`}
       aria-label="Upvote"
diff --git a/src/components/hooks/useUpvotes.ts b/src/components/hooks/useUpvotes.ts
new file mode 100644
index 0000000..40d000a
--- /dev/null
+++ b/src/components/hooks/useUpvotes.ts
@@ -0,0 +1,36 @@
+import type { Signal } from "@builder.io/qwik";
+import { useContext, useVisibleTask$ } from "@builder.io/qwik";
+import { Query } from "appwrite";
+import { AppwriteService } from "~/AppwriteService";
+import { AccountContext, UpvotesContext } from "~/routes/layout";
+
+export function useUpvotes(projectIds: Signal<string[]>) {
+  const upvotes = useContext(UpvotesContext);
+  const account = useContext(AccountContext);
+
+  useVisibleTask$(async ({ track }) => {
+    track(() => [account?.value, projectIds.value]);
+    if (!account?.value) {
+      return;
+    }
+
+    if (account.value) {
+      const newProjectIds = projectIds.value.filter(
+        (projectId) => upvotes[projectId] === undefined
+      );
+
+      if (newProjectIds.length === 0) {
+        return;
+      }
+
+      const projectUpvotes = await AppwriteService.listUserUpvotes(
+        account.value.$id,
+        [Query.equal("projectId", newProjectIds)]
+      );
+
+      projectUpvotes.forEach((upvote) => {
+        upvotes[upvote.projectId] = true;
+      });
+    }
+  });
+}
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 7bb989f..b3859bf 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,5 +1,6 @@
 import {
   component$,
+  useComputed$,
   useContext,
   useSignal,
   useVisibleTask$,
@@ -15,7 +16,7 @@ import type { Project } from "~/AppwriteService";
 import { AppwriteService } from "~/AppwriteService";
 import { Query } from "appwrite";
 import { AccountContext } from "./layout";
-import { UpvotesContext } from "./layout";
+import { useUpvotes } from "~/components/hooks/useUpvotes";
 
 export const useHomeData = routeLoader$(async () => {
   const [
@@ -91,17 +92,40 @@ export const head: DocumentHead = () => ({
 
 export default component$(() => {
   const account = useContext(AccountContext);
-  const upvotes = useContext(UpvotesContext);
   const homeDataSignal = useHomeData();
   const homeData = homeDataSignal.value;
 
+  const allProjects = [
+    ...(homeData.featured ? [homeData.featured] : []),
+    ...(homeData.newAndShiny ?? []),
+    ...(homeData.trendZone ?? []),
+    ...(homeData.madeWithTailwind ?? []),
+  ];
+
+  const projectIds = useComputed$(() =>
+    allProjects.map((project) => project.$id)
+  );
+  useUpvotes(projectIds);
+
+  useVisibleTask$(async () => {
+    account.value = await AppwriteService.getAccount();
+  });
+
   const yourPicks = useSignal<Project[] | undefined>([]);
   useVisibleTask$(async () => {
-    if (!account.value || upvotes.value.length === 0) return;
+    if (!account.value) return;
+
+    const lastUpvotes = await AppwriteService.listUserUpvotes(
+      account.value.$id,
+      [Query.limit(3)]
+    );
+
+    if (lastUpvotes.length === 0) return;
+
     yourPicks.value = await AppwriteService.listProjects([
       Query.equal(
         "$id",
-        upvotes.value.slice(0, 3).map((upvote) => upvote.projectId)
+        lastUpvotes.map((upvote) => upvote.projectId)
       ),
     ]);
   });
diff --git a/src/routes/layout.tsx b/src/routes/layout.tsx
index 879f68f..3eb4537 100644
--- a/src/routes/layout.tsx
+++ b/src/routes/layout.tsx
@@ -13,22 +13,21 @@ import {
   useTask$,
 } from "@builder.io/qwik";
 import { routeLoader$, useLocation, useNavigate } from "@builder.io/qwik-city";
-import type { Models } from "appwrite";
-import type { ProjectUpvote } from "~/AppwriteService";
+import { type Models } from "appwrite";
 import { AppwriteService } from "~/AppwriteService";
 import { Config } from "~/Config";
 import Search from "~/components/blocks/Search";
 import Footer from "~/components/layout/Footer";
 import Header from "~/components/layout/Header";
 
-export const UpvotesContext = createContextId<Signal<ProjectUpvote[]>>(
-  "app.upvotes-context"
-);
-
 export const AccountContext = createContextId<Signal<null | Models.User<any>>>(
   "app.account-context"
 );
 
+export const UpvotesContext = createContextId<Record<string, boolean>>(
+  "app.upvotes-context"
+);
+
 export const ThemeContext =
   createContextId<Signal<"light" | "dark">>("app.theme-context");
 
@@ -51,6 +50,9 @@ export default component$(() => {
   const account = useSignal<null | Models.User<any>>(null);
   useContextProvider(AccountContext, account);
 
+  const upvotes = useStore<Record<string, boolean>>({}, { deep: true });
+  useContextProvider(UpvotesContext, upvotes);
+
   const themeData = useThemeLoader();
   const theme = useSignal(themeData.value ?? "dark");
   useContextProvider(ThemeContext, theme);
@@ -74,8 +76,13 @@ export default component$(() => {
 
   useContextProvider(SearchModalContext, searchModal);
 
-  const upvotes = useSignal<ProjectUpvote[]>([]);
-  useContextProvider(UpvotesContext, upvotes);
+  const setStateCallBackFn = $(function (state: string) {
+    contextStore.state = state;
+  });
+  const contextStore = useStore(() => ({
+    state: "closed",
+    setState: setStateCallBackFn,
+  }));
 
   const searchModalRef = useSignal<HTMLDialogElement>();
   const onKeyDown = $((e: QwikKeyboardEvent) => {
@@ -94,10 +101,6 @@ export default component$(() => {
 
   useVisibleTask$(async () => {
     account.value = await AppwriteService.getAccount();
-
-    if (account.value) {
-      upvotes.value = await AppwriteService.listUserUpvotes(account.value.$id);
-    }
   });
 
   const openedFilter = useSignal<string | null>(null);
diff --git a/src/routes/projects/[projectId]/index.tsx b/src/routes/projects/[projectId]/index.tsx
index 6560fb4..cae7020 100644
--- a/src/routes/projects/[projectId]/index.tsx
+++ b/src/routes/projects/[projectId]/index.tsx
@@ -1,4 +1,4 @@
-import { component$, useVisibleTask$ } from "@builder.io/qwik";
+import { component$, useComputed$, useVisibleTask$ } from "@builder.io/qwik";
 import { AppwriteService } from "~/AppwriteService";
 import type { DocumentHead } from "@builder.io/qwik-city";
 import { routeLoader$, Link } from "@builder.io/qwik-city";
@@ -7,6 +7,7 @@ import ProjectTags from "~/components/layout/ProjectTags";
 import Upvote from "~/components/blocks/Upvote";
 import Socials from "~/components/blocks/Socials";
 import { AppwriteException } from "appwrite";
+import { useUpvotes } from "~/components/hooks/useUpvotes";
 
 export const useProjectData = routeLoader$(async ({ params, status }) => {
   try {
@@ -91,6 +92,9 @@ export default component$(() => {
     headerIds: false,
   });
 
+  const projectIds = useComputed$(() => [project.$id]);
+  useUpvotes(projectIds);
+
   useVisibleTask$(async () => {
     const visitedProjects = JSON.parse(
       localStorage.getItem("visitedProjects") ?? "[]"
diff --git a/src/routes/search/index.tsx b/src/routes/search/index.tsx
index 0ee4443..fd20162 100644
--- a/src/routes/search/index.tsx
+++ b/src/routes/search/index.tsx
@@ -1,9 +1,16 @@
-import { $, component$, useSignal, useVisibleTask$ } from "@builder.io/qwik";
+import {
+  $,
+  component$,
+  useComputed$,
+  useSignal,
+  useVisibleTask$,
+} from "@builder.io/qwik";
 import type { DocumentHead } from "@builder.io/qwik-city";
 import { Link } from "@builder.io/qwik-city";
 import { routeLoader$, useLocation } from "@builder.io/qwik-city";
 import { Query } from "appwrite";
 import { AppwriteService } from "~/AppwriteService";
+import { useUpvotes } from "~/components/hooks/useUpvotes";
 import Group from "~/components/layout/Group";
 import ProjectFeatured from "~/components/layout/ProjectFeatured";
 
@@ -126,6 +133,13 @@ export default component$(() => {
   const searchData = useSearchData();
 
   const projects = useSignal(searchData.value.projects);
+
+  const projectIds = useComputed$(() =>
+    projects.value.map((project) => project.$id)
+  );
+
+  useUpvotes(projectIds);
+
   const location = useLocation();
 
   const lastId = useSignal<string | null>(
@@ -151,7 +165,19 @@ export default component$(() => {
       const nextProjects = await AppwriteService.listProjects(queries);
 
       const oldLength = projects.value.length;
-      projects.value = [...new Set([...projects.value, ...nextProjects])];
+
+      const projectsMap = new Map();
+
+      [...projects.value, ...nextProjects].forEach((project) => {
+        if (!projectsMap.has(project.$id)) {
+          projectsMap.set(project.$id, project);
+        } else {
+          projectsMap.set(project.$id, project);
+        }
+      });
+
+      projects.value = Array.from(projectsMap.values());
+
       const newLength = projects.value.length;
 
       lastId.value = projects.value[projects.value.length - 1]?.$id ?? null;

From ed60282e928a231b7a3c6d1e350ad5d7e5ed7995 Mon Sep 17 00:00:00 2001
From: loks0n <22452787+loks0n@users.noreply.github.com>
Date: Fri, 16 Jun 2023 16:28:14 +0100
Subject: [PATCH 3/6] chore: remove debug code

---
 src/routes/layout.tsx | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/src/routes/layout.tsx b/src/routes/layout.tsx
index 3eb4537..dfe24a0 100644
--- a/src/routes/layout.tsx
+++ b/src/routes/layout.tsx
@@ -73,17 +73,8 @@ export default component$(() => {
       document.documentElement.style.overflow = "auto";
     }),
   });
-
   useContextProvider(SearchModalContext, searchModal);
 
-  const setStateCallBackFn = $(function (state: string) {
-    contextStore.state = state;
-  });
-  const contextStore = useStore(() => ({
-    state: "closed",
-    setState: setStateCallBackFn,
-  }));
-
   const searchModalRef = useSignal<HTMLDialogElement>();
   const onKeyDown = $((e: QwikKeyboardEvent) => {
     if (e.key === "Escape") {

From 781bd706164b709ba08bcf87c3a5d15bb8eac017 Mon Sep 17 00:00:00 2001
From: loks0n <22452787+loks0n@users.noreply.github.com>
Date: Fri, 16 Jun 2023 16:33:49 +0100
Subject: [PATCH 4/6] chore: remove clg

---
 src/components/blocks/Upvote.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/blocks/Upvote.tsx b/src/components/blocks/Upvote.tsx
index 18fff16..120c530 100644
--- a/src/components/blocks/Upvote.tsx
+++ b/src/components/blocks/Upvote.tsx
@@ -21,7 +21,6 @@ export default component$((props: Props) => {
   const isLoading = useSignal(false);
 
   const isUpvotedServer = useComputed$(() => {
-    console.log("isUpvotedServer", props.projectId, upvotes[props.projectId]);
     return upvotes[props.projectId];
   });
   const isUpvotedClient = useSignal(isUpvotedServer.value);

From 6f206524d7743f6da25ca4fe72cb60970291aa8e Mon Sep 17 00:00:00 2001
From: loks0n <22452787+loks0n@users.noreply.github.com>
Date: Fri, 16 Jun 2023 16:36:24 +0100
Subject: [PATCH 5/6] chore: remove redundant checks

---
 src/components/hooks/useUpvotes.ts | 32 ++++++++++++++----------------
 1 file changed, 15 insertions(+), 17 deletions(-)

diff --git a/src/components/hooks/useUpvotes.ts b/src/components/hooks/useUpvotes.ts
index 40d000a..61fbf5c 100644
--- a/src/components/hooks/useUpvotes.ts
+++ b/src/components/hooks/useUpvotes.ts
@@ -9,28 +9,26 @@ export function useUpvotes(projectIds: Signal<string[]>) {
   const account = useContext(AccountContext);
 
   useVisibleTask$(async ({ track }) => {
-    track(() => [account?.value, projectIds.value]);
-    if (!account?.value) {
+    track(() => [account.value, projectIds.value]);
+    if (!account.value) {
       return;
     }
 
-    if (account.value) {
-      const newProjectIds = projectIds.value.filter(
-        (projectId) => upvotes[projectId] === undefined
-      );
+    const newProjectIds = projectIds.value.filter(
+      (projectId) => upvotes[projectId] === undefined
+    );
 
-      if (newProjectIds.length === 0) {
-        return;
-      }
+    if (newProjectIds.length === 0) {
+      return;
+    }
 
-      const projectUpvotes = await AppwriteService.listUserUpvotes(
-        account.value.$id,
-        [Query.equal("projectId", newProjectIds)]
-      );
+    const projectUpvotes = await AppwriteService.listUserUpvotes(
+      account.value.$id,
+      [Query.equal("projectId", newProjectIds)]
+    );
 
-      projectUpvotes.forEach((upvote) => {
-        upvotes[upvote.projectId] = true;
-      });
-    }
+    projectUpvotes.forEach((upvote) => {
+      upvotes[upvote.projectId] = true;
+    });
   });
 }

From 9b225ff9ef40aa894f6ea1a289d17cb6925f9b2c Mon Sep 17 00:00:00 2001
From: loks0n <22452787+loks0n@users.noreply.github.com>
Date: Fri, 16 Jun 2023 16:39:07 +0100
Subject: [PATCH 6/6] chore: revert pagination merge

---
 src/routes/search/index.tsx | 14 +-------------
 1 file changed, 1 insertion(+), 13 deletions(-)

diff --git a/src/routes/search/index.tsx b/src/routes/search/index.tsx
index fd20162..da9c94c 100644
--- a/src/routes/search/index.tsx
+++ b/src/routes/search/index.tsx
@@ -165,19 +165,7 @@ export default component$(() => {
       const nextProjects = await AppwriteService.listProjects(queries);
 
       const oldLength = projects.value.length;
-
-      const projectsMap = new Map();
-
-      [...projects.value, ...nextProjects].forEach((project) => {
-        if (!projectsMap.has(project.$id)) {
-          projectsMap.set(project.$id, project);
-        } else {
-          projectsMap.set(project.$id, project);
-        }
-      });
-
-      projects.value = Array.from(projectsMap.values());
-
+      projects.value = [...new Set([...projects.value, ...nextProjects])];
       const newLength = projects.value.length;
 
       lastId.value = projects.value[projects.value.length - 1]?.$id ?? null;