docs: added medusa-react snippets in how-to guides (#3091)

* added medusa-react snippets * added more code snippets * added medusa-react snippets * docs: added medusa-react snippets to storefront how-to * docs: added medusa-react snippets in admin how-to * docs: fixed incorrect link
2023-01-23 21:04:09 +02:00
parent 7418a0025c
commit a248bf6e4f
23 changed files with 3032 additions and 169 deletions
@@ -23,10 +23,16 @@ It is assumed that you already have a Medusa server installed and set up. If not

 ### JS Client

-This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client, JavaScript’s Fetch API, or cURL.
+This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client, among other methods.

 If you follow the JS Client code blocks, it’s assumed you already have [Medusa’s JS Client](../../js-client/overview.md) installed and have [created an instance of the client](../../js-client/overview.md#configuration).

+### Medusa React
+
+This guide also includes code snippets to send requests to your Medusa server using Medusa React, among other methods.
+
+If you follow the Medusa React code blocks, it's assumed you already have [Medusa React installed](../../medusa-react/overview.md) and have [used MedusaProvider higher in your component tree](../../medusa-react/overview.md#usage).
+
 ### Authenticated Admin User

 You must be an authenticated admin user before following along with the steps in the tutorial.
@@ -42,7 +48,7 @@ You can create a customer group by sending a request to the Create Customer Grou
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.admin.customerGroups.create({
  name: "VIP",
 })
@@ -51,10 +57,38 @@ medusa.admin.customerGroups.create({
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminCreateCustomerGroup } from "medusa-react"
+
+const CreateCustomerGroup = () => {
+  const createCustomerGroup = useAdminCreateCustomerGroup()
+  // ...
+
+  const handleCreate = () => {
+    createCustomerGroup.mutate({
+      name,
+    })
+  }
+
+  // ...
+  
+  return (
+    <form>
+      {/* Render form */}
+    </form>
+  )
+}
+
+export default CreateCustomerGroup
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<SERVER_URL>/admin/customer-groups`, {
  method: "POST",
  credentials: "include",
@@ -97,17 +131,47 @@ You can get a list of all customer groups by sending a request to the List Custo
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.admin.customerGroups.list()
 .then(({ customer_groups, limit, offset, count }) => {
  console.log(customer_groups.length)
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { CustomerGroup } from "@medusajs/medusa"
+import { useAdminCustomerGroups } from "medusa-react"
+
+const CustomerGroups = () => {
+  const { customer_groups, isLoading } = useAdminCustomerGroups()
+
+  return (
+    <div>
+      {isLoading && <span>Loading...</span>}
+      {customer_groups && !customer_groups.length && (
+        <span>No Customer Groups</span>
+      )}
+      {customer_groups && customer_groups.length > 0 && (
+        <ul>
+          {customer_groups.map((customerGroup: CustomerGroup) => (
+            <li key={customerGroup.id}>{customerGroup.name}</li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}
+
+export default CustomerGroups
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<SERVER_URL>/admin/customer-groups`, {
  credentials: "include",
 })
@@ -141,17 +205,39 @@ You can retrieve a single customer group by sending a request to the Get a Custo
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.admin.customerGroups.retrieve(customerGroupId)
 .then(({ customer_group }) => {
  console.log(customer_group.id)
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminCustomerGroup } from "medusa-react"
+
+const CustomerGroup = () => {
+  const { customer_group, isLoading } = useAdminCustomerGroup(
+    customerGroupId
+  )
+
+  return (
+    <div>
+      {isLoading && <span>Loading...</span>}
+      {customer_group && <span>{customer_group.name}</span>}
+    </div>
+  )
+}
+
+export default CustomerGroup
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<SERVER_URL>/admin/customer-groups/${customerGroupId}`, {
  credentials: "include",
 })
@@ -183,7 +269,7 @@ You can update a customer group’s data by sending a request to the Update Cust
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.admin.customerGroups.update(customerGroupId, {
  metadata: {
 		is_seller: true,
@@ -194,10 +280,38 @@ medusa.admin.customerGroups.update(customerGroupId, {
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminUpdateCustomerGroup } from "medusa-react"
+
+const UpdateCustomerGroup = () => {
+  const updateCustomerGroup = useAdminUpdateCustomerGroup(customerGroupId)
+  // ..
+
+  const handleUpdate = () => {
+    updateCustomerGroup.mutate({
+      name,
+    })
+  }
+
+  // ...
+  
+  return (
+    <form>
+      {/* Render form */}
+    </form>
+  )
+}
+
+export default UpdateCustomerGroup
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<SERVER_URL>/admin/customer-groups/${customerGroupId}`, {
  method: "POST",
  credentials: "include",
@@ -244,17 +358,37 @@ You can delete a customer group by sending a request to the Delete a Customer Gr
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.admin.customerGroups.delete(customerGroupId)
 .then(({ id, object, deleted }) => {
  console.log(id)
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminDeleteCustomerGroup } from "medusa-react"
+
+const CustomerGroup = () => {
+  const deleteCustomerGroup = useAdminDeleteCustomerGroup(customerGroupId)
+  // ...
+
+  const handleDeleteCustomerGroup = () => {
+    deleteCustomerGroup.mutate()
+  }
+
+  // ...
+}
+
+export default CustomerGroup
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<SERVER_URL>/admin/customer-groups/${customerGroupId}`, {
 	method: "DELETE",
  credentials: "include",
@@ -289,7 +423,7 @@ You can add a customer to a group by sending a request to the Customer Group’s
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.admin.customerGroups.addCustomers(customerGroupId, {
  customer_ids: [
    {
@@ -302,10 +436,36 @@ medusa.admin.customerGroups.addCustomers(customerGroupId, {
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminAddCustomersToCustomerGroup } from "medusa-react"
+
+const CustomerGroup = () => {
+  const addCustomers = useAdminAddCustomersToCustomerGroup(customerGroupId)
+  // ...
+
+  const handleAddCustomers= (customerId: string) => {
+    addCustomers.mutate({
+      customer_ids: [
+        {
+          id: customerId,
+        },
+      ],
+    })
+  }
+
+  // ...
+}
+
+export default CustomerGroup
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(
  `<SERVER_URL>/admin/customer-groups/${customerGroupId}/customers/batch`,
  {
@@ -357,17 +517,47 @@ You can retrieve a list of all customers in a customer group using the List Cust
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.admin.customerGroups.listCustomers(customerGroupId)
 .then(({ customers, count, offset, limit }) => {
  console.log(customers.length)
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { Customer } from "@medusajs/medusa"
+import { useAdminCustomerGroupCustomers } from "medusa-react"
+
+const CustomerGroup = () => {
+  const { customers, isLoading } = useAdminCustomerGroupCustomers(
+    customerGroupId
+  )
+
+  return (
+    <div>
+      {isLoading && <span>Loading...</span>}
+      {customers && !customers.length && <span>No customers</span>}
+      {customers && customers.length > 0 && (
+        <ul>
+          {customers.map((customer: Customer) => (
+            <li key={customer.id}>{customer.first_name}</li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}
+
+export default CustomerGroup
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<SERVER_URL>/admin/customer-groups/${customerGroupId}/customers`, {
  credentials: "include",
 })
@@ -403,7 +593,7 @@ You can remove customers from a customer group by sending a request to the Remov
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.admin.customerGroups.removeCustomers(customer_group_id, {
  customer_ids: [
    {
@@ -416,10 +606,39 @@ medusa.admin.customerGroups.removeCustomers(customer_group_id, {
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { Customer } from "@medusajs/medusa"
+import { useAdminRemoveCustomersFromCustomerGroup } from "medusa-react"
+
+const CustomerGroup = () => {
+  const removeCustomers = useAdminRemoveCustomersFromCustomerGroup(
+    customerGroupId
+  )
+  // ...
+
+  const handleRemoveCustomer = (customer_id: string) => {
+    removeCustomers.mutate({
+      customer_ids: [
+        {
+          id: customer_id,
+        },
+      ],
+    })
+  }
+
+  // ...
+}
+
+export default CustomerGroup
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(
  `<SERVER_URL>/admin/customer-groups/${customerGroupId}/customers/batch`,
  {