import { DEFAULT_COLUMNS } from 'constants/layout' ; import React , { useEffect , useMemo , useRef } from 'react' ; import styled from 'styled-components' ; import { SidebarNftsState , useCollectionEditorActions , useSidebarNftsState , useStagedNftsState , } from 'contexts/collectionEditor/CollectionEditorContext' ; import { useWizardValidationActions } from 'contexts/wizard/WizardValidationContext' ; import { useCollectionWizardState } from 'contexts/wizard/CollectionWizardContext' ; import { Nft } from 'types/Nft' ; import useAuthenticatedGallery from 'hooks/api/galleries/useAuthenticatedGallery' ; import { isValidColumns } from 'scenes/UserGalleryPage/UserGalleryCollection' ; import { EditModeNft } from '../types' ; import Directions from '../Directions' ; import Sidebar from '../Sidebar/Sidebar' ; import { convertObjectToArray } from '../convertObjectToArray' ; import StagingArea from './StagingArea' ; import EditorMenu from './EditorMenu' ; import useAllNfts from 'hooks/api/nfts/useAllNfts' ; function convertNftsToEditModeNfts ( nfts , isSelected = false ) { return nfts . map ( ( nft , index ) => ( { index , nft , id : nft . id , isSelected , } ) ) ; } function CollectionEditor ( ) { const stagedNfts = useStagedNftsState ( ) ; const sidebarNfts = useSidebarNftsState ( ) ; const { setNextEnabled } = useWizardValidationActions ( ) ; useEffect ( ( ) => { setNextEnabled ( stagedNfts . length > 0 ) ; return ( ) => { setNextEnabled ( true ) ; } ; } , [ setNextEnabled , stagedNfts ] ) ; const { collectionIdBeingEdited } = useCollectionWizardState ( ) ; const { setSidebarNfts , stageNfts , unstageNfts } = useCollectionEditorActions ( ) ; const allNfts = useAllNfts ( ) ; const { collections } = useAuthenticatedGallery ( ) ; const collectionIdBeingEditedRef = useRef < string > ( collectionIdBeingEdited ?? '' ) ; const collectionBeingEdited = useMemo ( ( ) => collections . find ( ( coll ) => coll . id === collectionIdBeingEditedRef . current ) , [ collections ] ) ; const nftsInCollection = useMemo ( ( ) => collectionBeingEdited ?. nfts ?? [ ] , [ collectionBeingEdited ] ) ; const { setColumns } = useCollectionEditorActions ( ) ; const mountRef = useRef ( false ) ; useEffect ( ( ) => { if ( collectionBeingEdited ) { const columns = isValidColumns ( collectionBeingEdited . layout . columns ) ? collectionBeingEdited . layout . columns : DEFAULT_COLUMNS ; setColumns ( columns ) ; } mountRef . current = true ; } , [ collectionBeingEdited , setColumns ] ) ; const sidebarNftsRef = useRef < SidebarNftsState > ( { } ) ; useEffect ( ( ) => { sidebarNftsRef . current = sidebarNfts ; } , [ sidebarNfts ] ) ; const allEditModeNfts = useMemo ( ( ) => { const editModeNfts = convertNftsToEditModeNfts ( allNfts ) ; return Object . fromEntries ( editModeNfts . map ( ( nft ) => [ nft . id , nft ] ) ) ; } , [ allNfts ] ) ; useEffect ( ( ) => { const preRefreshNftsAsArray = convertObjectToArray ( sidebarNftsRef . current ) ; const initialRender = preRefreshNftsAsArray . length === 0 ; if ( initialRender ) { stageNfts ( convertNftsToEditModeNfts ( nftsInCollection , true ) ) ; } const newSidebarNfts = allEditModeNfts ; nftsInCollection . forEach ( ( nft ) => { const preRefreshNft = newSidebarNfts [ nft . id ] ; if ( preRefreshNft ) { preRefreshNft . isSelected = true ; } } ) ; const nftsToUnstage = [ ] ; for ( const preRefreshNft of preRefreshNftsAsArray ) { const newSidebarNft = newSidebarNfts [ preRefreshNft . id ] ; if ( newSidebarNft ) { newSidebarNft . isSelected = preRefreshNft . isSelected ; } else if ( preRefreshNft . isSelected ) { nftsToUnstage . push ( preRefreshNft . id ) ; } } if ( nftsToUnstage . length ) { unstageNfts ( nftsToUnstage ) ; } setSidebarNfts ( newSidebarNfts ) ; } , [ allEditModeNfts , nftsInCollection , setSidebarNfts , stageNfts , unstageNfts ] ) ; const shouldDisplayEditor = stagedNfts . length > 0 ; return ( < StyledOrganizeCollection > < StyledSidebarContainer > < Sidebar /> < /StyledSidebarContainer> < StyledEditorContainer > { shouldDisplayEditor ? ( < > < EditorMenu /> < StagingArea / > < />) : (<Directions / > ) } < /StyledEditorContainer> < /StyledOrganizeCollection>); } const SIDEBAR_WIDTH = 280 ; const StyledOrganizeCollection = styled . div `
  display: flex;
` ; const StyledSidebarContainer = styled . div `
  width: ${ SIDEBAR_WIDTH }px;
` ; const StyledEditorContainer = styled . div `
  width: calc(100vw - ${ SIDEBAR_WIDTH }px);
` ; export default CollectionEditor ;