Refactor museum collection logic and props

Moved museum collection summary calculations from the Collection component to the Utility function GetMCollection, which now returns total found, delivered, and missing items text. Updated Collection component to use these new props and removed local state and effect logic for totals.

Author: JorchCortez

src/Components/AchieveTabs/Collection/index.tsx

@@ -1,29 +1,10 @@
-import React, { useState, useEffect } from 'react'
 import type { museumCollectionType } from 'types/displayDataTypes';
 
 interface CollectionProps {
     museumCollection: museumCollectionType;
 }
 
-const Collection = ({ museumCollection }: CollectionProps) => {
-    const [totalFound, setTotalFound] = useState(0);
-    const [totalDelivered, setTotalDelivered] = useState(0);
-    const [total, setTotal] = useState(0);
-
-    const getTotalFound = () => {
-        const artifacts = museumCollection.artifacts;
-        const minerals = museumCollection.minerals;
-
-        const totalArtFound = artifacts.reduce((accum, item) => (item.found) ? accum + 1 : accum, 0);
-        const totalMinFound = minerals.reduce((accum, item) => (item.found) ? accum + 1 : accum, 0);
-        const totalArtD = artifacts.reduce((accum, item) => (item.inMuseum) ? accum + 1 : accum, 0);
-        const totalMinD = minerals.reduce((accum, item) => (item.inMuseum) ? accum + 1 : accum, 0);
-
-        setTotalFound(totalArtFound + totalMinFound);
-        setTotalDelivered(totalArtD + totalMinD);
-        setTotal(artifacts.length + minerals.length);
-    };
-
+const Collection = ({ museumCollection: mc }: CollectionProps) => {
     const createCollectionItem = (item: any, i: number, type: string) => {
         return (
             <a href={`https://stardewvalleywiki.com/${item.image}`} target="blank" key={i}>
@@ -42,30 +23,28 @@ const Collection = ({ museumCollection }: CollectionProps) => {
         );
     };
 
-    useEffect(() => {
-        getTotalFound();
-    }, []);
-
     return (
         <div className="progress-container">  
             <span className="a-title">
-                <h1>{`You've found ${totalFound} objects and delivered ${totalDelivered} / ${total} to the museum`}</h1>
+                <h1>
+                    {`You've found ${mc.totalFound || 0} objects and delivered ${mc.totalDelivered || 0} / ${mc.total || 0} to the museum`}
+                </h1>
             </span>
             <br />
             <br />
             <h2>Museum Achievements</h2>
             <ul className="a-List"> 
-                <li>A Complete Collection: {(total === totalDelivered) ? 
+                <li>A Complete Collection: {(mc.missingItemsText === undefined) ? 
                     <span className="completed">You have this achievement</span> :
-                    <span className="pending">You need to deliver {total - totalDelivered} more items to get this achievement.</span>
+                    <span className="pending">{mc.missingItemsText}</span>
                     }
                 </li>
             </ul>
             <span className="a-title"><h1>Artifacts</h1></span>
-            {museumCollection.artifacts.map((item, i) => createCollectionItem(item, i, "Artifacts"))}
+            {mc.artifacts.map((item, i) => createCollectionItem(item, i, "Artifacts"))}
 
             <span className="a-title"><h1>Minerals</h1></span>
-            {museumCollection.minerals.map((item, i) => createCollectionItem(item, i, "Minerals"))}
+            {mc.minerals.map((item, i) => createCollectionItem(item, i, "Minerals"))}
         </div>
     );
 };

src/Components/Utility/Utility.tsx

@@ -361,32 +361,56 @@ const GetMonsterQuests = (allMonsters: itemsType[], slimesKilled: number): forma
         })
         return(mData) 
 }
-const GetMCollection = (archeology: itemsType[], geology: itemsType[], currentCollection: itemsType[]) : museumCollectionType =>{
+const GetMCollection = 
+    (archeology: itemsType[], geology: itemsType[], currentCollection: itemsType[]) : museumCollectionType => {
 
     if(currentCollection === undefined || currentCollection.length === 0) return {artifacts: [], minerals: []};
 
-    //Get found Archeology
     let artifacts: generalFormatedItemType[] = [];
     let minerals: generalFormatedItemType[] = []
+    let _totalFound = 0;
+    let _totalDonated = 0;
 
     for(let collectionItem of Museum.collection) {
+        let alreadyDonated = currentCollection.filter(c => c.value.int === collectionItem.id).length > 0;
+        _totalDonated = alreadyDonated ? _totalDonated + 1 : _totalDonated;
         if( archeology && archeology.length > 0 && collectionItem.type === "artifact"){
+            let found = archeology.filter(a => a.key.int === collectionItem.id).length > 0;
+            _totalFound = found ? _totalFound + 1 : _totalFound;
+
             artifacts.push({
                 name: collectionItem.name,
                 image: GetImages(collectionItem.name),
-                found: (archeology && archeology.length > 0 && archeology.filter(a => a.key.int === collectionItem.id).length > 0),
-                inMuseum: (currentCollection.filter(c => c.value.int === collectionItem.id).length > 0)
+                found: found,
+                inMuseum: alreadyDonated
             })
         } else if(geology && geology.length > 0 && collectionItem.type === "mineral"){
+            let found = geology.filter(g => g.key.int === collectionItem.id).length > 0;
+            _totalFound = found ? _totalFound + 1 : _totalFound;
             minerals.push({
                 name: collectionItem.name,
                 image: GetImages(collectionItem.name),
-                found: (geology && geology.length > 0 && geology.filter(g => g.key.int === collectionItem.id).length > 0),
-                inMuseum: (currentCollection.filter(c => c.value.int === collectionItem.id).length > 0)
+                found: found,
+                inMuseum: alreadyDonated
             })
         }
     }
-    return {artifacts, minerals}  
+
+
+    let missingItemsText = (Museum.collection.length - _totalDonated > 0) ?
+        `You need to deliver ${Museum.collection.length - _totalDonated} more items to get this achievement.` :
+        undefined;
+
+    const museumCollection: museumCollectionType = {
+        totalFound: _totalFound,
+        totalDelivered: _totalDonated,
+        total: Museum.collection.length,
+        missingItemsText: missingItemsText,
+        artifacts,
+        minerals
+    }
+
+    return museumCollection  
 }
 
 const ValidateKnown = (k:itemsType[], name: string) => {