react-feather#Search TypeScript Examples

Searchbar = () => {
  const [{ engine, placeholder, forwardingLookup }] = useSearchSettings()
  const [value, setValue] = useState("")

  const { bookmarkGroups } = useBookmarks()
  const bookmarkLookup = useMemo(() => {
    const lookup: Record<string, string> = {}
    bookmarkGroups.forEach(group =>
      group.bookmarks.forEach(
        bookmark => (lookup[bookmark.label] = bookmark.url)
      )
    )
    return lookup
  }, [bookmarkGroups])

  const handleSearch = () =>
    performSearch(value, engine, {
      directLink: true,
      forwardingLookup: { ...bookmarkLookup, ...forwardingLookup },
    })

  return (
    <Layout>
      <IconButton icon={Search} onClick={handleSearch} label="Search" />
      <Input
        value={value}
        placeholder={placeholder}
        autoFocus
        onChange={setValue}
        onKeyPress={key => key === "Enter" && handleSearch()}
      />
    </Layout>
  )
}

SearchIcon = styled(Search)`
  display: inline;
  height: 16px;
  width: 16px;
  margin-right: 8px;
`

Blog = ({ posts }: BlogProps): JSX.Element => {
  const [currentSearch, setCurrentSearch] = useState('')
  const trackSearch = useCallback(
    debounce((value: string) => gtag.search(value), 500),
    [],
  )
  const seoTitle = 'Blog | Samuel Kraft'
  const seoDesc = 'I write about development, design, React, CSS, animation and more!'
  const filteredPosts = posts
    .sort((a, b) => new Date(b.publishedAt).getTime() - new Date(a.publishedAt).getTime())
    .filter(({ title, summary, tags }) => {
      const searchString = `${title.toLowerCase()} ${summary.toLowerCase()} ${tags?.join(' ')}`
      return searchString.includes(currentSearch.toLowerCase())
    })

  const handleInputChange = e => {
    const searchString = e.target.value
    if (searchString !== '') {
      trackSearch(searchString) // Save what people are interested in reading
    }
    return setCurrentSearch(searchString)
  }

  return (
    <Page>
      <NextSeo
        title={seoTitle}
        description={seoDesc}
        openGraph={{
          title: seoTitle,
          url: `https://samuelkraft.com/blog/`,
          description: seoDesc,
          site_name: 'Samuel Kraft',
        }}
        twitter={{
          cardType: 'summary_large_image',
        }}
      />
      <PageHeader title="Blog" description={seoDesc}>
        <div className={styles.inputWrapper}>
          <Input className={styles.input} value={currentSearch} onChange={handleInputChange} placeholder="Search posts…" type="search" />
          <Search className={styles.inputIcon} />
        </div>
      </PageHeader>
      <PostList posts={filteredPosts} />
      <Subscribe title="Subscribe to the newsletter" />
    </Page>
  )
}

SearchStyled = chakra(Search)

export default function ExpandableListItemKey({
  label,
  value,
  onConfirm,
  onChange,
  confirmLabel,
  confirmLabelDisabled,
  expandedOnly,
  helperText,
  placeholder,
  loading,
  mapperFn,
  locked,
}: Props): ReactElement | null {
  const classes = useStyles()
  const [open, setOpen] = useState(Boolean(expandedOnly))
  const [inputValue, setInputValue] = useState<string>(value || '')
  const toggleOpen = () => setOpen(!open)
  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
    if (mapperFn) {
      e.target.value = mapperFn(e.target.value)
    }

    setInputValue(e.target.value)

    if (onChange) onChange(e.target.value)
  }

  return (
    <>
      <ListItem className={`${classes.header} ${open ? classes.headerOpen : ''}`}>
        <Grid container direction="column" justifyContent="space-between" alignItems="stretch">
          <Grid container direction="row" justifyContent="space-between" alignItems="center">
            {label && (
              <Typography variant="body1" className={classes.unselectableLabel}>
                {label}
              </Typography>
            )}
            <Typography variant="body2">
              <div>
                {!open && value}
                {!expandedOnly && !locked && (
                  <IconButton size="small" className={classes.copyValue}>
                    {open ? (
                      <Minus onClick={toggleOpen} strokeWidth={1} />
                    ) : (
                      <Edit onClick={toggleOpen} strokeWidth={1} />
                    )}
                  </IconButton>
                )}
              </div>
            </Typography>
          </Grid>
          <Collapse in={open} timeout="auto" unmountOnExit>
            <InputBase
              value={inputValue}
              placeholder={placeholder}
              onChange={handleChange}
              fullWidth
              className={classes.content}
              autoFocus
              hidden={locked}
            />
          </Collapse>
        </Grid>
      </ListItem>
      <Collapse in={open} timeout="auto" unmountOnExit>
        {helperText && <ExpandableListItemNote>{helperText}</ExpandableListItemNote>}
        <ExpandableListItemActions>
          <SwarmButton
            disabled={
              loading ||
              inputValue === value ||
              Boolean(confirmLabelDisabled) || // Disable if external validation is provided
              (inputValue === '' && value === undefined) // Disable if no initial value was not provided and the field is empty. The undefined check is improtant so that it is possible to submit with empty input in other cases
            }
            loading={loading}
            iconType={Search}
            onClick={() => {
              if (onConfirm) onConfirm(inputValue)
            }}
          >
            {confirmLabel || 'Save'}
          </SwarmButton>
          <SwarmButton
            disabled={loading || inputValue === value || inputValue === ''}
            iconType={X}
            onClick={() => setInputValue(value || '')}
            cancel
          >
            Cancel
          </SwarmButton>
        </ExpandableListItemActions>
      </Collapse>
    </>
  )
}

export default function AccessPage(): ReactElement {
  const classes = useStyles()
  const navigate = useNavigate()

  const [hash, setHash] = useState<string>('')
  const [hashError, setHashError] = useState<boolean>(false)

  useEffect(() => {
    if (!hash || Utils.isHexString(hash, 64) || Utils.isHexString(hash, 128)) setHashError(false)
    else setHashError(true)
  }, [hash])

  return (
    <Layout
      top={[
        <Header
          key="top1"
          leftAction={
            <IconButton
              onClick={() => {
                navigate(ROUTES.LANDING_PAGE)
              }}
            >
              <ArrowLeft strokeWidth={1} />
            </IconButton>
          }
        >
          {text.accessPage.header}
        </Header>,
        <Typography key="top2" variant="subtitle1">
          {text.accessPage.tagline}
        </Typography>,
      ]}
      center={[
        <div key="center1">
          <Tooltip
            title={text.accessPage.hashLengthWarning}
            placement="top"
            open={hashError}
            arrow
            disableFocusListener
            disableHoverListener
            disableTouchListener
          >
            <InputBase
              className={classes.button}
              placeholder="Paste Swarm Hash Here"
              onChange={event => setHash(recognizeSwarmHash(event.target.value))}
              value={hash}
              multiline
              style={{ backgroundColor: 'white' }}
            />
          </Tooltip>
          <Button
            variant="contained"
            key="center2"
            className={classes.button}
            size="small"
            style={{ marginTop: 2, paddingLeft: 16, paddingRight: 16, opacity: hash ? 1 : 0 }}
            onClick={() => setHash('')}
          >
            <CornerUpLeft />
            {text.accessPage.backAction}
            <CornerUpLeft style={{ opacity: 0 }} />
          </Button>
        </div>,
      ]}
      bottom={[
        <Footer key="bottom1">
          <div>
            {hash && (
              <Button
                variant="contained"
                className={classes.button}
                disabled={hashError}
                onClick={() => navigate(ROUTES.ACCESS_HASH(hash))}
                size="large"
              >
                <Search strokeWidth={1} />
                {text.accessPage.findAction}
                <Search style={{ opacity: 0 }} />
              </Button>
            )}
          </div>
        </Footer>,
        <Typography key="bottom2" variant="body2" style={{ opacity: hash ? 0 : 1 }}>
          {text.accessPage.disclaimer}
        </Typography>,
      ]}
    />
  )
}