hide search result text if empty query

the-kwisatz-haderach · May 5, 2024 · 3b26418 · 3b26418
1 parent fef438c
commit 3b26418
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 7 deletions.
diff --git a/components/ObituaryGrid/ObituaryGrid.tsx b/components/ObituaryGrid/ObituaryGrid.tsx
@@ -14,6 +14,7 @@ interface Props {
   hasMore: boolean
   isLoading: boolean
   isLoadingNext: boolean
+  hasQuery: boolean
 }
 
 export default function ObituaryGrid({
@@ -22,11 +23,16 @@ export default function ObituaryGrid({
   onLoadMore,
   isLoading,
   isLoadingNext,
+  hasQuery,
 }: Props): ReactElement {
   const { t } = useTranslation()
   return (
     <Contained my={{ base: 0, lg: 8 }}>
-      <ResultsDescription resultsCount={obituaries.length} hasMore={hasMore} />
+      <ResultsDescription
+        resultsCount={obituaries.length}
+        hasMore={hasMore}
+        hasQuery={hasQuery}
+      />
       {isLoading || obituaries.length > 0 ? (
         <SimpleGrid spacing={4} columns={[1, 2, 3, 4]}>
           {isLoading

diff --git a/components/ObituaryGrid/ResultsDescription.tsx b/components/ObituaryGrid/ResultsDescription.tsx
@@ -4,12 +4,17 @@ import { useTranslation } from 'next-i18next'
 interface Props {
   hasMore: boolean
   resultsCount: number
+  hasQuery?: boolean
 }
 
-export const ResultsDescription = ({ resultsCount, hasMore }: Props) => {
+export const ResultsDescription = ({
+  resultsCount,
+  hasMore,
+  hasQuery,
+}: Props) => {
   const { t } = useTranslation()
   return (
-    <Text hidden={resultsCount < 1} textAlign="center" my={5}>
+    <Text hidden={!hasQuery || resultsCount < 1} textAlign="center" my={5}>
       {t('search-results-found')}
       {hasMore ? ' ' + t('search-results-over') : ' '} <b>{resultsCount}</b>{' '}
       {t('search-results-result')}.

diff --git a/next-env.d.ts b/next-env.d.ts
@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/pages/[category]/index.tsx b/pages/[category]/index.tsx
@@ -77,6 +77,7 @@ export default function Obituaries({
           obituaries={data.pages.flatMap((page) => page.data)}
           hasMore={hasNextPage}
           onLoadMore={fetchNextPage}
+          hasQuery={query !== ''}
         />
         <TopScroll
           show={data.pages.some((page) => page.data.length > 10)}

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -73,6 +73,7 @@ export default function Home({ story: initialStory }: Props): ReactElement {
           obituaries={data.pages.flatMap((page) => page.data)}
           hasMore={hasNextPage}
           onLoadMore={fetchNextPage}
+          hasQuery={query !== ''}
         />
         <TopScroll
           show={data.pages?.some((page) => page.data.length > 10)}

diff --git a/tsconfig.json b/tsconfig.json
@@ -2,7 +2,11 @@
   "extends": "@tsconfig/node20/tsconfig.json",
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -17,14 +21,22 @@
     "downlevelIteration": true,
     "jsx": "preserve",
     "baseUrl": ".",
-    "incremental": true
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
   },
   "include": [
     "src",
     "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx",
-    "lib/pathTranslations.js"
+    "lib/pathTranslations.js",
+    ".next/types/**/*.ts"
   ],
-  "exclude": ["node_modules"]
+  "exclude": [
+    "node_modules"
+  ]
 }