ソート

1import { useRouter } from 'next/router';
2import React from 'react';
3import { InstantSearch } from 'react-instantsearch-dom';
4import { searchClient } from '../algolia/client';
5import CustomHits from '../components/custom-hits';
6import CustomSortBy from '../components/custom-sort-by';
7import { SearchState } from 'react-instantsearch-core';
8
9const SearchSort = () => {
10  const router = useRouter();
11  const updateQueryParams = (state: SearchState) => {
12    router.replace(
13      {
14        query: {
15          id: router.query.id,
16          sortBy: state.sortBy || [],
17        },
18      },
19      undefined,
20      {
21        shallow: true,
22      }
23    );
24  };
25
26  return (
27    <InstantSearch
28      onSearchStateChange={updateQueryParams}
29      searchClient={searchClient}
30      indexName="posts"
31    >
32      <div className="flex">
33        <div className="border-r pr-4 mr-6">
34          <h2 className="mb-2">並び替え</h2>
35          <CustomSortBy
36            defaultRefinement={router.query.sortBy || 'posts'}
37            items={[
38              {
39                label: '最新順',
40                value: 'posts',
41              },
42              {
43                label: '古い順',
44                value: 'posts_asc',
45              },
46            ]}
47          />
48        </div>
49        <div className="flex-1">
50          <CustomHits />
51        </div>
52      </div>
53    </InstantSearch>
54  );
55};
56
57export default SearchSort;