From 321ef83e36b3908916a48a50807462806eba8ec6 Mon Sep 17 00:00:00 2001 From: Robert Field Date: Thu, 26 Oct 2023 13:52:23 +0200 Subject: [PATCH] feat: groundwork for new elasticpath provider --- packages/react-shopper-hooks/package.json | 9 ++- .../src/context/elasticpath.tsx | 66 +++++++++++++++++++ .../react-shopper-hooks/src/context/index.ts | 1 + pnpm-lock.yaml | 38 +++++++---- 4 files changed, 100 insertions(+), 14 deletions(-) create mode 100644 packages/react-shopper-hooks/src/context/elasticpath.tsx create mode 100644 packages/react-shopper-hooks/src/context/index.ts diff --git a/packages/react-shopper-hooks/package.json b/packages/react-shopper-hooks/package.json index 1863d61b..a1b55b55 100644 --- a/packages/react-shopper-hooks/package.json +++ b/packages/react-shopper-hooks/package.json @@ -21,6 +21,7 @@ } }, "devDependencies": { + "@tanstack/react-query": "^5.0.5", "@types/react": "^18.2.0", "@types/react-dom": "^18.2.0", "@vitejs/plugin-react": "^2.2.0", @@ -29,12 +30,14 @@ "typescript": "^4.8.4", "vite": "^3.2.3", "vite-plugin-dts": "^1.7.0", - "vitest": "^0.31.1" + "vitest": "^0.31.1", + "@moltin/sdk": "^25.0.2" }, "peerDependencies": { "@moltin/sdk": "^25.0.2", - "react": "^18.2.0", - "react-dom": "^18.2.0" + "@tanstack/react-query": "^5.0.5", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" }, "publishConfig": { "access": "public" diff --git a/packages/react-shopper-hooks/src/context/elasticpath.tsx b/packages/react-shopper-hooks/src/context/elasticpath.tsx new file mode 100644 index 00000000..02ad5a67 --- /dev/null +++ b/packages/react-shopper-hooks/src/context/elasticpath.tsx @@ -0,0 +1,66 @@ +import { gateway, Moltin as ElasticPath } from "@moltin/sdk" +import { + QueryClientProvider, + QueryClientProviderProps, +} from "@tanstack/react-query" +import React, { ReactElement } from "react" + +interface ElasticPathContextState { + client: ElasticPath +} + +const ElasticPathContext = React.createContext( + null, +) + +export const useElasticPath = () => { + const context = React.useContext(ElasticPathContext) + if (!context) { + throw new Error("useElasticPath must be used within a ElasticPathProvider") + } + return context +} + +export type ElasticPathProviderProps = { + queryClientProviderProps: QueryClientProviderProps + children: React.ReactNode +} + +export type ElasticPathProviderPropsWithClient = ElasticPathProviderProps & { + clientId: string + host?: string +} + +export type ElasticPathProviderPropsCustom = ElasticPathProviderProps & { + client: ElasticPath +} + +export function ElasticPathProvider( + props: ElasticPathProviderPropsWithClient, +): ReactElement +export function ElasticPathProvider( + props: ElasticPathProviderPropsCustom, +): ReactElement +export function ElasticPathProvider( + props: ElasticPathProviderPropsWithClient | ElasticPathProviderPropsCustom, +): ReactElement { + const client: ElasticPath = + "client" in props + ? props.client + : gateway({ + client_id: props.clientId, + host: props.host, + }) + + return ( + + + {props.children} + + + ) +} diff --git a/packages/react-shopper-hooks/src/context/index.ts b/packages/react-shopper-hooks/src/context/index.ts new file mode 100644 index 00000000..697aa7b3 --- /dev/null +++ b/packages/react-shopper-hooks/src/context/index.ts @@ -0,0 +1 @@ +export * from "./elasticpath" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index cd993d28..97f495cd 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -809,13 +809,16 @@ importers: '@elasticpath/shopper-common': specifier: ^0.1.1 version: link:../shopper-common - '@moltin/sdk': - specifier: ^25.0.2 - version: 25.1.1 rxjs: specifier: 7.5.7 version: 7.5.7 devDependencies: + '@moltin/sdk': + specifier: ^25.0.2 + version: 25.1.1 + '@tanstack/react-query': + specifier: ^5.0.5 + version: 5.0.5(react-dom@18.2.0)(react@18.2.0) '@types/react': specifier: ^18.2.0 version: 18.2.31 @@ -4743,7 +4746,6 @@ packages: throttled-queue: 2.1.4 transitivePeerDependencies: - encoding - dev: false /@mswjs/cookies@0.2.2: resolution: {integrity: sha512-mlN83YSrcFgk7Dm1Mys40DLssI1KdJji2CMKN8eOlBqsTADYzj2+jWzsANsUTFbxDMWPD5e9bfA1RGqBpS3O1g==} @@ -6817,6 +6819,27 @@ packages: defer-to-connect: 2.0.1 dev: true + /@tanstack/query-core@5.0.5: + resolution: {integrity: sha512-MThCETMkHDHTnFZHp71L+SqTtD5d6XHftFCVR1xRJdWM3qGrlQ2VCXaj0SKVcyJej2e1Opa2c7iknu1llxCDNQ==} + dev: true + + /@tanstack/react-query@5.0.5(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-ZG0Q4HZ0iuI8mWiZ2/MdVYPHbrmAVhMn7+gLOkxJh6zLIgCL4luSZlohzN5Xt4MjxfxxWioO1nemwpudaTsmQg==} + peerDependencies: + react: ^18.0.0 + react-dom: ^18.0.0 + react-native: '*' + peerDependenciesMeta: + react-dom: + optional: true + react-native: + optional: true + dependencies: + '@tanstack/query-core': 5.0.5 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: true + /@testing-library/dom@9.3.3: resolution: {integrity: sha512-fB0R+fa3AUqbLHWyxXa2kGVtf1Fe1ZZFr0Zp6AIbIAzXb2mKbEXl+PCQNUOaq5lbTab5tfctfXRNsWXxa2f7Aw==} engines: {node: '>=14'} @@ -11080,7 +11103,6 @@ packages: /es6-promise@4.2.8: resolution: {integrity: sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==} - dev: false /es6-promisify@6.1.1: resolution: {integrity: sha512-HBL8I3mIki5C1Cc9QjKUenHtnG0A5/xA8Q/AllRcfiwl2CZFXGK7ddBiCoRwAix4i2KxcQfjtIVcrVbB3vbmwg==} @@ -13582,7 +13604,6 @@ packages: /inflected@2.1.0: resolution: {integrity: sha512-hAEKNxvHf2Iq3H60oMBHkB4wl5jn3TPF3+fXek/sRwAB5gP9xWs4r7aweSF95f99HFoz69pnZTcu8f0SIHV18w==} - dev: false /inflight@1.0.6: resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==} @@ -14970,7 +14991,6 @@ packages: /js-cookie@3.0.5: resolution: {integrity: sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==} engines: {node: '>=14'} - dev: false /js-levenshtein@1.1.6: resolution: {integrity: sha512-X2BB11YZtrRqY4EnQcLX5Rh373zbK4alC1FW7D7MBhL2gtcC17cTnr6DmfHZeS0s2rTHjUTMMHfG7gO8SSdw+g==} @@ -16591,7 +16611,6 @@ packages: engines: {node: '>=0.12'} dependencies: write-file-atomic: 1.3.4 - dev: false /node-releases@2.0.13: resolution: {integrity: sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==} @@ -19108,7 +19127,6 @@ packages: /slide@1.1.6: resolution: {integrity: sha512-NwrtjCg+lZoqhFU8fOwl4ay2ei8PaqCBOUV3/ektPY9trO1yQ1oXEfmHAhKArUVUr/hOHvy5f6AdP17dCM0zMw==} - dev: false /smartwrap@2.0.2: resolution: {integrity: sha512-vCsKNQxb7PnCNd2wY1WClWifAc2lwqsG8OaswpJkVJsvMGcnEntdTCDajZCkk93Ay1U3t/9puJmb525Rg5MZBA==} @@ -19960,7 +19978,6 @@ packages: /throttled-queue@2.1.4: resolution: {integrity: sha512-YGdk8sdmr4ge3g+doFj/7RLF5kLM+Mi7DEciu9PHxnMJZMeVuZeTj31g4VE7ekUffx/IdbvrtOCiz62afg0mkg==} - dev: false /through2-filter@3.0.0: resolution: {integrity: sha512-jaRjI2WxN3W1V8/FMZ9HKIBXixtiqs3SQSX4/YGIiP3gL6djW48VoZq9tDqeCWs3MT8YY5wb/zli8VW8snY1CA==} @@ -21634,7 +21651,6 @@ packages: graceful-fs: 4.2.11 imurmurhash: 0.1.4 slide: 1.1.6 - dev: false /write-file-atomic@3.0.3: resolution: {integrity: sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==}