feat: add medusa-react

gatsby-browser.js

@@ -1,26 +1,30 @@
-import React from "react"
-import { ToastProvider } from "react-toast-notifications"
 import "./src/assets/styles/global.css"
+import React from "react"
 import { AccountProvider } from "./src/context/account"
 import { CacheProvider } from "./src/context/cache"
 import { InterfaceProvider } from "./src/context/interface"
 import { ThemeProvider as Provider } from "./src/theme"
-
-//export const shouldUpdateScroll = ({ routerProps: { location } }) => {
-//  window.scrollTo(0, 0)
-//  return false
-//}
+import { ToastProvider } from "react-toast-notifications"
+import { MedusaProvider } from "medusa-react"
+import { medusaUrl, queryClient } from "./src/services/config"
 
 export const wrapPageElement = ({ element }) => {
   return (
-    <CacheProvider>
-      <AccountProvider>
-        <InterfaceProvider>
-          <ToastProvider autoDismiss={true} placement="bottom-left">
-            <Provider>{element}</Provider>
-          </ToastProvider>
-        </InterfaceProvider>
-      </AccountProvider>
-    </CacheProvider>
+    <MedusaProvider
+      baseUrl={medusaUrl}
+      queryClientProviderProps={{
+        client: queryClient,
+      }}
+    >
+      <CacheProvider>
+        <AccountProvider>
+          <InterfaceProvider>
+            <ToastProvider autoDismiss={true} placement="bottom-left">
+              <Provider>{element}</Provider>
+            </ToastProvider>
+          </InterfaceProvider>
+        </AccountProvider>
+      </CacheProvider>
+    </MedusaProvider>
   )
 }

gatsby-ssr.js

@@ -1,7 +1,30 @@
 import React from "react"
 import "./src/assets/styles/global.css"
+import { CacheProvider } from "./src/context/cache"
+import { AccountProvider } from "./src/context/account"
+import { InterfaceProvider } from "./src/context/interface"
 import { ThemeProvider as Provider } from "./src/theme"
+import { ToastProvider } from "react-toast-notifications"
+import { MedusaProvider } from "medusa-react"
+import { medusaUrl, queryClient } from "./src/services/config"
 
 export const wrapPageElement = ({ element }) => {
-  return <Provider>{element}</Provider>
+  return (
+    <MedusaProvider
+      baseUrl={medusaUrl}
+      queryClientProviderProps={{
+        client: queryClient,
+      }}
+    >
+      <CacheProvider>
+        <AccountProvider>
+          <InterfaceProvider>
+            <ToastProvider autoDismiss={true} placement="bottom-left">
+              <Provider>{element}</Provider>
+            </ToastProvider>
+          </InterfaceProvider>
+        </AccountProvider>
+      </CacheProvider>
+    </MedusaProvider>
+  )
 }

package.json

@@ -12,9 +12,9 @@
     "@emotion/core": "^10.0.28",
     "@emotion/styled": "^10.0.27",
     "@popperjs/core": "^2.10.2",
-    "@radix-ui/react-dropdown-menu": "^0.1.4",
     "@radix-ui/react-avatar": "^0.1.3",
     "@radix-ui/react-dialog": "^0.1.5",
+    "@radix-ui/react-dropdown-menu": "^0.1.4",
     "@rebass/forms": "^4.0.6",
     "@svgr/webpack": "^5.4.0",
     "axios": "^0.24.0",
@@ -64,13 +64,15 @@
     "@storybook/addon-essentials": "^6.4.9",
     "@storybook/addon-links": "^6.4.9",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/theming": "^6.4.9",
     "@storybook/react": "^6.4.9",
+    "@storybook/theming": "^6.4.9",
     "autoprefixer": "^10.4.1",
     "babel-loader": "^8.1.0",
     "gatsby-plugin-postcss": "^5.4.0",
+    "medusa-react": "^0.1.2-alpha.23",
     "postcss": "^8.4.5",
     "prettier": "2.0.5",
+    "react-query": "^3.34.7",
     "storybook-addon-gatsby": "^0.0.3",
     "tailwindcss": "^3.0.6",
     "webpack": "^5.65.0"

src/domain/settings/return-reasons/create-edit-return-reason/index.js

@@ -2,18 +2,20 @@ import React, { useState, useEffect } from "react"
 import { Text, Flex, Box } from "rebass"
 import { useForm } from "react-hook-form"
 import Typography from "../../../../components/typography"
-import { Label } from "@rebass/forms"
 import styled from "@emotion/styled"
-
 import { ReactComponent as CrossIcon } from "../../../../assets/svg/cross.svg"
 import Modal from "../../../../components/modal"
 import Input from "../../../../components/molecules/input"
 import Button from "../../../../components/button"
-
-import Medusa from "../../../../services/api"
-import useMedusa from "../../../../hooks/use-medusa"
-
 import { getErrorMessage } from "../../../../utils/error-messages"
+import {
+  adminReturnReasonKeys,
+  useAdminCreateReturnReason,
+  useAdminDeleteReturnReason,
+  useAdminUpdateReturnReason,
+} from "medusa-react"
+import useToaster from "../../../../hooks/use-toaster"
+import { useQueryClient } from "react-query"
 
 const StyledLabel = styled.div`
   ${Typography.Base}
@@ -42,64 +44,62 @@ const StyledLabel = styled.div`
   `}
 `
 
-const ReturnReasonModal = ({
-  reason,
-  parentReturnReason,
-  onDismiss,
-  onDelete,
-  onCreate,
-  onUpdate,
-}) => {
+const ReturnReasonModal = ({ reason, parentReturnReason, onDismiss }) => {
   const { register, reset, handleSubmit } = useForm()
   const [value, setValue] = useState(reason ? reason.value : "")
   const [label, setLabel] = useState(reason ? reason.label : "")
   const [description, setDescription] = useState(
     reason ? reason.description : ""
   )
   const id = reason?.id
-  const {
-    delete: childReturnReasonDelete,
-    toaster,
-  } = useMedusa("returnReasons", { id })
+  const parentReturnReasonId = parentReturnReason?.id
+
+  const createRR = useCreateNestedReturnReason(parentReturnReasonId)
+  const updateRR = useUpdateNestedReturnReason(id, parentReturnReasonId)
+  const deleteRR = useDeleteNestedReturnReason(id, parentReturnReasonId)
+  const toaster = useToaster()
 
   const onClickDelete = async () => {
-    try {
-      await childReturnReasonDelete()
-      onDelete(id)
-      toaster("Sucessfully deleted return reason")
-    } catch (error) {
-      toaster(getErrorMessage(error), "error")
-    }
-    onDismiss()
+    deleteRR.mutate(null, {
+      onSuccess: () => {
+        onDismiss()
+        toaster("Sucessfully deleted return reason")
+      },
+      onError: error => {
+        toaster(getErrorMessage(error), "error")
+      },
+    })
   }
 
   const onSubmit = async () => {
-    let error = ""
-    try {
-      if (reason) {
-        const data = { label: label, description: description }
-
-        const result = await Medusa.returnReasons.update(id, data)
-        onUpdate(result.data.return_reason)
-        toaster("Successfully updated return reason", "success")
-        error = "Failed to update return reason"
-      } else {
-        const data = {
-          parent_return_reason_id: parentReturnReason.id,
-          value: value,
-          label: label,
-          description: description,
-        }
-
-        error = "Failed to create return reason"
-        const result = await Medusa.returnReasons.create(data)
-        onCreate(result.data.return_reason)
-        toaster("Successfully updated return reason", "success")
+    if (reason) {
+      const data = { label: label, description: description }
+      updateRR.mutate(data, {
+        onSuccess: () => {
+          onDismiss()
+          toaster("Successfully updated return reason", "success")
+        },
+        onError: error => {
+          toaster(getErrorMessage(error), "error")
+        },
+      })
+    } else {
+      const data = {
+        parent_return_reason_id: parentReturnReason.id,
+        value: value,
+        label: label,
+        description: description,
       }
-    } catch (error) {
-      toaster(getErrorMessage(error), "error")
+      createRR.mutate(data, {
+        onSuccess: () => {
+          onDismiss()
+          toaster("Successfully updated return reason", "success")
+        },
+        onError: error => {
+          toaster(getErrorMessage(error), error)
+        },
+      })
     }
-    onDismiss()
   }
 
   const title = reason ? "Edit nested reason" : "Create nested reason"
@@ -193,4 +193,34 @@ const ReturnReasonModal = ({
   )
 }
 
+const useCreateNestedReturnReason = parentId => {
+  const queryClient = useQueryClient()
+
+  return useAdminCreateReturnReason({
+    onSuccess: () => {
+      queryClient.invalidateQueries(adminReturnReasonKeys.detail(parentId))
+    },
+  })
+}
+
+const useUpdateNestedReturnReason = (id, parentId) => {
+  const queryClient = useQueryClient()
+
+  return useAdminUpdateReturnReason(id, {
+    onSuccess: () => {
+      queryClient.invalidateQueries(adminReturnReasonKeys.detail(parentId))
+    },
+  })
+}
+
+const useDeleteNestedReturnReason = (id, parentId) => {
+  const queryClient = useQueryClient()
+
+  return useAdminDeleteReturnReason(id, {
+    onSuccess: () => {
+      queryClient.invalidateQueries(adminReturnReasonKeys.detail(parentId))
+    },
+  })
+}
+
 export default ReturnReasonModal

src/domain/settings/return-reasons/edit.js

@@ -11,24 +11,26 @@ import BreadCrumb from "../../../components/molecules/breadcrumb"
 
 import ReturnReasonsList from "./return-reasons-list"
 
-import useMedusa from "../../../hooks/use-medusa"
 import ReturnReasonModal from "./create-edit-return-reason"
 
 import { getErrorMessage } from "../../../utils/error-messages"
+import {
+  useAdminDeleteReturnReason,
+  useAdminReturnReason,
+  useAdminUpdateReturnReason,
+} from "medusa-react"
+import useToaster from "../../../hooks/use-toaster"
 
 const EditReturnReason = ({ id }) => {
   const { register, reset, handleSubmit } = useForm()
-  const {
-    return_reason,
-    isLoading,
-    update,
-    delete: returnReasonDelete,
-    toaster,
-  } = useMedusa("returnReasons", { id })
+  const { isLoading, return_reason } = useAdminReturnReason(id)
+  const deleteRR = useAdminDeleteReturnReason(id)
+  const updateRR = useAdminUpdateReturnReason(id)
 
   const [children, setChildren] = useState([])
   const [showReasonEdit, setShowReasonEdit] = useState(false)
   const [editReturnReason, setEditReturnReason] = useState(undefined)
+  const toaster = useToaster()
 
   useEffect(() => {
     if (isLoading) {
@@ -39,20 +41,26 @@ const EditReturnReason = ({ id }) => {
   }, [return_reason, isLoading])
 
   const onSave = async data => {
-    try {
-      await update({ ...data })
-      toaster("Successfully updated return reason", "success")
-      navigate("/a/settings/return-reasons/")
-    } catch (error) {
-      toaster(getErrorMessage(error), "error")
-    }
+    updateRR.mutate(
+      { ...data },
+      {
+        onSuccess: () => {
+          toaster("Successfully updated return reason", "success")
+          navigate("/a/settings/return-reasons/")
+        },
+        onError: error => {
+          toaster(getErrorMessage(error), "error")
+        },
+      }
+    )
   }
 
   const deleteReturnReason = async () => {
-    try {
-      await returnReasonDelete()
-    } catch (err) {}
-    navigate("/a/settings/return-reasons/")
+    deleteRR.mutate(null, {
+      onSuccess: () => {
+        navigate("/a/settings/return-reasons/")
+      },
+    })
   }
 
   if (isLoading) {

src/domain/settings/return-reasons/index.js

@@ -1,16 +1,16 @@
-import React, { useState, useEffect } from "react"
-import { Flex, Text, Box } from "rebass"
 import { navigate } from "gatsby"
-
-import useMedusa from "../../../hooks/use-medusa"
-import Card from "../../../components/card"
+import { useAdminReturnReasons } from "medusa-react"
+import React, { useEffect, useState } from "react"
+import { Box, Flex, Text } from "rebass"
 import Button from "../../../components/button"
+import Card from "../../../components/card"
 import Spinner from "../../../components/spinner"
 import BreadCrumb from "../../../components/molecules/breadcrumb"
 import ReturnReasonsList from "./return-reasons-list"
 
 const ReturnReasons = () => {
-  const { return_reasons, isLoading } = useMedusa("returnReasons")
+  const { isLoading, return_reasons } = useAdminReturnReasons()
+
   const parent_return_reasons = !isLoading
     ? return_reasons.filter(rr => !rr.parent_return_reason_id)
     : []
@@ -26,14 +26,14 @@ const ReturnReasons = () => {
   )
 
   useEffect(() => {
-    if (!isLoading) {
+    if (return_reasons?.length) {
       const startIndex = currentPage * pageLength
       setNumberOfPages(Math.ceil(parent_return_reasons.length / pageLength))
       setShownReasons(
         parent_return_reasons.slice(startIndex, startIndex + pageLength)
       )
     }
-  }, [currentPage, isLoading])
+  }, [currentPage, return_reasons])
 
   const onPreviousClick = () => {
     setCurrentPage(currentPage - 1)