From d4b7fd772c6ccef6fc3cc54bc515c5e4abacbb2b Mon Sep 17 00:00:00 2001
From: SamTV12345 <40429738+samtv12345@users.noreply.github.com>
Date: Tue, 12 Nov 2024 22:49:39 +0100
Subject: [PATCH] Added filter by official.

---
 app/plugins/page.tsx                      |  2 +-
 src/pagesToDisplay/PluginViewerHeader.tsx |  4 +---
 src/store/store.ts                        | 29 +++++++++++++++++++----
 3 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/app/plugins/page.tsx b/app/plugins/page.tsx
index 57c6564..af28a21 100644
--- a/app/plugins/page.tsx
+++ b/app/plugins/page.tsx
@@ -9,7 +9,7 @@ import {PluginsList} from "../../src/pagesToDisplay/PluginsList";
 import {PluginsFooter} from "../../src/pagesToDisplay/PluginsFooter";
 
 
-const productionURL = "https://static.etherpad.org"
+const productionURL = ""//"https://static.etherpad.org"
 
 export default function PluginViewer() {
 
diff --git a/src/pagesToDisplay/PluginViewerHeader.tsx b/src/pagesToDisplay/PluginViewerHeader.tsx
index d14ccb8..cd32c98 100644
--- a/src/pagesToDisplay/PluginViewerHeader.tsx
+++ b/src/pagesToDisplay/PluginViewerHeader.tsx
@@ -26,13 +26,11 @@ export const PluginViewerHeader = ()=> {
         </div>
         <h2 className="text-3xl text-primary">Plugins ({plugins?.list.length})</h2>
         <div className="flex gap-5 border-t-[1px] border-b-[1px] border-gray-600 pt-2 pb-2">
-            <span>
-                <Checkbox className="text-white bg-primary data-[state=checked]:bg-primary" checked={pluginData?.filterOfficial}
+                <Checkbox className="text-white bg-primary data-[state=checked]:bg-primary border-none self-center" checked={pluginData?.filterOfficial}
                           onCheckedChange={() => setOfficalOnly(!pluginData?.filterOfficial)} id="c1"/>
                 <label className="text-white ml-2 mt-auto text-2xl" htmlFor="c1">
                     Only official plugins
                 </label>
-            </span>
             <span className="text-white mt-auto text-2xl">Sort by:</span>
             <Select onValueChange={(v: string) => {
                 setSortKey(v);
diff --git a/src/store/store.ts b/src/store/store.ts
index d6c2f4b..c158189 100644
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -215,10 +215,31 @@ export const useUIStore = create<StoreType>((set, getState) => ({
     },
     currentPage: 0,
     setCurrentPage: (currentPage: number) => set({currentPage}),
-    setOfficialOnly: (officialOnly: boolean) => set({pluginData: {
-        ...getState().pluginData!,
-        filterOfficial: officialOnly
-        }}),
+    setOfficialOnly: (officialOnly: boolean) => {
+        console.log('officialOnly', officialOnly)
+        if (officialOnly) {
+            const filteredPlugins = getState().filteredPlugins.flat(1).filter((plugin) => {
+                return plugin.official
+            })
+            const chunkSize = 30;
+            const chunks = [];
+            for (let i = 0; i < filteredPlugins!.length; i += chunkSize) {
+                const chunk = filteredPlugins!.slice(i, i + chunkSize);
+                chunks.push(chunk);
+            }
+            set({
+                filteredPlugins: chunks
+            })
+        }
+
+
+        set({
+            pluginData: {
+                ...getState().pluginData!,
+                filterOfficial: officialOnly
+            }
+        })
+    },
     setSortKey: (sortKey: string) => {
         const newList = getState().filteredPlugins.flat(1).toSorted((a,b)=> {
             if (sortKey === 'newest') {