@fortawesome/free-solid-svg-icons#faSearch TypeScript Examples

render() {
    const { searchValue } = this.state;

    return (
      <div>
        <form
          onSubmit={this.onSubmit}
          className={`${styles.search} d-flex align-items-center`}
        >
          <input
            type="text"
            name="query"
            placeholder="Search"
            value={searchValue}
            className="w-100"
            onChange={this.onChange}
          />
          <Button type="submit" variant="blue" title="Search">
            <FontAwesomeIcon width="24" icon={faSearch} />
            <span>Search </span>
          </Button>
        </form>
      </div>
    );
  }

Search: React.FC<SearchProps> = ({ onChange, ...rest }) => {
    const handleChange = (evt: ChangeEvent<HTMLInputElement>): void => onChange(evt.target.value)
    return (
        <>
            <SearchInput placeholder="Search for node..." onChange={handleChange} {...rest} />
            <Icon icon={faSearch} />
        </>
    )
}

/**
 * Icons listed here no longer need to be imported in other files.
 * Instead a string can be passed to the `icon` property.
 * By default, the icons are all "solid", which is why `far` is also added ...
 * ... simply do `icon={["far", "icon-name"]}` to use the "regular" version of "icon-name"
 * @see https://fontawesome.com/v5.15/how-to-use/on-the-web/using-with/react#using
 */
library.add(
  far,
  faCog,
  faSearch,
  faTimes,
  faWindowRestore,
  faEllipsisV,
  faWindowMaximize,
  faTimesCircle,
  faStar,
  faMask,
  faExclamationCircle,
  faCopy,
  faAngleDown,
  faAngleUp,
  faCheckCircle,
  faUpload
);

SdnInputForm: React.FC<SdnInputFormProps> = ({
  onSubmit,
  disabled = false
}) => {
  const [value, setValue] = useState("");

  const onSubmitted: React.FormEventHandler = useCallback(
    event => {
      event.preventDefault();
      onSubmit(value);
      setValue("");
    },
    [onSubmit, setValue, value]
  );

  return (
    <form
      onSubmit={onSubmitted}
      className="display-flex flex-row flex-justify-start flex-align-center flex-no-wrap flex-auto margin-1"
    >
      <Input
        value={value}
        onChange={e => setValue(e.currentTarget.value)}
        placeholder="SDN"
      />
      <Button type="submit" disabled={disabled} square>
        <FontAwesomeIcon icon={faSearch} />
      </Button>
    </form>
  );
}

// Description: add icons to be used in the app as needed
// Some are solid and some are from regular svg (hollow icons)
library.add(
  faSearch,
  faSearchPlus,
  faHome,
  faSpinner,
  faExclamationTriangle,
  faTrash,
  faTrashAlt,
  faEdit,
  faUser,
  faUserEdit,
  faUserPlus,
  faUserTimes,
  faUserMinus,
  faKey,
  faCheck,
  faCheckCircle,
  faCalendarDay,
  faClock,
  faCalendarAlt,
  farUser,
  faFileAlt
);

render() {
    return (
      <div className="schema-menu">
        <div className="search-schema-field">
          <input type="text" onChange={this.onSearchStringChange} placeholder="Search Schema"/>
          <FontAwesomeIcon className="search-icon" icon={faSearch}/>
        </div>
        <div className="sort-schema-field">
          <div className="sort-field-head"><FontAwesomeIcon className="sort-icon" icon={faSortAmountDown} /><label>Sort<br />Schema</label></div>
          <select className="sort-schema-options" onChange={() => this.flipSchemaOrder()}>
            <option value="az">Alphabetical (A-Z)</option>
            <option value="za">Alphabetical (Z-A)</option>
          </select>
        </div>
        <div className="schema-listing">
          {this.state.restrictiedSchemaList.map((schema: string, schemaIndex: number) => {
            return (
              <div className={this.state.selectedSchemaIndex === schemaIndex ? 'schema-name selected' : 'schema-name'} key={schemaIndex} onClick={() => this.handleSchemaSelection(schemaIndex)} >{schema}</div>
            )
          })}
        </div>
      </div>
    )
  }

public constructor(private _matIconRegistry: MatIconRegistry, private _sanitizer: DomSanitizer) {
    this.addSvg(faAngleDoubleDown);
    this.addSvg(faArrowUp);
    this.addSvg(faArrowDown);
    this.addSvg(faSyncAlt);
    this.addSvg(faTimes);
    this.addSvg(faExternalLinkAlt);
    this.addSvg(faQuestionCircle);
    this.addSvg(faPlay);
    this.addSvg(faClock);
    this.addSvg(faBug);
    this.addSvg(faLink);
    this.addSvg(faDiscord);
    this.addSvg(faGithub);
    this.addSvg(faInfoCircle);
    this.addSvg(faCodeBranch);
    this.addSvg(faCaretDown);
    this.addSvg(faExclamationTriangle);
    this.addSvg(faCode);
    this.addSvg(faPatreon);
    this.addSvg(faCoins);
    this.addSvg(faCompressArrowsAlt);
    this.addSvg(faPencilAlt);
    this.addSvg(faCheckCircle);
    this.addSvg(faDiceD6);
    this.addSvg(faSearch);
    this.addSvg(faInfoCircle);
    this.addSvg(faNewspaper);
    this.addSvg(faCog);
    this.addSvg(faAngleUp);
    this.addSvg(faAngleDown);
    this.addSvg(faChevronRight);
    this.addSvg(faUserCircle);
    this.addSvg(faEllipsisV);
    this.addSvg(faCopy);
    this.addSvg(farCheckCircle);
    this.addSvg(faExclamation);
    this.addSvg(faTrash);
    this.addSvg(faHistory);
    this.addSvg(faCaretSquareRight);
    this.addSvg(faCaretSquareLeft);
    this.addSvg(faMinimize);
    this.addSvg(faUpRightFromSquare);
  }

export default function RunTimeTools() {
  const openFileItems = useSelector((state: IStoreState) => state.openFileItems);
  const files = useSelector((state: IStoreState) => state.dslFileArray)
  const user = useSelector((state: IStoreState) => state.user);

  const handleRun = () => {
    Bridge.compile('json', openFileItems.items[openFileItems.currentIndex].code).then(v => {
      Bridge.open(WidgetType.WEBGL, v);
    })
  };

  const handleSave = () => {
    const cur = openFileItems.items[openFileItems.currentIndex];
    saveDslCode(cur.id, user.email, cur.code, cur.fileId).then((v) => {
      if (!v.err) {
        toast('save code!');
      }
    })
  };

  const handleSaveAll = () => {
    saveAllDslCode(user.email, files.files).then((v) => {
      if (!v.err) {
        toast('save all!');
      }
    });
  };

  const handleBuild = () => {
    Bridge.open(WidgetType.CODE, {
      type: 'target',
      data: openFileItems.items[openFileItems.currentIndex].code
    });
  };

  return (
    <div className={style.run_tools}>
      <button className={style.build_btn} onClick={handleBuild}>
        <FontAwesomeIcon icon={faGavel}/>
      </button>
      <button className={style.run_btn} onClick={handleRun}>
        <FontAwesomeIcon icon={faPlay}/>
      </button>
      <button className={style.save_btn} onClick={handleSave}>
        <FontAwesomeIcon icon={faFileCode}/>
      </button>
      <button className={style.save_all_btn} onClick={handleSaveAll}>
        <FontAwesomeIcon icon={faSave}/>
      </button>
      <div className={style.search}>
        <input/>
        <FontAwesomeIcon icon={faSearch}/>
      </div>
    </div>
  );
}

LabelDialog = () => {
  const theme = useTheme();
  const dispatch = useDispatch();
  const open = useSelector((state: RootState) => state.label.dialogOpen);
  const labels = useSelector(selectAllLabels);
  const [searchValue, setSearchValue] = useState("");
  const [creating, setCreating] = useState(false);
  const xsDown = useMediaQuery(theme.breakpoints.down("xs"));

  const filteredLabels = labels.filter((label) =>
    label.name.toLowerCase().match(searchValue.trim().toLowerCase())
  );

  const handleClose = () => {
    dispatch(setDialogOpen(false));
  };

  return (
    <Dialog
      open={open}
      onClose={handleClose}
      maxWidth="sm"
      fullWidth
      fullScreen={xsDown}
    >
      <Close onClose={handleClose} />
      <DialogTitle id="edit-labels">Edit labels</DialogTitle>
      <Container>
        <Flex
          css={css`
            align-items: flex-end;
            ${creating && "margin-bottom: 1rem;"}
          `}
        >
          <LabelCount>
            {filteredLabels.length} label{filteredLabels.length !== 1 && "s"}
          </LabelCount>
          <div>
            <Hidden xsDown implementation="css">
              <TextField
                value={searchValue}
                onChange={(e) => setSearchValue(e.target.value)}
                placeholder="Search labels"
                InputProps={{
                  startAdornment: (
                    <InputAdornment
                      position="start"
                      css={css`
                        color: #ccc;
                      `}
                    >
                      <FontAwesomeIcon icon={faSearch} />
                    </InputAdornment>
                  ),
                }}
              />
            </Hidden>
          </div>
          <Button
            size="small"
            color="primary"
            variant="contained"
            onClick={() => setCreating(true)}
            css={css`
              margin-right: 1rem;
            `}
          >
            New label
          </Button>
        </Flex>
        {creating && <LabelCreate setCreating={setCreating} />}
        <Table>
          {filteredLabels.map((label) => (
            <LabelRow key={label.id + label.color + label.name} label={label} />
          ))}
        </Table>
      </Container>
    </Dialog>
  );
}

fontAwesomeSolidIcons = {
    faAngleDown,
    faAngleRight,
    faArrowLeft,
    faBars,
    faBookOpen,
    faChartArea,
    faChartBar,
    faChartPie,
    faChevronDown,
    faChevronUp,
    faColumns,
    faSearch,
    faTable,
    faTachometerAlt,
    faUser,
    faExclamationTriangle,
    faSignOutAlt,
    faCalendarAlt,
    faCogs,
    faClipboardList,
    faHammer,
    faTools,
    faSync,
    faLock,
    faLockOpen,
    faTrash,
    faPlusCircle,
    faSpinner,
    faMap,
    faAnchor,
    faCity,
    faChessRook,
    faMountain,
    faCampground,
    faHome,
    faUniversity,
    faCrosshairs,
    faPlane,
    faWrench,
}

searchIcon = faSearch as IconProp;

SelectFilterControls: React.FC<SelectFilterControls> = ({
  options,
  defaultOption,
  onSubmit
}) => {
  const [currentOption, setCurrentOption] = useState(
    defaultOption ?? options[0]?.value
  );
  const [currentValue, setCurrentValue] = useState("");

  const onOptionChange: React.ChangeEventHandler<HTMLSelectElement> = event => {
    setCurrentOption(event.currentTarget.value);
  };

  const onValueChange: React.ChangeEventHandler<HTMLInputElement> = event => {
    setCurrentValue(event.currentTarget.value);
  };

  const onSubmitted: React.FormEventHandler<HTMLFormElement> = event => {
    event.preventDefault();
    onSubmit([
      {
        id: currentOption,
        value: currentValue
      }
    ]);
  };

  return (
    <form
      className="grid-row flex-row flex-justify-center flex-align-center"
      onSubmit={onSubmitted}
    >
      <div className="grid-col-full tablet:grid-col-2 margin-x-2">
        <Select
          onChange={onOptionChange}
          value={currentOption}
          placeholder="Field"
          defaultMargin
          defaultOutline
        >
          {options.map(({ name, value }) => (
            <option key={value} value={value}>
              {name}
            </option>
          ))}
        </Select>
      </div>
      <div className="grid-col-10 tablet:grid-col-3">
        <Input
          defaultMargin
          value={currentValue}
          onChange={onValueChange}
          type="text"
          placeholder="Search"
        />
      </div>
      <div className="grid-col-auto">
        <Button square className="margin-top-1" type="submit">
          <FontAwesomeIcon icon={faSearch} />
        </Button>
      </div>
    </form>
  );
}

render() {
    return(
      <div className="table-menu">
         <div className="search-table-field">
          <input type="text" onChange={this.onSearchStringChange} value={this.state.searchString} placeholder="Search Table"/>
          <FontAwesomeIcon className="search-icon" icon={faSearch}/>
        </div>
        <div className="table-view-controls">
          <div className="sort-table-field">
            <div className="sort-field-head">
              <FontAwesomeIcon className="sort-icon" icon={faSortAmountDown} />
              <label>Sort<br />Table</label>
            </div>
            <select className="sort-table-options" onChange={this.changeTableSortMode}>
              <option value={TableSortMode.A_TO_Z_BY_TIER} selected={this.state.currentTableSortMode === TableSortMode.A_TO_Z_BY_TIER}>Alphabetical (A-Z)</option>
              <option value={TableSortMode.Z_TO_A_BY_TIER} selected={this.state.currentTableSortMode === TableSortMode.Z_TO_A_BY_TIER}>Alphabetical (Z-A)</option>
              {/* <option value="tb">Topological (top-bottom)</option> */}
              {/* <option value="bt">Topological (bottom-top)</option> */}
            </select>
          </div>
          <div className="view-all-part-tables">
            <div className="sort-field-head">
              <label>{this.state.viewAllPartTables ? 'Showing' : 'Hiding'} All Part Tables</label>
            </div>
            <div className="icon-container" onClick={() => this.toggleAllPartTableView()}>
              {this.state.viewAllPartTables ? <FontAwesomeIcon className="eye-icon" icon={faEye}/> : <FontAwesomeIcon className="eye-icon" icon={faEyeSlash}/>}
            </div>
          </div>
        </div>
        {this.props.tableListIsLoading ? 
        <TableListLoading /> : 
        <div className="table-listing">
          {!this.props.tableListDict ? <p className="unselectedSchemaMessage">Select a schema to see table listing</p> : ''}
          {
            this.state.restrictedTableList.map((table: ParentTableListEntry) => {
              return(
                <div key={`${table.tableName}-${table.tableType}`}>
                  <div className={this.props.selectedTableName === table.tableName && this.props.selectedTableType === table.tableType ? 'table-entry selected' : 'table-entry'} key={`${table.tableName}-${table.tableType}`} 
                  onClick={(event) => {this.props.onTableSelection(table.tableName, table.tableType)}}>
                    <p className="table-name">{table.tableName}</p>
                    <span className={table.tableType === TableType.COMPUTED ? 'computed tier-label' : (table.tableType === TableType.LOOKUP ? 
                      'lookup tier-label' : (table.tableType === TableType.MANUAL ? 'manual tier-label' : 'imported tier-label'))}>{TableType[table.tableType].toLowerCase()}</span>
                    {table.partTables.length ?
                      (<div onClick={(event) => {this.toggleEachPartTableView(event, table)}} 
                      className={table.tableType === TableType.COMPUTED ? "computed show-part-table" : table.tableType === TableType.IMPORTED ? "imported show-part-table" : table.tableType === TableType.LOOKUP  ? "lookup show-part-table" : "manual show-part-table"}>
                        <label className="head">part table</label>
                        <div className="icon">{!this.state.viewAllPartTables || this.state.hidePartTable.includes(table.tableName) ?
                          <FontAwesomeIcon className="eye-icon" icon={faEyeSlash} />
                          : <FontAwesomeIcon className="eye-icon" icon={faEye} />}
                        </div>
                      </div>) : ''}
                  </div>
                  {table.partTables.length && !this.state.hidePartTable.includes(table.tableName) ? (
                    table.partTables.map((partTable: PartTableListEntry) => {
                      return (
                        <div onClick={() => {this.props.onTableSelection(table.tableName + '.' + partTable.tableName, partTable.tableType)}} key={partTable.tableName} 
                        className={this.state.viewAllPartTables && this.props.selectedTableName === `${table.tableName}.${partTable.tableName}` && this.props.selectedTableType === partTable.tableType ? 
                        "part-table-entry selected" : this.state.viewAllPartTables && (this.props.selectedTableName !== `${table.tableName}.${partTable.tableName}` || this.props.selectedTableType !== partTable.tableType) ? 
                        "part-table-entry" : !this.state.viewAllPartTables ? "part-table-entry hide" : ""}>
                        <p className="table-name">{partTable.tableName}</p>
                        <span className={table.tableType === TableType.COMPUTED ? "part-label computed-part" : table.tableType === TableType.LOOKUP ? "part-label lookup-part" : table.tableType === TableType.IMPORTED ? "part-label imported-part" : "part-label manual-part"}>
                          <div className="MT-type">{TableType[table.tableType].toLowerCase()}</div>
                          <div className="part-table-tag">{TableType[partTable.tableType].toLowerCase() + ' table'}</div>
                        </span>
                      </div>
                      )
                    })
                  ) : ''
                  }
                </div>
              )
            })
          }
        </div>
        }
      </div>
    )
  }

Searchbar: React.FC<IProps> = ({ isHeaderSearchbar, isISSearchbar }) => {

  const history = useHistory()
  const location = useLocation()
  const [input, setInput] = useState("")
  const [searchType, setSearchType] = useState('Txn/Addr')

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => (
    setInput(e.target.value)
  )

  const handleSubmit = (e: React.SyntheticEvent) => {
    e.preventDefault()
    const trimmedInput = input.trim()
    switch (searchType) {
      case 'Txn/Addr':
        if (isValidAddr(trimmedInput))
          history.push({
            pathname: `/address/${trimmedInput}`,
            search: location.search
          })
        else
          history.push({
            pathname: `/tx/${trimmedInput}`,
            search: location.search
          })
        break
      case 'Tx Block':
        history.push({
          pathname: `/txbk/${trimmedInput}`,
          search: location.search
        })
        break
      case 'DS Block':
        history.push({
          pathname: `/dsbk/${trimmedInput}`,
          search: location.search
        })
        break
    }
    setInput('')
  }

  return <>
    <Form onSubmit={handleSubmit}>
      <InputGroup className="searchbar-ig" id={isHeaderSearchbar ? "header-searchbar-ig" : "searchbar-ig"}>
        {isISSearchbar
          ? <InputGroup.Prepend>
            <DropdownButton id='searchbar-dropdown' title={searchType}>
              <Dropdown.Item onClick={() => setSearchType('Txn/Addr')}>Txn/Addr</Dropdown.Item>
              <Dropdown.Item onClick={() => setSearchType('Tx Block')}>Tx Block</Dropdown.Item>
            </DropdownButton>
          </InputGroup.Prepend>
          :
          <InputGroup.Prepend>
            <DropdownButton id='searchbar-dropdown' title={searchType}>
              <Dropdown.Item onClick={() => setSearchType('Txn/Addr')}>Txn/Addr</Dropdown.Item>
              <Dropdown.Item onClick={() => setSearchType('Tx Block')}>Tx Block</Dropdown.Item>
              <Dropdown.Item onClick={() => setSearchType('DS Block')}>DS Block</Dropdown.Item>
            </DropdownButton>
          </InputGroup.Prepend>
        }
        <Form.Control type="text" value={input} autoFocus={!isHeaderSearchbar}
          placeholder={
            searchType === 'Txn/Addr'
              ? 'Search for a transaction or an address'
              : searchType === 'Tx Block'
                ? 'Search by Tx Block height'
                : 'Search by DS Block height'}
          onChange={handleChange} />
        <InputGroup.Append>
          <Button type="submit">
            {isHeaderSearchbar ? <FontAwesomeIcon icon={faSearch} /> : <div>Search</div>}
          </Button>
        </InputGroup.Append>
      </InputGroup>
    </Form>
  </>
}

render() {
        if (this.state.error) {
            return (
                <div style={{ textAlign: "center" }}>
                    <ErrorStatus error={this.state.error} />
                    <Button
                        variant={"primary"}
                        onClick={() =>
                            this.setState({
                                error: undefined,
                                searching: false,
                            })
                        }
                    >
                        Redo the Search
                    </Button>
                </div>
            );
        }

        let table = (
            <Table responsive>
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Skill</th>
                        <th>Owner</th>
                    </tr>
                </thead>
                <tbody>
                    {this.state.skills.map((skill) => {
                        return (
                            <tr key={skill.id}>
                                <td>{skill.id}</td>
                                <td>
                                    <SkillDescriptor region={this.props.region} skill={skill} iconHeight={25} />
                                </td>
                                <td>
                                    {(skill.reverse?.basic?.servant ?? []).map((entity, index) =>
                                        entityDescriptorTable(this.props.region, entity, index)
                                    )}
                                </td>
                            </tr>
                        );
                    })}
                </tbody>
            </Table>
        );

        return (
            <div>
                {this.state.searching ? <Loading /> : null}

                <h1>Skills Search</h1>

                <form
                    onSubmit={(ev: React.FormEvent) => {
                        ev.preventDefault();
                        this.search();
                    }}
                >
                    <Form.Group>
                        <Form.Label>Name</Form.Label>
                        <Form.Control
                            value={this.state.name ?? ""}
                            onChange={(ev: ChangeEvent) => {
                                if (ev.target.value !== "") {
                                    this.setState({ name: ev.target.value });
                                } else {
                                    this.setState({ name: undefined });
                                }
                            }}
                        />
                    </Form.Group>
                    <Form.Group>
                        <Form.Label>Type</Form.Label>
                        <SearchableSelect<Skill.SkillType>
                            id="select-SkillType"
                            options={Object.values(Skill.SkillType)}
                            labels={
                                new Map([
                                    [Skill.SkillType.ACTIVE, "Active"],
                                    [Skill.SkillType.PASSIVE, "Passive"],
                                ])
                            }
                            selected={this.state.type ? this.state.type[0] : undefined}
                            onChange={(value?: Skill.SkillType) => {
                                this.setState({ type: value ? [value] : [] });
                            }}
                        />
                    </Form.Group>
                    {this.getNumberForm("num", "Num")}
                    {this.getNumberForm("priority", "Priority")}
                    {this.getNumberForm("strengthStatus", "Strength Status")}
                    {this.getNumberForm("lvl1coolDown", "Cooldown at level 1")}
                    {this.getNumberForm("numFunctions", "Number of functions")}
                    <Button variant={"primary"} onClick={() => this.search()}>
                        Search <FontAwesomeIcon icon={faSearch} />
                    </Button>
                </form>

                <hr />
                {this.state.searched && (
                    <h5>
                        Found <b>{this.state.skills.length}</b> result
                        {this.state.skills.length > 1 ? "s" : ""}.
                    </h5>
                )}
                {this.state.skills.length ? table : null}
            </div>
        );
    }

ScriptsPage = ({ region, path }: { region: Region; path: string }) => {
    const history = useHistory(),
        location = useLocation(),
        searchParams = new URLSearchParams(location.search),
        thisStateCache = stateCache.get(region),
        [query, setQuery] = useState(searchParams.get("query") ?? thisStateCache?.query ?? undefined),
        [scriptFileName, setScriptFileName] = useState(
            searchParams.get("scriptFileName") ?? thisStateCache?.scriptFileName ?? undefined
        ),
        [scripts, setScripts] = useState<Script.ScriptSearchResult[]>(thisStateCache?.scripts ?? []),
        [error, setError] = useState<AxiosError | undefined>(undefined),
        [searching, setSearching] = useState(false),
        [searched, setSearched] = useState(thisStateCache?.searched ?? false),
        [resultSort, setResultSort] = useState<ScriptResultSort>("Score");

    const search = (query: string, scriptFileName?: string) => {
        setSearching(true);
        Api.searchScript(query, scriptFileName)
            .then((r) => {
                setSearched(true);
                setScripts(r);
                setSearching(false);
            })
            .catch((e) => setError(e));
    };

    const searchButton = (query?: string, scriptFileName?: string) => {
        if (query === undefined || query.trim() === "") {
            alert("Please enter a query");
        } else {
            search(query, scriptFileName);
            history.replace(`/${region}/${path}?${getQueryString(query, scriptFileName)}`);
        }
    };

    useEffect(() => {
        // when switching between regions using the navbar
        Manager.setRegion(region);
        if (stateCache.has(region)) {
            const queryString = getQueryString(stateCache.get(region)?.query);
            history.replace(`/${region}/${path}?${queryString}`);
        }
    }, [region, path, history]);

    useEffect(() => {
        if (!stateCache.has(region) && query !== undefined && query !== "") {
            // for first run if URL query string is not empty
            search(query, scriptFileName);
        }
    }, [region, query, scriptFileName]);

    useEffect(() => {
        stateCache.set(region, { query, scriptFileName, scripts, searched });
    }, [region, query, scriptFileName, scripts, searched]);

    document.title = `[${region}] Scripts - Atlas Academy DB`;

    if (error !== undefined) {
        history.replace(`/${region}/${path}`);
        return (
            <div style={{ textAlign: "center" }}>
                <ErrorStatus error={error} />
                <Button
                    variant={"primary"}
                    onClick={() => {
                        setError(undefined);
                        setSearching(false);
                    }}
                >
                    Redo the Search
                </Button>
            </div>
        );
    }

    return (
        <>
            {searching ? <Loading /> : null}
            <h1>Scripts Search</h1>
            <div className="my-3">
                Supports
                <ul>
                    <li>
                        <code>this OR that</code>
                    </li>
                    <li>
                        <code>this -but -not -that</code>
                    </li>
                    <li>
                        <code>"this exact phrase"</code>
                    </li>
                    <li>
                        <code>prefix*</code>
                    </li>
                </ul>
                <a
                    href="https://groonga.org/docs/reference/grn_expr/query_syntax.html"
                    target="_blank"
                    rel="noreferrer"
                >
                    Syntax Reference
                </a>{" "}
                (Queries starting with <code>column:</code> are not supported).
            </div>
            <form
                onSubmit={(ev: React.FormEvent) => {
                    ev.preventDefault();
                    searchButton(query);
                }}
            >
                <Form.Group>
                    <Form.Label>Search Query</Form.Label>
                    <Form.Control
                        value={query ?? ""}
                        onChange={(ev) => {
                            setQuery(ev.target.value !== "" ? ev.target.value : undefined);
                        }}
                    />
                </Form.Group>
                <Form.Group>
                    <Form.Label>Script File Name</Form.Label>
                    <Form.Control
                        value={scriptFileName ?? ""}
                        onChange={(ev) => {
                            setScriptFileName(ev.target.value !== "" ? ev.target.value : undefined);
                        }}
                    />
                    <Form.Text className="text-muted">
                        The script ID should contain this string. For example 30001 for LB1, 94036 for Ooku.
                    </Form.Text>
                </Form.Group>
                <Button variant={"primary"} onClick={() => searchButton(query, scriptFileName)}>
                    Search <FontAwesomeIcon icon={faSearch} />
                </Button>{" "}
            </form>

            <hr />

            {searched ? (
                <h5>
                    Found{" "}
                    <b>
                        {scripts.length}
                        {scripts.length === 50 ? "+" : ""}
                    </b>{" "}
                    result
                    {scripts.length > 1 ? "s" : ""}
                </h5>
            ) : null}
            {scripts.length > 0 ? (
                <>
                    <Table responsive>
                        <thead>
                            <tr>
                                <th className="text-nowrap align-bottom">
                                    <Button
                                        variant=""
                                        className="py-0 border-0 align-bottom"
                                        onClick={() => {
                                            switch (resultSort) {
                                                case "Score":
                                                    setResultSort("ScriptIdAscending");
                                                    break;
                                                case "ScriptIdAscending":
                                                    setResultSort("ScriptIdDescending");
                                                    break;
                                                case "ScriptIdDescending":
                                                    setResultSort("Score");
                                                    break;
                                            }
                                        }}
                                    >
                                        {resultSort === "Score" ? (
                                            <FontAwesomeIcon
                                                icon={faSort}
                                                title="Sorted by how many keywords are included"
                                            />
                                        ) : resultSort === "ScriptIdAscending" ? (
                                            <FontAwesomeIcon icon={faSortUp} title="Sorted by Script ID (Ascending)" />
                                        ) : (
                                            <FontAwesomeIcon
                                                icon={faSortDown}
                                                title="Sorted by Script ID (Descending)"
                                            />
                                        )}
                                    </Button>
                                    Script ID
                                </th>
                                <th>Snippet</th>
                            </tr>
                        </thead>
                        <tbody>
                            {scripts
                                .sort((a, b) => {
                                    switch (resultSort) {
                                        case "Score":
                                            return b.score - a.score || a.scriptId.localeCompare(b.scriptId, "en");
                                        case "ScriptIdAscending":
                                            return a.scriptId.localeCompare(b.scriptId, "en");
                                        case "ScriptIdDescending":
                                            return b.scriptId.localeCompare(a.scriptId, "en");
                                        default:
                                            return 0;
                                    }
                                })
                                .map((script) => (
                                    <tr key={script.scriptId}>
                                        <td>
                                            <ScriptDescriptor
                                                region={region}
                                                scriptId={script.scriptId}
                                                scriptType=""
                                            />
                                        </td>
                                        <td
                                            dangerouslySetInnerHTML={{
                                                __html: script.snippets[0],
                                            }}
                                        ></td>
                                    </tr>
                                ))}
                        </tbody>
                    </Table>
                </>
            ) : null}
        </>
    );
}

render() {
        if (this.state.error) {
            return (
                <div style={{ textAlign: "center" }}>
                    <ErrorStatus error={this.state.error} />
                    <Button
                        variant={"primary"}
                        onClick={() =>
                            this.setState({
                                error: undefined,
                                searching: false,
                            })
                        }
                    >
                        Redo the Search
                    </Button>
                </div>
            );
        }

        return (
            <div className="listing-page">
                {this.state.searching ? <Loading /> : null}

                <h1>Quests Search</h1>

                <form
                    onSubmit={(ev: React.FormEvent) => {
                        ev.preventDefault();
                        this.search();
                    }}
                >
                    <Form.Group>
                        <Form.Label>Quest Name</Form.Label>
                        <Form.Control
                            value={this.state.name ?? ""}
                            onChange={(ev: ChangeEvent) => {
                                this.setState({
                                    name: ev.target.value !== "" ? ev.target.value : undefined,
                                });
                            }}
                        />
                    </Form.Group>
                    <Form.Group>
                        <Form.Label>Spot Name</Form.Label>
                        <Form.Control
                            value={this.state.spotName ?? ""}
                            onChange={(ev: ChangeEvent) => {
                                this.setState({
                                    spotName: ev.target.value !== "" ? ev.target.value : undefined,
                                });
                            }}
                        />
                    </Form.Group>
                    {this.getNumberForm("warId", "War ID")}
                    <Form.Group>
                        <Form.Label>Quest Type</Form.Label>
                        <SearchableSelect<Quest.QuestType>
                            id="select-QuestType"
                            options={Object.values(Quest.QuestType)}
                            labels={QuestTypeDescription}
                            selected={this.state.type}
                            onChange={(value?: Quest.QuestType) => {
                                this.setState({ type: value });
                            }}
                        />
                    </Form.Group>
                    <Form.Group>
                        <Form.Label>Quest Flags</Form.Label>
                        <SearchableSelect<Quest.QuestFlag>
                            id="select-QuestFlag"
                            options={Object.values(Quest.QuestFlag)}
                            labels={QuestFlagDescription}
                            selected={this.state.flag}
                            onChange={(value?: Quest.QuestFlag) => {
                                this.setState({ flag: value });
                            }}
                        />
                    </Form.Group>
                    <Form.Group>
                        <Form.Label>Field Trait</Form.Label>
                        <TraitsSelector
                            region={this.props.region}
                            traitList={this.state.traitList}
                            initialTraits={this.state.fieldIndividuality}
                            onUpdate={(trait) => {
                                this.setState({ fieldIndividuality: trait });
                            }}
                        />
                    </Form.Group>
                    {this.getNumberForm("battleBgId", "Battle BG ID")}
                    {this.getNumberForm("bgmId", "BGM ID")}
                    {this.getNumberForm("fieldAiId", "Field AI ID")}
                    {this.getNumberForm("enemySvtId", "Enemy svt ID")}
                    {this.getNumberForm("enemySvtAiId", "Enemy Servant AI ID")}
                    <Form.Group>
                        <Form.Label>Enemy Trait</Form.Label>
                        <TraitsSelector
                            region={this.props.region}
                            traitList={this.state.traitList}
                            initialTraits={this.state.enemyTrait}
                            onUpdate={(trait) => {
                                this.setState({ enemyTrait: trait });
                            }}
                        />
                    </Form.Group>{" "}
                    <Form.Group>
                        <Form.Label>Enemy Class</Form.Label>
                        <SearchableSelect<ClassName>
                            id="select-ClassName"
                            options={Object.values(ClassName).filter((className) => className !== ClassName.EXTRA)}
                            labels={new Map([])}
                            selected={this.state.enemyClassName[0] ?? undefined}
                            onChange={(value?: ClassName) => {
                                this.setState({
                                    enemyClassName: value ? [value] : [],
                                });
                            }}
                        />
                    </Form.Group>
                    <Button variant={"primary"} onClick={() => this.search()} style={{ marginBottom: "1em" }}>
                        Search <FontAwesomeIcon icon={faSearch} />
                    </Button>
                </form>

                <hr />

                {this.state.searched && (
                    <h5>
                        Found <b>{this.state.quests.length}</b> result
                        {this.state.quests.length > 1 ? "s" : ""}.
                    </h5>
                )}
                {this.state.quests.length ? (
                    <QuestPhaseTable region={this.props.region} quests={this.state.quests} />
                ) : null}
            </div>
        );
    }

render() {
        if (this.state.error) {
            return (
                <div style={{ textAlign: "center" }}>
                    <ErrorStatus error={this.state.error} />
                    <Button
                        variant={"primary"}
                        onClick={() =>
                            this.setState({
                                error: undefined,
                                searching: false,
                            })
                        }
                    >
                        Redo the Search
                    </Button>
                </div>
            );
        }

        let table = (
            <Table responsive>
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Noble Phantasm</th>
                        <th>Owner</th>
                    </tr>
                </thead>
                <tbody>
                    {this.state.noblePhantasms.map((noblePhantasm) => {
                        return (
                            <tr key={noblePhantasm.id}>
                                <td>{noblePhantasm.id}</td>
                                <td>
                                    <NoblePhantasmDescriptor region={this.props.region} noblePhantasm={noblePhantasm} />
                                </td>
                                <td>
                                    {(noblePhantasm.reverse?.basic?.servant ?? []).map((entity, index) =>
                                        entityDescriptorTable(this.props.region, entity, index)
                                    )}
                                </td>
                            </tr>
                        );
                    })}
                </tbody>
            </Table>
        );

        return (
            <div>
                {this.state.searching ? <Loading /> : null}

                <h1>Noble Phantasms Search</h1>

                <form
                    onSubmit={(ev: React.FormEvent) => {
                        ev.preventDefault();
                        this.search();
                    }}
                >
                    <Form.Group>
                        <Form.Label>Name</Form.Label>
                        <Form.Control
                            value={this.state.name ?? ""}
                            onChange={(ev: ChangeEvent) => {
                                if (ev.target.value !== "") {
                                    this.setState({ name: ev.target.value });
                                } else {
                                    this.setState({ name: undefined });
                                }
                            }}
                        />
                    </Form.Group>
                    <Form.Group>
                        <Form.Label>Type</Form.Label>
                        <SearchableSelect<Card>
                            id="select-SkillType"
                            options={[Card.BUSTER, Card.ARTS, Card.QUICK]}
                            labels={
                                new Map([
                                    [Card.BUSTER, "Buster"],
                                    [Card.ARTS, "Arts"],
                                    [Card.QUICK, "Quick"],
                                ])
                            }
                            selected={this.state.card ? this.state.card[0] : undefined}
                            onChange={(value?: Card) => {
                                this.setState({ card: value ? [value] : [] });
                            }}
                        />
                    </Form.Group>
                    <Form.Group>
                        <Form.Label>Individuality</Form.Label>
                        <TraitsSelector
                            region={this.props.region}
                            traitList={this.state.traitList}
                            initialTraits={this.state.individuality}
                            onUpdate={(trait) => {
                                this.setState({ individuality: trait });
                            }}
                        />
                    </Form.Group>
                    {this.getNumberForm("hits", "Number of hits")}
                    {this.getNumberForm("strengthStatus", "Strength Status")}
                    {this.getNumberForm("numFunctions", "Number of functions")}
                    <Form.Group>
                        <Form.Label>Minimum NP gain (1% = 100)</Form.Label>
                        <NumberSelector
                            value={this.state.minNpNpGain ?? ""}
                            onChange={(ev: ChangeEvent) => {
                                if (ev.target.value === "0" || isPositiveInteger(ev.target.value)) {
                                    this.setState({
                                        minNpNpGain: parseInt(ev.target.value),
                                    });
                                } else {
                                    this.setState({
                                        minNpNpGain: undefined,
                                    });
                                }
                            }}
                        />
                    </Form.Group>
                    <Form.Group>
                        <Form.Label>Maximum NP gain (1% = 100)</Form.Label>
                        <NumberSelector
                            value={this.state.maxNpNpGain ?? ""}
                            onChange={(ev: ChangeEvent) => {
                                if (ev.target.value === "0" || isPositiveInteger(ev.target.value)) {
                                    this.setState({
                                        maxNpNpGain: parseInt(ev.target.value),
                                    });
                                } else {
                                    this.setState({
                                        maxNpNpGain: undefined,
                                    });
                                }
                            }}
                        />
                    </Form.Group>
                    <Button variant={"primary"} onClick={() => this.search()}>
                        Search <FontAwesomeIcon icon={faSearch} />
                    </Button>
                </form>

                <hr />
                {this.state.searched && (
                    <h5>
                        Found <b>{this.state.noblePhantasms.length}</b> result
                        {this.state.noblePhantasms.length > 1 ? "s" : ""}.
                    </h5>
                )}
                {this.state.noblePhantasms.length ? table : null}
            </div>
        );
    }

render() {
        if (this.state.error) {
            return (
                <div style={{ textAlign: "center" }}>
                    <ErrorStatus error={this.state.error} />
                    <Button
                        variant={"primary"}
                        onClick={() =>
                            this.setState({
                                error: undefined,
                                searching: false,
                            })
                        }
                    >
                        Redo the Search
                    </Button>
                </div>
            );
        }

        let table = (
            <Table responsive>
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Function</th>
                        <th>Usage Count</th>
                    </tr>
                </thead>
                <tbody>
                    {this.state.funcs.map((func) => {
                        return (
                            <tr key={func.funcId}>
                                <td>{func.funcId}</td>
                                <td>
                                    <FuncDescriptor region={this.props.region} func={func} />
                                </td>
                                <td>
                                    {(func.reverse?.basic?.NP ?? []).length + (func.reverse?.basic?.skill ?? []).length}
                                </td>
                            </tr>
                        );
                    })}
                </tbody>
            </Table>
        );

        return (
            <div>
                {this.state.searching ? <Loading /> : null}

                <h1>Functions Search</h1>

                <form
                    onSubmit={(ev: React.FormEvent) => {
                        ev.preventDefault();
                        this.search();
                    }}
                >
                    <Form.Group>
                        <Form.Label>Popup Text</Form.Label>
                        <Form.Control
                            value={this.state.popupText ?? ""}
                            onChange={(ev: ChangeEvent) => {
                                this.setState({ popupText: ev.target.value });
                            }}
                        />
                    </Form.Group>
                    <Form.Group>
                        <Form.Label>Type</Form.Label>
                        <SearchableSelect<Func.FuncType>
                            id="select-FuncType"
                            options={Object.values(Func.FuncType)}
                            labels={funcDescriptions}
                            selected={this.state.type ? this.state.type[0] : undefined}
                            onChange={(value?: Func.FuncType) => {
                                this.setState({ type: value ? [value] : [] });
                            }}
                        />
                    </Form.Group>
                    <Form.Group>
                        <Form.Label>Target</Form.Label>
                        <SearchableSelect<Func.FuncTargetType>
                            id="select-FuncTargetType"
                            options={Object.values(Func.FuncTargetType)}
                            labels={targetDescriptions}
                            selected={this.state.targetType ? this.state.targetType[0] : undefined}
                            onChange={(value?: Func.FuncTargetType) => {
                                this.setState({
                                    targetType: value ? [value] : [],
                                });
                            }}
                        />
                    </Form.Group>
                    <Form.Group>
                        <Form.Label>Affects Players/Enemies</Form.Label>
                        <SearchableSelect<Func.FuncTargetTeam>
                            id="select-FuncTargetTeam"
                            options={Object.values(Func.FuncTargetTeam)}
                            labels={
                                new Map<Func.FuncTargetTeam, string>([
                                    [Func.FuncTargetTeam.PLAYER_AND_ENEMY, "Players and Enemies"],
                                    [Func.FuncTargetTeam.PLAYER, "Players only"],
                                    [Func.FuncTargetTeam.ENEMY, "Enemies only"],
                                ])
                            }
                            selected={this.state.targetTeam ? this.state.targetTeam[0] : undefined}
                            onChange={(value?: Func.FuncTargetTeam) => {
                                this.setState({
                                    targetTeam: value ? [value] : [],
                                });
                            }}
                        />
                    </Form.Group>
                    <Form.Group>
                        <Form.Label>Tvals</Form.Label>
                        <TraitsSelector
                            region={this.props.region}
                            traitList={this.state.traitList}
                            initialTraits={this.state.tvals}
                            onUpdate={(trait) => {
                                this.setState({ tvals: trait });
                            }}
                        />
                    </Form.Group>
                    <Form.Group>
                        <Form.Label>Affects Traits</Form.Label>
                        <TraitsSelector
                            region={this.props.region}
                            traitList={this.state.traitList}
                            initialTraits={this.state.vals}
                            onUpdate={(trait) => {
                                this.setState({ vals: trait });
                            }}
                        />
                    </Form.Group>
                    <Form.Group>
                        <Form.Label>Quest Traits</Form.Label>
                        <TraitsSelector
                            region={this.props.region}
                            traitList={this.state.traitList}
                            initialTraits={this.state.questTvals}
                            onUpdate={(trait) => {
                                this.setState({ questTvals: trait });
                            }}
                        />
                    </Form.Group>
                    <Button variant={"primary"} onClick={() => this.search()}>
                        Search <FontAwesomeIcon icon={faSearch} />
                    </Button>
                </form>

                <hr />

                {this.state.searched && (
                    <h5>
                        Found <b>{this.state.funcs.length}</b> result
                        {this.state.funcs.length > 1 ? "s" : ""}.
                    </h5>
                )}
                {this.state.funcs.length ? table : null}
            </div>
        );
    }

render() {
        if (this.state.error)
            return (
                <div style={{ textAlign: "center" }}>
                    <ErrorStatus error={this.state.error} />
                    <Button variant={"primary"} onClick={() => this.setState({ error: undefined, searching: false })}>
                        Redo the Search
                    </Button>
                </div>
            );

        if (this.state.loading) return <Loading />;

        return (
            <div>
                {this.state.searching ? <Loading /> : null}

                <h1>Entities Search</h1>

                <form
                    onSubmit={(ev: React.FormEvent) => {
                        ev.preventDefault();
                        this.search();
                    }}
                >
                    <Form.Group>
                        <Form.Label>Name</Form.Label>
                        <Form.Control
                            value={this.state.name ?? ""}
                            onChange={(ev: ChangeEvent) => {
                                this.setState({ name: ev.target.value });
                            }}
                        />
                    </Form.Group>

                    <Form.Group>
                        <Form.Label>Type</Form.Label>
                        <SearchableSelect<Entity.EntityType>
                            id="select-EntityType"
                            options={Object.values(Entity.EntityType)}
                            labels={entityTypeDescriptions}
                            selected={this.state.type ? this.state.type[0] : undefined}
                            onChange={(value?: Entity.EntityType) => {
                                this.setState({ type: value ? [value] : undefined });
                            }}
                        />
                    </Form.Group>

                    <Form.Group>
                        <Form.Label>Class</Form.Label>
                        <SearchableSelect<ClassName>
                            id="select-ClassName"
                            options={Object.values(ClassName).filter((className) => className !== ClassName.EXTRA)}
                            labels={classNameDescriptions}
                            selected={this.state.className ? this.state.className[0] : undefined}
                            onChange={(value?: ClassName) => {
                                this.setState({ className: value ? [value] : [] });
                            }}
                        />
                    </Form.Group>

                    <Form.Group>
                        <Form.Label>Gender</Form.Label>
                        <SearchableSelect<Entity.Gender>
                            id="select-Gender"
                            options={Object.values(Entity.Gender)}
                            labels={genderDescriptions}
                            selected={this.state.gender ? this.state.gender[0] : undefined}
                            onChange={(value?: Entity.Gender) => {
                                this.setState({ gender: value ? [value] : [] });
                            }}
                        />
                    </Form.Group>

                    <Form.Group>
                        <Form.Label>Attribute</Form.Label>
                        <SearchableSelect<Attribute.Attribute>
                            id="select-Attribute"
                            options={Object.values(Attribute.Attribute)}
                            labels={attributeDescriptions}
                            selected={this.state.attribute ? this.state.attribute[0] : undefined}
                            onChange={(value?: Attribute.Attribute) => {
                                this.setState({ attribute: value ? [value] : [] });
                            }}
                        />
                    </Form.Group>

                    <Form.Group>
                        <Form.Label>Traits</Form.Label>
                        <TraitsSelector
                            region={this.props.region}
                            traitList={this.state.traitList}
                            initialTraits={this.state.trait}
                            onUpdate={(trait) => {
                                this.setState({ trait });
                            }}
                        />
                    </Form.Group>
                    <Form.Group>
                        <Form.Label>Doesn't have traits</Form.Label>
                        <TraitsSelector
                            region={this.props.region}
                            traitList={this.state.traitList}
                            initialTraits={this.state.notTrait}
                            onUpdate={(notTrait) => {
                                this.setState({ notTrait });
                            }}
                        />
                    </Form.Group>
                    <Form.Group>
                        <Form.Label>Illustrator</Form.Label>
                        <SearchableSelect<string>
                            id="select-illustrator"
                            options={this.state.illustratorList}
                            labels={new Map(this.state.illustratorList.map((illustrator) => [illustrator, ""]))}
                            selected={this.state.illustrator ?? undefined}
                            onChange={(value?: string) => {
                                this.setState({ illustrator: value });
                            }}
                            disableLabelStyling={true}
                        />
                    </Form.Group>
                    <Form.Group>
                        <Form.Label>Voice Actor</Form.Label>
                        <SearchableSelect<string>
                            id="select-voice-actor"
                            options={this.state.cvList}
                            labels={new Map(this.state.cvList.map((illustrator) => [illustrator, ""]))}
                            selected={this.state.cv ?? undefined}
                            onChange={(value?: string) => {
                                this.setState({ cv: value });
                            }}
                            disableLabelStyling={true}
                        />
                    </Form.Group>
                    <Button variant={"primary"} onClick={() => this.search()}>
                        Search <FontAwesomeIcon icon={faSearch} />
                    </Button>
                </form>

                <hr />

                <Table responsive>
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Type</th>
                            <th>Icon</th>
                            <th>Name</th>
                        </tr>
                    </thead>
                    <tbody>
                        {this.state.entities.map((entity) => {
                            const route = this.location(entity);

                            return (
                                <tr key={entity.id}>
                                    <td>{route ? <Link to={route}>{entity.id}</Link> : entity.id}</td>
                                    <td>{entityTypeDescriptions.get(entity.type) ?? entity.type}</td>
                                    <td>
                                        <FaceIcon location={entity.face} mightNotExist={true} />
                                    </td>
                                    <td>{entity.name}</td>
                                </tr>
                            );
                        })}
                    </tbody>
                </Table>
            </div>
        );
    }

ProposalSearch: React.FC = observer(function ProposalSearch() {
    const { proposals } = useStores()

    // Search box visibility
    const [visible, setVisible] = useState(false)

    const [lastRequestId, setLastRequestId] = useState<Timeout | null>(null)

    // Auto-suggest setup
    const autosuggestRef = useRef<Autosuggest<UIProposal>>(null)
    const [selection, setSelection] = useState<string>("")
    const [suggestions, setSuggestions] = useState<UIProposal[]>([])

    const onSuggestionsFetchRequested = ({ value }: { value: string }) => {
        if (lastRequestId !== null) {
            clearTimeout(lastRequestId)
        }
        const requestId = setTimeout(async () => {
            const suggestions = await filterProposalsAsync(proposals.proposalsAllPresetsForQuickSearch, value.trim())
            setSuggestions(suggestions)
        }, 500)
        setLastRequestId(requestId)
    }
    const onSuggestionsClearRequested = () => {
        setSuggestions([])
    }
    const inputProps = {
        placeholder: "Find nodes...",
        value: selection,
        onChange: (event: React.FormEvent<HTMLElement>, params: ChangeEvent) => {
            setSelection(params.newValue)
        },
    }
    const renderSuggestion = (s: UIProposal) => (
        <div>
            <SuggestionHeader>
                <Flag countryCode={s.country} />
                <span>{s.ipType}</span>
            </SuggestionHeader>
            <Small>{s.providerId}</Small>
        </div>
    )

    // Icons
    const closeAction = () => {
        setVisible(false)
    }
    const openAction = () => {
        proposals.prepareForQuickSearch()
        setVisible(true)
        setTimeout(() => {
            autosuggestRef?.current?.input?.focus()
        }, 50)
    }

    return (
        <>
            <IconContainer
                onClick={() => {
                    visible ? closeAction() : openAction()
                }}
            >
                <FontAwesomeIcon icon={visible ? faTimes : faSearch} />
            </IconContainer>
            {visible && (
                <>
                    <ProposalSearchContainer>
                        <Autosuggest
                            ref={autosuggestRef}
                            inputProps={inputProps}
                            suggestions={suggestions}
                            onSuggestionsFetchRequested={onSuggestionsFetchRequested}
                            onSuggestionsClearRequested={onSuggestionsClearRequested}
                            onSuggestionSelected={(evt, { suggestion }) => {
                                proposals.useQuickSearchSuggestion(suggestion)
                            }}
                            getSuggestionValue={(p: UIProposal) => p.providerId}
                            renderSuggestion={renderSuggestion}
                        />
                    </ProposalSearchContainer>
                </>
            )}
        </>
    )
})

render() {
        if (this.state.error) {
            return (
                <div style={{ textAlign: "center" }}>
                    <ErrorStatus error={this.state.error} />
                    <Button
                        variant={"primary"}
                        onClick={() =>
                            this.setState({
                                error: undefined,
                                searching: false,
                            })
                        }
                    >
                        Redo the Search
                    </Button>
                </div>
            );
        }

        let table = (
            <Table responsive>
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Buff</th>
                        <th>Usage Count</th>
                    </tr>
                </thead>
                <tbody>
                    {this.state.buffs.map((buff) => {
                        return (
                            <tr key={buff.id}>
                                <td>{buff.id}</td>
                                <td>
                                    <BuffDescription region={this.props.region} buff={buff} />
                                </td>
                                <td>{(buff.reverse?.basic?.function ?? []).length}</td>
                            </tr>
                        );
                    })}
                </tbody>
            </Table>
        );

        return (
            <div>
                {this.state.searching ? <Loading /> : null}

                <h1>Buffs Search</h1>

                <form
                    onSubmit={(ev: React.FormEvent) => {
                        ev.preventDefault();
                        this.search();
                    }}
                >
                    <Form.Group>
                        <Form.Label>Name</Form.Label>
                        <Form.Control
                            value={this.state.name ?? ""}
                            onChange={(ev: ChangeEvent) => {
                                this.setState({ name: ev.target.value });
                            }}
                        />
                    </Form.Group>
                    <Form.Group>
                        <Form.Label>Type</Form.Label>
                        <SearchableSelect<Buff.BuffType>
                            id="select-BuffType"
                            options={Object.values(Buff.BuffType)}
                            labels={buffDescriptions}
                            selected={this.state.type ? this.state.type[0] : undefined}
                            onChange={(value?: Buff.BuffType) => {
                                this.setState({ type: value ? [value] : [] });
                            }}
                        />
                    </Form.Group>
                    <Form.Group>
                        <Form.Label>Buff Group</Form.Label>
                        <TraitsSelector
                            region={this.props.region}
                            traitList={[]}
                            initialTraits={this.state.buffGroup}
                            onUpdate={(trait) => {
                                this.setState({ buffGroup: trait });
                            }}
                            customPlaceHolder="Add a positive integer"
                            numericInput={true}
                        />
                    </Form.Group>
                    <Form.Group>
                        <Form.Label>Buff Traits</Form.Label>
                        <TraitsSelector
                            region={this.props.region}
                            traitList={this.state.traitList}
                            initialTraits={this.state.vals}
                            onUpdate={(trait) => {
                                this.setState({ vals: trait });
                            }}
                        />
                    </Form.Group>
                    <Form.Group>
                        <Form.Label>Tvals</Form.Label>
                        <TraitsSelector
                            region={this.props.region}
                            traitList={this.state.traitList}
                            initialTraits={this.state.tvals}
                            onUpdate={(trait) => {
                                this.setState({ tvals: trait });
                            }}
                        />
                    </Form.Group>
                    <Form.Group>
                        <Form.Label>Required Self Traits</Form.Label>
                        <TraitsSelector
                            region={this.props.region}
                            traitList={this.state.traitList}
                            initialTraits={this.state.ckSelfIndv}
                            onUpdate={(trait) => {
                                this.setState({ ckSelfIndv: trait });
                            }}
                        />
                    </Form.Group>
                    <Form.Group>
                        <Form.Label>Required Opponent Traits</Form.Label>
                        <TraitsSelector
                            region={this.props.region}
                            traitList={this.state.traitList}
                            initialTraits={this.state.ckOpIndv}
                            onUpdate={(trait) => {
                                this.setState({ ckOpIndv: trait });
                            }}
                        />
                    </Form.Group>
                    <Button variant={"primary"} onClick={() => this.search()}>
                        Search <FontAwesomeIcon icon={faSearch} />
                    </Button>
                </form>

                <hr />
                {this.state.searched && (
                    <h5>
                        Found <b>{this.state.buffs.length}</b> result
                        {this.state.buffs.length > 1 ? "s" : ""}.
                    </h5>
                )}
                {this.state.buffs.length ? table : null}
            </div>
        );
    }

MemberListDialog = () => {
  const theme = useTheme();
  const dispatch = useDispatch();
  const members = useSelector(selectAllMembers);
  const open = useSelector((state: RootState) => state.member.memberListOpen);
  const [searchValue, setSearchValue] = useState("");
  const xsDown = useMediaQuery(theme.breakpoints.down("xs"));

  const filteredMembers = members.filter((member) =>
    member.username.toLowerCase().match(searchValue.trim().toLowerCase())
  );

  const handleClose = () => {
    dispatch(setMemberListOpen(false));
    setSearchValue("");
  };

  const handleClick = (memberId: number) => {
    dispatch(setDialogMember(memberId));
  };

  return (
    <Dialog
      open={open}
      onClose={handleClose}
      maxWidth="sm"
      fullWidth
      fullScreen={xsDown}
    >
      <Container>
        <Close onClose={handleClose} />
        <DialogTitle id="edit-labels">Board members</DialogTitle>
        <Flex
          css={css`
            margin: 1.5rem 2rem 0rem 2rem;
            ${theme.breakpoints.down("xs")} {
              flex-direction: column;
            }
          `}
        >
          <LabelCount>
            {filteredMembers.length} member{filteredMembers.length !== 1 && "s"}{" "}
          </LabelCount>
          <div>
            <TextField
              value={searchValue}
              onChange={(e) => setSearchValue(e.target.value)}
              placeholder="Search members"
              InputProps={{
                startAdornment: (
                  <InputAdornment
                    position="start"
                    css={css`
                      color: #ccc;
                    `}
                  >
                    <FontAwesomeIcon icon={faSearch} />
                  </InputAdornment>
                ),
              }}
            />
          </div>
        </Flex>
        <Table>
          {filteredMembers.map((member) => (
            <Row key={member.id}>
              <Avatar
                css={css`
                  ${avatarStyles}
                  &:hover {
                    cursor: pointer;
                  }
                  margin-right: 0.5rem;
                `}
                onClick={() => handleClick(member.id)}
                data-testid={`member-${member.id}`}
                src={member?.avatar?.photo}
                alt={member?.avatar?.name}
              >
                {member.username.charAt(0)}
              </Avatar>
              <div>{member.username}</div>
            </Row>
          ))}
        </Table>
      </Container>
    </Dialog>
  );
}

function WebGLPageList(props: any) {
  const [hideContent, setHideContent] = useState(true);
  const [pages, setPages] = useState([] as PageType[]);
  const [loading, setLoading] = useState(false);
  const [name, setName] = useState('');
  const [disabled, setDisabled] = useState(true);

  const webGLPage = useSelector((state: IStoreState) => state.webGLPage);
  const user = useSelector((state: IStoreState) => state.user);
  const dispatch = useDispatch();

  useEffect(() => setName(webGLPage.name), [webGLPage.name]);

  const handleClick = () => {
    if (hideContent) {
      if (!user.email) return;
      setPages([]);
      setLoading(true);
      fetchAllPages(user.email).then(v => {
        if (!v.err) {
          const pages = v.pages as PageType[];
          setPages(pages);
          setLoading(false);
        }
      }).catch(e => {

      });
    }
    setHideContent(hideContent => !hideContent);
  };
  const canEdit = (e: React.MouseEvent) => {
    e.stopPropagation();
    setDisabled(false);
  }
  const handleModifyPageName = (e: React.MouseEvent) => {
    e.stopPropagation();
    modifyPageName(user.email, webGLPage.id, name).then(v => {
      console.log(v);
      if (!v.err) {
        setDisabled(true);
        return;
      }
      setDisabled(true);
    })
  }

  const elem = pages.length > 0 ? pages.map((v, i) => {
    const click = () => {
      fetchOnePage(user.email, v.pageId).then(res => {
        if (!res.err) {
          dispatch(selectWebGLPage(
            v.pageId,
            v.name,
            res.page.page,
            v.id
          ));
        }
      });
      handleClick();
    };
    return (<ResultItem name={v.name} key={i} onClick={click}/>);
  }).slice(0, 5) : (
    <div className={style.no_data}>
      <FontAwesomeIcon icon={faThermometerEmpty}/> No Data!
    </div>
  );
  const loadingElem = (
    <div className={style.loading}>
      <FontAwesomeIcon icon={faCircleNotch} spin/> loading...
    </div>
  );

  return (
    <div className={style.ui_page_store}>
      <div className={style.current_ui_page} onClick={handleClick}>
        <input type="text"
               className={cls(!disabled && style.active)}
               onClick={disabled ? () => {} : e => e.stopPropagation()}
               value={name}
               onChange={e => setName(e.target.value)}
               disabled={disabled}/>
        <span onClick={disabled ? canEdit : handleModifyPageName}>
          <FontAwesomeIcon icon={disabled ? faEdit : faCheck} color={disabled ? '#999999' : 'red'}/>
        </span>
      </div>
      <div className={cls(style.ui_page_search_panel, !hideContent && style.show)}>
        <div className={style.search}>
          <input type="text" placeholder="search page..."/>
          <button>
            <FontAwesomeIcon icon={faSearch}/>
          </button>
        </div>
        <ul className={style.ui_page_result}>
          {loading ? loadingElem : elem}
        </ul>
      </div>
    </div>
  );
}