-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
1234/add aditional functionality to regulations (#1235)
* Allow searching Regulations in global search * Change RegulationListSection so it will use GlobalSearchSectionContent * Connect homepage search with Regulations, disconnect old VZNs
- Loading branch information
Showing
5 changed files
with
29 additions
and
129 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
114 changes: 4 additions & 110 deletions
114
next/components/molecules/sections/general/RegulationsListSection.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,114 +1,8 @@ | ||
| import { RegulationsListSectionFragment } from '@backend/graphql' | ||
| import { Typography } from '@bratislava/component-library' | ||
| import SearchBar from '@components/organisms/SearchSection/SearchBar' | ||
| import SearchResults from '@components/organisms/SearchSection/SearchResults' | ||
| import { SearchFilters } from '@components/organisms/SearchSection/useQueryBySearchOption' | ||
| import { useTranslations } from 'next-intl' | ||
| import React, { useEffect, useRef, useState } from 'react' | ||
| import { StringParam, useQueryParam, withDefault } from 'use-query-params' | ||
| import { useDebounce } from 'usehooks-ts' | ||
| import GlobalSearchSectionContent from '@components/organisms/SearchSection/GlobalSearchSectionContent' | ||
| import React from 'react' | ||
|
|
||
| // This component was created by reducing some functionality from the main search component GlobalSearchPageContent | ||
| // Same as in OfficialBoardSection. | ||
| // TODO there's too much code duplication here, it would be better to have one component that takes selected search options as props | ||
|
|
||
| export type SearchOption = { | ||
| id: | ||
| | 'allResults' | ||
| | 'pages' | ||
| | 'articles' | ||
| | 'inbaArticles' | ||
| | 'regulations' | ||
| | 'users' | ||
| | 'officialBoard' | ||
| displayName?: string | ||
| displayNamePlural: string | ||
| } | ||
|
|
||
| type RegulationsListSectionProps = { | ||
| section: RegulationsListSectionFragment | ||
| } | ||
|
|
||
| const RegulationsListSection = ({ section }: RegulationsListSectionProps) => { | ||
| // TODO return only GlobalSearchPageContent with specific search option when regulations are enabled | ||
| // return <GlobalSearchPageContent variant="specific" searchOption="regulations" /> | ||
|
|
||
| const t = useTranslations() | ||
|
|
||
| const [routerQueryValue] = useQueryParam('keyword', withDefault(StringParam, '')) | ||
| const [input, setInput] = useState('') | ||
| const debouncedInput = useDebounce(input, 300) | ||
| const [searchValue, setSearchValue] = useState(debouncedInput) | ||
|
|
||
| useEffect(() => { | ||
| setInput(routerQueryValue) | ||
| }, [routerQueryValue]) | ||
|
|
||
| useEffect(() => { | ||
| setSearchValue(debouncedInput) | ||
| }, [debouncedInput]) | ||
|
|
||
| const defaultSearchOption: SearchOption = { | ||
| id: 'regulations', | ||
| displayName: t('SearchPage.regulation'), | ||
| displayNamePlural: t('SearchPage.regulations'), | ||
| } | ||
|
|
||
| const [currentPage, setCurrentPage] = useState(1) | ||
|
|
||
| useEffect(() => { | ||
| setCurrentPage(1) | ||
| }, [searchValue]) | ||
|
|
||
| const [resultsCount, setResultsCount] = useState(0) | ||
|
|
||
| const setResultsCountById = (optionId: SearchOption['id'], count: number) => { | ||
| setResultsCount(count) | ||
| } | ||
|
|
||
| const searchFilters: SearchFilters = { | ||
| search: searchValue, | ||
| page: currentPage, | ||
| pageSize: 12, | ||
| // tagIds need to be here for now, because BlogPost and InbaArticle fetchers filter by tagIds | ||
| tagIds: [], | ||
| } | ||
|
|
||
| const searchRef = useRef<null | HTMLInputElement>(null) | ||
|
|
||
| useEffect(() => { | ||
| searchRef.current?.scrollIntoView({ behavior: 'smooth' }) | ||
| }, [searchFilters.page, searchFilters.pageSize]) | ||
|
|
||
| return ( | ||
| <div className="flex w-full flex-col gap-y-8"> | ||
| <Typography type="h1">{t('searching')}</Typography> | ||
| <div className="flex flex-col gap-3 lg:gap-4"> | ||
| <SearchBar | ||
| ref={searchRef} | ||
| placeholder={t('enterKeyword')} | ||
| input={input} | ||
| setInput={setInput} | ||
| setSearchQuery={setSearchValue} | ||
| /> | ||
| </div> | ||
| {resultsCount > 0 ? ( | ||
| <Typography type="p"> | ||
| {t('SearchPage.showingResults', { | ||
| count: resultsCount, | ||
| })} | ||
| </Typography> | ||
| ) : null} | ||
| <SearchResults | ||
| variant="specificResults" | ||
| searchOption={defaultSearchOption} | ||
| filters={searchFilters} | ||
| onSetResultsCount={setResultsCountById} | ||
| onPageChange={setCurrentPage} | ||
| key={`specificResults-${defaultSearchOption.id}`} | ||
| /> | ||
| </div> | ||
| ) | ||
| const RegulationsListSection = () => { | ||
| return <GlobalSearchSectionContent variant="specific" searchOption="regulations" /> | ||
| } | ||
|
|
||
| export default RegulationsListSection |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters