Update plex extension (#13476)

* Update plex extension

- fix: search functionality
- Initial commit

* refactor: rm excess state and fix lowercase filter

* Update plex extension

- refactor: filter performance
- Initial commit

* docs: filter refactored

* Update CHANGELOG.md and optimise images

---------

Co-authored-by: raycastbot <bot@raycast.com>

extensions/plex/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Plex Changelog
 
+## [New Features] - 2024-07-16
+
+ - Refactored filtering for a snappier, faster experience
+
 ## [New Features] - 2024-07-12
 
  - Fix search functionality

extensions/plex/src/sectionItems.tsx

@@ -1,15 +1,13 @@
-import { ActionPanel, Action, Grid } from "@raycast/api";
-import { useFetch, Response } from "@raycast/utils";
-import React from "react";
-import { useState, useEffect } from "react";
-import { ENDPOINTS, plex_token } from "../utils/constants";
+import { Action, ActionPanel, Grid } from "@raycast/api";
+import { useFetch } from "@raycast/utils";
+import { useMemo, useState } from "react";
 import { SectionItemsApiResponse } from "../types/types";
+import { ENDPOINTS, plex_token } from "../utils/constants";
 import thumbLinks from "../utils/thumbLinks";
 import { MediaItem } from "./mediaItem";
 
 export function GetSectionItems({ sectionId, sectionName }: { sectionId: string; sectionName: string }) {
   const [searchText, setSearchText] = useState<string>("");
-  const [filteredList, setFilteredList] = useState<SectionItemsApiResponse["MediaContainer"]["Metadata"][]>([]);
 
   const endpoint = `${ENDPOINTS.librarySections}${sectionId}/all`;
 
@@ -20,25 +18,10 @@ export function GetSectionItems({ sectionId, sectionName }: { sectionId: string;
     keepPreviousData: true,
   });
 
-  useEffect(() => {
-    if (!isLoading && Array.isArray(data)) {
-      setFilteredList(data);
-    }
-  }, [isLoading, data]);
-
-  useEffect(() => {
-    if (Array.isArray(data)) {
-      if (searchText.length > 0) {
-        setFilteredList(
-          filteredList.filter((item: SectionItemsApiResponse["MediaContainer"]["Metadata"]) =>
-            item.title.toLowerCase().includes(searchText.toLowerCase()),
-          ),
-        );
-      } else if (searchText.length === 0) {
-        setFilteredList(data);
-      }
-    }
-  }, [searchText]);
+  const filteredItems = useMemo(() => {
+    const items = Array.isArray(data) ? data : [];
+    return filterItems(items, searchText);
+  }, [searchText, data]);
 
   return (
     <Grid
@@ -53,8 +36,8 @@ export function GetSectionItems({ sectionId, sectionName }: { sectionId: string;
       navigationTitle={sectionName}
       searchBarPlaceholder={"Search " + sectionName}
     >
-      {Array.isArray(filteredList) &&
-        filteredList.map((item: SectionItemsApiResponse["MediaContainer"]["Metadata"]) => (
+      {Array.isArray(filteredItems) &&
+        filteredItems.map((item: SectionItemsApiResponse["MediaContainer"]["Metadata"]) => (
           <Grid.Item
             key={item.guid}
             content={{
@@ -81,3 +64,13 @@ async function parseResponse(response: Response): Promise<SectionItemsApiRespons
 
   return json.MediaContainer.Metadata;
 }
+
+function filterItems(items: SectionItemsApiResponse["MediaContainer"]["Metadata"][], filter: string) {
+  if (filter.length === 0) {
+    return items;
+  }
+
+  return items.filter((item: SectionItemsApiResponse["MediaContainer"]["Metadata"]) =>
+    item.title.toLowerCase().includes(filter.toLowerCase()),
+  );
+}