message: filter recent used realms as well as others
  * filter recent used realms as well as others
  fixing:
  * use memo instead of direved state
diff: -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,19 +132,12 @@ 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>
  - </ContextSelectorItem>
  - ))}
  - {(filteredItems || realms)
  - .filter((r) => !recentUsed.used.includes(r.realm!))
  - .map((item) => (
  - <ContextSelectorItem key={item.id}>
  - <RealmText value={item.realm!} />
  + {(filteredItems || all).map((item) => (
  + <ContextSelectorItem key={item.name}>
  + <RealmText value={item.name} />{" "}
  + {item.used && <Label>{t("recent")}</Label>}
  </ContextSelectorItem>
  ))}
  <ContextSelectorItem key="add">
  