From c97841701a199b0ff99172b26f4edf055076b5d1 Mon Sep 17 00:00:00 2001
From: alexsparkes <alexsparkes@gmail.com>
Date: Tue, 18 Jun 2024 15:46:47 +0100
Subject: [PATCH] fix(collection): Unnecessary re-render

---
 .../components/Collection/Collection.jsx      |  4 +-
 src/features/marketplace/views/ItemPage.jsx   | 38 +++++++++----------
 2 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/features/marketplace/components/Collection/Collection.jsx b/src/features/marketplace/components/Collection/Collection.jsx
index e6ffeb4b..88499645 100644
--- a/src/features/marketplace/components/Collection/Collection.jsx
+++ b/src/features/marketplace/components/Collection/Collection.jsx
@@ -1,3 +1,4 @@
+import { memo } from 'react';
 import { MdOutlineArrowForward, MdOutlineOpenInNew } from 'react-icons/md';
 import { Button } from 'components/Elements';
 import variables from 'config/variables';
@@ -44,4 +45,5 @@ const Collection = ({ collections, collectionFunction }) => {
   );
 };
 
-export { Collection as default, Collection };
+const MemoizedCollection = memo(Collection);
+export { MemoizedCollection as default, MemoizedCollection as Collection };
diff --git a/src/features/marketplace/views/ItemPage.jsx b/src/features/marketplace/views/ItemPage.jsx
index 4669627c..8f0b6bcd 100644
--- a/src/features/marketplace/views/ItemPage.jsx
+++ b/src/features/marketplace/views/ItemPage.jsx
@@ -31,6 +31,20 @@ const ItemPage = () => {
   const [shareModal, setShareModal] = useState(false);
   const { selectedItem } = useMarketData();
 
+  const locale = localStorage.getItem('language');
+  const shortLocale = locale.includes('_') ? locale.split('_')[0] : locale;
+  let languageNames = new Intl.DisplayNames([shortLocale], { type: 'language' });
+
+  let dateObj, formattedDate;
+  if (selectedItem?.updated_at) {
+    dateObj = new Date(selectedItem?.updated_at);
+    formattedDate = new Intl.DateTimeFormat(shortLocale, {
+      year: 'numeric',
+      month: 'long',
+      day: '2-digit',
+    }).format(dateObj);
+  }
+
   const getName = (name) => {
     const nameMappings = {
       photos: 'photo_packs',
@@ -63,17 +77,17 @@ const ItemPage = () => {
 
     /*if (this.props.data.data.sideload === true) {
       return template(variables.getMessage('marketplace:product.sideload_warning'));
-    }
+    }*/
 
-    if (this.props.data.data.image_api === true) {
+    if (selectedItem?.image_api === true) {
       return template(variables.getMessage('marketplace:product.third_party_api'));
     }
 
-    if (this.props.data.data.language !== undefined && this.props.data.data.language !== null) {
-      if (shortLocale !== this.props.data.data.language) {
+    if (selectedItem?.language !== undefined && selectedItem?.language !== null) {
+      if (shortLocale !== selectedItem?.language) {
         return template(variables.getMessage('marketplace:product.not_in_language'));
       }
-    }*/
+    }
 
     return null;
   };
@@ -259,20 +273,6 @@ const ItemPage = () => {
     );
   };
 
-  const locale = localStorage.getItem('language');
-  const shortLocale = locale.includes('_') ? locale.split('_')[0] : locale;
-  let languageNames = new Intl.DisplayNames([shortLocale], { type: 'language' });
-
-  let dateObj, formattedDate;
-  if (selectedItem?.updated_at) {
-    dateObj = new Date(selectedItem?.updated_at);
-    formattedDate = new Intl.DateTimeFormat(shortLocale, {
-      year: 'numeric',
-      month: 'long',
-      day: '2-digit',
-    }).format(dateObj);
-  }
-
   useEffect(() => {
     document.querySelector('#modal').scrollTop = 0;
   });