filter recent used realms as well as others (#580)

* filter recent used realms as well as others

fixing: #577

* use memo instead of direved state

src/components/realm-selector/RealmSelector.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useContext, useEffect, ReactElement } from "react";
+import React, { useState, useContext, ReactElement, useMemo } from "react";
 import { useHistory } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 
@@ -16,7 +16,6 @@ import {
 } from "@patternfly/react-core";
 import { CheckIcon } from "@patternfly/react-icons";
 
-import type RealmRepresentation from "keycloak-admin/lib/defs/realmRepresentation";
 import { toUpperCase } from "../../util";
 import { useRealm } from "../../context/realm-context/RealmContext";
 import { WhoAmIContext } from "../../context/whoami/WhoAmI";
@@ -24,15 +23,40 @@ import { RecentUsed } from "./recent-used";
 
 import "./realm-selector.css";
 
+type RecentUsedRealm = {
+  name: string;
+  used: boolean;
+};
+
 export const RealmSelector = () => {
   const { realm, setRealm, realms } = useRealm();
   const { whoAmI } = useContext(WhoAmIContext);
   const [open, setOpen] = useState(false);
   const [search, setSearch] = useState("");
-  const [filteredItems, setFilteredItems] = useState<RealmRepresentation[]>();
   const history = useHistory();
   const { t } = useTranslation("common");
   const recentUsed = new RecentUsed();
+  const all = recentUsed.used
+    .map((name) => {
+      return { name, used: true };
+    })
+    .concat(
+      realms
+        .filter((r) => !recentUsed.used.includes(r.realm!))
+        .map((r) => {
+          return { name: r.realm!, used: false };
+        })
+    );
+
+  const filteredItems = useMemo(() => {
+    if (search === "") {
+      return undefined;
+    }
+
+    return all.filter((r) =>
+      r.name.toLowerCase().includes(search.toLowerCase())
+    );
+  }, [search, all]);
 
   const RealmText = ({ value }: { value: string }) => (
     <Split className="keycloak__realm_selector__list-item-split">
@@ -55,27 +79,12 @@ export const RealmSelector = () => {
     </Button>
   );
 
-  const onFilter = () => {
-    if (search === "") {
-      setFilteredItems(undefined);
-    } else {
-      const filtered = realms.filter(
-        (r) => r.realm!.toLowerCase().indexOf(search.toLowerCase()) !== -1
-      );
-      setFilteredItems(filtered);
-    }
-  };
-
   const selectRealm = (realm: string) => {
     setRealm(realm);
     setOpen(!open);
     history.push(`/${realm}/`);
   };
 
-  useEffect(() => {
-    onFilter();
-  }, [search]);
-
   const dropdownItems = realms.map((r) => (
     <DropdownItem
       key={`realm-dropdown-item-${r.realm}`}
@@ -123,21 +132,14 @@ export const RealmSelector = () => {
           }}
           searchInputValue={search}
           onSearchInputChange={(value) => setSearch(value)}
-          onSearchButtonClick={() => onFilter()}
           className="keycloak__realm_selector__context_selector"
         >
-          {recentUsed.used.map((realm) => (
-            <ContextSelectorItem key={realm}>
-              <RealmText value={realm} /> <Label>{t("recent")}</Label>
+          {(filteredItems || all).map((item) => (
+            <ContextSelectorItem key={item.name}>
+              <RealmText value={item.name} />{" "}
+              {item.used && <Label>{t("recent")}</Label>}
             </ContextSelectorItem>
           ))}
-          {(filteredItems || realms)
-            .filter((r) => !recentUsed.used.includes(r.realm!))
-            .map((item) => (
-              <ContextSelectorItem key={item.id}>
-                <RealmText value={item.realm!} />
-              </ContextSelectorItem>
-            ))}
           <ContextSelectorItem key="add">
             <AddRealm />
           </ContextSelectorItem>