Merge pull request #27 from TheCodeRaccoons/Backwards-compatibility

Backwards compatibility

Author: JorchCortez

src/Components/AchieveTabs/Friendship/index.tsx

@@ -22,7 +22,7 @@ const Friendship = ({ friendship, achievements }: friendshipType) => {
     return ( 
         <div className="progress-container-flex">    
             <h2>Friendship Achievements</h2>
-                <div className="section-achievements">
+            <div className="section-achievements">
                 {achievements && achievements.map((ach, i) => (
                     <AchievementItem 
                         key={i}

src/Components/AchieveTabs/Monsters/index.tsx

@@ -1,43 +1,41 @@
-import React from 'react'
+import { AchievementItem } from "@components/common";
+import type { monsterDataType } from "types/displayDataTypes";
 
-interface MonsterImage {
-    img: string;
-    name: string;
-}
-
-interface MonsterData {
-    goal: number;
-    images: MonsterImage[];
-    category: string;
-    timesKilled: number;
-}
-
-interface MonstersProps {
-    monstersKilled: MonsterData[];
-}
-
-const Monsters: React.FC<MonstersProps> = ({ monstersKilled }) => {
-    const getQuestData = (monsters: MonsterData) => {
-        return(
-                <li key={monsters.goal}>
-                    <span className="goal-mg">{monsters.images.map((image, i) =><a href={`https://stardewvalleywiki.com/${image.img}`} target="_blank" rel="noreferrer" key={i}> <img key={i} src={`https://stardew-tracker.s3.amazonaws.com/Monsters/${image.img}.png`} className="done" title={image.name} alt={image.name} width="21px" ></img> </a>) }</span>
-        {monsters.category}: {(monsters.timesKilled >= monsters.goal) ?  <span className="completed"> {monsters.timesKilled} / {monsters.goal}</span> : <span className="pending"> {monsters.timesKilled} / {monsters.goal}</span> } 
-                </li>    
-        );
-    };
+const Monsters = ({ monsterData, achievements } :monsterDataType) => {
+    // const getQuestData = (monsters: MonsterData) => {
+    //     return(
+    //             <li key={monsters.goal}>
+    //                 <span className="goal-mg">{monsters.images.map((image, i) =><a href={`https://stardewvalleywiki.com/${image.img}`} target="_blank" rel="noreferrer" key={i}> <img key={i} src={`https://stardew-tracker.s3.amazonaws.com/Monsters/${image.img}.png`} className="done" title={image.name} alt={image.name} width="21px" ></img> </a>) }</span>
+    //     {monsters.category}: {(monsters.timesKilled >= monsters.goal) ?  <span className="completed"> {monsters.timesKilled} / {monsters.goal}</span> : <span className="pending"> {monsters.timesKilled} / {monsters.goal}</span> } 
+    //             </li>    
+    //     );
+    // };
+    console.log('monsterData', monsterData);
 
     return ( 
         <div className="progress-container-flex">  
-        
+            <br />
+            <h2>Monster Erradication Achievements</h2> 
+            <div className="section-achievements">
+                {achievements && achievements.map((ach, i) => (
+                    <AchievementItem 
+                        key={i}
+                        done={ach.done}
+                        image={ach.image}
+                        achievementName={ach.name}
+                        achievementDesc={ach.description}
+                        achievementHoverDesc={ach.hoverDesc}
+                    />))}
+            </div>
         <span className="a-title"><h1>Monster Eradication Goals</h1></span>
             <br /> 
             <br />
-            <ul className="m-List"> 
+            {/* <ul className="m-List"> 
                 { monstersKilled.slice(0, 5).map( m => getQuestData(m))} 
             </ul>
             <ul className="m-List">
                 { monstersKilled.slice(5).map( m => getQuestData(m))} 
-            </ul> 
+            </ul>  */}
         </div>
     );
 };

src/Components/Achievements/index.tsx

@@ -87,7 +87,7 @@ const Achievements = ({
             </TabPanel> 
             <TabPanel> 
                 <section className="achievement-container">
-                    <Monsters monstersKilled={monstersKilled}/>
+                    <Monsters {...monstersKilled}/>
                 </section>
             </TabPanel> 
             <TabPanel>