soapbox/app/soapbox/features/groups/discover.tsx

import React, { useState } from 'react';
import { defineMessages, useIntl } from 'react-intl';

import { HStack, Icon, IconButton, Input, Stack } from 'soapbox/components/ui';

import PopularGroups from './components/discover/popular-groups';
import Search from './components/discover/search/search';
import SuggestedGroups from './components/discover/suggested-groups';
import TabBar, { TabItems } from './components/tab-bar';

const messages = defineMessages({
  placeholder: { id: 'groups.discover.search.placeholder', defaultMessage: 'Search' },
});

const Discover: React.FC = () => {
  const intl = useIntl();

  const [isSearching, setIsSearching] = useState<boolean>(false);
  const [value, setValue] = useState<string>('');

  const hasSearchValue = value && value.length > 0;

  const cancelSearch = () => {
    clearValue();
    setIsSearching(false);
  };

  const clearValue = () => setValue('');

  return (
    <Stack space={4}>
      <TabBar activeTab={TabItems.FIND_GROUPS} />

      <Stack space={6}>
        <HStack alignItems='center'>
          {isSearching ? (
            <IconButton
              src={require('@tabler/icons/arrow-left.svg')}
              iconClassName='mr-2 h-5 w-5 fill-current text-gray-600'
              onClick={cancelSearch}
            />
          ) : null}

          <Input
            data-testid='search'
            type='text'
            placeholder={intl.formatMessage(messages.placeholder)}
            value={value}
            onChange={(event) => setValue(event.target.value)}
            onFocus={() => setIsSearching(true)}
            outerClassName='mt-0 w-full'
            theme='search'
            append={
              <button onClick={clearValue}>
                <Icon
                  src={hasSearchValue ? require('@tabler/icons/x.svg') : require('@tabler/icons/search.svg')}
                  className='h-4 w-4 text-gray-700 dark:text-gray-600'
                  aria-hidden='true'
                />
              </button>
            }
          />
        </HStack>

        {isSearching ? (
          <Search
            searchValue={value}
            onSelect={(newValue) => setValue(newValue)}
          />
        ) : (
          <>
            <PopularGroups />
            <SuggestedGroups />
          </>
        )}
      </Stack>
    </Stack>
  );
};

export default Discover;