head integration and console disconnect bug fixxed

src/pages/PlayersStatus/PlayersStatus.jsx

@@ -3,25 +3,32 @@ import serviiApi from "../../service/api.tsx";
 import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 
+const getPlayerhead = async (username) => {
+    try {
+        const response = await fetch(`https://mc-heads.net/avatar/${username}/64.png`);
+        return response.url;
+    } catch (error) {
+        console.error('Error fetching player head:', error);
+    }
+}
+
 const PlayerStatus = () => {
     const { serverName } = useParams(); 
 
     const [whiteListUsername, setWhiteListUsername] = useState('');
     const [adminUsername, setAdminUsername] = useState('');
     const [banUsername, setBanUsername] = useState('');
-    const [banipUsername, setBanipUsername] = useState('');
 
     const [whitelist, setWhitelist] = useState([]);
     const [operators, setOperators] = useState([]);
     const [bannedPlayers, setBannedPlayers] = useState([]);
-    const [bannedIps, setBannedIps] = useState([]);
+
+    const [avatars, setAvatars] = useState({});
 
     const loadPlayersStatus = async () => {
         try {
             const ApiResponse = await serviiApi.fetchPlayersStatus(serverName);
 
-            console.log("API Response:", ApiResponse);
-
             const cleanAndParse = (data) => {
                 if (data) {
                     const cleanedData = data.replace(/\\n/g, '').replace(/\\r/g, '');
@@ -33,12 +40,20 @@ const PlayerStatus = () => {
             const parsedWhitelist = cleanAndParse(ApiResponse.message.Whitelist);
             const parsedOperators = cleanAndParse(ApiResponse.message.Operators);
             const parsedBannedPlayers = cleanAndParse(ApiResponse.message.BannedPlayers);
-            const parsedBannedIps = cleanAndParse(ApiResponse.message.BannedIps);
 
             setWhitelist(parsedWhitelist || []);
             setOperators(parsedOperators || []);
             setBannedPlayers(parsedBannedPlayers || []);
-            setBannedIps(parsedBannedIps || []);
+
+            const allPlayers = [...parsedWhitelist, ...parsedOperators, ...parsedBannedPlayers];
+            const avatarsPromises = allPlayers.map(player =>
+                getPlayerhead(player.name).then(url => ({ [player.uuid]: url }))
+            );
+
+            const avatarsArray = await Promise.all(avatarsPromises);
+            const avatarsMap = Object.assign({}, ...avatarsArray);
+
+            setAvatars(avatarsMap);
 
         } catch (error) {
             console.error('Error fetching data:', error);
@@ -76,12 +91,8 @@ const PlayerStatus = () => {
                     serverCommande = `op ${username}`;
                     break;
                 case 'ban':
-                    serverCommande = `ban  ${username}`;
+                    serverCommande = `ban ${username}`;
                     break;
-                case 'banip':
-                    serverCommande = `banip ${username}`;
-                    break;
-                
                 default:
                     break;
             }
@@ -95,7 +106,28 @@ const PlayerStatus = () => {
 
     useEffect(() => {
         loadPlayersStatus();
-    }, []); // Dependency array added
+    }, []); 
+
+    const renderPlayerItem = (player) => {
+        const avatarUrl = avatars[player.uuid];
+
+        const isIp = /^[0-9]+\.[0-9]+\.[0-9]+\.[0-9]+$/.test(player.name);
+
+        if (isIp) {
+            return null;
+        }
+
+        return (
+            <div key={player.uuid} className={styles.playerItem}>
+                {avatarUrl ? ( 
+                    <img src={avatarUrl} alt="head" className={styles.playerAvatar} />
+                ) : (
+                    <div className={styles.missingAvatar}>Avatar non disponible</div>
+                )}
+                <span className={styles.playerName}>{player.name}</span>
+            </div>
+        );
+    }
 
     return (
         <div className={styles.container}>
@@ -117,7 +149,7 @@ const PlayerStatus = () => {
                 </div>
                 <div className={styles.playerList}>
                     {whitelist.length > 0 ? (
-                        whitelist.map(player => <div key={player.uuid}>{player.name}</div>)
+                        whitelist.map(renderPlayerItem)
                     ) : (
                         <div>Aucun joueur dans la liste blanche</div>
                     )}
@@ -141,7 +173,7 @@ const PlayerStatus = () => {
                 </div>
                 <div className={styles.playerList}>
                     {operators.length > 0 ? (
-                        operators.map(player => <div key={player.uuid}>{player.name}</div>)
+                        operators.map(renderPlayerItem)
                     ) : (
                         <div>Aucun administrateur</div>
                     )}
@@ -165,36 +197,12 @@ const PlayerStatus = () => {
                 </div>
                 <div className={styles.playerList}>
                     {bannedPlayers.length > 0 ? (
-                        bannedPlayers.map(player => <div key={player.uuid}>{player.name}</div>)
+                        bannedPlayers.map(renderPlayerItem)
                     ) : (
                         <div>Aucun joueur banni</div>
                     )}
                 </div>
             </div>
-            <div>
-                <div className={styles.titlesection}>IP bannies</div>
-                <div className={styles.inputSection}>
-                    <input 
-                        type="text" 
-                        placeholder="Nom d'utilisateur" 
-                        value={banipUsername} 
-                        onChange={(e) => setBanipUsername(e.target.value)}
-                    />
-                    <button 
-                        className={styles.sendButton} 
-                        onClick={() => handlePlayerStatus(banipUsername, 'banip', () => setBanipUsername(''))}
-                    >
-                        Envoyer
-                    </button>
-                </div>
-                <div className={styles.playerList}>
-                    {bannedIps.length > 0 ? (
-                        bannedIps.map(ip => <div key={ip}>{ip}</div>)
-                    ) : (
-                        <div>Aucune IP bannie</div>
-                    )}
-                </div>
-            </div>
         </div>
     );
 }

src/pages/PlayersStatus/PlayersStatus.module.scss

@@ -35,3 +35,21 @@ input {
     font-weight: 400;
     margin-top: 3rem;
 }
+
+.playerItem {
+    display: flex;
+    align-items: center;
+    margin: 1rem 0;
+}
+
+.playerAvatar {
+    width: 3rem;
+    height: 3rem;
+    margin-right: 0.5rem;
+    border-radius: 4px;
+}
+
+.playerName {
+    font-size: 1.5rem;
+    font-weight: 400;
+}

src/pages/ServerDetails/ServerDetails.jsx

@@ -5,30 +5,32 @@ import ServerProperties from '../ServerProperties/ServerProperties';
 import ServerConsole from '../ServerConsole/ServerConsole';
 import ServerHistory from '../ServerHistory/ServerHistory';
 import PlayerStatus from '../PlayersStatus/PlayersStatus';
-// import ServerWorlds from '../ServerWorlds/ServerWorlds';
-// import ServerBackups from '../ServerBackups/ServerBackups';
-// import ServerAccess from '../ServerAccess/ServerAccess';
 import FeatureSoon from './FeatureSoon';
 import styles from './ServerDetails.module.scss';
 import PropTypes from "prop-types";
 import { FaCogs, FaUserFriends, FaGlobe, FaHistory, FaClipboardList, FaSave, FaLock } from 'react-icons/fa';
 import { TbArrowBackUp } from 'react-icons/tb';
-import { FiChevronsLeft,FiChevronsRight  } from "react-icons/fi";
+import { FiChevronsLeft, FiChevronsRight } from "react-icons/fi";
 import NotFoundPage from '../NotFoundPage/NotFoundPage';
 import { useLocation } from 'react-router-dom';
 
 const ServerDetails = ({ user }) => {
   const { serverName } = useParams(); 
   const location = useLocation();
-  const initialStatus = location.state?.status || false;  
+  
+  const initialStatus = location.state?.status ?? JSON.parse(localStorage.getItem('status')) ?? false;
   const [status, setStatus] = useState(initialStatus);
   const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
 
   useEffect(() => {
-    if (location.state?.status !== undefined) {
-      setStatus(location.state.status);
+    if (location.pathname.includes('/console')) {
+      setStatus(initialStatus);      
     }
-  }, [location]);
+  }, [location.pathname, initialStatus]);
+
+  useEffect(() => {
+    localStorage.setItem('status', JSON.stringify(status));
+  }, [status]);
 
   const handleSidebarToggle = () => {
     setIsSidebarCollapsed(!isSidebarCollapsed);
@@ -40,9 +42,9 @@ const ServerDetails = ({ user }) => {
       <div className={`${styles.container} ${isSidebarCollapsed ? styles.collapsed : ''}`}>
         <div className={`${styles.sidebar} ${isSidebarCollapsed ? styles.collapsed : ''}`}>
           <div className={styles.menu}>            
-              <div className={styles.toggleButton} onClick={handleSidebarToggle}>
-                {isSidebarCollapsed ? <FiChevronsRight /> : <FiChevronsLeft />}
-              </div>
+            <div className={styles.toggleButton} onClick={handleSidebarToggle}>
+              {isSidebarCollapsed ? <FiChevronsRight /> : <FiChevronsLeft />}
+            </div>
             <NavLink 
               to={`/server/${serverName}/options`} 
               className={({ isActive }) => isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}>