1 files changed, 87 insertions, 4 deletions
diff --git a/front/src/Pages/Weapons.tsx b/front/src/Pages/Weapons.tsx
index d16762c..f918232 100644
--- a/front/src/Pages/Weapons.tsx
+++ b/front/src/Pages/Weapons.tsx
@@ -1,18 +1,101 @@
-import { useContext } from "react";
+import axios from "axios";
+import { useContext, useState } from "react";
+import { BackendURL } from "../Config";
 import { LanguageContext } from "../Locales/Context";
 import { GetLocalizedString } from "../Locales/Locales";
+import { RangedWeapon } from "../Models/RangedWeapon";
+
+const RangedWeaponsURL = `${BackendURL}/weapons/ranged`;
 
 function WeaponsIndex() {
-    var lang = useContext(LanguageContext);
+    const lang = useContext(LanguageContext);
+    const [rangedWeapons, setRangedWeapons] = useState<RangedWeapon[] | null>(null);
+
+    useState(() => {
+        getRangedWeapons().then(data => setRangedWeapons(data));
+    });
 
     return (
-        <div>
+        <div className="WeaponsDiv">
+        <span>
             <h1> {GetLocalizedString("Weapons index", lang)} </h1>
+        </span>
+            <h2> {GetLocalizedString("Ranged weapons", lang)} </h2>
+            {generatedRangedWeaponsList(rangedWeapons)}
         </div>
     );
 }
 
-function WeaponsType() {
+function generatedRangedWeaponsList(rangedWeapons: RangedWeapon[] | null): any {
+    if (!rangedWeapons) {
+        return (
+            <div> </div>
+        );
+    }
+
+    const categorized = new Map<string, RangedWeapon[]>();
+
+    rangedWeapons.forEach(el => {
+        if (!categorized.has(el.WeaponType)) {
+            categorized.set(el.WeaponType, new Array<RangedWeapon>());
+        }
+        categorized.get(el.WeaponType)?.push(el);
+    });
+
+    const keys = Array.from(categorized.keys());
+    const list = keys.map(x => {
+        const elements = categorized.get(x)?.map(w => {
+            return (
+            <tr key={w.Id}>
+                <td> {w.Name} </td>
+                <td> {w.WeaponType} </td>
+                <td> {w.Accuracy} </td>
+                <td> {w.Concealability} </td>
+                <td> {w.Avaliability} </td>
+                <td> {w.Damage}({w.Ammunition}) </td>
+                <td> {w.NumberOfShots} </td>
+                <td> {w.RateOfFire} </td>
+                <td> {w.Reliability} </td>
+            </tr>
+            )
+        });
+
+        return (
+            <tbody key={x}>
+                <tr> 
+                    <td className="CategoryName"> {`${x}s`} </td> 
+                </tr>
+                {elements}
+            </tbody>
+        );
+    });
+
+    return (
+        <table className="WeaponTable"> 
+        {list} 
+        </table>
+    );
+}
+
+async function getRangedWeapons(): Promise<RangedWeapon[]> { 
+    try {
+        const {data, status} = await axios.get<RangedWeapon[]>(
+            RangedWeaponsURL,
+            {
+                headers: { Accept: "application/json" }
+            }
+        );
+        
+        if (status != 200) {
+            return new Array<RangedWeapon>();
+        }
+
+        return data;
+
+    } catch (err) {
+        console.log(`Failed to get ranged weapons: ${err}`);
+        return new Array<RangedWeapon>();
+    }
 }
 
 export default WeaponsIndex;