refactor: infer types from graphql schema WIP

front/src/components/BoxReconciliationOverlay/BoxReconciliationOverlay.tsx

@@ -14,10 +14,10 @@ import {
   IProductWithSizeRangeData,
 } from "./components/BoxReconciliationView";
 import { useBaseIdParam } from "hooks/useBaseIdParam";
-import { introspection_types } from "../../../../generated/graphql-env";
+import { ShipmentDetail } from "types/query-types";
 
 export interface IBoxReconciliationOverlayData {
-  shipmentDetail: introspection_types["ShipmentDetail"];
+  shipmentDetail: ShipmentDetail;
 }
 
 export function BoxReconciliationOverlay({
@@ -209,7 +209,7 @@ export function BoxReconciliationOverlay({
         onClose={onOverlayClose}
         onBoxUndelivered={setBoxUndeliveredAYSState}
         onBoxDelivered={onBoxDelivered}
-        shipmentDetail={shipmentDetail}
+        shipmentDetail={shipmentDetail as ShipmentDetail}
         allLocations={allLocations as ILocationData[]}
         productAndSizesData={productAndSizesData as IProductWithSizeRangeData[]}
         closeOnOverlayClick={closeOnOverlayClick}

front/src/components/BoxReconciliationOverlay/components/BoxReconciliationAccordion.tsx

@@ -5,10 +5,10 @@ import { RiQuestionFill } from "react-icons/ri";
 import { ILocationData, IProductWithSizeRangeData } from "./BoxReconciliationView";
 import { IMatchProductsFormData, MatchProductsForm } from "./MatchProductsForm";
 import { IReceiveLocationFormData, ReceiveLocationForm } from "./ReceiveLocationForm";
-import { introspection_types } from "../../../../../generated/graphql-env";
+import { ShipmentDetail } from "types/query-types";
 
 interface IBoxReconcilationAccordionProps {
-  shipmentDetail: introspection_types["ShipmentDetail"]["fields"];
+  shipmentDetail: ShipmentDetail;
   productAndSizesData: IProductWithSizeRangeData[];
   allLocations: ILocationData[];
   loading: boolean;

front/src/components/BoxReconciliationOverlay/components/BoxReconciliationView.tsx

@@ -14,6 +14,7 @@ import { BiTrash } from "react-icons/bi";
 
 import { BoxReconcilationAccordion } from "./BoxReconciliationAccordion";
 import { introspection_types } from "../../../../../generated/graphql-env";
+import { ShipmentDetail } from "types/query-types";
 
 export interface ICategoryData {
   name: string;
@@ -44,7 +45,7 @@ export interface ILocationData {
 }
 
 interface IBoxReconciliationViewProps {
-  shipmentDetail: introspection_types["ShipmentDetail"]["fields"];
+  shipmentDetail: ShipmentDetail;
   productAndSizesData: IProductWithSizeRangeData[];
   allLocations: ILocationData[];
   isOpen: boolean;

front/src/components/BoxReconciliationOverlay/components/MatchProductsForm.tsx

@@ -9,7 +9,7 @@ import { BiSubdirectoryRight } from "react-icons/bi";
 import { BsFillCheckCircleFill } from "react-icons/bs";
 import { z } from "zod";
 import { IProductWithSizeRangeData } from "./BoxReconciliationView";
-import { introspection_types } from "../../../../../generated/graphql-env";
+import { ShipmentDetail } from "types/query-types";
 
 export interface ICategoryData {
   name: string;
@@ -58,7 +58,7 @@ export const MatchProductsFormDataSchema = z.object({
 export type IMatchProductsFormData = z.infer<typeof MatchProductsFormDataSchema>;
 
 interface IMatchProductsFormProps {
-  shipmentDetail: introspection_types["ShipmentDetail"]["fields"];
+  shipmentDetail: ShipmentDetail;
   productAndSizesData: IProductWithSizeRangeData[];
   loading: boolean;
   onSubmitMatchProductsForm: (matchedProductsFormData: IMatchProductsFormData) => void;

front/src/components/QrReader/components/QrReaderMultiBoxContainer.tsx

@@ -1,12 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useQuery } from "@apollo/client";
 import { GET_SCANNED_BOXES } from "queries/local-only";
-import {
-  BoxState,
-  ShipmentState,
-  MultiBoxActionOptionsForLocationsTagsAndShipmentsQuery,
-  TagType,
-} from "types/generated/graphql";
 import { MULTI_BOX_ACTION_OPTIONS_FOR_LOCATIONS_TAGS_AND_SHIPMENTS_QUERY } from "queries/queries";
 import { IDropdownOption } from "components/Form/SelectField";
 import { AlertWithAction, AlertWithoutAction } from "components/Alerts";
@@ -46,7 +40,7 @@ function QrReaderMultiBoxContainer() {
   const scannedBoxesQueryResult = useQuery<IGetScannedBoxesQuery>(GET_SCANNED_BOXES);
 
   // fetch location and shipments data
-  const optionsQueryResult = useQuery<MultiBoxActionOptionsForLocationsTagsAndShipmentsQuery>(
+  const optionsQueryResult = useQuery(
     MULTI_BOX_ACTION_OPTIONS_FOR_LOCATIONS_TAGS_AND_SHIPMENTS_QUERY,
     {
       variables: { baseId },
@@ -113,7 +107,7 @@ function QrReaderMultiBoxContainer() {
   const tagOptions: IDropdownOption[] = useMemo(
     () =>
       optionsQueryResult.data?.base?.tags
-        ?.filter((tag) => tag?.type === TagType.All || tag?.type === TagType.Box)
+        ?.filter((tag) => tag?.type === "All" || tag?.type === "Box")
         ?.sort((a, b) => {
           const nameA = a.name.toLowerCase();
           const nameB = b.name.toLowerCase();
@@ -133,10 +127,7 @@ function QrReaderMultiBoxContainer() {
   const shipmentOptions: IDropdownOption[] = useMemo(
     () =>
       optionsQueryResult.data?.shipments
-        ?.filter(
-          (shipment) =>
-            shipment.state === ShipmentState.Preparing && shipment.sourceBase.id === baseId,
-        )
+        ?.filter((shipment) => shipment.state === "Preparing" && shipment.sourceBase.id === baseId)
         ?.map((shipment) => ({
           label: `${shipment.targetBase.name} - ${shipment.targetBase.organisation.name}`,
           value: shipment.id,
@@ -153,9 +144,7 @@ function QrReaderMultiBoxContainer() {
   }, [shipmentOptions]);
 
   const notInStockBoxes = useMemo(
-    () =>
-      scannedBoxesQueryResult.data?.scannedBoxes.filter((box) => box.state !== BoxState.InStock) ??
-      [],
+    () => scannedBoxesQueryResult.data?.scannedBoxes.filter((box) => box.state !== "InStock") ?? [],
     [scannedBoxesQueryResult.data?.scannedBoxes],
   );
 

front/src/components/Timeline/Timeline.tsx

@@ -1,6 +1,6 @@
 import { Box, Flex, Text } from "@chakra-ui/react";
-import { User } from "types/generated/graphql";
 import TimelineEntry from "./components/TimelineEntry";
+import { User } from "types/query-types";
 
 export interface ITimelineEntry {
   action: string;

front/src/hooks/useDeleteBoxes.ts

@@ -115,7 +115,7 @@ export const useDeleteBoxes = () => {
               requestedBoxes: boxes,
               deletedBoxes,
               invalidIdentifiers,
-            } as IDeleteBoxResult;
+            } /* TODO: should we fix this type cast? as IDeleteBoxResult */;
           }
 
           return {

front/src/hooks/useLabelIdentifierResolver.ts

@@ -1,6 +1,5 @@
 import { useCallback, useState } from "react";
 import { useApolloClient } from "@apollo/client";
-import { BoxDetailsQuery, BoxDetailsQueryVariables } from "types/generated/graphql";
 import { BOX_DETAILS_BY_LABEL_IDENTIFIER_QUERY } from "queries/queries";
 
 export enum ILabelIdentifierResolverResultKind {
@@ -28,7 +27,7 @@ export const useLabelIdentifierResolver = () => {
     async (labelIdentifier: string): Promise<ILabelIdentifierResolvedValue> => {
       setLoading(true);
       const labelIdentifierResolvedValue: ILabelIdentifierResolvedValue = await apolloClient
-        .query<BoxDetailsQuery, BoxDetailsQueryVariables>({
+        .query({
           query: BOX_DETAILS_BY_LABEL_IDENTIFIER_QUERY,
           variables: { labelIdentifier },
           fetchPolicy: "network-only",

front/src/hooks/useLoadAndSetGlobalPreferences.ts

@@ -3,7 +3,6 @@ import { useAuth0 } from "@auth0/auth0-react";
 import { useLazyQuery } from "@apollo/client";
 import { useLocation, useNavigate } from "react-router-dom";
 import { GlobalPreferencesContext } from "providers/GlobalPreferencesProvider";
-import { OrganisationAndBasesQuery } from "types/generated/graphql";
 import { ORGANISATION_AND_BASES_QUERY } from "queries/queries";
 import { useBaseIdParam } from "./useBaseIdParam";
 
@@ -17,7 +16,7 @@ export const useLoadAndSetGlobalPreferences = () => {
   const { baseId } = useBaseIdParam();
 
   const [runOrganisationAndBasesQuery, { loading: isOrganisationAndBasesQueryLoading, data: organisationAndBaseData }] =
-    useLazyQuery<OrganisationAndBasesQuery>(ORGANISATION_AND_BASES_QUERY);
+    useLazyQuery(ORGANISATION_AND_BASES_QUERY);
 
   useEffect(() => {
     // run query only if the access token is in the request header from the apollo client and the base is not set

front/src/hooks/useQrResolver.ts

@@ -2,10 +2,6 @@ import { useCallback, useState } from "react";
 import { FetchPolicy, useApolloClient } from "@apollo/client";
 import { GET_BOX_LABEL_IDENTIFIER_BY_QR_CODE } from "queries/queries";
 import { BOX_SCANNED_ON_FRAGMENT } from "queries/local-only";
-import {
-  GetBoxLabelIdentifierForQrCodeQuery,
-  GetBoxLabelIdentifierForQrCodeQueryVariables,
-} from "types/generated/graphql";
 import { useErrorHandling } from "./useErrorHandling";
 
 export enum IQrResolverResultKind {
@@ -49,7 +45,7 @@ export const useQrResolver = () => {
     async (hash: string, fetchPolicy: FetchPolicy): Promise<IQrResolvedValue> => {
       setLoading(true);
       const qrResolvedValue: IQrResolvedValue = await apolloClient
-        .query<GetBoxLabelIdentifierForQrCodeQuery, GetBoxLabelIdentifierForQrCodeQueryVariables>({
+        .query({
           query: GET_BOX_LABEL_IDENTIFIER_BY_QR_CODE,
           variables: { qrCode: hash },
           fetchPolicy,

front/src/hooks/useScannedBoxesActions.ts

@@ -1,16 +1,16 @@
 import { useCallback } from "react";
 import { useApolloClient } from "@apollo/client";
 import { GET_SCANNED_BOXES } from "queries/local-only";
-import { BoxFieldsFragment, BoxState } from "types/generated/graphql";
-import { IBoxBasicFields, IScannedBoxesData } from "types/graphql-local-only";
+import { IScannedBoxesData } from "types/graphql-local-only";
 import { useNotification } from "./useNotification";
+import { Box } from "types/query-types";
 
 export const useScannedBoxesActions = () => {
   const apolloClient = useApolloClient();
   const { createToast } = useNotification();
 
   const addBox = useCallback(
-    (box: BoxFieldsFragment) =>
+    (box: Box) =>
       apolloClient.cache.updateQuery(
         {
           query: GET_SCANNED_BOXES,
@@ -19,25 +19,25 @@ export const useScannedBoxesActions = () => {
           const existingBoxRefs = data.scannedBoxes;
 
           const alreadyExists = existingBoxRefs.some(
-            (ref) => ref.labelIdentifier === box.labelIdentifier,
+            (ref) => ref.labelIdentifier === box?.labelIdentifier,
           );
 
           if (alreadyExists) {
             createToast({
-              message: `Box ${box.labelIdentifier} is already on the list.`,
+              message: `Box ${box?.labelIdentifier} is already on the list.`,
               type: "info",
             });
 
             return existingBoxRefs;
           }
           // execute rest only if Box is not in the scannedBoxes already
           createToast({
-            message: `Box ${box.labelIdentifier} was added to the list.`,
+            message: `Box ${box?.labelIdentifier} was added to the list.`,
             type: "success",
           });
 
           return {
-            scannedBoxes: [...existingBoxRefs, box as IBoxBasicFields],
+            scannedBoxes: [...existingBoxRefs, box],
           } as IScannedBoxesData;
         },
       ),
@@ -75,7 +75,7 @@ export const useScannedBoxesActions = () => {
       },
       (data: IScannedBoxesData) =>
         ({
-          scannedBoxes: data.scannedBoxes.filter((box) => box.state === BoxState.InStock),
+          scannedBoxes: data.scannedBoxes.filter((box) => box.state === "InStock"),
         }) as IScannedBoxesData,
     );
   }, [apolloClient]);

front/src/hooks/useUnassignBoxesFromShipments.ts

@@ -1,6 +1,5 @@
 import { useApolloClient } from "@apollo/client";
 import { useState, useCallback } from "react";
-import { BoxState } from "types/generated/graphql";
 import { IBoxBasicFields } from "types/graphql-local-only";
 import {
   IUnassignmentFromShipment,
@@ -37,11 +36,11 @@ export const useUnassignBoxesFromShipments = () => {
     (boxes: IBoxBasicFields[]) => {
       setIsLoading(true);
       const markedForShipmentBoxes = boxes.filter(
-        (box) => box.state === BoxState.MarkedForShipment,
+        (box) => box.state === "MarkedForShipment",
       );
 
       const notMarkedForShipmentBoxes = boxes.filter(
-        (box) => box.state !== BoxState.MarkedForShipment,
+        (box) => box.state !== "MarkedForShipment",
       );
 
       const shipmentBoxDictionary = markedForShipmentBoxes.reduce(
@@ -122,9 +121,8 @@ export const useUnassignBoxesFromShipments = () => {
           // some boxes were unassigned
           if (unassignedBoxes.length > 0) {
             createToast({
-              message: `${
-                unassignedBoxes.length === 1 ? "A Box was" : `${unassignedBoxes.length} Boxes were`
-              } successfully unassigned from their corresponding shipment.`,
+              message: `${unassignedBoxes.length === 1 ? "A Box was" : `${unassignedBoxes.length} Boxes were`
+                } successfully unassigned from their corresponding shipment.`,
             });
           }
           if (failedBoxes.length > 0) {

front/src/mocks/locations.ts

@@ -1,4 +1,3 @@
-import { BoxState } from "types/generated/graphql";
 import { organisation1 } from "./organisations";
 
 export const location1 = {
@@ -23,7 +22,7 @@ const location2 = {
 };
 
 export const generateMockLocationWithBase = ({
-  defaultBoxState = BoxState.InStock,
+  defaultBoxState = "InStock",
   defaultLocationName = "WH Men",
   defaultLocationId = 7,
 }) => ({

front/src/mocks/products.ts

@@ -1,10 +1,9 @@
-import { ProductGender } from "types/generated/graphql";
 import { sizeRange1, sizeRange2 } from "./sizeRanges";
 
 export const product1 = {
   id: "1",
   name: "Long Sleeves",
-  gender: ProductGender.Women,
+  gender: "Women",
   category: {
     name: "Tops",
     __typename: "ProductCategory",
@@ -17,15 +16,15 @@ export const product1 = {
 export const productBasic1 = {
   id: "1",
   name: "Snow trousers",
-  gender: ProductGender.Boy,
+  gender: "Boy",
   deletedOn: null,
   __typename: "Product",
 };
 
 export const product3 = {
   id: "3",
   name: "Long Sleeves",
-  gender: ProductGender.None,
+  gender: "None",
   category: {
     name: "Tops",
     __typename: "ProductCategory",
@@ -40,7 +39,7 @@ export const products = [
   {
     id: "2",
     name: "Winter Jackets",
-    gender: ProductGender.Men,
+    gender: "Men",
     category: {
       name: "Jackets / Outerwear",
       __typename: "ProductCategory",

front/src/mocks/tags.ts

@@ -1,12 +1,10 @@
-import { TagType } from "types/generated/graphql";
-
 export const tag1 = {
   color: "#20963f",
   label: "tag1",
   value: "1",
   id: "1",
   name: "tag1",
-  type: TagType.All,
+  type: "All",
   description: "tag1",
   __typename: "Tag",
 };
@@ -17,7 +15,7 @@ export const tag2 = {
   name: "test tag",
   label: "tag1",
   value: "1",
-  type: TagType.All,
+  type: "All",
   description: "tag17",
   __typename: "Tag",
 };
@@ -37,15 +35,15 @@ export const tagsArray = [
     color: "#20963f",
     name: "tag1",
     id: "1",
-    type: TagType.All,
+    type: "All",
     description: "tag1",
     __typename: "Tag",
   },
   {
     color: "#20969f",
     name: "tag2",
     id: "2",
-    type: TagType.Box,
+    type: "Box",
     description: "tag2",
     __typename: "Tag",
   },