fix: consistent reservation list count

Author: joonatank

apps/admin-ui/src/component/ReservationsList.tsx

@@ -8,6 +8,7 @@ import usePermission from "@/hooks/usePermission";
 import { Permission } from "@/modules/permissionHelper";
 import { NewReservationModal } from "./reservations/EditTimeModal";
 import { useModal } from "@/context/ModalContext";
+import { H6 } from "common";
 
 export type NewReservationListItem = {
   date: Date;
@@ -197,7 +198,7 @@ const TitleWrapper = styled.div`
 `;
 
 type Props = {
-  header?: React.ReactNode;
+  header?: string;
   items: NewReservationListItem[];
   hasPadding?: boolean;
 };
@@ -214,10 +215,16 @@ export function ReservationList(props: Props | ExtendedProps) {
   const hasReservation =
     "reservationToCopy" in props && !!props.reservationToCopy;
 
+  const removed = items.filter((x) => x.isRemoved).length;
+  const count = items.length - removed;
   return (
     <ListWrapper data-testid="reservations-list">
       <TitleWrapper>
-        {header}
+        {header != null && (
+          <H6 as="h3" style={{ flexGrow: 1 }}>
+            {header} {`(${count})`}
+          </H6>
+        )}
         {hasReservation && (
           <div>
             <AddNewReservationButton

apps/admin-ui/src/component/reservations/requested/RecurringReservationsView.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { H6 } from "common/src/common/typography";
 import { useTranslation } from "react-i18next";
 import { format } from "date-fns";
 import {
@@ -173,7 +172,7 @@ export function RecurringReservationsView({
 
   return (
     <ReservationList
-      header={<H6 as="h3">{t("RecurringReservationsView.Heading")}</H6>}
+      header={t("RecurringReservationsView.Heading")}
       items={items}
       reservationToCopy={reservationToCopy}
       refetch={refetch}

apps/admin-ui/src/spa/my-units/recurring/RecurringReservationDone.tsx

@@ -4,7 +4,7 @@ import { useParams } from "react-router-dom";
 import styled from "styled-components";
 import { Container } from "hds-react";
 import { ErrorBoundary } from "react-error-boundary";
-import { H1, H6 } from "common/src/common/typography";
+import { H1 } from "common/src/common/typography";
 import { breakpoints } from "common/src/common/style";
 import { RecurringReservationsView } from "@/component/reservations/requested/RecurringReservationsView";
 import { ActionsWrapper } from "./commonStyling";
@@ -18,10 +18,6 @@ const InfoSection = styled.p`
   margin: var(--spacing-l) 0;
 `;
 
-const StyledH6 = styled(H6)`
-  margin-bottom: 0;
-`;
-
 const StyledContainer = styled(Container)`
   margin-top: var(--spacing-2-xl);
   @media (min-width: ${breakpoints.m}) {
@@ -57,17 +53,12 @@ function RecurringReservationDoneInner({
   const reservationPk = reservations[0]?.pk;
   const reservationUrl = reservationPk ? `/reservations/${reservationPk}` : "";
 
-  const successes = reservations;
-
   return (
     <StyledContainer>
       <H1 $legacy>
         {reservations.length > 0 ? t(`title`) : t("allFailedTitle")}
       </H1>
       <InfoSection>{t(`successInfo`)}</InfoSection>
-      <StyledH6 as="h2">
-        {t("successSubtitle")} ({successes.length})
-      </StyledH6>
       <RecurringReservationsView recurringPk={recurringPk} />
       <ActionsWrapper>
         <ButtonLikeLink to="../../.." relative="path">