protected roads

src/App.jsx

@@ -2,7 +2,7 @@ import { useEffect, useState, Suspense, lazy } from 'react';
 import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
-import { auth } from './service/firebase';
+import { auth , getUserSubscription } from './service/firebase';
 import styles from './App.module.scss';
 import Loading from './pages/Loading/loading';
 import Pricing from './pages/Payement/Pricing/Pricing';
@@ -21,6 +21,7 @@ const App = () => {
   const [user, setUser] = useState(() => JSON.parse(localStorage.getItem('user')) || null);
   const [loading, setLoading] = useState(true);
   const [showLoading, setShowLoading] = useState(false);
+  const [subscription, setSubscription] = useState(0);
 
   useEffect(() => {
     const timeoutId = setTimeout(() => setShowLoading(true), 6000); 
@@ -28,10 +29,11 @@ const App = () => {
     const unsubscribe = auth.onAuthStateChanged((user) => {
       if (user) {
         localStorage.setItem('user', JSON.stringify(user));
+        setUser(user);
       } else {
         localStorage.removeItem('user');
+        setUser(null);
       }
-      setUser(user);
       setLoading(false);
       clearTimeout(timeoutId); 
     });
@@ -42,6 +44,20 @@ const App = () => {
     };
   }, []);
 
+  useEffect(() => {
+    if (user) {
+      const fetchSubscription = async () => {
+        try {
+          const userSubscription = await getUserSubscription(user.uid);
+          setSubscription(userSubscription || 0);
+        } catch (error) {
+          console.error('Error fetching subscription:', error);
+        }
+      };
+      fetchSubscription();
+    }
+  }, [user]);
+
   if (loading && showLoading) {
     return <Loading />;
   }
@@ -51,20 +67,34 @@ const App = () => {
       <div className={styles.container}>
         <Suspense fallback={<Loading />}>
           <Routes>
+            {/* Public Route */}
             <Route path="/login" element={user ? <Navigate to="/dashboard" /> : <LoginPage />} />
+
+            {/* Protected Routes (Requires Authentication) */}
             <Route path="/dashboard" element={user ? <DashboardPage user={user} /> : <Navigate to="/login" />} />
             <Route path="/createServer" element={user ? <CreatePage user={user} /> : <Navigate to="/login" />} />
-            <Route path="/createServer/java" element={user ? <Javapick user={user} /> : <Navigate to="/login" />} />
-            <Route path="/createServer/bedrock" element={user ? <Bedrock user={user} /> : <Navigate to="/login" />} />
-            <Route path="/createServer/modpack" element={user ? <Modpack user={user} /> : <Navigate to="/login" />} />
+
+            {/* Routes with Subscription Levels */}
+            <Route path="/createServer/java" element={user ? (subscription > 0 ? <Javapick user={user} /> : <Navigate to="/payement?package=Gratuit" />) : <Navigate to="/login" />} />
+            <Route path="/createServer/bedrock" element={user ? (subscription > 1 ? <Bedrock user={user} /> : <Navigate to="/payement?package=Standard" />) : <Navigate to="/login" />} />
+            <Route path="/createServer/modpack" element={user ? (subscription > 2 ? <Modpack user={user} /> : <Navigate to="/payement?package=Premium" />) : <Navigate to="/login" />} />
+
+            {/* Server Details Route */}
             <Route path="/server/:serverName/*" element={user ? <ServerDetails user={user} /> : <Navigate to="/login" />} />
+
+            {/* Pricing and Payment */}
             <Route path="/pricing" element={user ? <Pricing user={user} /> : <Navigate to="/login" />} />
             <Route path="/payement/*" element={user ? <PaymentForm user={user} /> : <Navigate to="/login" />} />
             <Route path="/return/*" element={user ? <Checkout user={user} /> : <Navigate to="/login" />} />
+
+            {/* Default Route */}
             <Route path="/" element={<Navigate to={user ? "/dashboard" : "/login"} />} />
+
+            {/* Catch-all route */}
             <Route path="*" element={user ? <DashboardPage user={user} /> : <Navigate to="/login" />} />
           </Routes>
         </Suspense>
+
         <ToastContainer
           position="top-right"
           autoClose={3500}