Merge pull request #138 from acelaya-forks/feature/visits-sections

Make sure visits nav is always visible when not loading
shlinkio · Nov 26, 2023 · 6754b1e · 6754b1e
2 parents b91f263 + 03282f2
commit 6754b1e
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 20 deletions.
diff --git a/src/visits/VisitsStats.tsx b/src/visits/VisitsStats.tsx
@@ -59,6 +59,15 @@ Object.freeze(sections);
 
 let selectedBar: string | undefined;
 
+const VisitsSectionWithFallback: FC<PropsWithChildren<{ showFallback: boolean }>> = (
+  { children, showFallback },
+) => (
+  <>
+    {showFallback && <Message className="mt-3">There are no visits matching current filter</Message>}
+    {!showFallback && <>{children}</>}
+  </>
+);
+
 export const VisitsStats: FC<VisitsStatsProps> = (props) => {
   const {
     children,
@@ -154,10 +163,6 @@ export const VisitsStats: FC<VisitsStatsProps> = (props) => {
       );
     }
 
-    if (visits.length === 0) {
-      return <Message>There are no visits matching current filter</Message>;
-    }
-
     return (
       <>
         <NavPills fill>
@@ -177,22 +182,24 @@ export const VisitsStats: FC<VisitsStatsProps> = (props) => {
             <Route
               path={sections.byTime.subPath}
               element={(
-                <div className="col-12 mt-3">
-                  <LineChartCard
-                    title="Visits during time"
-                    visits={normalizedVisits}
-                    highlightedVisits={highlightedVisits}
-                    highlightedLabel={highlightedLabel}
-                    setSelectedVisits={setSelectedVisits}
-                  />
-                </div>
+                <VisitsSectionWithFallback showFallback={visits.length === 0}>
+                  <div className="col-12 mt-3">
+                    <LineChartCard
+                      title="Visits during time"
+                      visits={normalizedVisits}
+                      highlightedVisits={highlightedVisits}
+                      highlightedLabel={highlightedLabel}
+                      setSelectedVisits={setSelectedVisits}
+                    />
+                  </div>
+                </VisitsSectionWithFallback>
               )}
             />
 
             <Route
               path={sections.byContext.subPath}
               element={(
-                <>
+                <VisitsSectionWithFallback showFallback={visits.length === 0}>
                   <div className={clsx('mt-3 col-lg-6', { 'col-xl-4': !isOrphanVisits })}>
                     <DoughnutChartCard title="Operating systems" stats={os} />
                   </div>
@@ -228,14 +235,14 @@ export const VisitsStats: FC<VisitsStatsProps> = (props) => {
                       />
                     </div>
                   )}
-                </>
+                </VisitsSectionWithFallback>
               )}
             />
 
             <Route
               path={sections.byLocation.subPath}
               element={(
-                <>
+                <VisitsSectionWithFallback showFallback={visits.length === 0}>
                   <div className="col-lg-6 mt-3">
                     <SortableBarChartCard
                       title="Countries"
@@ -265,7 +272,7 @@ export const VisitsStats: FC<VisitsStatsProps> = (props) => {
                       onClick={(value) => highlightVisitsForProp('city', value)}
                     />
                   </div>
-                </>
+                </VisitsSectionWithFallback>
               )}
             />
 

diff --git a/src/visits/VisitsTable.tsx b/src/visits/VisitsTable.tsx
@@ -136,7 +136,7 @@ export const VisitsTable = ({
           {paginator.total === 0 && (
             <tr>
               <td colSpan={fullSizeColSpan} className="text-center">
-                No visits found with current filtering
+                There are no visits matching current filter
               </td>
             </tr>
           )}

diff --git a/test/visits/VisitsTable.test.tsx b/test/visits/VisitsTable.test.tsx
@@ -38,7 +38,7 @@ describe('<VisitsTable />', () => {
 
   it('shows warning when no visits are found', () => {
     setUp([]);
-    expect(screen.getByText('No visits found with current filtering')).toBeInTheDocument();
+    expect(screen.getByText('There are no visits matching current filter')).toBeInTheDocument();
   });
 
   it.each([
@@ -138,7 +138,7 @@ describe('<VisitsTable />', () => {
     await user.type(screen.getByPlaceholderText('Search...'), 'foo');
 
     // Search is deferred, so let's wait for it to apply
-    await waitFor(() => screen.getByText('No visits found with current filtering'));
+    await waitFor(() => screen.getByText('There are no visits matching current filter'));
 
     expect(setSelectedVisits).toHaveBeenCalledWith([]);
   });