import { useCallback , useEffect , useRef } from 'react' ; import { WizardContext } from 'react-albus' ; import { useWizardCallback } from 'contexts/wizard/WizardCallbackContext' ; import CollectionEditorProvider , { useCollectionMetadataState , useStagedNftsState , } from 'contexts/collectionEditor/CollectionEditorContext' ; import { useModal } from 'contexts/modal/ModalContext' ; import useUpdateCollectionNfts from 'hooks/api/collections/useUpdateCollectionNfts' ; import { useCollectionWizardActions , useCollectionWizardState , } from 'contexts/wizard/CollectionWizardContext' ; import { useWizardId } from 'contexts/wizard/WizardDataProvider' ; import Mixpanel from 'utils/mixpanel' ; import CollectionEditor from './Editor/CollectionEditor' ; import CollectionCreateOrEditForm from './CollectionCreateOrEditForm' ; import { Nft } from 'types/Nft' ; type ConfigProps = { push : WizardContext [ 'push' ] ; } ; function useWizardConfig ( { push } ) { const { setOnNext , setOnPrevious } = useWizardCallback ( ) ; const { showModal } = useModal ( ) ; const wizardId = useWizardId ( ) ; const stagedNfts = useStagedNftsState ( ) ; const stagedNftsRaw = useRef < Nft [ ] > ( [ ] ) ; useEffect ( ( ) => { stagedNftsRaw . current = stagedNfts . map ( ( { nft } ) => nft ) ; } , [ stagedNfts ] ) ; const updateCollection = useUpdateCollectionNfts ( ) ; const { collectionIdBeingEdited } = useCollectionWizardState ( ) ; const { setCollectionIdBeingEdited } = useCollectionWizardActions ( ) ; const collectionMetadata = useCollectionMetadataState ( ) ; const goToOrganizeGalleryStep = useCallback ( ( ) => { setCollectionIdBeingEdited ( '' ) ; push ( 'organizeGallery' ) ; } , [ push , setCollectionIdBeingEdited ] ) ; useEffect ( ( ) => { if ( collectionIdBeingEdited ) { setOnNext ( async ( ) => { try { await updateCollection ( collectionIdBeingEdited , stagedNftsRaw . current , collectionMetadata . layout ) ; } catch { } goToOrganizeGalleryStep ( ) ; } ) ; setOnPrevious ( goToOrganizeGalleryStep ) ; return ; } setOnNext ( async ( ) => { Mixpanel . track ( 'Save new collection' ) ; showModal ( < CollectionCreateOrEditForm onNext = { goToOrganizeGalleryStep } nfts = { stagedNftsRaw . current } layout = { collectionMetadata . layout } / > ) ; } ) ; if ( wizardId === 'edit-gallery' ) { setOnPrevious ( goToOrganizeGalleryStep ) ; } } , [ collectionIdBeingEdited , goToOrganizeGalleryStep , setOnNext , setOnPrevious , showModal , updateCollection , wizardId , collectionMetadata , stagedNfts , ] ) ; } type DecoratedCollectionEditorProps = { push : WizardContext [ 'push' ] ; } ; function DecoratedCollectionEditor ( { push } ) { useWizardConfig ( { push } ) ; return < CollectionEditor />; } function OrganizeCollectionWithProvider ( { push } ) { return ( < CollectionEditorProvider > < DecoratedCollectionEditor push = { push } / > < /CollectionEditorProvider>); } export default OrganizeCollectionWithProvider ;