feat: show status indicator for collections and items

package.json

@@ -40,7 +40,7 @@
     "decentraland-dapps": "^12.25.2",
     "decentraland-ecs": "^6.6.1-20201020183014.commit-bdc29ef",
     "decentraland-experiments": "^1.0.2",
-    "decentraland-transactions": "^1.22.2",
+    "decentraland-transactions": "^1.23.0",
     "decentraland-ui": "^3.11.0",
     "dotenv": "6.0.0",
     "dotenv-expand": "4.2.0",

src/components/CollectionDetailPage/CollectionDetailPage.css

@@ -100,3 +100,10 @@
 .CollectionDetailPage .CollectionItem:first-child .grid {
   border-top: 1px solid var(--divider);
 }
+
+.CollectionDetailPage .CollectionStatus {
+  width: 16px;
+  height: 16px;
+  margin-bottom: 6px;
+  margin-right: 12px;
+}

src/components/CollectionDetailPage/CollectionDetailPage.tsx

@@ -24,6 +24,7 @@ import NotFound from 'components/NotFound'
 import BuilderIcon from 'components/Icon'
 import Back from 'components/Back'
 import { AuthorizationModal } from 'components/AuthorizationModal'
+import CollectionStatus from 'components/CollectionStatus'
 import CollectionMenu from './CollectionMenu'
 import CollectionItem from './CollectionItem'
 import { Props, State } from './CollectionDetailPage.types'
@@ -126,7 +127,7 @@ export default class CollectionDetailPage extends React.PureComponent<Props, Sta
                 <Column className="header-column">
                   <Row className="header-row" onClick={this.handleEditName}>
                     <Header size="huge" className="name">
-                      {collection.name}
+                      {collection.isPublished ? <CollectionStatus collection={collection} /> : null}{collection.name}
                     </Header>
                     <BuilderIcon name="edit" className="edit-collection-name" />
                   </Row>

src/components/CollectionDetailPage/CollectionItem/CollectionItem.css

@@ -98,3 +98,7 @@
   font-weight: normal;
   line-height: 0;
 }
+
+.CollectionItem .ItemStatus {
+  margin-right: 4px;
+}

src/components/CollectionDetailPage/CollectionItem/CollectionItem.tsx

@@ -8,6 +8,7 @@ import { fromWei } from 'web3x/utils'
 import { locations } from 'routing/locations'
 import { preventDefault } from 'lib/preventDefault'
 import { isComplete, isFree, canMintItem, canManageItem, getMaxSupply } from 'modules/item/utils'
+import ItemStatus from 'components/ItemStatus'
 import { WearableData } from 'modules/item/types'
 import ItemImage from 'components/ItemImage'
 import { Props } from './CollectionItem.types'
@@ -48,13 +49,13 @@ export default class CollectionItem extends React.PureComponent<Props> {
         <div className="subtitle">{t('item.price')}</div>
       </>
     ) : (
-      <>
-        <div className="link" onClick={preventDefault(this.handleEditPriceAndBeneficiary)}>
-          {t('collection_item.set_price')}
-        </div>
-        <div className="subtitle">{t('item.price')}</div>
-      </>
-    )
+        <>
+          <div className="link" onClick={preventDefault(this.handleEditPriceAndBeneficiary)}>
+            {t('collection_item.set_price')}
+          </div>
+          <div className="subtitle">{t('item.price')}</div>
+        </>
+      )
   }
 
   render() {
@@ -70,7 +71,7 @@ export default class CollectionItem extends React.PureComponent<Props> {
               <div className="info">
                 <div className="name-wrapper">
                   <div className="name" title={item.name}>
-                    {item.name}
+                    <ItemStatus item={item} />{item.name}
                   </div>
                 </div>
                 <div className="subtitle">{item.type}</div>
@@ -114,10 +115,10 @@ export default class CollectionItem extends React.PureComponent<Props> {
                     {t('collection_item.done')} <Icon name="check" />
                   </div>
                 ) : (
-                  <span onClick={preventDefault(this.handleNavigateToEditor)} className="link action">
-                    {t('collection_item.edit_item')}
-                  </span>
-                )}
+                      <span onClick={preventDefault(this.handleNavigateToEditor)} className="link action">
+                        {t('collection_item.edit_item')}
+                      </span>
+                    )}
                 <Dropdown
                   trigger={
                     <Button basic>

src/components/CollectionStatus/CollectionStatus.container.ts

@@ -0,0 +1,17 @@
+import { connect } from 'react-redux'
+
+import { RootState } from 'modules/common/types'
+import { getStatusByCollectionId } from 'modules/collection/selectors'
+import CollectionStatus from './CollectionStatus'
+import { MapStateProps, MapDispatchProps, MapDispatch, OwnProps } from './CollectionStatus.types'
+
+const mapState = (state: RootState, ownProps: OwnProps): MapStateProps => {
+  const statusByCollectionId = getStatusByCollectionId(state)
+  return {
+    status: statusByCollectionId[ownProps.collection.id]
+  }
+}
+
+const mapDispatch = (_dispatch: MapDispatch): MapDispatchProps => ({})
+
+export default connect(mapState, mapDispatch)(CollectionStatus)

src/components/CollectionStatus/CollectionStatus.css

@@ -0,0 +1,23 @@
+.CollectionStatus {
+  width: 10px;
+  height: 10px;
+
+  border-radius: 100px;
+  display: inline-block;
+}
+
+.CollectionStatus.under_review {
+  background-color: #cccccc;
+}
+
+.CollectionStatus.loading {
+  background-color: #3fff4586;
+}
+
+.CollectionStatus.synced {
+  background-color: #3fff46;
+}
+
+.CollectionStatus.unsynced {
+  background-color: orange;
+}

src/components/CollectionStatus/CollectionStatus.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react'
+import { t } from 'decentraland-dapps/dist/modules/translation/utils'
+import { Popup } from 'decentraland-ui'
+
+import { SyncStatus } from 'modules/item/types'
+import { Props } from './CollectionStatus.types'
+import './CollectionStatus.css'
+
+export default class CollectionStatus extends React.PureComponent<Props> {
+  render() {
+    const { status } = this.props
+    return status && status !== SyncStatus.UNPUBLISHED ? (
+      <Popup
+        position="top center"
+        content={t(`status.${status}`)}
+        trigger={<div className={`CollectionStatus ${status}`} title={t(`status.${status}`)} />}
+        hideOnScroll={true}
+        on="hover"
+      />
+    ) : null
+  }
+}

src/components/CollectionStatus/CollectionStatus.types.ts

@@ -0,0 +1,13 @@
+import { Dispatch } from 'redux'
+import { Collection } from 'modules/collection/types'
+import { SyncStatus } from 'modules/item/types'
+
+export type Props = {
+  collection: Collection
+  status: SyncStatus
+}
+
+export type MapStateProps = Pick<Props, 'status'>
+export type MapDispatchProps = {}
+export type MapDispatch = Dispatch
+export type OwnProps = Pick<Props, 'collection'>

src/components/CollectionStatus/index.ts

@@ -0,0 +1,2 @@
+import CollectionStatus from './CollectionStatus.container'
+export default CollectionStatus

src/components/CollectionsPage/CollectionCard/CollectionCard.tsx

@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom'
 import { Button, Card, Confirm } from 'decentraland-ui'
 import classNames from 'classnames'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
-import CollectionBadge from 'components/CollectionBadge'
+import CollectionStatus from 'components/CollectionStatus'
 import CollectionImage from 'components/CollectionImage'
 import { locations } from 'routing/locations'
 import { OptionsDropdown } from '../../OptionsDropdown'
@@ -37,7 +37,7 @@ const CollectionCard = (props: Props & CollectedProps) => {
             <CollectionImage collection={collection} />
             <Card.Content>
               <div className="text" title={collection.name}>
-                {collection.name} <CollectionBadge collection={collection} />
+                {collection.name} <CollectionStatus collection={collection} />
               </div>
               <div className="subtitle">{t('collection_card.subtitle', { count: items.length })}</div>
             </Card.Content>

src/components/ItemDetailPage/ItemDetailPage.css

@@ -49,3 +49,10 @@
   font-size: 21px;
   text-transform: capitalize;
 }
+
+.ItemDetailPage .ItemStatus {
+  width: 16px;
+  height: 16px;
+  margin-bottom: 6px;
+  margin-right: 12px;
+}

src/components/ItemDetailPage/ItemDetailPage.tsx

@@ -10,6 +10,7 @@ import { getBodyShapes, toBodyShapeType, getMaxSupply, getMissingBodyShapeType,
 import Notice from 'components/Notice'
 import ConfirmDelete from 'components/ConfirmDelete'
 import ItemImage from 'components/ItemImage'
+import ItemStatus from 'components/ItemStatus'
 import LoggedInDetailPage from 'components/LoggedInDetailPage'
 import NotFound from 'components/NotFound'
 import Back from 'components/Back'
@@ -66,7 +67,7 @@ export default class ItemDetailPage extends React.PureComponent<Props> {
                 <Column>
                   <Row className="header-row">
                     <Header className="name" size="huge">
-                      {item.name}
+                      <ItemStatus item={item} />{item.name}
                     </Header>
                   </Row>
                 </Column>
@@ -113,7 +114,7 @@ export default class ItemDetailPage extends React.PureComponent<Props> {
           </Row>
         </Section>
         <Narrow>
-          {collection ? <Notice storageKey={STORAGE_KEY}>{t('item_detail_page.notice')}</Notice> : null}
+          {!collection ? <Notice storageKey={STORAGE_KEY}>{t('item_detail_page.notice')}</Notice> : null}
 
           <div className="item-data">
             <ItemImage item={item} hasBadge={true} />
@@ -150,21 +151,21 @@ export default class ItemDetailPage extends React.PureComponent<Props> {
                   <div className="value">{t('global.free')}</div>
                 </Section>
               ) : (
-                <>
-                  {item.price ? (
-                    <Section>
-                      <div className="subtitle">{t('item.price')}</div>
-                      <div className="value">{fromWei(item.price, 'ether')}</div>
-                    </Section>
-                  ) : null}
-                  {item.beneficiary ? (
-                    <Section>
-                      <div className="subtitle">{t('item.beneficiary')}</div>
-                      <div className="value">{item.beneficiary}</div>
-                    </Section>
-                  ) : null}
-                </>
-              )}
+                  <>
+                    {item.price ? (
+                      <Section>
+                        <div className="subtitle">{t('item.price')}</div>
+                        <div className="value">{fromWei(item.price, 'ether')}</div>
+                      </Section>
+                    ) : null}
+                    {item.beneficiary ? (
+                      <Section>
+                        <div className="subtitle">{t('item.beneficiary')}</div>
+                        <div className="value">{item.beneficiary}</div>
+                      </Section>
+                    ) : null}
+                  </>
+                )}
               {item.isPublished ? (
                 <Section>
                   <div className="subtitle">{t('item.supply')}</div>

src/components/ItemEditorPage/LeftPanel/Collections/SidebarCollection/SidebarCollection.css

@@ -61,8 +61,8 @@
   cursor: no-drop;
 }
 
-.SidebarCollection .CollectionBadge {
-  margin-left: 6px;
+.SidebarCollection .CollectionStatus {
+  margin-right: 6px;
 }
 
 .CollectionImage .item-row.empty {

src/components/ItemEditorPage/LeftPanel/Collections/SidebarCollection/SidebarCollection.tsx

@@ -7,22 +7,22 @@ import { locations } from 'routing/locations'
 import { SIDEBAR_ITEM_SOURCE } from '../../Items/SidebarItem/SidebarItem.dnd'
 import { Props } from './SidebarCollection.types'
 import { collect, CollectedProps, collectionTarget } from './SidebarCollection.dnd'
-import CollectionBadge from 'components/CollectionBadge'
+import CollectionStatus from 'components/CollectionStatus'
 import './SidebarCollection.css'
 
 class SidebarCollection extends React.PureComponent<Props & CollectedProps> {
   render() {
     const { collection, items, isSelected, connectDropTarget, isOver, canDrop } = this.props
-    const collectionItems = items.filter(item => item.collectionId === collection.id)
+    const collectionItems = items.filter(item => item.collectionId === collection.id).sort((a, b) => a.createdAt > b.createdAt ? -1 : 1)
     const itemId = collectionItems.length > 0 ? collectionItems[0].id : undefined
     return connectDropTarget(
       <div className={`SidebarCollection ${isSelected ? 'is-selected' : ''} ${isOver ? (canDrop ? 'is-over' : 'no-drop') : ''}`}>
         <Link to={locations.itemEditor({ collectionId: collection.id, itemId })}>
           <CollectionImage collection={collection} />
           <div className="wrapper">
             <div className="name">
+              <CollectionStatus collection={collection} />
               {collection.name}
-              <CollectionBadge collection={collection} />
             </div>
             <div className="count">{t('item_editor.left_panel.items_count', { count: collectionItems.length })}</div>
           </div>

src/components/ItemEditorPage/LeftPanel/Header/Header.tsx

@@ -4,7 +4,7 @@ import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { locations } from 'routing/locations'
 import { isEqual } from 'lib/address'
 import ConfirmDelete from 'components/ConfirmDelete'
-import CollectionBadge from 'components/CollectionBadge'
+import CollectionStatus from 'components/CollectionStatus'
 import { Props } from './Header.types'
 import './Header.css'
 
@@ -56,7 +56,7 @@ export default class Header extends React.PureComponent<Props> {
       <>
         <div className="block back" onClick={this.handleBack} />
         <div className="title">
-          {collection.name} <CollectionBadge collection={collection} />
+          {collection.name} <CollectionStatus collection={collection} />
         </div>
         {isOwner && !collection.isPublished ? (
           <Dropdown trigger={<div className="block actions" />} inline direction="left">
@@ -86,8 +86,8 @@ export default class Header extends React.PureComponent<Props> {
             </Dropdown.Menu>
           </Dropdown>
         ) : (
-          <div className="block" />
-        )}
+            <div className="block" />
+          )}
       </>
     )
   }

src/components/ItemEditorPage/LeftPanel/Items/SidebarItem/SidebarItem.css

@@ -68,3 +68,7 @@
 .SidebarItem > a:not(.is-selected):hover {
   background: var(--light-blue-steel);
 }
+
+.SidebarItem .ItemStatus {
+  margin-right: 6px;
+}