From 370fbb9d2e1125c98bc0d65ad82b9e811e3d8184 Mon Sep 17 00:00:00 2001
From: Ricardo Casares <ricardocasares@gmail.com>
Date: Wed, 28 Oct 2020 23:28:46 +0100
Subject: [PATCH] feat: add search page

---
 src/components/Card/index.tsx            |  5 ++--
 src/components/Card/style.ts             |  6 ++---
 src/components/Header/index.tsx          |  2 +-
 src/components/SearchInput/index.ts      | 19 ++++++++++++++
 src/components/StationCardList/index.tsx |  3 ++-
 src/pages/search.tsx                     | 32 ++++++++++++++++++++++++
 6 files changed, 60 insertions(+), 7 deletions(-)
 create mode 100644 src/components/SearchInput/index.ts
 create mode 100644 src/pages/search.tsx

diff --git a/src/components/Card/index.tsx b/src/components/Card/index.tsx
index d1ade131..dec74885 100644
--- a/src/components/Card/index.tsx
+++ b/src/components/Card/index.tsx
@@ -5,14 +5,15 @@ import { Container, Cover, Button, Title, Subtitle, Body } from "./style";
 const DEFAULT_SUBTITLE = "Global";
 
 export type Card = {
+  hash: string;
   title: string;
   subtitle: string;
   onClick: (ev: React.MouseEvent) => void;
 };
 
-export const Card: FC<Card> = ({ title, subtitle, onClick }) => (
+export const Card: FC<Card> = ({ hash, title, subtitle, onClick }) => (
   <Container>
-    <Cover hash={[title, subtitle].join("-")}>
+    <Cover hash={hash || Date.now().toString()}>
       <Button onClick={onClick}>
         <PlayCircle size={64} />
       </Button>
diff --git a/src/components/Card/style.ts b/src/components/Card/style.ts
index 93ead2d6..2958edd6 100644
--- a/src/components/Card/style.ts
+++ b/src/components/Card/style.ts
@@ -2,7 +2,7 @@ import styled from "@emotion/styled";
 import gradient from "random-gradient";
 
 export const Container = styled.div`
-  border-radius: var(--sz2);
+  border-radius: var(--sz1);
 `;
 
 export type Cover = {
@@ -14,8 +14,8 @@ export const Cover = styled.div<Cover>`
   place-items: center;
   min-width: 100%;
   min-height: 120px;
-  border-top-left-radius: var(--sz2);
-  border-top-right-radius: var(--sz2);
+  border-top-left-radius: var(--sz1);
+  border-top-right-radius: var(--sz1);
   background: ${({ hash }) => gradient(hash, "vertical")};
 `;
 
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index 7c383dc5..5924dbfc 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -11,7 +11,7 @@ export const Header = () => (
     </Link>
 
     <Navigation>
-      <Link href="/">
+      <Link href="/search">
         <a>
           <Search />
         </a>
diff --git a/src/components/SearchInput/index.ts b/src/components/SearchInput/index.ts
new file mode 100644
index 00000000..568dba5a
--- /dev/null
+++ b/src/components/SearchInput/index.ts
@@ -0,0 +1,19 @@
+import styled from "@emotion/styled";
+
+export const SearchInput = styled.input`
+  width: 100%;
+  padding: var(--sz3);
+  font-size: var(--sz4);
+  border-radius: var(--sz1);
+  margin-bottom: var(--sz4);
+  color: var(--foreground);
+  background: var(--background);
+  border: 1px solid var(--accents-2);
+  outline: none;
+  transition: border-color 0.2s;
+
+  :hover,
+  :focus {
+    border-color: var(--accents-4);
+  }
+`;
diff --git a/src/components/StationCardList/index.tsx b/src/components/StationCardList/index.tsx
index 9ed973f9..c28a2511 100644
--- a/src/components/StationCardList/index.tsx
+++ b/src/components/StationCardList/index.tsx
@@ -27,7 +27,8 @@ export const GQLStations: FC<StationSearchInput> = graphql(
       <AutoGrid gridGap={["var(--sz4)"]}>
         {query.stations({ search }).map((station) => (
           <Card
-            key={[station.stationuuid, station.url].join("-")}
+            key={[station.url, station.stationuuid].join()}
+            hash={station.stationuuid}
             title={station.name}
             subtitle={station.country}
             onClick={() => load(station)}
diff --git a/src/pages/search.tsx b/src/pages/search.tsx
new file mode 100644
index 00000000..7397f395
--- /dev/null
+++ b/src/pages/search.tsx
@@ -0,0 +1,32 @@
+import { useState, useRef, useEffect } from "react";
+import { Box } from "@/components/Box";
+import { Heading } from "@/components/Typography";
+import { SearchInput } from "@/components/SearchInput";
+import { StationCardList } from "@/components/StationCardList";
+
+export const Index = () => {
+  const input = useRef<HTMLInputElement>(null);
+  const [query, setQuery] = useState("");
+
+  const showList = query.length >= 3;
+  const onChange = ({ target: { value } }) => setQuery(value);
+
+  useEffect(() => input.current.focus(), []);
+
+  return (
+    <Box p={["var(--sz4)"]}>
+      <Heading as="h3">Search</Heading>
+
+      <SearchInput
+        type="text"
+        onChange={onChange}
+        ref={input}
+        placeholder="Type something ..."
+      />
+
+      {showList && <StationCardList name={query} limit={20} />}
+    </Box>
+  );
+};
+
+export default Index;