1093/search redesign

next/components/atoms/icon/IconService.ts

@@ -87,6 +87,7 @@ import Travel64pxFilledIcon from '@assets/images/menu-icons/64px/travel_64px_fil
 import Travel64pxStrokeIcon from '@assets/images/menu-icons/64px/travel_64px_stroke.svg'
 import Tree64pxIcon from '@assets/images/menu-icons/64px/tree_64px.svg'
 import Trolleybus64pxIcon from '@assets/images/menu-icons/64px/trolleybus_64px.svg'
+import Ostatne48pxIcon from '@assets/images/ostatne.svg'
 import Phone48pxIcon from '@assets/images/phone-medium.svg'
 import TouristSign48pxIcon from '@assets/images/Tourist-icon.svg'
 
@@ -181,6 +182,8 @@ export const ICON_URL_MAP: IconUrlMap = {
     pracovne_prilezitosti: TopServices_PracovnePrilezitosti,
     turistom_v_hlavnom_meste: TopServices_TuristomVHlavnomMeste,
     prenajom_priestorov: TopServices_PrenajomPriestorov,
+    // Others
+    ostatne: Ostatne48pxIcon,
   },
   size_64: {
     mesto_01: Castle64pxStrokeIcon,

next/components/forms/simple-components/Chip.tsx

@@ -15,7 +15,7 @@ const Chip = ({ variant = 'large', ...props }: ChipProps) => {
     <Tag
       {...props}
       className={cx(
-        'flex cursor-pointer items-center rounded-lg border-2 outline-none hover:bg-gray-200 focus-visible:ring focus-visible:ring-offset-2 selected:border-category-700 selected:bg-category-700 selected:text-gray-0 hover:selected:bg-category-700',
+        'flex shrink-0 cursor-pointer items-center rounded-lg border-2 outline-none hover:bg-gray-200 focus-visible:ring focus-visible:ring-offset-2 selected:border-category-700 selected:bg-category-700 selected:text-gray-0 hover:selected:bg-category-700',
         {
           'px-3 py-1.5 text-size-p-small lg:px-4 lg:py-2.5 lg:text-size-p-default':
             variant === 'large',

next/components/molecules/SearchPageNew/GeneralSearchResults.tsx

@@ -8,12 +8,13 @@ import {
 } from '@components/molecules/SearchPageNew/useQueryBySearchOption'
 import { SearchOption } from '@components/pages/searchPageContentNew'
 import { useTranslations } from 'next-intl'
-import { Dispatch, SetStateAction } from 'react'
+import { Dispatch, SetStateAction, useEffect } from 'react'
 
 type GeneralSearchResultsProps = {
   filters: SearchFilters
   variant: 'allResults' | 'specificResults'
   searchOption: SearchOption
+  handleSetResultsCount?: (searchOptionId: SearchOption['id'], count: number) => void
   onShowMore?: Dispatch<SetStateAction<Set<SearchOption['id']>>>
   onPageChange?: Dispatch<SetStateAction<number>>
 }
@@ -22,6 +23,7 @@ const GeneralSearchResults = ({
   filters,
   onShowMore,
   onPageChange,
+  handleSetResultsCount,
   searchOption,
   variant,
 }: GeneralSearchResultsProps) => {
@@ -35,12 +37,17 @@ const GeneralSearchResults = ({
 
   const GENERAL_RESULTS_COUNT = 5
 
+  useEffect(() => {
+    handleSetResultsCount(searchOption?.id, searchResultsCount)
+  }, [searchResultsCount])
+
   return (
     <div className="flex flex-col gap-y-8">
       <div className="flex flex-col gap-y-4">
         {variant === 'allResults' && (
           <SearchResultsHeader
             title={`${searchOption?.displayNamePlural}` ?? ''}
+            showButton={searchResultsCount > 0}
             handleShowMore={() => {
               onShowMore(new Set([searchOption.id]))
             }}
@@ -55,7 +62,10 @@ const GeneralSearchResults = ({
                       data={{ ...item }}
                       tagText={searchOption.displayName}
                       variant="withPicture"
-                      key={`item-${variant}-${searchOption.id}-${item.linkHref}`}
+                      key={`item-${variant}-${searchOption.id}-${[
+                        item.title,
+                        ...item.metadata,
+                      ].join('')}`}
                     />
                   )
                 })
@@ -67,7 +77,10 @@ const GeneralSearchResults = ({
                       data={{ ...item }}
                       tagText={searchOption.displayName}
                       variant="withPicture"
-                      key={`item-${variant}-${searchOption.id}-${item.linkHref}`}
+                      key={`item-${variant}-${searchOption.id}-${[
+                        item.title,
+                        ...item.metadata,
+                      ].join('')}`}
                     />
                   )
                 })
@@ -85,6 +98,7 @@ const GeneralSearchResults = ({
         <div>
           <Pagination
             currentPage={filters.page}
+            style="black"
             totalCount={
               searchResultsCount > 0 ? Math.ceil(searchResultsCount / filters.pageSize) : 1
             }

next/components/molecules/SearchPageNew/SearchCardComposed.tsx

@@ -1,6 +1,7 @@
 import { ChevronRightIcon } from '@assets/ui-icons'
 import { Enum_Page_Pagecolor, Enum_Pagecategory_Color } from '@backend/graphql'
 import { Typography } from '@bratislava/component-library'
+import { Icon } from '@components/atoms/icon/Icon'
 import ImagePlaceholder from '@components/atoms/ImagePlaceholder'
 import MLink from '@components/forms/simple-components/MLink'
 import Tag from '@components/forms/simple-components/Tag'
@@ -11,7 +12,7 @@ import { isDefined } from '@utils/isDefined'
 import { findIconByPageColor } from '@utils/pageIcons'
 import cx from 'classnames'
 import Image from 'next/image'
-import React, { ReactNode } from 'react'
+import React, { Fragment, ReactNode } from 'react'
 import { twMerge } from 'tailwind-merge'
 
 type SearchCardComposedProps = {
@@ -28,7 +29,7 @@ const SearchCardComposed = ({ data, variant = 'default', tagText }: SearchCardCo
           <div className="flex w-full flex-row gap-6 px-6 py-4">
             <SearchCardComposed.InfoContainer className="gap-1.5">
               <div className="flex flex-row flex-wrap items-center gap-x-3 gap-y-1.5 lg:flex-nowrap">
-                <SearchCardComposed.TitleWithLink title={data.title} url={data.linkHref} />
+                <SearchCardComposed.TitleWithLink title={data.title} href={data.linkHref} />
                 <SearchCardComposed.Tag text={tagText} />
               </div>
               <SearchCardComposed.Metadata metadata={data.metadata} />
@@ -46,10 +47,12 @@ const SearchCardComposed = ({ data, variant = 'default', tagText }: SearchCardCo
         >
           {data.coverImageSrc ? (
             <SearchCardComposed.ImageFromUrl imgUrl={data.coverImageSrc} />
+          ) : data.customIconName ? (
+            <SearchCardComposed.ImageFromIcon iconName={data.customIconName} />
           ) : data.pageColor ? (
             <SearchCardComposed.ImageFromPageColor pageColor={data.pageColor} />
           ) : (
-            <SearchCardComposed.ImageFromPageColor pageColor={Enum_Pagecategory_Color.Red} />
+            <SearchCardComposed.ImageFromIcon iconName={null} />
           )}
           <div className="flex w-full flex-row gap-6 py-4 lg:p-6">
             <SearchCardComposed.InfoContainer className="flex flex-col gap-3">
@@ -58,7 +61,7 @@ const SearchCardComposed = ({ data, variant = 'default', tagText }: SearchCardCo
                 <SearchCardComposed.TitleWithLink
                   className=""
                   title={data.title}
-                  url={data.linkHref}
+                  href={data.linkHref}
                 />
               </div>
               <SearchCardComposed.Metadata metadata={data.metadata} />
@@ -71,6 +74,25 @@ const SearchCardComposed = ({ data, variant = 'default', tagText }: SearchCardCo
   )
 }
 
+SearchCardComposed.ImageFromIcon = function ({
+  iconName,
+  className,
+}: {
+  iconName?: string
+  className?: string
+}) {
+  return (
+    <div
+      className={twMerge(
+        'hidden w-[150px] shrink-0 items-center justify-center bg-gray-200 lg:flex',
+        className,
+      )}
+    >
+      {iconName ? <Icon iconName={iconName} /> : null}
+    </div>
+  )
+}
+
 SearchCardComposed.ImageFromPageColor = function ({
   pageColor,
   className,
@@ -113,7 +135,7 @@ SearchCardComposed.ImageFromUrl = function ({
         alt=""
         sizes={generateImageSizes({ default: '150px' })}
         fill
-        className="h-full object-cover"
+        className="object-cover"
       />
       <ImagePlaceholder />
     </div>
@@ -132,17 +154,17 @@ SearchCardComposed.InfoContainer = function ({
 
 SearchCardComposed.TitleWithLink = function ({
   title,
-  url,
+  href,
   className,
 }: {
   title: string
-  url?: string
+  href?: string
   className?: string
 }) {
   return (
     <>
-      {url ? (
-        <MLink stretched href={url ?? ''}>
+      {href ? (
+        <MLink stretched href={href}>
           <Typography
             type="h3"
             size="h5"
@@ -186,7 +208,7 @@ SearchCardComposed.Metadata = function ({
   const metaDataRow =
     cleanedMetadata?.map((item: string, index: number) => {
       return (
-        <>
+        <Fragment key={item}>
           {index > 0 && (
             <Typography type="p" className="max-lg:hidden">
               •
@@ -195,7 +217,7 @@ SearchCardComposed.Metadata = function ({
           <Typography type="p" className="max-lg:first-of-type:font-medium">
             {item}
           </Typography>
-        </>
+        </Fragment>
       )
     }) ?? null
   return (

next/components/molecules/SearchPageNew/SearchResultsHeader.tsx

@@ -5,20 +5,23 @@ import { useTranslations } from 'next-intl'
 
 type SearchResultsHeaderProps = {
   title: string
+  showButton?: boolean
   handleShowMore: () => void
 }
 
-const SearchResultsHeader = ({ title, handleShowMore }: SearchResultsHeaderProps) => {
+const SearchResultsHeader = ({ title, showButton, handleShowMore }: SearchResultsHeaderProps) => {
   const t = useTranslations()
 
   return (
     <div className="flex flex-col flex-wrap items-baseline justify-between gap-y-2 lg:flex-row">
       <Typography type="h2" size="h4" className="text-gray-800">
         {title}
       </Typography>
-      <Button variant="black-link" endIcon={<ArrowRightIcon />} onPress={handleShowMore}>
-        {t('SearchPage.moreResults')}
-      </Button>
+      {showButton ? (
+        <Button variant="black-link" endIcon={<ArrowRightIcon />} onPress={handleShowMore}>
+          {t('SearchPage.moreResults')}
+        </Button>
+      ) : null}
     </div>
   )
 }

next/components/molecules/SearchPageNew/useQueryBySearchOption.ts

@@ -2,7 +2,12 @@ import {
   getGinisOfficialBoardQueryKey,
   ginisOfficialBoardFetcher,
 } from '@backend/ginis/fetchers/ginisOfficialBoard.fetcher'
-import { Enum_Page_Pagecolor, LatestBlogPostEntityFragment } from '@backend/graphql'
+import {
+  Enum_Componentblockstopservicesitem_Icon,
+  Enum_Page_Pagecolor,
+  Enum_Pagecategory_Color,
+  LatestBlogPostEntityFragment,
+} from '@backend/graphql'
 import {
   blogPostsFetcher,
   BlogPostsFilters,
@@ -35,7 +40,8 @@ export type SearchResult = {
   linkHref?: string | null | undefined
   metadata?: (string | null | undefined)[]
   coverImageSrc?: string | null | undefined
-  pageColor?: Enum_Page_Pagecolor
+  pageColor?: Enum_Page_Pagecolor | Enum_Pagecategory_Color
+  customIconName?: string
 }
 
 export const useQueryBySearchOption = (optionKey: SearchOption['id'], filters: SearchFilters) => {
@@ -52,7 +58,7 @@ export const useQueryBySearchOption = (optionKey: SearchOption['id'], filters: S
             title: page.title,
             linkHref: `/${page.slug}`,
             metadata: [page.pageCategory?.title, formatDate(page.publishedAt)],
-            pageColor: page.pageColor,
+            pageColor: page.pageColor ?? page.pageCategory?.color,
           }
         }) ?? []
 
@@ -115,11 +121,12 @@ export const useQueryBySearchOption = (optionKey: SearchOption['id'], filters: S
     select: (axiosResponse) => {
       const formattedData: SearchResult[] =
         axiosResponse?.data.map((user) => {
-          const mail = user.otherMails.length > 0 ? user.otherMails[0] : user.mail
+          const mail = user.otherMails?.length > 0 ? user.otherMails[0] : user.mail
 
           return {
             title: user.displayName,
             metadata: [user.jobTitle, mail, user.businessPhones?.join(', ')],
+            customIconName: Enum_Componentblockstopservicesitem_Icon.UradneHodiny,
           }
         }) ?? []
 
@@ -137,6 +144,7 @@ export const useQueryBySearchOption = (optionKey: SearchOption['id'], filters: S
           return {
             title: boardItem.title,
             metadata: [boardItem.createdAt],
+            customIconName: 'ostatne',
           }
         }) ?? []