Merge pull request #87 from martis-git/feature/search-page

Add search page

Author: azinit

package-lock.json

@@ -19,14 +19,15 @@
     "graphql": "^15.3.0",
     "node-sass": "^4.14.1",
     "normalize.css": "^8.0.1",
-    "query-string": "^6.13.6",
+    "query-string": "^6.13.7",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.3",
     "tailwindcss": "^1.9.5",
-    "typescript": "^3.7.5"
+    "typescript": "^3.7.5",
+    "use-query-params": "^1.1.9"
   },
   "scripts": {
     "start": "react-scripts start",

package.json

@@ -1,11 +1,16 @@
 import React from "react";
 import { Layout, Input } from "antd";
+import * as qs from "query-string";
 import { Auth } from "features";
 import ImgLogo from "./logo.png";
 import "./index.scss";
 
 const Header = () => {
     const { isAuth } = Auth.useAuth();
+    // !!! FIXME: limit scope of query-params literals
+    // TODO: (wrap in QueryParamProvider) - wrap app with header instead of only content?
+    // const [search] = useQueryParam("q", StringParam);
+    const search = (qs.parse(window.location.search).q as string) || "";
 
     return (
         <Layout.Header className="header">
@@ -15,7 +20,20 @@ const Header = () => {
                     <img className="header__logo" src={ImgLogo} alt="logo" width={48} height={48} />
                     {!isAuth && <span className="gc-app__title text-white m-4">GITHUB-CLIENT</span>}
                 </a>
-                {isAuth && <Input className="header__search" placeholder="Search..." />}
+                {isAuth && (
+                    <Input
+                        className="header__search"
+                        placeholder="Search..."
+                        defaultValue={search}
+                        onKeyDown={({ key, target }) => {
+                            // @ts-ignore FIXME: specify types
+                            if (key === "Enter" && target.value) {
+                                // @ts-ignore FIXME: specify types
+                                window.location.replace(`/search?q=${target.value}`);
+                            }
+                        }}
+                    />
+                )}
             </div>
             <Auth.User />
         </Layout.Header>

src/app/header/index.tsx

@@ -2,6 +2,7 @@
 @import "~tailwindcss/dist/utilities.css";
 @import "./vars.scss";
 @import "./normalize.scss";
+@import "./utils.scss";
 
 .gc-app {
     display: flex;

src/app/index.scss

@@ -0,0 +1,5 @@
+.text-title {
+    font-family: var(--ff-secondary);
+    font-size: 20px;
+    font-weight: var(--fw--medium);
+}

src/app/utils.scss

@@ -1,5 +1,6 @@
 import React, { lazy, Suspense } from "react";
 import { BrowserRouter, Route, Switch } from "react-router-dom";
+import { QueryParamProvider } from "use-query-params";
 import { Spin } from "antd";
 import { useAuth } from "../hooks";
 
@@ -16,16 +17,19 @@ const Router = ({ children }: Props) => {
     return (
         <BrowserRouter>
             <Suspense fallback={<Spin />}>
-                <Switch>
-                    {isAuth && children}
-                    {!isAuth && (
-                        <>
-                            <Route exact path="/" component={HomePage} />
-                            <Route exact path="/auth" component={AuthPage} />
-                            {/* <Redirect to="/" /> */}
-                        </>
-                    )}
-                </Switch>
+                {/* FIXME: wrap not on this level */}
+                <QueryParamProvider ReactRouterRoute={Route}>
+                    <Switch>
+                        {isAuth && children}
+                        {!isAuth && (
+                            <>
+                                <Route exact path="/" component={HomePage} />
+                                <Route exact path="/auth" component={AuthPage} />
+                                {/* <Redirect to="/" /> */}
+                            </>
+                        )}
+                    </Switch>
+                </QueryParamProvider>
             </Suspense>
         </BrowserRouter>
     );

src/features/auth/router/index.tsx

@@ -1,27 +1,28 @@
 import React from "react";
+import { Repo, Tabs } from "shared/components";
 import { useReposQuery } from "./queries.gen";
-import Tab from "./tab";
-import RepoItem from "./repo-item";
 import "./index.scss";
 
 type Props = {
     username: string;
 };
 
+// FIXME: rename to UserRepoList? (coz - user as dep)
+
 const RepoList = ({ username }: Props) => {
     const { data } = useReposQuery({
         variables: { login: username },
     });
 
     return (
         <div className="repo-list">
-            <div className="repo-list__tabs">
-                <Tab name="Repositories" />
-            </div>
+            <Tabs className="repo-list__tabs">
+                <Tabs.Item name="Repositories" />
+            </Tabs>
             <div className="repo-list__items">
-                {data?.user?.repositories.edges?.map((edge) => (
+                {data?.user?.repositories.edges?.map((edge, index) => (
                     // FIXME: destruct more elegant later
-                    <RepoItem key={edge?.node?.id} {...edge?.node} />
+                    <Repo key={index} {...edge?.node} />
                 ))}
             </div>
         </div>