fix: LW review view not showing wearables to review correctly (#3223)

* fix: LW review view not showing wearables to review correctly

* fix: PR review

* fix: Update typescript version

* fix: Add new line

package.json

@@ -118,7 +118,7 @@
     "prettier": "^2.7.1",
     "rollup-plugin-polyfill-node": "^0.13.0",
     "ts-node": "^10.9.2",
-    "typescript": "^5.3.3",
+    "typescript": "^5.7.2",
     "vite": "^5.4.0",
     "vite-bundle-visualizer": "^1.0.0",
     "vite-plugin-node-polyfills": "^0.19.0"

src/components/ItemEditorPage/ItemEditorPage.tsx

@@ -11,6 +11,20 @@ export default class ItemEditorPage extends React.PureComponent<Props, State> {
   state: State = {
     reviewedItems: []
   }
+
+  handleOnSetReviewedItems = (items: Item[]) => {
+    this.setState(prevState => ({
+      reviewedItems: [
+        ...prevState.reviewedItems,
+        ...items.filter(item => !prevState.reviewedItems.some(prevStateItem => prevStateItem.id === item.id))
+      ]
+    }))
+  }
+
+  handleResetReviewedItems = () => {
+    this.setState({ reviewedItems: [] })
+  }
+
   render() {
     const { reviewedItems } = this.state
     return (
@@ -19,9 +33,9 @@ export default class ItemEditorPage extends React.PureComponent<Props, State> {
           <TopPanel reviewedItems={reviewedItems} />
           <div className="content">
             <LeftPanel
-              onSetReviewedItems={(items: Item[]) =>
-                this.setState(prevState => ({ reviewedItems: [...prevState.reviewedItems, ...items] }))
-              }
+              reviewedItems={reviewedItems}
+              onResetReviewedItems={this.handleResetReviewedItems}
+              onSetReviewedItems={this.handleOnSetReviewedItems}
             />
             <CenterPanel />
             <RightPanel />

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

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { t } from 'decentraland-dapps/dist/modules/translation'
 import { Loader, Pagination, PaginationProps, Section } from 'decentraland-ui'
 import { LEFT_PANEL_PAGE_SIZE } from 'components/ItemEditorPage/constants'
 import SidebarCollection from './SidebarCollection'
@@ -22,9 +23,12 @@ export default class Collections extends React.PureComponent<Props, State> {
     if (collections.length === 0) return null
 
     const totalPages = Math.ceil(totalCollections / LEFT_PANEL_PAGE_SIZE)
-
     return isLoading ? (
       <Loader size="small" active />
+    ) : !isLoading && items.length === 0 && collections.length === 0 ? (
+      <div className="empty">
+        <div className="subtitle">{t('collections_page.empty_description')}</div>
+      </div>
     ) : (
       <>
         <Section className="Collections">

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

@@ -83,3 +83,18 @@
 .Items > .Collapsable .label > .Icon {
   margin-right: 8px;
 }
+
+.Items > .empty {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  padding: 32px;
+}
+
+.Items > .empty .subtitle {
+  color: var(--secondary-text);
+}