knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[search][s]: implement 'Form' component that merges 'Input' and 'Sort' components and fixes 'Sort' functionality.

Browse Source
This commit is contained in:
anuveyatsu 2020-06-19 17:05:55 +06:00
parent dfd5efa961
commit 5f84d7f5b7
4 changed files with 64 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
components/search/Form.tsx Normal file
View File

@ -0,0 +1,62 @@
import { useState } from 'react';
import { useRouter } from 'next/router';
export default function Form() {
const router = useRouter();
const [q, setQ] = useState(router.query.q);
const [sort, setSort] = useState(router.query.sort);
const handleChange = (event) => {
if (event.target.name === 'q') {
setQ(event.target.value);
} else if (event.target.name === 'sort') {
setSort(event.target.value);
}
};
const handleSubmit = (event) => {
event.preventDefault();
router.push({
pathname: '/search',
query: { q, sort },
});
};
return (
<form onSubmit={handleSubmit} className="items-center">
<div className="flex">
<input
type="text"
name="q"
value={q}
onChange={handleChange}
placeholder="Search"
aria-label="Search"
className="bg-white focus:outline-none focus:shadow-outline border border-gray-300 w-1/2 rounded-lg py-2 px-4 block appearance-none leading-normal"
/>
<button
onClick={handleSubmit}
className="inline-block text-sm px-4 py-3 mx-3 leading-none border rounded text-white bg-black border-black lg:mt-0"
>
Search
</button>
</div>
<div className="inline-block my-6 float-right">
<label htmlFor="field-order-by">Order by:</label>
<select
className="bg-white"
id="field-order-by"
name="sort"
onChange={handleChange}
value={sort}
>
<option value="score:desc">Relevance</option>
<option value="title_string:asc">Name Ascending</option>
<option value="title_string:desc">Name Descending</option>
<option value="metadata_modified:desc">Last Modified</option>
<option value="views_recent:desc">Popular</option>
</select>
</div>
</form>
);
}

40
components/search/Input.tsx
View File

@ -1,40 +0,0 @@
import { useState } from 'react';
import { useRouter } from 'next/router';
import Link from 'next/link';
export default function Input() {
const router = useRouter();
const [q, setQ] = useState(router.query.q);
const handleChange = (event) => {
setQ(event.target.value);
};
const handleSubmit = (event) => {
event.preventDefault();
router.push({
pathname: '/search',
query: { q },
});
};
return (
<form onSubmit={handleSubmit} className="flex items-center">
<input
type="text"
name="q"
value={q}
onChange={handleChange}
placeholder="Search"
aria-label="Search"
className="bg-white focus:outline-none focus:shadow-outline border border-gray-300 w-1/2 rounded-lg py-2 px-4 block appearance-none leading-normal"
/>
<button
onClick={handleSubmit}
className="inline-block text-sm px-4 py-3 mx-3 leading-none border rounded text-white bg-black border-black lg:mt-0"
>
Search
</button>
</form>
);
}

14
components/search/Sort.tsx
View File

@ -1,14 +0,0 @@
export default function Sort() {
return (
<div className="inline-block my-6 float-right">
<label htmlFor="field-order-by">Order by:</label>
<select className="bg-white" id="field-order-by" name="sort">
<option value="score:desc">Relevance</option>
<option value="title_string:asc">Name Ascending</option>
<option value="title_string:desc">Name Descending</option>
<option value="metadata_modified:desc">Last Modified</option>
<option value="views_recent:desc">Popular</option>
</select>
</div>
);
}

6
pages/search.tsx
View File

@ -4,9 +4,8 @@ import config from '../config';
import utils from '../utils';
import Head from 'next/head';
import Nav from '../components/home/Nav';
import Input from '../components/search/Input';
import Form from '../components/search/Form';
import Total from '../components/search/Total';
import Sort from '../components/search/Sort';
import List, { DEFAULT_SEARCH_QUERY } from '../components/search/List';
import { initializeApollo } from '../lib/apolloClient';
@ -19,9 +18,8 @@ function Search({ variables }) {
</Head>
<Nav />
<main className="p-6">
<Input />
<Form />
<Total variables={variables} />
<Sort />
<List variables={variables} />
</main>
</>