Refactor Skills components to use functional style

Converted Skills and SkillContainer components from class-based to functional components using hooks. Centralized skill image imports in a new index.tsx file for better maintainability and updated image references accordingly.

Author: JorchCortez

src/Components/Skills/SkillContainer/SkillContainer.tsx

@@ -1,24 +1,49 @@
-import React from 'react';
-class Skills extends React.Component {
-    constructor(props) {
-        super(props)
-        this.state = {}
-    }
+import './SkillContainer.css';
 
-    render() {
-        return ( 
-            <div className="skill-container"> 
-                    <h1>{`${this.props.skillName} lvl ${(this.props.xp > this.props.levelInfo.val) ? this.props.levelInfo.id :  this.props.levelInfo.id - 1} `}</h1>
-                    <span>
-                        Current XP: {this.props.xp} <br />
-                        Level Up in: { (this.props.xp > 15000) ? 0 : (this.props.levelInfo.val - this.props.xp)}<br />
-                        Max level in: { (this.props.xp > 15000) ? "Maxed" : 15000 - this.props.xp}
-                    </span>
-                    <img src={this.props.skillImg} alt={this.props.index} ></img>
+type SkillProps = {
+    skillImg: string;
+    skillName: string;
+    xp: number;
+    levelInfo: {
+        id: number;
+        val: number;
+    };
+};
+
+const Skills = ({
+    skillImg,
+    skillName,
+    xp,
+    levelInfo
+}: SkillProps) => {
+    const currentLevel = (xp > levelInfo.val) ? levelInfo.id : levelInfo.id - 1;
+    const xpToNextLevel = (xp > 15000) ? 0 : (levelInfo.val - xp);
+    const xpToMax = (xp > 15000) ? "Maxed" : 15000 - xp;
+
+    return (
+        <div className="skill-container">
+            <p className="skill-container__title">
+                {`${skillName} lvl ${currentLevel}`}
+            </p>
+            <div className="skill-container__stats">
+                <div className="skill-container__stats-line">
+                    Current XP: {xp}
+                </div>
+                <div className="skill-container__stats-line">
+                    Level Up in: {xpToNextLevel}
+                </div>
+                <div className="skill-container__stats-line">
+                    Max level in: {xpToMax}
+                </div>
             </div>
-        );
-    }
-}
+            <img 
+                src={skillImg} 
+                alt={skillName}
+                className="skill-container__icon"
+                title={`${skillName} - Level ${currentLevel}`}
+            />
+        </div>
+    );  
+};
 
 export default Skills;
-

src/Components/Skills/Skills.tsx

@@ -1,36 +1,27 @@
-import React from 'react';   
+import { useState } from 'react'
 import SkillContainer from './SkillContainer/SkillContainer'
-import Fa_img from '../../Media/Skills/Farming.png'
-import Mi_img from '../../Media/Skills/Mining.png'
-import Fo_img from '../../Media/Skills/Foraging.png'
-import Fi_img from '../../Media/Skills/Fishing.png'
-import Co_img from '../../Media/Skills/Combat.png' 
-class Skills extends React.Component {
-    constructor(props) {
-        super(props)
-        this.state = { 
-            skillImg: [Fa_img, Fi_img, Fo_img, Mi_img, Co_img], 
-            skills: this.props.xp
-        }
-    }
+import {Farming, Mining, Foraging, Fishing, Combat} from '@media/Skills'
+
+const Skills = (props) => {
+    console.log(props)
+    let [skills, setSkills] = useState(props.xp)
+    let [skillImg, setSkillImg] = useState([Farming, Fishing, Foraging, Mining, Combat])
 
-    render() {
         return (
             <section className="stats-container"> 
                 <div className="skill-info"> 
-                    {this.state.skills.map((item, i) => (i === 5) ? "" :  
+                    {skills.map((item, i: number) => (i === 5) ? "" :  
                     <SkillContainer 
                         key={i} 
                         index={i} 
-                        skillImg={this.state.skillImg[i]} 
+                        skillImg={skillImg[i]} 
                         skillName={item.skill} 
                         xp={item.xp} 
                         levelInfo={item.levelInfo}
                     />)}         
                 </div>
             </section>
         );
-    }
 }
 
 export default Skills;

src/Media/Skills/index.tsx

@@ -0,0 +1,6 @@
+// Export all tab images
+export { default as Combat } from '@media/skills/Combat.png'
+export { default as Farming } from '@media/skills/Farming.png'
+export { default as Fishing } from '@media/skills/Fishing.png'
+export { default as Foraging } from '@media/skills/Foraging.png'
+export { default as Mining } from '@media/skills/Mining.png'