generated from vtex-apps/admin-example
-
Notifications
You must be signed in to change notification settings - Fork 12
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #139 from vtex-apps/fix/seller-wrapper
[oFix] Refactoring SellerWrapper and Adding Custom Hooks
- v1.39.11
- v1.39.10
- v1.39.9
- v1.39.8
- v1.39.7
- v1.39.6
- v1.39.5
- v1.39.4
- v1.39.3
- v1.39.2
- v1.39.1
- v1.39.0
- v1.38.0
- v1.37.3
- v1.37.2
- v1.37.1
- v1.37.0
- v1.36.0
- v1.35.2
- v1.35.1
- v1.35.1-beta.0
- v1.35.0
- v1.34.4-beta.0
- v1.34.3
- v1.34.2
- v1.34.1
- v1.34.0
- v1.33.1
- v1.33.1-beta.0
- v1.33.0
- v1.32.0
- v1.31.11
- v1.31.10
- v1.31.9
- v1.31.8
- v1.31.7
- v1.31.6
- v1.31.5
- v1.31.4
- v1.31.3
- v1.31.2
- v1.31.1
- v1.31.0
- v1.30.2
- v1.30.1
- v1.30.0
- v1.29.2
- v1.29.1
- v1.29.0
- v1.28.2
Showing
5 changed files
with
107 additions
and
90 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,92 +1,3 @@ | ||
import React, { useCallback, useEffect, useRef, useState } from 'react' | ||
import { useProduct, useProductDispatch } from 'vtex.product-context' | ||
import { useCssHandles } from 'vtex.css-handles' | ||
import type { Item } from 'vtex.product-context/react/ProductTypes' | ||
|
||
import useSeller from './hooks/useSeller' | ||
|
||
const CSS_HANDLES = ['sellerWrapper', 'loadingSeller'] | ||
const SELECT_ITEM_EVENT = 'SET_SELECTED_ITEM' | ||
|
||
type SellerWrapperProps = { | ||
children: React.ReactNode | ||
} | ||
|
||
const SellerWrapper = ({ children }: SellerWrapperProps) => { | ||
const { seller } = useSeller() | ||
const dispatch = useProductDispatch() | ||
const { selectedItem, product } = useProduct() ?? {} | ||
const latestItem = useRef((null as unknown) as Item) | ||
const handles = useCssHandles(CSS_HANDLES) | ||
const [loadingSeller, setLoadingSeller] = useState(true) | ||
|
||
const addSellerDefaultToItem = useCallback( | ||
itemSeller => ({ | ||
...itemSeller, | ||
sellerDefault: seller?.includes(itemSeller.sellerId), | ||
}), | ||
[seller] | ||
) | ||
|
||
useEffect(() => { | ||
const shouldDispatchSelectItem = | ||
!!seller && !!product && !!selectedItem && !!dispatch | ||
|
||
if (!shouldDispatchSelectItem) return | ||
const newCurrentSelectedItem = | ||
product?.items?.find(item => | ||
item.sellers?.find( | ||
itemSeller => | ||
seller?.includes(itemSeller.sellerId) && | ||
itemSeller.commertialOffer.AvailableQuantity > 0 | ||
) | ||
) ?? ({} as Item) | ||
|
||
if (!newCurrentSelectedItem) { | ||
return | ||
} | ||
|
||
const { sellers } = newCurrentSelectedItem | ||
const selectedItemWithSeller = { | ||
...newCurrentSelectedItem, | ||
sellers: sellers.map(addSellerDefaultToItem), | ||
} | ||
|
||
if ( | ||
JSON.stringify(latestItem.current) === | ||
JSON.stringify(selectedItemWithSeller) | ||
) { | ||
return | ||
} | ||
|
||
dispatch?.({ | ||
type: SELECT_ITEM_EVENT, | ||
args: { | ||
item: selectedItemWithSeller, | ||
}, | ||
}) | ||
|
||
setLoadingSeller(false) | ||
|
||
latestItem.current = selectedItemWithSeller | ||
}, [ | ||
seller, | ||
product, | ||
selectedItem, | ||
dispatch, | ||
addSellerDefaultToItem, | ||
latestItem, | ||
]) | ||
|
||
return ( | ||
<div | ||
className={`${handles.sellerWrapper} ${ | ||
loadingSeller ? handles.loadingSeller : '' | ||
}`} | ||
> | ||
{children} | ||
</div> | ||
) | ||
} | ||
import SellerWrapper from './components/SellerWrapper/SellerWrapper' | ||
|
||
export default SellerWrapper |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
import React, { useEffect } from 'react' | ||
import { useCssHandles } from 'vtex.css-handles' | ||
import { useProduct } from 'vtex.product-context' | ||
|
||
import { useSelectSeller } from '../../hooks/useSelectSeller' | ||
|
||
type SellerWrapperProps = { | ||
children: React.ReactNode | ||
} | ||
|
||
const CSS_HANDLES = ['sellerWrapper', 'sellerWrapperNoSeller'] | ||
|
||
const SellerWrapper = ({ children }: SellerWrapperProps) => { | ||
const handles = useCssHandles(CSS_HANDLES) | ||
const { currentSelectedItem, selectSeller } = useSelectSeller() | ||
|
||
const { selectedItem } = useProduct() ?? {} | ||
|
||
useEffect(() => { | ||
selectSeller({ selectedItem }) | ||
}, [selectedItem, selectSeller]) | ||
|
||
const className = currentSelectedItem | ||
? `${handles.sellerWrapper}` | ||
: `${handles.sellerWrapper} ${handles.sellerWrapperNoSeller}` | ||
|
||
return <div className={className}>{children}</div> | ||
} | ||
|
||
export default SellerWrapper |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,72 @@ | ||
import { useProduct, useProductDispatch } from 'vtex.product-context' | ||
import { useCallback, useMemo, useRef, useState } from 'react' | ||
import type { Item } from 'vtex.product-context/react/ProductTypes' | ||
|
||
import useSeller from './useSeller' | ||
|
||
const SELECT_ITEM_EVENT = 'SET_SELECTED_ITEM' | ||
|
||
export const useSelectSeller = () => { | ||
const { seller } = useSeller() | ||
const { product } = useProduct() ?? {} | ||
const latestItem = useRef((null as unknown) as Item) | ||
const [loading, setLoading] = useState(true) | ||
const productDispatch = useProductDispatch() | ||
|
||
const addSellerDefaultToItem = useCallback( | ||
itemSeller => ({ | ||
...itemSeller, | ||
sellerDefault: seller?.includes(itemSeller.sellerId), | ||
}), | ||
[seller] | ||
) | ||
|
||
const currentSelectedItem = useMemo( | ||
() => | ||
product?.items?.find(item => | ||
item.sellers?.find( | ||
itemSeller => | ||
seller?.includes(itemSeller.sellerId) && | ||
itemSeller.commertialOffer.AvailableQuantity > 0 | ||
) | ||
) ?? null, | ||
|
||
[seller, product] | ||
) | ||
|
||
const selectSeller = ({ | ||
selectedItem, | ||
}: { | ||
selectedItem: Item | null | undefined | ||
}) => { | ||
if (!currentSelectedItem || !selectedItem) { | ||
return | ||
} | ||
|
||
// just to keep the dependency | ||
setLoading(true) | ||
const { sellers } = (currentSelectedItem as unknown) as Item | ||
const selectedItemWithSeller = { | ||
...((currentSelectedItem as unknown) as Item), | ||
sellers: sellers.map(addSellerDefaultToItem), | ||
} | ||
|
||
if ( | ||
JSON.stringify(latestItem.current) === | ||
JSON.stringify(selectedItemWithSeller) | ||
) { | ||
return | ||
} | ||
|
||
productDispatch?.({ | ||
type: SELECT_ITEM_EVENT, | ||
args: { | ||
item: selectedItemWithSeller, | ||
}, | ||
}) | ||
setLoading(false) | ||
latestItem.current = selectedItemWithSeller | ||
} | ||
|
||
return { loading, seller, currentSelectedItem, selectSeller } | ||
} |
File renamed without changes.