• Search by APIs
• Search by Words
• Project Search

• Java
• Python
• JavaScript
• TypeScript
• C++
• Scala
• Blog

• gatsby-shopify-course-master
  • src
    • pages
      • cart.js
      • all-products.js
      • 404.js
      • index.js
    • images
    • fragments.js
    • templates
      • ProductTemplate
        • styles.js
        • index.js
    • context
      • CartContext.js
      • ProductContext.js
    • components
      • Layout
        • styles.js
        • index.js
      • ImageGallery
        • ImageThumbnail
          • styles.js
          • index.js
        • styles.js
        • index.js
      • Logo
        • index.js
      • HomepageCollectionsGrid
        • styles.js
        • index.js
      • Input
        • styles.js
        • index.js
      • CartContents
        • styles.js
        • index.js
      • CollectionTile
        • styles.js
        • index.js
      • StyledLink
        • index.js
      • globalStyles.js
      • RemoveLineItem
        • styles.js
        • index.js
      • Button
        • styles.js
        • index.js
      • Cart
        • styles.js
        • index.js
      • ProductQuantityAdder
        • styles.js
        • index.js
      • Filters
        • styles.js
        • CategoryFilterItem
          • styles.js
          • index.js
        • index.js
      • Header
        • styles.js
        • index.js
      • SEO
        • index.js
      • ProductsGrid
        • styles.js
        • index.js
      • ProductTile
        • styles.js
        • index.js
      • QuantityAdjuster
        • styles.js
        • index.js
      • Search
        • styles.js
        • index.js
      • FeaturedProducts
        • index.js
      • index.js
      • Checkbox
        • styles.js
        • index.js
  • functions
    • product-update.js
  • .prettierrc
  • LICENSE
  • gatsby-ssr.js
  • gatsby-browser.js
  • README.md
  • package.json
  • gatsby-config.js
  • .gitignore
  • .prettierignore
  • gatsby-node.js

import React from 'react';
import { Input } from '../Input';
import { Button } from '../Button';
import { FaSearch } from 'react-icons/fa';
import { SearchForm } from './styles';
import { navigate, useLocation } from '@reach/router';
import queryString from 'query-string';

export function Search() {
  const [searchTerm, setSearchTerm] = React.useState('');
  const { search } = useLocation();
  const c = queryString.parse(search)?.c || '';

  const handleSubmit = e => {
    e.preventDefault();

    if (c) {
      navigate(
        `/all-products?s=${encodeURIComponent(
          searchTerm
        )}&c=${encodeURIComponent(c)}`
      );
    } else {
      navigate(`/all-products?s=${encodeURIComponent(searchTerm)}`);
    }
  };

  return (
    <SearchForm onSubmit={handleSubmit}>
      <Input
        value={searchTerm}
        onChange={e => setSearchTerm(e.currentTarget.value)}
        placeholder="Search"
      />
      <Button>
        <FaSearch />
      </Button>
    </SearchForm>
  );
}