Refactor loading states in Residents and HolidayRentalReports compone…

…nts; add LoadingRows for better UX and update storybook stories
Amsterdam · Dec 31, 2024 · dbb1211 · dbb1211
1 parent f1d7e3e
commit dbb1211
Show file tree

Hide file tree

Showing 14 changed files with 152 additions and 143 deletions.
diff --git a/src/components/Data/components/LoadingRows.tsx b/src/components/Data/components/LoadingRows.tsx
@@ -8,7 +8,7 @@ type Props = {
   numRows?: number
 }
 
-const LoadingRows: React.FC<Props> = ({ loading = true, numRows = 1 }) => loading ? (
+export const LoadingRows: React.FC<Props> = ({ loading = true, numRows = 1 }) => loading ? (
   <RepeatChildren times={ numRows }>
     <Definition term={ <SmallSkeleton /> } value={ <SmallSkeleton /> } />
   </RepeatChildren>

diff --git a/src/components/Data/components/index.ts b/src/components/Data/components/index.ts
@@ -0,0 +1,2 @@
+export * from "./LoadingRows"
+export * from "./Placeholder"
diff --git a/src/components/HolidayRentalRegistrations/HolidayRentalRegistrations.tsx b/src/components/HolidayRentalRegistrations/HolidayRentalRegistrations.tsx
@@ -1,40 +1,42 @@
 import React from "react"
-import Placeholder from "../Data/components/Placeholder"
+import { Spinner } from "@amsterdam/asc-ui"
 import type { HolidayRentalRegistration } from "./types"
 import Registration from "./components/Registration"
-import LoadingRows from "../Data/components/LoadingRows"
+import { Placeholder, LoadingRows } from "../Data/components"
 
 type Props = {
   data: HolidayRentalRegistration[]
-  loading?: boolean
   horizontalBordered?: boolean
+  loading?: boolean
+  loadingRows?: number
 }
 
 /**
  *  Detailed overview of Vakantieverhuur registraties.
  */
 
 const HolidayRentalRegistrations: React.FC<Props> = ({
-  data, loading = false, horizontalBordered = true
+  data,
+  horizontalBordered = true,
+  loading = false,
+  loadingRows
 }) => {
-
   if (loading) {
-    return <LoadingRows numRows={ 6 } />
+    return loadingRows ? <LoadingRows numRows={loadingRows} /> : <Spinner />
   }
   return (
     <>
-      { data === undefined || data.length === 0 ? (
+      {data === undefined || data.length === 0 ? (
         <Placeholder>Geen registraties gevonden</Placeholder>
       ) : (
         <>
-          { data.map(registration => (
+          {data.map((registration) => (
             <Registration
-              key={ registration.registrationNumber }
-              registration={ registration }
-              horizontalBordered={ horizontalBordered }
+              key={registration.registrationNumber}
+              registration={registration}
+              horizontalBordered={horizontalBordered}
             />
-          )
-          )}
+          ))}
         </>
       )}
     </>

diff --git a/src/components/HolidayRentalRegistrations/components/Registration.tsx b/src/components/HolidayRentalRegistrations/components/Registration.tsx
@@ -18,7 +18,7 @@ const Registration: React.FC<Props> = ({ registration, horizontalBordered }) =>
   return (
     <StyledDiv>
       <DefinitionList 
-        title="Registratie"
+        title={ `Registratie (${ registration.registrationNumber })` }
         data={ values }
         horizontalBordered={ horizontalBordered }
         headingSize="h4"

diff --git a/src/components/HolidayRentalRegistrations/components/hooks/useValues.tsx b/src/components/HolidayRentalRegistrations/components/hooks/useValues.tsx
@@ -10,7 +10,6 @@ const formatRequester = (requester: HolidayRentalRegistration["requester"]) => {
 
 export default (registration: HolidayRentalRegistration) => {
   const {
-    registrationNumber,
     requester,
     agreementDate,
     createdAt,
@@ -20,7 +19,6 @@ export default (registration: HolidayRentalRegistration) => {
   const requesterName = formatRequester(requester)
 
   const values = {
-    "Registratienummer": registrationNumber,
     "Aanvrager": requesterName,
     "E-mail": requester?.email,
     "Aangemaakt": <DateDisplay date={createdAt} emptyText="-" />,

diff --git a/src/components/HolidayRentalReports/HolidayRentalReports.tsx b/src/components/HolidayRentalReports/HolidayRentalReports.tsx
@@ -3,37 +3,41 @@ import { Spinner } from "@amsterdam/asc-ui"
 import type { RentalReport } from "./types"
 import ReportsPerYear from "./components/ReportsPerYear"
 import Report from "./components/Report"
-import Placeholder from "../Data/components/Placeholder"
+import { Placeholder, LoadingRows } from "../Data/components"
 
 type Props = {
   data: RentalReport[]
-  loading?: boolean
   horizontalBordered?: boolean
+  loading?: boolean
+  loadingRows?: number
 }
 
+/**
+ *  Overview of Vakantieverhuur meldingen.
+ */
+
 const HolidayRentalReports: React.FC<Props> = ({
-  data = [], loading = false, horizontalBordered = true
+  data = [],
+  horizontalBordered = true,
+  loading = false,
+  loadingRows
 }) => {
-
   if (loading) {
-    return <Spinner data-testid="spinner"/>
+    return loadingRows ? <LoadingRows numRows={loadingRows} /> : <Spinner />
   }
   if (!(data.length > 0)) {
-    return (
-      <Placeholder>Geen vakantieverhuur meldingen</Placeholder>
-    )
+    return <Placeholder>Geen vakantieverhuur meldingen</Placeholder>
   }
   return (
     <>
-      <ReportsPerYear data={ data } />
-      { data.map((report) => (
-          <Report
-            report={ report }
-            key={ `${ report.startDatum }-${ report.eindDatum } `}
-            horizontalBordered={ horizontalBordered }
-          />
-        ))
-      }
+      <ReportsPerYear data={data} />
+      {data.map((report) => (
+        <Report
+          report={report}
+          key={`${ report.startDatum }-${ report.eindDatum } `}
+          horizontalBordered={horizontalBordered}
+        />
+      ))}
     </>
   )
 }

diff --git a/src/components/PermitsOverview/PermitsOverview.tsx b/src/components/PermitsOverview/PermitsOverview.tsx
@@ -3,13 +3,14 @@ import { Spinner } from "@amsterdam/asc-ui"
 import type Permit from "./Permit"
 import PermitDetails from "./components/PermitDetails"
 import useKnownPermits from "./hooks/useKnownPermits"
-import Placeholder from "../Data/components/Placeholder"
+import { Placeholder, LoadingRows } from "../Data/components"
 
 export type Props = {
-  permits: Permit[]
+  horizontalBordered?: boolean
   loading?: boolean
+  loadingRows?: number
+  permits: Permit[]
   showUnknown?: boolean
-  horizontalBordered?: boolean
 }
 
 /**
@@ -18,28 +19,31 @@ export type Props = {
  */
 
 const PermitsOverview: React.FC<Props> = ({
-  permits, loading = false, showUnknown = false, horizontalBordered = true
+  permits,
+  loading = false,
+  showUnknown = false,
+  horizontalBordered = true,
+  loadingRows
 }) => {
   const knownPermits = useKnownPermits(permits)
   const filteredPermits = showUnknown ? permits : knownPermits
 
   if (loading) {
-    return <Spinner data-testid="spinner" />
+    return loadingRows ? <LoadingRows numRows={loadingRows} /> : <Spinner />
   }
   return (
     <>
-      { filteredPermits === undefined || filteredPermits.length === 0 ? (
+      {filteredPermits === undefined || filteredPermits.length === 0 ? (
         <Placeholder>Geen vergunningen gevonden</Placeholder>
       ) : (
         <div>
-          { filteredPermits.map(permit => (
+          {filteredPermits.map((permit) => (
             <PermitDetails
-              key={ permit.permit_type }
-              permit={ permit }
-              horizontalBordered={ horizontalBordered }
+              key={permit.permit_type}
+              permit={permit}
+              horizontalBordered={horizontalBordered}
             />
-          )
-          )}
+          ))}
         </div>
       )}
     </>

diff --git a/src/components/PermitsSynopsis/PermitsSynopsis.tsx b/src/components/PermitsSynopsis/PermitsSynopsis.tsx
@@ -4,13 +4,14 @@ import { Spinner } from "@amsterdam/asc-ui"
 import type PermitType from "./PermitType"
 import PermitDetails from "./components/PermitDetails"
 import { getValidPermits } from "./utils"
-import Placeholder from "../Data/components/Placeholder"
+import { Placeholder, LoadingRows } from "../Data/components"
 
 export type Props = {
-  permits: PermitType[]
-  loading?: boolean
   displayOnlyValidPermits?: boolean
   horizontalBordered?: boolean
+  loading?: boolean
+  loadingRows?: number
+  permits: PermitType[]
 }
 
 /**
@@ -19,29 +20,34 @@ export type Props = {
  */
 
 const PermitsSynopsis: React.FC<Props> = ({
-  permits = [], loading = false, displayOnlyValidPermits = false, horizontalBordered = true
+  displayOnlyValidPermits = false,
+  horizontalBordered = true,
+  loading = false,
+  loadingRows,
+  permits = []
 }) => {
   const validPermits = getValidPermits(permits)
   const filteredPermits = displayOnlyValidPermits ? validPermits : permits
-  const sortedPermits = filteredPermits.sort((a, b) => dayjs(b?.startdatum).diff(dayjs(a?.startdatum)))
+  const sortedPermits = filteredPermits.sort((a, b) =>
+    dayjs(b?.startdatum).diff(dayjs(a?.startdatum))
+  )
 
   if (loading) {
-    return <Spinner data-testid="spinner" />
+    return loadingRows ? <LoadingRows numRows={loadingRows} /> : <Spinner />
   }
   return (
     <>
-      { sortedPermits === undefined || sortedPermits.length === 0 ? (
+      {sortedPermits === undefined || sortedPermits.length === 0 ? (
         <Placeholder>{`Geen ${ permits.length > 0 ? "valide " : "" }vergunningen gevonden`}</Placeholder>
       ) : (
         <div>
-          { sortedPermits.map((permit, index) => (
+          {sortedPermits.map((permit, index) => (
             <PermitDetails
-              key={ `${ permit.muT_DAT }${ index }` }
-              permit={ permit }
-              horizontalBordered={ horizontalBordered }
+              key={`${ permit.muT_DAT }${ index }`}
+              permit={permit}
+              horizontalBordered={horizontalBordered}
             />
-          )
-          )}
+          ))}
         </div>
       )}
     </>

diff --git a/src/components/Residents/Residents.tsx b/src/components/Residents/Residents.tsx
@@ -6,8 +6,9 @@ import ResidentsView from "./ResidentsView"
 
 type Props = {
   data?: ResidentsType
-  loading?: boolean
   header?: boolean
+  loading?: boolean
+  loadingRows?: number
 }
 
 const NUMBER_OF_YEARS_DECEASED_PERSON_IS_VISIBLE = 1
@@ -21,8 +22,13 @@ const getResidents = (data?: ResidentsType) => {
       const deceased = resident?.overlijden?.datum?.datum
       if (deceased) {
         const deceasedDate = dayjs(deceased)
-        const dateDeceasedPersonIsVisible = dayjs().subtract(NUMBER_OF_YEARS_DECEASED_PERSON_IS_VISIBLE, "year")
-        const isDeceasedPersonVisible = deceasedDate.isAfter(dateDeceasedPersonIsVisible) || deceasedDate.isSame(dateDeceasedPersonIsVisible)
+        const dateDeceasedPersonIsVisible = dayjs().subtract(
+          NUMBER_OF_YEARS_DECEASED_PERSON_IS_VISIBLE,
+          "year"
+        )
+        const isDeceasedPersonVisible =
+          deceasedDate.isAfter(dateDeceasedPersonIsVisible) ||
+          deceasedDate.isSame(dateDeceasedPersonIsVisible)
         return isDeceasedPersonVisible
       }
       return true
@@ -31,14 +37,22 @@ const getResidents = (data?: ResidentsType) => {
   return residents
 }
 
-const Residents: React.FC<Props> = ({ data, loading = false, header = false }) => {
-
+const Residents: React.FC<Props> = ({
+  data,
+  loading = false,
+  header = false,
+  loadingRows
+}) => {
   const residents = getResidents(data)
 
   return (
     <>
-      { header && <ResidentsHeader residents={ residents } /> }
-      <ResidentsView residents={ residents } loading={ loading } />
+      {header && <ResidentsHeader residents={residents} />}
+      <ResidentsView
+        residents={residents}
+        loading={loading}
+        loadingRows={loadingRows}
+      />
     </>
   )
 }

diff --git a/src/components/Residents/ResidentsView.tsx b/src/components/Residents/ResidentsView.tsx
@@ -2,43 +2,38 @@ import React from "react"
 import styled from "styled-components"
 import { themeSpacing, Spinner } from "@amsterdam/asc-ui"
 import Resident from "./Resident"
-import Placeholder from "../Data/components/Placeholder"
+import { Placeholder, LoadingRows } from "../Data/components"
 
 type Props = {
-  residents?: any
   loading?: boolean
+  loadingRows?: number
+  residents?: any
 }
 
 const Ul = styled.ul`
   margin-top: ${ themeSpacing(8) };
   padding: 0;
   list-style: none;
-
   li {
     margin-bottom: ${ themeSpacing(14) };
   }
 `
 
-const Residents: React.FC<Props> = ({ residents, loading }) => {
+const Residents: React.FC<Props> = ({ residents, loading, loadingRows }) => {
   if (loading) {
-    return <Spinner data-testid="spinner" />
+    return loadingRows ? <LoadingRows numRows={loadingRows} /> : <Spinner />
   }
   if (!(residents?.length >= 0)) {
-    return (
-      <Placeholder>Oeps, er gaat iets mis...</Placeholder>
-    )
+    return <Placeholder>Oeps, er gaat iets mis...</Placeholder>
   }
   if (residents?.length === 0) {
-    return (
-      <Placeholder>Geen ingeschreven personen gevonden</Placeholder>
-    )
+    return <Placeholder>Geen ingeschreven personen gevonden</Placeholder>
   } else {
     return (
       <Ul data-testid="residents">
-        { residents.map((resident: any, index: number) => (
-            <Resident resident={ resident } key={ index } num={ index + 1 } />
-          ))
-        }
+        {residents.map((resident: any, index: number) => (
+          <Resident resident={resident} key={index} num={index + 1} />
+        ))}
       </Ul>
     )
   }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export * from "./LoadingRows"
		export * from "./Placeholder"