Refactor player data handling and props in stats components

Updated Skills, Utility, and stats components to use more explicit and type-safe props for player and experience data. Refactored stats.tsx to use formattedSaveFileType, improved null handling, and adjusted mapping logic for farmhand data. Updated useLoadSaveFile hook to return formattedSaveFileType for playerData, ensuring consistent data structures across components.

Author: JorchCortez

src/Components/Skills/Skills.tsx

@@ -3,7 +3,11 @@ import SkillContainer from './SkillContainer/SkillContainer'
 import {Farming, Mining, Foraging, Fishing, Combat} from '@media/Skills'
 import type { experienceType } from 'types/displayDataTypes'
 
-const Skills = (experience: experienceType[]) => {
+interface SkillsProps {
+    experience: experienceType[];
+}
+
+const Skills = ({ experience }: SkillsProps) => {
     const skillImg =[Farming, Fishing, Foraging, Mining, Combat];
     console.log("Skills data:", experience);
         return (
@@ -12,7 +16,6 @@ const Skills = (experience: experienceType[]) => {
                     {experience.map((item, i: number) => (i === 5) ? "" :  
                     <SkillContainer 
                         key={i} 
-                        index={i} 
                         skillImg={skillImg[i] || ""} 
                         skillName={item.skill} 
                         xp={item.xp} 

src/Components/Utility/Utility.tsx

@@ -66,13 +66,16 @@ type getParsedUserDataType = Omit<getDetailedInfoType, 'playerData'> & {
 
 //Calls the parser and creates an array of players depending on wether it is a single player or multiple
 const GetDetailedInfo = ({playerData , collectionStatus, specialRequests, availableSpecialRequests}: getDetailedInfoType) =>{ 
-    let fullPlayerData: any = []
+    let fullPlayerData: fullPlayerDataType[] = []
     if(Array.isArray(playerData)){
         playerData.forEach(p => { 
-            let playerFull = {
+            let playerFull: fullPlayerDataType
+            = {
                 //...p, 
                 ...parseData({playerData: p, collectionStatus, specialRequests, availableSpecialRequests})
             }
+            
+            if(playerFull !== null)
             fullPlayerData.push(playerFull)
         }) 
     }
@@ -81,12 +84,11 @@ const GetDetailedInfo = ({playerData , collectionStatus, specialRequests, availa
 } 
 
 //Creates an object per player with the cleanup playerData.from the file
-const parseData = ({playerData, collectionStatus, specialRequests, availableSpecialRequests}: getParsedUserDataType) => { 
-    if(!playerData) return null;
+const parseData = ({playerData, collectionStatus, specialRequests, availableSpecialRequests}: getParsedUserDataType) : fullPlayerDataType => { 
     //Not finished  
     console.log("Parsing data for:", playerData)
     let fullPlayerData : fullPlayerDataType = {
-        playerName: playerData.name,
+        playerName: playerData.name || "Unknown",
         farmName: playerData.farmName, //TODO: Remove and make global if even needed
         experience: GetXpInfo(playerData.experiencePoints.int), //DONE
         moneyEarned: playerData.totalMoneyEarned || 0, //DONE
@@ -124,7 +126,7 @@ const GetXpInfo = (xp: number[]): experienceType[] => {
                 levelInfo: Levels.find((level) => level.val >= _skill) || { id: 10, val: 15000 }
             })
         }
-    })  
+    })
     return skillLevelData
 }
 /* End of XP Data */

src/Components/stats/stats.tsx

@@ -11,26 +11,23 @@ import Junimo2  from '../../Media/Junimo2B.png'
 import Junimo3  from '../../Media/Junimo3B.png' 
 import Junimo4  from '../../Media/Junimo4B.png' 
 import Rope     from '../../Media/Rope.png'
-import type { fullPlayerDataType } from 'types/displayDataTypes';
+import type { formattedSaveFileType, fullPlayerDataType } from 'types/displayDataTypes';
 
-type statsPageProps = {
-    playerData: fullPlayerDataType;
-    globalFarmName: string;
-    farmhands: fullPlayerDataType[];
-}
 
-const Stats = ({playerData, globalFarmName, farmhands}: statsPageProps) => {
-    const [farmName] = useState(globalFarmName || "My Farm");
+
+const Stats = ({playerData, farmName, farmhandData}: formattedSaveFileType) => {
+    const [globalFarmName] = useState(farmName || "My Farm");
     const [junimos] = useState([Junimo1, Junimo2, Junimo3, Junimo4]);
     const [Activejunimos] = useState([Junimo1a, Junimo2a, Junimo3a, Junimo4a]);
 
-    const titles = farmhands.map((item, i) => 
+    const titles = farmhandData.map((item, i) => 
         <Tab key={i}>
             <img src={junimos[i + 1]} alt="Jun"></img> {item.playerName}
         </Tab>
     );
+    
 
-    const playerStats = farmhands.map((item, i) => (
+    const playerStats = farmhandData.map((item, i) => (
         <TabPanel key={i}>
             <section className="wrapper">
                 <Skills {...item.experience}></Skills>
@@ -55,42 +52,46 @@ const Stats = ({playerData, globalFarmName, farmhands}: statsPageProps) => {
             </section> 
         </TabPanel>
     ));
-
+    console.log("Rendering Stats component with playerData:", playerData, "experience:", playerData.experience);
     return ( 
         <div className="file-container">  
-            <div className="farmName"><h2>Farm: {farmName}</h2></div> 
+            <div className="farmName"><h2>Farm: {globalFarmName}</h2></div> 
             <section className="scroller"> 
+                            { playerData ? (
                 <Tabs>
                     <TabList> 
-                        <Tab><img src={junimos[0]} alt="Junimo" width="25px"></img>{playerData[0].playerName}</Tab>
+                        <Tab><img src={junimos[0]} alt="Junimo" width="25px"></img>{playerData.playerName}</Tab>
                         {titles}
                     </TabList>
 
                     <TabPanel>
                         <section className="wrapper">
-                            <Skills {...playerData[0].experience}></Skills>
+                            <>
+                            <Skills experience={playerData.experience}></Skills>
                             <div className="ropes">
                                 <img src={Rope} alt=""></img>
                                 <img src={Rope} alt=""></img>
                             </div> 
                             <Achievements 
-                                recipesCooked={playerData[0].cookedItems} 
-                                itemsCrafted={playerData[0].itemsCrafted}  
-                                cropsShipped={playerData[0].cropsShipped}  
-                                fishCaught={playerData[0].fishCaught}
-                                friendship={playerData[0].friendship}
-                                monstersKilled={playerData[0].monstersKilled}
-                                shippedItems={playerData[0].shippedItems}
-                                moneyEarned={playerData[0].moneyEarned}
-                                museumCollection={playerData[0].museumCollection}
-                                questsDone={playerData[0].questsDone}
-                                specialReq={playerData[0].specialRequests}
-                                pendingSpecialReq={playerData[0].pendingSpecialRequests}
-                            ></Achievements>
+                                recipesCooked={playerData.cookedItems} 
+                                itemsCrafted={playerData.itemsCrafted}  
+                                cropsShipped={playerData.cropsShipped}  
+                                fishCaught={playerData.fishCaught}
+                                friendship={playerData.friendship}
+                                monstersKilled={playerData.monstersKilled}
+                                shippedItems={playerData.shippedItems}
+                                moneyEarned={playerData.moneyEarned}
+                                museumCollection={playerData.museumCollection}
+                                questsDone={playerData.questsDone}
+                                specialReq={playerData.specialRequests}
+                                //pendingSpecialReq={playerData.pendingSpecialRequests}
+                            ></Achievements> 
+                            </>
                         </section>
                     </TabPanel>
                     {playerStats}
-                </Tabs>
+                </Tabs>) : <p>No player data available.</p>
+                            }
             </section>
         </div>
     );

src/hooks/useLoadSaveFile.tsx

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { XMLParser } from 'fast-xml-parser';
 import { GetDetailedInfo, GetFarmHands } from '@utility/Utility';
 import type { gameLocationType, itemsType, itemType, playerType, saveFileType, saveGameType, specialOrderType } from 'types/savefile.js';
+import type { formattedSaveFileType } from 'types/displayDataTypes';
 
 export interface UseLoadSaveFileResult {
     playerData: any;
@@ -15,7 +16,7 @@ const useLoadSaveFile = (): UseLoadSaveFileResult => {
     const [fileData, setFileData] = useState<saveGameType | null>(null);
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState<string | null>(null);
-    const [playerData, setPlayerData] = useState<any | null>(null);
+    const [playerData, setPlayerData] = useState<formattedSaveFileType | null>(null);
 
     useEffect(() => {
         if (fileData) {
@@ -74,7 +75,7 @@ const useLoadSaveFile = (): UseLoadSaveFileResult => {
                 collectionStatus: collectionStatus,
                 specialRequests: specialRequests,
                 availableSpecialRequests: availableSpecialRequests
-            }),
+            })[0] || null,
             farmhandData: GetDetailedInfo({
                 playerData: farmHands,
                 collectionStatus: collectionStatus,