api fetch type fixed

src/helpers/apiRequests.ts

@@ -24,7 +24,7 @@ import {
 // Types
 import { ContactData, Contact } from "../types/contact";
 import { Video } from "../types/video";
-import { playerType } from "../types/players";
+import { Player, playerType } from "../types/players";
 import { About } from "../types/about";
 
 export const getMainSliderData = (
@@ -154,11 +154,14 @@ export const getEvents = (setState: any) => {
     .catch();
 };
 
-export const getPlayerInfo = (setState: any, link: string) => {
+export const getPlayerInfo = (
+  setState: React.Dispatch<Player>,
+  link: string
+) => {
   axios
     .get(link)
     .then((res) => {
-      setState(res.data.data);
+      setState(res.data.data[0]);
     })
     .catch();
 };

src/pages/PlayerProfile.tsx

@@ -14,8 +14,18 @@ import useMediaQuery from "../hooks/useMediaQuery";
 import { hosting } from "../links";
 import { players } from "../links";
 
+// Types
+import { Player } from "../types/players";
+
 const PlayerProfile = () => {
-  const [playerInfo, setPlayerInfo]: [any, React.Dispatch<any>] = useState();
+  const [playerInfo, setPlayerInfo]: [Player, React.Dispatch<Player>] =
+    useState({
+      id: -1,
+      name: "",
+      average: -1,
+      national: -1,
+      img: "",
+    });
   const { playerId } = useParams();
 
   useEffect(() => {
@@ -31,10 +41,13 @@ const PlayerProfile = () => {
     <main className="pp">
       <div className="container">
         <div className="pp-inner">
-          <div className={!playerInfo ? "pp-left" : "pp-left ready"}>
-            {playerInfo ? (
+          <div className={playerInfo.id === -1 ? "pp-left" : "pp-left ready"}>
+            {playerInfo.id !== -1 ? (
               <div>
-                <img src={hosting + playerInfo[0].img} alt="" />
+                <img
+                  src={hosting + "/storage/app/media" + playerInfo.img}
+                  alt=""
+                />
               </div>
             ) : (
               <Skeleton
@@ -47,8 +60,8 @@ const PlayerProfile = () => {
           </div>
           <div className="pp-right">
             <div className="pp-right-top">
-              {playerInfo ? (
-                <h3>{playerInfo[0].name}</h3>
+              {playerInfo.id !== -1 ? (
+                <h3>{playerInfo.name}</h3>
               ) : (
                 <Skeleton
                   highlightColor={highlightColor}
@@ -59,10 +72,10 @@ const PlayerProfile = () => {
               )}
               <div className="pp-right-top-content">
                 <ul>
-                  {playerInfo ? (
+                  {playerInfo.id !== -1 ? (
                     <li>
                       <span className="pp-identifier">ID</span>
-                      <p>{playerInfo[0].id}</p>
+                      <p>{playerInfo.id}</p>
                     </li>
                   ) : (
                     <li>
@@ -84,7 +97,7 @@ const PlayerProfile = () => {
                       />
                     </li>
                   )}
-                  {playerInfo ? (
+                  {playerInfo.id !== -1 ? (
                     <li>
                       <span className="pp-identifier">Звание</span>
                       <p>
@@ -112,7 +125,7 @@ const PlayerProfile = () => {
                       />
                     </li>
                   )}
-                  {playerInfo ? (
+                  {playerInfo.id !== -1 ? (
                     <li>
                       <span className="pp-identifier">Год рождения</span>
                       <p>
@@ -145,7 +158,7 @@ const PlayerProfile = () => {
             </div>
             <div className="pp-right-bottom">
               <h3>
-                {playerInfo ? (
+                {playerInfo.id !== -1 ? (
                   "Rating"
                 ) : (
                   <Skeleton
@@ -158,10 +171,10 @@ const PlayerProfile = () => {
               </h3>
               <div className="pp-right-bottom-content">
                 <ul>
-                  {playerInfo ? (
+                  {playerInfo.id !== -1 ? (
                     <li>
                       <span className="pp-identifier">Classic</span>
-                      <p>{playerInfo[0].average}</p>
+                      <p>{playerInfo.average}</p>
                     </li>
                   ) : (
                     <li>
@@ -183,7 +196,7 @@ const PlayerProfile = () => {
                       />
                     </li>
                   )}
-                  {playerInfo ? (
+                  {playerInfo.id !== -1 ? (
                     <li>
                       <span className="pp-identifier">Rapid</span>
                       <p>
@@ -211,7 +224,7 @@ const PlayerProfile = () => {
                       />
                     </li>
                   )}
-                  {playerInfo ? (
+                  {playerInfo.id !== -1 ? (
                     <li>
                       <span className="pp-identifier">Blitz</span>
                       <p>