lbry-desktop/ui/component/searchOptions/view.jsx

// @flow
import { SEARCH_OPTIONS } from 'constants/search';
import * as ICONS from 'constants/icons';
import React, { useMemo } from 'react';
import { Form, FormField } from 'component/common/form';
import Button from 'component/button';

type Props = {
  setSearchOption: (string, boolean | string | number) => void,
  options: {},
  expanded: boolean,
  toggleSearchExpanded: () => void,
};

const SearchOptions = (props: Props) => {
  const { options, setSearchOption, expanded, toggleSearchExpanded } = props;
  const stringifiedOptions = JSON.stringify(options);
  const resultCount = options[SEARCH_OPTIONS.RESULT_COUNT];

  const isFilteringByChannel = useMemo(() => {
    const jsonOptions = JSON.parse(stringifiedOptions);
    const claimType = String(jsonOptions[SEARCH_OPTIONS.CLAIM_TYPE] || '');
    return claimType.includes(SEARCH_OPTIONS.INCLUDE_CHANNELS);
  }, [stringifiedOptions]);

  return (
    <div>
      <Button
        button="alt"
        label={__('Filter')}
        iconRight={expanded ? ICONS.UP : ICONS.DOWN}
        onClick={toggleSearchExpanded}
      />
      {expanded && (
        <Form className="search__options">
          <fieldset>
            <legend className="search__legend">{__('Search For')}</legend>
            {[
              {
                option: SEARCH_OPTIONS.INCLUDE_FILES,
                label: __('Files'),
              },
              {
                option: SEARCH_OPTIONS.INCLUDE_CHANNELS,
                label: __('Channels'),
              },
              {
                option: SEARCH_OPTIONS.INCLUDE_FILES_AND_CHANNELS,
                label: __('Everything'),
              },
            ].map(({ option, label }) => (
              <FormField
                key={option}
                name={option}
                type="radio"
                blockWrap={false}
                label={label}
                checked={options[SEARCH_OPTIONS.CLAIM_TYPE] === option}
                onChange={() => setSearchOption(SEARCH_OPTIONS.CLAIM_TYPE, option)}
              />
            ))}
          </fieldset>

          <fieldset disabled={isFilteringByChannel}>
            <legend className="search__legend">{__('Type')}</legend>
            {[
              {
                option: SEARCH_OPTIONS.MEDIA_VIDEO,
                label: __('Video'),
              },
              {
                option: SEARCH_OPTIONS.MEDIA_AUDIO,
                label: __('Audio'),
              },
              {
                option: SEARCH_OPTIONS.MEDIA_IMAGE,
                label: __('Image'),
              },
              {
                option: SEARCH_OPTIONS.MEDIA_TEXT,
                label: __('Text'),
              },
              {
                option: SEARCH_OPTIONS.MEDIA_APPLICATION,
                label: __('Other'),
              },
            ].map(({ option, label }) => (
              <FormField
                key={option}
                name={option}
                type="checkbox"
                blockWrap={false}
                disabled={options[SEARCH_OPTIONS.CLAIM_TYPE] === SEARCH_OPTIONS.INCLUDE_CHANNELS}
                label={label}
                checked={!isFilteringByChannel && options[option]}
                onChange={() => setSearchOption(option, !options[option])}
              />
            ))}
          </fieldset>

          <fieldset>
            <legend className="search__legend">{__('Other Options')}</legend>
            <FormField
              type="select"
              name="result-count"
              value={resultCount}
              onChange={(e) => setSearchOption(SEARCH_OPTIONS.RESULT_COUNT, e.target.value)}
              blockWrap={false}
              label={__('Returned Results')}
            >
              <option value={10}>10</option>
              <option value={30}>30</option>
              <option value={50}>50</option>
              <option value={100}>100</option>
            </FormField>
          </fieldset>
        </Form>
      )}
    </div>
  );
};

export default SearchOptions;