Fix sous domaine bug

src/components/CreateServer/CreateServer.jsx

@@ -3,8 +3,8 @@ import styles from './CreateServer.module.scss';
 import { getUserSubdomain } from "../../service/firebase";
 import serviiApi from "../../service/api.tsx";
 
-const CreateServer = ({ user, onCreateServer }) => {
-  const [subdomain, setSubdomain] = useState('loading');
+const CreateServer = ({ user, onCreateServer, onSubdomainUpdate }) => {
+  const [subdomain, setSubdomain] = useState(null);
   const [subdomainInput, setSubdomainInput] = useState('');
   const [serverName, setServerName] = useState('');
   const [serverVersion, setServerVersion] = useState('');
@@ -13,7 +13,8 @@ const CreateServer = ({ user, onCreateServer }) => {
     try {
       if (user && user.uid) {
         const userSubdomain = await getUserSubdomain(user.uid);
-        setSubdomain(userSubdomain);
+        setSubdomain(userSubdomain || '');
+        onSubdomainUpdate(userSubdomain || '');
         console.log('Subdomain:', userSubdomain);
       } else {
         console.error('User or user.uid is undefined');
@@ -31,6 +32,7 @@ const CreateServer = ({ user, onCreateServer }) => {
     try {
       await serviiApi.setSubdomain(subdomainInput);
       setSubdomain(subdomainInput);
+      onSubdomainUpdate(subdomainInput);
     } catch (error) {
       console.error('Error setting subdomain:', error);
     }
@@ -44,9 +46,10 @@ const CreateServer = ({ user, onCreateServer }) => {
     }
   };
 
-  if (subdomain === 'loading') {
+  if (subdomain === null) {
     return (
       <div className={styles.container}>
+        <div>Loading...</div>
       </div>
     );
   }

src/components/navbar/Navbar.jsx

@@ -4,7 +4,6 @@ import styles from './Navbar.module.scss';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faUser, faCog, faSignOutAlt } from '@fortawesome/free-solid-svg-icons';
 
-
 const Navbar = ({ user }) => {
   const [dropdownOpen, setDropdownOpen] = useState(false);
   const dropdownRef = useRef(null);
@@ -34,19 +33,23 @@ const Navbar = ({ user }) => {
     };
   }, []);
 
+  useEffect(() => {
+    console.log('User data:', user); 
+  }, [user]);
+
   return (
     <div className={styles.navbar}>
       <div className={styles.profileSection} onClick={toggleDropdown}>
-        {user.photoURL ? (
+        {user && user.photoURL ? (
           <img src={user.photoURL} alt="Profile" className={styles.profilePic} />
         ) : (
-          <h1>hello</h1>
+          <div className={styles.defaultProfilePic}>A</div> 
         )}
       </div>
       {dropdownOpen && (
         <div className={styles.dropdownMenu} ref={dropdownRef}>
           <div className={styles.menuItem} onClick={toggleDropdown}>
-             {auth.currentUser.displayName}
+            {user && user.displayName}
           </div>
           <div className={styles.menuItem} onClick={toggleDropdown}>
             <FontAwesomeIcon icon={faUser} className={styles.icon}/> Informations

src/components/navbar/Navbar.module.scss

@@ -18,11 +18,20 @@
   cursor: pointer;
 }
 
-.profilePic {
+.profilePic, .defaultProfilePic {
   width: var(--profile-pic-size);
   height: var(--profile-pic-size);
   border-radius: 100%;
   margin-right: 3rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.defaultProfilePic {
+  background-color: #ccc;
+  color: #fff; 
+  font-size: 1.5rem;
 }
 
 .dropdownMenu {
@@ -39,7 +48,7 @@
   font-size: 1.1rem;
 }
 
-.menuItem {
+.menuItem, .menuItemLogout {
   padding: 1.25rem 2rem; 
   cursor: pointer;
   transition: background-color 0.3s, color 0.3s;
@@ -47,24 +56,15 @@
 }
 
 .menuItemLogout {
-  padding: 1.25rem 2rem; 
-  cursor: pointer;
-  transition: background-color 0.3s, color 0.3s;
-  font-weight: bold;
   border-top: .15rem solid #444444;
 }
 
-.menuItem:hover {
+.menuItem:hover, .menuItemLogout:hover {
   background-color: #1f202479;
   color: var(--primary-color);
 }
 
-.menuItemLogout:hover{
-  background-color: #1f202479;
-  color: var(--primary-color);
-}
-
-.icon{
+.icon {
   margin-right: 1rem;
   font-size: 1.25rem;
 }

src/pages/DashboardPage/DashboardPage.jsx

@@ -10,7 +10,7 @@ import CreateServer from '../../components/CreateServer/CreateServer';
 
 const DashboardPage = ({ user }) => {
   const [servers, setServers] = useState([]);
-  const [subdomain, setSubdomain] = useState("");
+  const [subdomain, setSubdomain] = useState(null);
   const [loading, setLoading] = useState(true);
   const [showCreateServer, setShowCreateServer] = useState(false);
 
@@ -22,8 +22,12 @@ const DashboardPage = ({ user }) => {
       const sortedServers = data.sort((a, b) => b.running - a.running);
       setServers(sortedServers);
 
-      const userSubdomain = await getUserSubdomain(user.uid);
-      setSubdomain(userSubdomain);
+      if (user && user.uid) {
+        const userSubdomain = await getUserSubdomain(user.uid);
+        setSubdomain(userSubdomain || '');
+      } else {
+        console.error('User or user.uid is undefined');
+      }
     } catch (error) {
       console.error('Error fetching data:', error);
     } finally {
@@ -77,15 +81,20 @@ const DashboardPage = ({ user }) => {
     }
   };
 
-  if (showCreateServer) {
-    return <CreateServer user={user} onCreateServer={handleCreateServer} />;
+  if (loading) {
+    return (
+      <div className={styles.dashboardContainer}>
+        <Navbar user={user} />
+        <Loading />
+      </div>
+    );
   }
 
   return (
     <div className={styles.dashboardContainer}>
       <Navbar user={user} />
-      {loading ? (
-        <Loading />
+      {showCreateServer ? (
+        <CreateServer user={user} onCreateServer={handleCreateServer} onSubdomainUpdate={setSubdomain} />
       ) : (
         <div className={styles.cardsContainer}>
           {servers.length === 0 ? (