Using new api

app/components/inventory.tsx

@@ -4,12 +4,22 @@ import { Agent } from "./agent";
 import { Weapon } from "./weapon";
 import { useNotification } from "~/hooks/notification";
 
+interface SkinInfo {
+    id: string;
+    name: string;
+    color: string;
+    display: string;
+    paint_index: number;
+    float: number;
+    pattern: number;
+}
+
 export function Inventory({ side }: { side: "T" | "CT" }) {
     const [loading, setLoading] = useState(true);
-    const [agent, setAgent] = useState({});
+    const [agent, setAgent] = useState<SkinInfo>();
-    const [gloves, setGloves] = useState({ name: "", color: "", display: "", paint_index: 0, float: 0.0, pattern: 0 });
+    const [gloves, setGloves] = useState<SkinInfo>();
-    const [knife, setKnife] = useState({ name: "", color: "", display: "", paint_index: 0, float: 0.0, pattern: 0 });
+    const [knife, setKnife] = useState<SkinInfo>();
-    const [weapons, setWeapons] = useState([]);
+    const [weapons, setWeapons] = useState<Array<SkinInfo>>([]);
     const { notify } = useNotification();
 
     useEffect(() => {
@@ -50,7 +60,46 @@ export function Inventory({ side }: { side: "T" | "CT" }) {
                     );
                 });
 
-            setGloves(response[0])
+            setGloves(response[0]);
+
+            response = await fetch(
+                `${import.meta.env.VITE_BASE_API_URL}/skin?team=${side}`,
+                { credentials: "include" },
+            )
+                .then((r) => r.json())
+                .catch((e) => {
+                    notify(
+                        {
+                            type: "danger",
+                            loading: false,
+                            title: "An error occured.",
+                            message: `An error occured: ${e}`,
+                        },
+                        10000,
+                    );
+                });
+
+            setWeapons(response);
+
+            response = await fetch(
+                `${import.meta.env.VITE_BASE_API_URL}/agent?team=${side}`,
+                { credentials: "include" },
+            )
+                .then((r) => r.json())
+                .catch((e) => {
+                    notify(
+                        {
+                            type: "danger",
+                            loading: false,
+                            title: "An error occured.",
+                            message: `An error occured: ${e}`,
+                        },
+                        10000,
+                    );
+                });
+
+            setAgent(response);
+
             setLoading(false);
         };
 
@@ -68,11 +117,11 @@ export function Inventory({ side }: { side: "T" | "CT" }) {
                     className="flex flex-col rounded-xl w-1/3 p-4 gap-2"
                     variant="secondary"
                 >
-                    <Skeleton className="flex-1 h-40 w-full rounded-xl" />
+                    <Skeleton className="flex-1 h-55 w-full rounded-xl" />
                     <div className="flex gap-2">
-                        <Skeleton className="flex-1 h-40 rounded-xl" />
+                        <Skeleton className="flex-1 h-55 rounded-xl" />
-                        <Skeleton className="flex-1 h-40 rounded-xl" />
+                        <Skeleton className="flex-1 h-55 rounded-xl" />
-                        <Skeleton className="flex-1 h-40 rounded-xl" />
+                        <Skeleton className="flex-1 h-55 rounded-xl" />
                     </div>
                 </Surface>
                 <Surface
@@ -81,7 +130,10 @@ export function Inventory({ side }: { side: "T" | "CT" }) {
                 >
                     <div className="absolute inset-4 flex-1 grid grid-cols-5 gap-2 overflow-y-scroll">
                         {Array.from({ length: 50 }, (_, index) => (
-                        <Skeleton key={index} className="flex-1 h-40 rounded-xl" />
+                            <Skeleton
+                                key={index}
+                                className="flex-1 h-55 rounded-xl"
+                            />
                         ))}
                     </div>
                 </Surface>
@@ -91,11 +143,12 @@ export function Inventory({ side }: { side: "T" | "CT" }) {
         return (
             <div className="flex flex-1 gap-2 min-h-0">
                 <Surface
-                    className="flex flex-col rounded-xl w-1/3 p-4 gap-2"
+                    className="flex flex-col rounded-xl w-1/3 p-4 gap-2 min-h-0"
                     variant="secondary"
                 >
-                    <Agent side={side}></Agent>
+                    {agent && <Agent agent_id={agent["name"]}></Agent>}
                     <div className="flex gap-2">
+                        {knife && (
                             <Weapon
                                 weapon_id={knife["name"]}
                                 color={knife["color"]}
@@ -104,6 +157,8 @@ export function Inventory({ side }: { side: "T" | "CT" }) {
                                 float={knife["float"]}
                                 pattern={knife["pattern"]}
                             ></Weapon>
+                        )}
+                        {gloves && (
                             <Weapon
                                 weapon_id={gloves["name"]}
                                 color={gloves["color"]}
@@ -112,10 +167,14 @@ export function Inventory({ side }: { side: "T" | "CT" }) {
                                 float={gloves["float"]}
                                 pattern={gloves["pattern"]}
                             ></Weapon>
+                        )}
+                        {agent && (
                             <Weapon
-                            weapon_id={"agent-4730"}
+                                weapon_id={agent["name"]}
-                            color="#8847ff"
+                                color={agent["color"]}
+                                display={agent["display"]}
                             ></Weapon>
+                        )}
                     </div>
                 </Surface>
                 <Surface
@@ -123,11 +182,15 @@ export function Inventory({ side }: { side: "T" | "CT" }) {
                     variant="secondary"
                 >
                     <div className="absolute inset-4 flex-1 grid grid-cols-5 gap-2 overflow-y-scroll">
-                        {Array.from({ length: 50 }, (_, index) => (
+                        {weapons.map((v, i) => (
                             <Weapon
-                                key={index}
+                                key={i}
-                                weapon_id="weapon_ak47"
+                                weapon_id={v.name}
-                                color="#e4ae39"
+                                color={v.color}
+                                paint_index={v.paint_index}
+                                display={v.display}
+                                float={v.float}
+                                pattern={v.pattern}
                             />
                         ))}
                     </div>