src/pages/search.js

import React, { useContext } from "react"
import {
  Tv,
  AlignJustify,
  BookOpen,
  Clipboard,
  Play,
  User,
} from "react-feather"
import { Box, Flex, Heading, Text } from "rebass"
import { Link } from "gatsby"
import styled from "styled-components"
import { SearchContext } from "src/features/SearchContext"
import { Helmet } from "src/features/Helmet"
import { Layout } from "src/ui/Layout"
import { Container } from "src/ui/Container"
import { Search } from "src/ui/Search"

const SearchPage = () => {
  const { searchResults } = useContext(SearchContext)
  const isDataPresent = Boolean(searchResults && searchResults.length > 0)
  return (
    <>
      <Helmet title={"Search page"}></Helmet>
      <Layout hideSearch={true}>
        <Box backgroundColor="black">
          <Hero
            py={["6", "6", "10", "10"]}
            px={[4, 4, 0, 0]}
            alignItems={"flex-start"}
            flexDirection={"column"}
          >
            <StyledHeading fontSize={[3, 4, 6]} as="h1" color="white">
              {title}
            </StyledHeading>
            <StyledSearch my={"2"} />
          </Hero>
        </Box>
        {isDataPresent && <Results searchResults={searchResults} />}
        {!isDataPresent && <NothingFound searchResults={searchResults} />}
      </Layout>
    </>
  )
}

const Results = ({ searchResults }) => {
  return (
    <Container>
      <Flex py={"5"} alignItems={"center"} justifyContent={"space-between"}>
        <Heading as="h2" fontSize={[5, 5, 5, 6]}>
          Results:
        </Heading>
        <Count py={"1"} px={"3"} color="white" fontSize={"4"}>
          {searchResults.length}
        </Count>
      </Flex>
      <Box pb={"8"}>
        {searchResults.map(({ url, title, apiKey }) => (
            <Flex key={url} id={url} my={"7"}>
              <IconWrap
                flexDirection={"column"}
                alignItems={"center"}
                justifyContent={"center"}
                mr={"3"}
                ml={"-5px"}
              >
                {checkIcon(apiKey)}
              </IconWrap>
              <Flex flexDirection={"column"}>
                <StyledLink to={url}>{title}</StyledLink>
                <Text color="gray" fontSize={"2"}>
                  {url}
                </Text>
              </Flex>
            </Flex>
          ))}
      </Box>
      <Flex alignItems={"flex-start"} flexDirection={"column"}></Flex>
    </Container>
  )
}

const NothingFound = () => {
  return <Container py={"5"}>Nothing found</Container>
}


const Hero = styled(Flex)`
  margin: 0 auto;
  max-width: 740px;
`
const Icon = styled(Flex)`
  border: 2px solid red;
  border-radius: 3px;
`
const IconWrap = styled(Flex)`
  min-width: 60px;
`
const Description = styled(Text)`
  font-weight: 600;
  text-transform: uppercase;
`
const StyledSearch = styled(Search)`
  margin: 10px 0;
  min-width: 100%;
  input {
    height: 62px;

    @media (max-width: ${({ theme }) => theme.breakpoints.m}) {
      height: 48px;
    }
  }

  button {
    height: 100%;
    width: 93px;
  }

  svg {
    height: 30px;
    width: 30px;
  }
`
const StyledHeading = styled(Heading)`
  line-height: 160%;
  font-weight: 600;
`
const StyledLink = styled(Link)`
  text-decoration: underline;
  font-weight: 500;
  font-size: 24px;
  margin-bottom: 8px;
`
const Count = styled(Box)`
  background: #000;
  border-radius: 2px;
  font-weight: 500;
`

const title =
  "Harnessing the power of media to spread Kedushah in the world, with geshmake!"

const checkIcon = apiKey => {
  const icons = {
    artist: <User size={"16"} color="red" />,
    blog: <BookOpen size={"16"} color="red" />,
    channel: <Tv size={"16"} color="red" />,
    category: <Clipboard size={"16"} color="red" />,
    default: <AlignJustify size={"16"} color="red" />,
    playlist: <Play size={"16"} color="red" />,
    video: <Play size={"16"} color="red" />,
  }
  switch (true) {
    case apiKey.includes("Artist"):
      return (
        <>
          <Icon py={"1"} px={"2"} mb={"2"}>
            {icons.artist}
          </Icon>
          <Description fontSize={"1"}>{apiKey}</Description>
        </>
      )
    case apiKey.includes("Blog"):
      return (
        <>
          <Icon py={"1"} px={"2"} mb={"2"}>
            {icons.blog}
          </Icon>
          <Description fontSize={"1"}>{apiKey}</Description>
        </>
      )
    case apiKey.includes("Channel"):
      return (
        <>
          <Icon py={"1"} px={"2"} mb={"2"}>
            {icons.channel}
          </Icon>
          <Description fontSize={"1"}>{apiKey}</Description>
        </>
      )
    case apiKey.includes("Category"):
      return (
        <>
          <Icon py={"1"} px={"2"} mb={"2"}>
            {icons.category}
          </Icon>
          <Description fontSize={"1"}>{apiKey}</Description>
        </>
      )
    case apiKey.includes("Playlist"):
      return (
        <>
          <Icon py={"1"} px={"2"} mb={"2"}>
            {icons.playlist}
          </Icon>
          <Description fontSize={"1"}>{apiKey}</Description>
        </>
      )
    case apiKey.includes("Video"):
      return (
        <>
          <Icon py={"1"} px={"2"} mb={"2"}>
            {icons.video}
          </Icon>
          <Description fontSize={"1"}>{apiKey}</Description>
        </>
      )
    default:
      return (
        <>
          <Icon py={"1"} px={"2"} mb={"2"}>
            {icons.default}
          </Icon>
          <Description fontSize={"1"}>home</Description>
        </>
      )
  }
}

export default SearchPage