feat(web): Organization page - prefilter search results (#15084)

* When on an organization page, prefilter results * Show what is filtered by via tags * Change keys * Remove comments * Make sure that selected is an array --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
island-is · Jun 5, 2024 · bd9059b · bd9059b
1 parent 9e1ff00
commit bd9059b
Show file tree

Hide file tree

Showing 7 changed files with 232 additions and 160 deletions.
diff --git a/apps/web/components/FilterTag/FilterTag.tsx b/apps/web/components/FilterTag/FilterTag.tsx
@@ -1,17 +1,21 @@
-import { Tag, Box } from '@island.is/island-ui/core'
 import React from 'react'
+
+import { Box, Tag } from '@island.is/island-ui/core'
+
 import * as styles from './FilterTag.css'
 
 interface FilterTagProps {
   onClick?: () => void
+  active?: boolean
 }
 
 export const FilterTag: React.FC<React.PropsWithChildren<FilterTagProps>> = ({
   children,
   onClick,
+  active,
 }) => {
   return (
-    <Tag onClick={onClick}>
+    <Tag onClick={onClick} active={active}>
       <Box flexDirection="row" alignItems="center">
         {children}
         <span className={styles.crossmark}>&#10005;</span>

diff --git a/apps/web/components/Header/Header.tsx b/apps/web/components/Header/Header.tsx
@@ -1,4 +1,6 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
+import React, { FC, useContext } from 'react'
+
 import {
   Box,
   ButtonTypes,
@@ -13,14 +15,14 @@ import {
   Logo,
   ResponsiveSpace,
 } from '@island.is/island-ui/core'
+import { webMenuButtonClicked } from '@island.is/plausible'
 import { FixedNav, SearchInput } from '@island.is/web/components'
-import { LoginButton } from './LoginButton'
 import { useI18n } from '@island.is/web/i18n'
 import { LayoutProps } from '@island.is/web/layouts/main'
-import React, { FC, useContext } from 'react'
+
 import { LanguageToggler } from '../LanguageToggler'
 import { Menu } from '../Menu/Menu'
-import { webMenuButtonClicked } from '@island.is/plausible'
+import { LoginButton } from './LoginButton'
 
 interface HeaderProps {
   showSearchInHeader?: boolean
@@ -29,6 +31,7 @@ interface HeaderProps {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore make web strict
   megaMenuData
+  organizationSearchFilter?: string
 }
 
 const marginLeft = [1, 1, 1, 2] as ResponsiveSpace
@@ -38,6 +41,7 @@ export const Header: FC<React.PropsWithChildren<HeaderProps>> = ({
   buttonColorScheme = 'default',
   megaMenuData,
   languageToggleQueryParams,
+  organizationSearchFilter,
   children,
 }) => {
   const { activeLocale, t } = useI18n()
@@ -92,6 +96,7 @@ export const Header: FC<React.PropsWithChildren<HeaderProps>> = ({
                           placeholder={t.searchPlaceholder}
                           autocomplete={true}
                           autosuggest={true}
+                          organization={organizationSearchFilter}
                         />
                       </Box>
                     )}
@@ -114,6 +119,7 @@ export const Header: FC<React.PropsWithChildren<HeaderProps>> = ({
                         {...megaMenuData}
                         buttonColorScheme={buttonColorScheme}
                         onMenuOpen={webMenuButtonClicked}
+                        organizationSearchFilter={organizationSearchFilter}
                       />
                     </Box>
                   </Box>

diff --git a/apps/web/components/Menu/Menu.tsx b/apps/web/components/Menu/Menu.tsx
@@ -28,6 +28,7 @@ interface Props {
   mainLinks: MegaMenuLink[]
   buttonColorScheme?: ButtonTypes['colorScheme']
   onMenuOpen?: () => void
+  organizationSearchFilter?: string
 }
 
 const minarsidurLink = '/minarsidur/'
@@ -39,6 +40,7 @@ export const Menu = ({
   mainLinks,
   buttonColorScheme = 'default',
   onMenuOpen,
+  organizationSearchFilter,
 }: Props) => {
   const searchInput = useRef<HTMLInputElement>()
   const { activeLocale, t } = useI18n()
@@ -146,6 +148,7 @@ export const Menu = ({
           autosuggest={true}
           onRouting={closeModal}
           skipContext
+          organization={organizationSearchFilter}
         />
       )}
     />

diff --git a/apps/web/components/SearchInput/SearchInput.tsx b/apps/web/components/SearchInput/SearchInput.tsx
@@ -1,43 +1,44 @@
 import React, {
-  useState,
-  useEffect,
-  useCallback,
-  useRef,
   forwardRef,
   ReactElement,
+  useCallback,
+  useEffect,
   useReducer,
+  useRef,
+  useState,
 } from 'react'
-import Downshift from 'downshift'
 import { useMeasure } from 'react-use'
+import Downshift from 'downshift'
 import { useRouter } from 'next/router'
 import { useApolloClient } from '@apollo/client/react'
-import { GET_SEARCH_RESULTS_QUERY } from '@island.is/web/screens/queries'
+
 import {
   AsyncSearchInput,
+  AsyncSearchInputProps,
   AsyncSearchSizes,
   Box,
-  Text,
-  Stack,
   Link,
-  AsyncSearchInputProps,
+  Stack,
+  Text,
 } from '@island.is/island-ui/core'
+import { TestSupport } from '@island.is/island-ui/utils'
+import { trackSearchQuery } from '@island.is/plausible'
 import { Locale } from '@island.is/shared/types'
 import {
-  GetSearchResultsQuery,
-  QuerySearchResultsArgs,
-  ContentLanguage,
-  Article,
-  SubArticle,
-  SearchableContentTypes,
   AnchorPage,
+  Article,
+  ContentLanguage,
+  GetSearchResultsQuery,
+  LifeEventPage,
   News,
   OrganizationSubpage,
-  LifeEventPage,
+  QuerySearchResultsArgs,
+  SearchableContentTypes,
+  SearchableTags,
+  SubArticle,
 } from '@island.is/web/graphql/schema'
-
 import { LinkType, useLinkResolver } from '@island.is/web/hooks/useLinkResolver'
-import { TestSupport } from '@island.is/island-ui/utils'
-import { trackSearchQuery } from '@island.is/plausible'
+import { GET_SEARCH_RESULTS_QUERY } from '@island.is/web/screens/queries'
 import { extractAnchorPageLinkType } from '@island.is/web/utils/anchorPage'
 
 import * as styles from './SearchInput.css'
@@ -90,6 +91,7 @@ const useSearch = (
   locale: Locale,
   term?: string,
   autocomplete?: boolean,
+  organization?: string,
 ): SearchState => {
   const [state, dispatch] = useReducer(searchReducer, initialSearchState)
   const client = useApolloClient()
@@ -134,6 +136,9 @@ const useSearch = (
                 ],
                 highlightResults: true,
                 useQuery: 'suggestions',
+                tags: organization
+                  ? [{ key: organization, type: SearchableTags.Organization }]
+                  : undefined,
               },
             },
           })
@@ -169,7 +174,11 @@ type SubmitType = {
   string: string
 }
 
-const useSubmit = (locale: Locale, onRouting?: () => void) => {
+const useSubmit = (
+  locale: Locale,
+  onRouting?: () => void,
+  organization?: string,
+) => {
   const Router = useRouter()
   const { linkResolver } = useLinkResolver()
 
@@ -183,6 +192,10 @@ const useSubmit = (locale: Locale, onRouting?: () => void) => {
         query.referencedBy = Router.query.referencedBy
       }
 
+      if (organization) {
+        query.organization = organization
+      }
+
       Router.push({
         ...(item.type === 'query' && {
           pathname: linkResolver('search').href,
@@ -199,7 +212,7 @@ const useSubmit = (locale: Locale, onRouting?: () => void) => {
         onRouting()
       }
     },
-    [Router, linkResolver, onRouting],
+    [Router, linkResolver, onRouting, organization],
   )
 }
 
@@ -217,6 +230,7 @@ interface SearchInputProps {
   onRouting?: () => void
   skipContext?: boolean
   quickContentLabel?: string
+  organization?: string
 }
 
 export const SearchInput = forwardRef<
@@ -239,13 +253,14 @@ export const SearchInput = forwardRef<
       skipContext,
       quickContentLabel,
       dataTestId,
+      organization,
     },
     ref,
   ) => {
     const [searchTerm, setSearchTerm] = useState(initialInputValue)
-    const search = useSearch(locale, searchTerm, autocomplete)
+    const search = useSearch(locale, searchTerm, autocomplete, organization)
 
-    const onSubmit = useSubmit(locale)
+    const onSubmit = useSubmit(locale, undefined, organization)
     const [hasFocus, setHasFocus] = useState(false)
     const onBlur = useCallback(() => setHasFocus(false), [setHasFocus])
     const onFocus = useCallback(() => {

diff --git a/apps/web/layouts/main.tsx b/apps/web/layouts/main.tsx
@@ -57,6 +57,7 @@ import { GET_CATEGORIES_QUERY, GET_NAMESPACE_QUERY } from '../screens/queries'
 import { GET_ALERT_BANNER_QUERY } from '../screens/queries/AlertBanner'
 import { GET_GROUPED_MENU_QUERY } from '../screens/queries/Menu'
 import { Screen } from '../types'
+import { extractOrganizationSlugFromPathname } from '../utils/organization'
 import {
   formatMegaMenuCategoryLinks,
   formatMegaMenuLinks,
@@ -246,6 +247,11 @@ const Layout: Screen<LayoutProps> = ({
 
   const isServiceWeb = pathIsRoute(router.asPath, 'serviceweb', activeLocale)
 
+  const organizationSearchFilter = extractOrganizationSlugFromPathname(
+    router.asPath,
+    activeLocale,
+  )
+
   return (
     <GlobalContextProvider namespace={namespace} isServiceWeb={isServiceWeb}>
       <Page component="div">
@@ -403,6 +409,7 @@ const Layout: Screen<LayoutProps> = ({
                 showSearchInHeader={showSearchInHeader}
                 megaMenuData={megaMenuData}
                 languageToggleQueryParams={languageToggleQueryParams}
+                organizationSearchFilter={organizationSearchFilter}
               />
             </ColorSchemeContext.Provider>
           )}