feat: Added search and sort plugins by names

src/components/search-bar.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useCallback, useState } from "react";
 import theme from "../theme";
 import { css } from "@compiled/react";
 
@@ -35,14 +35,17 @@ const searchBarWrapperStyles = css({
 const SearchBar: React.FC<SearchBarProps> = ({ onSearch }) => {
  const [query, setQuery] = useState("");
 
- const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
- setQuery(event.target.value);
- onSearch(event.target.value);
- };
+ const handleInputChange = useCallback(
+ (event: React.ChangeEvent<HTMLInputElement>) => {
+ setQuery(event.target.value);
+ onSearch(event.target.value);
+ },
+ [onSearch]
+ );
 
- const handleSearch = () => {
+ const handleSearch = useCallback(() => {
  onSearch(query);
- };
+ }, [query, onSearch]);
 
  return (
  <div css={searchBarWrapperStyles}>

src/tabs/plugins.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useCallback, useState } from "react";
 import type { Plugin } from "prosemirror-state";
 import { InfoPanel } from "../components/info-panel";
 import { Heading } from "../components/heading";
@@ -46,14 +46,19 @@ export default function PluginsTab() {
 
  const selectedPluginState = selectedPlugin.getState(state);
 
- const handleSearch = (input: string) => {
- const filteredPlugins = (state.plugins as any as Plugin<any>[]).filter(
- (plugin) => {
- return (plugin as any).key.toLowerCase().includes(input.toLowerCase());
- }
- );
- setPluginsLocal(filteredPlugins);
- };
+ const handleSearch = useCallback(
+ (input: string) => {
+ const filteredPlugins = (state.plugins as any as Plugin<any>[]).filter(
+ (plugin) => {
+ return (plugin as any).key
+ .toLowerCase()
+ .includes(input.toLowerCase());
+ }
+ );
+ setPluginsLocal(filteredPlugins);
+ },
+ [state.plugins]
+ );
 
  const handleClickSort = () => {
  setSortOrder(!sortAsc);