From 44a1cd878242a2e3b83ec67de8ff8941ce2802ad Mon Sep 17 00:00:00 2001
From: 6543 <6543@obermui.de>
Date: Mon, 3 Apr 2023 17:09:05 +0200
Subject: [PATCH] Refactor plugin-index plugin for docs (#1694)

- delete NewPluginPanel as it's not used
- useRef for fuse
---
 .../src/theme/WoodpeckerPluginList.tsx        | 38 +++++--------------
 1 file changed, 9 insertions(+), 29 deletions(-)

diff --git a/docs/plugins/woodpecker-plugins/src/theme/WoodpeckerPluginList.tsx b/docs/plugins/woodpecker-plugins/src/theme/WoodpeckerPluginList.tsx
index c1b5cb335..8b6df2600 100644
--- a/docs/plugins/woodpecker-plugins/src/theme/WoodpeckerPluginList.tsx
+++ b/docs/plugins/woodpecker-plugins/src/theme/WoodpeckerPluginList.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import Fuse from 'fuse.js';
 import Layout from '@theme/Layout';
 import './style.css';
@@ -35,33 +35,14 @@ export function WoodpeckerPluginList({ plugins }: { plugins: WoodpeckerPlugin[]
   const applyForIndexUrl =
     'https://github.com/woodpecker-ci/woodpecker/edit/master/docs/plugins/woodpecker-plugins/plugins.json';
 
-  const NewPluginPanel = () => (
-    <a href={applyForIndexUrl} target="_blank" rel="noopener noreferrer" className="card shadow--md wp-plugin-card">
-      <div className="card__header row">
-        <div className="col col--2">
-          <svg width="50" height="50" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path
-              d="M88.2357 38.0952H61.9048V11.7643C61.9048 5.29524 56.4714 0 50 0C43.5286 0 38.0952 5.29524 38.0952 11.7643V38.0952H11.7643C5.29524 38.0952 0 43.5286 0 50C0 56.4714 5.29524 61.9048 11.7643 61.9048H38.0952V88.2357C38.0952 94.7048 43.5286 100 50 100C56.4714 100 61.9048 94.7048 61.9048 88.2357V61.9048H88.2357C94.7048 61.9048 100 56.4714 100 50C100 43.5286 94.7048 38.0952 88.2357 38.0952Z"
-              fill="#4CAF50"
-            />
-          </svg>
-        </div>
-        <div className="col col--10">
-          <h3>Add your own plugin</h3>
-          <p>You can simply add your own plugin to this index.</p>
-        </div>
-      </div>
-    </a>
-  );
-
-  const fuse = new Fuse(plugins, {
-    keys: ['name', 'description'],
-    threshold: 0.3,
-  });
-
   const [query, setQuery] = useState('');
 
-  const searchedPlugins = query.length >= 1 ? fuse.search(query) : plugins.map((p) => ({ item: p }));
+  const fuse = useRef(new Fuse(plugins, {
+    keys: ['name', 'description'],
+    threshold: 0.3,
+  }));
+
+  const searchedPlugins = query.length >= 1 ? fuse.current.search(query).map((p) => ( p.item )) : plugins;
 
   return (
     <Layout title="Woodpecker CI plugins" description="List of all Woodpecker-CI plugins">
@@ -84,9 +65,8 @@ export function WoodpeckerPluginList({ plugins }: { plugins: WoodpeckerPlugin[]
               className="wp-plugin-search"
             />
             <div className="wp-plugins-list">
-              {/* {query.length == 0 && <NewPluginPanel />} */}
-              {searchedPlugins.map((plugin, idx) => (
-                <PluginPanel key={idx} plugin={plugin.item} />
+              {searchedPlugins.map((plugin) => (
+                <PluginPanel key={plugin.name} plugin={plugin} />
               ))}
             </div>
           </div>