refactor: (ui) use a fragment for reservation info

City-of-Helsinki · May 24, 2024 · bcd4c0f · bcd4c0f
1 parent 3bcd7aa
commit bcd4c0f
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 50 deletions.
diff --git a/apps/ui/components/reservation-unit/RelatedUnits.tsx b/apps/ui/components/reservation-unit/RelatedUnits.tsx
@@ -21,10 +21,10 @@ import {
 import { SupplementaryButton, truncatedText } from "@/styles/util";
 import { getImageSource } from "common/src/helpers";
 
-type RelatedQueryResT = NonNullable<
-  NonNullable<RelatedReservationUnitsQuery["reservationUnits"]>
+type RelatedQueryT = NonNullable<
+  RelatedReservationUnitsQuery["reservationUnits"]
 >;
-type RelatedEdgeT = NonNullable<RelatedQueryResT>["edges"][0];
+type RelatedEdgeT = NonNullable<RelatedQueryT>["edges"][0];
 export type RelatedNodeT = NonNullable<NonNullable<RelatedEdgeT>["node"]>;
 type PropsType = {
   units: RelatedNodeT[];

diff --git a/apps/ui/components/reservation-unit/ReservationInfoContainer.tsx b/apps/ui/components/reservation-unit/ReservationInfoContainer.tsx
@@ -1,25 +1,26 @@
 import React from "react";
+import { gql } from "@apollo/client";
 import { formatDuration } from "common/src/common/util";
-import { type ReservationUnitPageQuery } from "@gql/gql-types";
+import { type ReservationInfoContainerFragment } from "@gql/gql-types";
 import ClientOnly from "common/src/ClientOnly";
 import { Trans, useTranslation } from "next-i18next";
 import { daysByMonths } from "@/modules/const";
 import { formatDate } from "@/modules/util";
 import { Content, Subheading } from "./ReservationUnitStyles";
 
-// TODO use a fragment instead of Pick
-type QueryT = NonNullable<ReservationUnitPageQuery["reservationUnit"]>;
-type NodeT = Pick<
-  QueryT,
-  | "reservationBegins"
-  | "reservationEnds"
-  | "reservationsMaxDaysBefore"
-  | "reservationsMinDaysBefore"
-  | "minReservationDuration"
-  | "maxReservationDuration"
-  | "maxReservationsPerUser"
->;
+export const RESERVATION_INFO_CONTAINER_FRAGMENT = gql`
+  fragment ReservationInfoContainer on ReservationUnitNode {
+    reservationBegins
+    reservationEnds
+    reservationsMaxDaysBefore
+    reservationsMinDaysBefore
+    minReservationDuration
+    maxReservationDuration
+    maxReservationsPerUser
+  }
+`;
 
+type NodeT = ReservationInfoContainerFragment;
 type Props = {
   reservationUnit: NodeT;
   reservationUnitIsReservable: boolean;

diff --git a/apps/ui/gql/gql-types.ts b/apps/ui/gql/gql-types.ts
@@ -5215,6 +5215,16 @@ export enum Weekday {
   Wednesday = "WEDNESDAY",
 }
 
+export type ReservationInfoContainerFragment = {
+  reservationBegins?: string | null;
+  reservationEnds?: string | null;
+  reservationsMaxDaysBefore?: number | null;
+  reservationsMinDaysBefore?: number | null;
+  minReservationDuration?: number | null;
+  maxReservationDuration?: number | null;
+  maxReservationsPerUser?: number | null;
+};
+
 export type ReservationInfoCardFragment = {
   pk?: number | null;
   taxPercentageValue?: string | null;
@@ -6078,16 +6088,9 @@ export type ReservationUnitPageFieldsFragment = {
   bufferTimeBefore: number;
   bufferTimeAfter: number;
   reservationStartInterval: ReservationStartInterval;
-  reservationBegins?: string | null;
-  reservationEnds?: string | null;
   canApplyFreeOfCharge: boolean;
   state?: ReservationUnitState | null;
   reservationState?: ReservationState | null;
-  minReservationDuration?: number | null;
-  maxReservationDuration?: number | null;
-  maxReservationsPerUser?: number | null;
-  reservationsMinDaysBefore?: number | null;
-  reservationsMaxDaysBefore?: number | null;
   requireReservationHandling: boolean;
   id: string;
   pk?: number | null;
@@ -6107,6 +6110,13 @@ export type ReservationUnitPageFieldsFragment = {
   termsOfUseFi?: string | null;
   termsOfUseEn?: string | null;
   termsOfUseSv?: string | null;
+  reservationBegins?: string | null;
+  reservationEnds?: string | null;
+  reservationsMaxDaysBefore?: number | null;
+  reservationsMinDaysBefore?: number | null;
+  minReservationDuration?: number | null;
+  maxReservationDuration?: number | null;
+  maxReservationsPerUser?: number | null;
   minPersons?: number | null;
   maxPersons?: number | null;
   images: Array<{
@@ -6235,16 +6245,9 @@ export type ReservationUnitQuery = {
     bufferTimeBefore: number;
     bufferTimeAfter: number;
     reservationStartInterval: ReservationStartInterval;
-    reservationBegins?: string | null;
-    reservationEnds?: string | null;
     canApplyFreeOfCharge: boolean;
     state?: ReservationUnitState | null;
     reservationState?: ReservationState | null;
-    minReservationDuration?: number | null;
-    maxReservationDuration?: number | null;
-    maxReservationsPerUser?: number | null;
-    reservationsMinDaysBefore?: number | null;
-    reservationsMaxDaysBefore?: number | null;
     requireReservationHandling: boolean;
     id: string;
     pk?: number | null;
@@ -6264,6 +6267,13 @@ export type ReservationUnitQuery = {
     termsOfUseFi?: string | null;
     termsOfUseEn?: string | null;
     termsOfUseSv?: string | null;
+    reservationBegins?: string | null;
+    reservationEnds?: string | null;
+    reservationsMaxDaysBefore?: number | null;
+    reservationsMinDaysBefore?: number | null;
+    minReservationDuration?: number | null;
+    maxReservationDuration?: number | null;
+    maxReservationsPerUser?: number | null;
     minPersons?: number | null;
     maxPersons?: number | null;
     images: Array<{
@@ -6415,17 +6425,16 @@ export type ReservationUnitPageQuery = {
     bufferTimeBefore: number;
     bufferTimeAfter: number;
     reservationStartInterval: ReservationStartInterval;
-    reservationBegins?: string | null;
-    reservationEnds?: string | null;
     canApplyFreeOfCharge: boolean;
     state?: ReservationUnitState | null;
     reservationState?: ReservationState | null;
-    minReservationDuration?: number | null;
+    requireReservationHandling: boolean;
     maxReservationDuration?: number | null;
-    maxReservationsPerUser?: number | null;
-    reservationsMinDaysBefore?: number | null;
+    minReservationDuration?: number | null;
     reservationsMaxDaysBefore?: number | null;
-    requireReservationHandling: boolean;
+    reservationsMinDaysBefore?: number | null;
+    reservationBegins?: string | null;
+    reservationEnds?: string | null;
     id: string;
     pk?: number | null;
     uuid: string;
@@ -6444,6 +6453,7 @@ export type ReservationUnitPageQuery = {
     termsOfUseFi?: string | null;
     termsOfUseEn?: string | null;
     termsOfUseSv?: string | null;
+    maxReservationsPerUser?: number | null;
     minPersons?: number | null;
     maxPersons?: number | null;
     images: Array<{
@@ -7769,6 +7779,17 @@ export const ReservationUnitTypeFieldsFragmentDoc = gql`
     nameSv
   }
 `;
+export const ReservationInfoContainerFragmentDoc = gql`
+  fragment ReservationInfoContainer on ReservationUnitNode {
+    reservationBegins
+    reservationEnds
+    reservationsMaxDaysBefore
+    reservationsMinDaysBefore
+    minReservationDuration
+    maxReservationDuration
+    maxReservationsPerUser
+  }
+`;
 export const EquipmentFieldsFragmentDoc = gql`
   fragment EquipmentFields on EquipmentNode {
     id
@@ -7807,19 +7828,13 @@ export const ReservationUnitPageFieldsFragmentDoc = gql`
     bufferTimeBefore
     bufferTimeAfter
     reservationStartInterval
-    reservationBegins
-    reservationEnds
     canApplyFreeOfCharge
     state
     reservationState
     reservationUnitType {
       ...ReservationUnitTypeFields
     }
-    minReservationDuration
-    maxReservationDuration
-    maxReservationsPerUser
-    reservationsMinDaysBefore
-    reservationsMaxDaysBefore
+    ...ReservationInfoContainer
     requireReservationHandling
     equipments {
       id
@@ -7829,6 +7844,7 @@ export const ReservationUnitPageFieldsFragmentDoc = gql`
   ${ReservationUnitFieldsFragmentDoc}
   ${ImageFragmentDoc}
   ${ReservationUnitTypeFieldsFragmentDoc}
+  ${ReservationInfoContainerFragmentDoc}
   ${EquipmentFieldsFragmentDoc}
 `;
 export const BlockingReservationFieldsFragmentDoc = gql`

diff --git a/apps/ui/modules/queries/reservationUnit.tsx b/apps/ui/modules/queries/reservationUnit.tsx
@@ -71,19 +71,13 @@ const RESERVATION_UNIT_PAGE_FRAGMENT = gql`
     bufferTimeBefore
     bufferTimeAfter
     reservationStartInterval
-    reservationBegins
-    reservationEnds
     canApplyFreeOfCharge
     state
     reservationState
     reservationUnitType {
       ...ReservationUnitTypeFields
     }
-    minReservationDuration
-    maxReservationDuration
-    maxReservationsPerUser
-    reservationsMinDaysBefore
-    reservationsMaxDaysBefore
+    ...ReservationInfoContainer
     requireReservationHandling
     equipments {
       id