fix profile viewing

theme-costume-app/src/Home.js

@@ -63,13 +63,14 @@ const Home = () => {
         <Typography 
           variant='h3'
           color='primary'
+          paddingLeft={5}
           >
           All products
           </Typography>
         
           <Grid container spacing={2}>
           {products.map((product) => (
-            <Grid key={product.id} item xs={12} sm={6} md={4} lg={3}>
+            <Grid key={product.id} item xs={12} sm={6} md={4} lg={3} display={'flex'} justifyContent={'center'}>
               <Product 
                 id={product.id} 
                 ownerID={product.user_id}

theme-costume-app/src/Profile.js

@@ -12,21 +12,40 @@ import DialogTitle from '@mui/material/DialogTitle';
 import TextField from '@mui/material/TextField';
 import MenuItem from '@mui/material/MenuItem';
 import { addProduct, getLoggedInUser, getAllProducts } from './utils/api';
+import { useNavigate } from 'react-router-dom';
 
-const user2 = [
-  { name: 'GÖRAN', email: 'pengarfinns@inte.nu', age: '48', profilePicture: yellowSuit }
-];
 
 const sizes = ['X-Small', 'Small', 'Medium', 'Large', 'X-Large'];
 
+const ProfilePage = () => {
+  const [user, setUser] = useState({});
+  const [isLoggedIn, setLoggedIn] = useState(false);
 
+  
+  // Fetch user when the component mounts
+  const navigate = useNavigate();
+  useEffect(() => {
+    const fetchUser = async () => {
+      const result = await getLoggedInUser();
+      console.log('result: ', result)
+      if (result != false) {
+        setUser(result);
+        setLoggedIn(true)
+      } else {
+        navigate('/login')
+      }
+    };
 
+    fetchUser();
+  }, []); 
 
-const ProfilePage = () => {
-  // Accessing the first element of the user array
-  const currentUser = user2[0];
-
-  //const [products, setProducts] = useState(initialProducts);
+  // Accessing profile information
+  const currentUser = {
+    name: user.username,
+    email: user.email,
+    age: '48',
+    profilePicture: yellowSuit,
+  };
 
   // State to manage modal visibility
   const [open, setOpen] = useState(false);
@@ -82,7 +101,7 @@ const ProfilePage = () => {
       price: formData.price,
       rentPrice: formData.rentPrice,
       size: formData.size,
-      userID: user,
+      userID: user.id,
     };
   
     try {
@@ -104,7 +123,6 @@ const ProfilePage = () => {
 
 const [loading, setLoading] = useState(true);
 const [error, setError] = useState(null);
-const [user, setUser] = useState(null);
 const [loadingUser, setLoadingUser] = useState(true);
   const [errorUser, setErrorUser] = useState(null);
   
@@ -112,52 +130,6 @@ const [loadingUser, setLoadingUser] = useState(true);
   const [loadingProducts, setLoadingProducts] = useState(true);
   const [errorProducts, setErrorProducts] = useState(null);
 
-//const [categories, setUser] = useState([]);
-//const [loadingCategories, setLoadingUser] = useState(true);
-//const [errorCategories, setErrorUser] = useState(null);
-
-
-//const initialProducts = [
-//  { name: 'Nunna', picture: nun, price: '29.99' },
-//  { name: 'Sjuksköterska', picture: sjuksköterska, price: '39.99' },
-//  { name: 'Nunna', picture: nun, price: '29.99' },
-//  { name: 'Sjuksköterska', picture: sjuksköterska, price: '39.99' },
-//  { name: 'Nunna', picture: nun, price: '29.99' },
-//  { name: 'Sjuksköterska', picture: sjuksköterska, price: '39.99' },
-  //];
-  
-//useEffect(() => {
-//  axios.get('http://127.0.0.1:8000/themeApp/user/')
-//    .then(response => {
-//      setUser(response.data.user);
-//      console.log("SUcccesss : ", response.data.user);
-//      setLoadingUser(false);
-//    })
-//    .catch(error => {
-//      setErrorUser(error);
-//      setLoadingUser(false);
-//    });
-//}, [])
-//if (loading) return <p>Loading...</p>;
-//if (error) return <p>Error loading products: {error.message}</p>;
-  
-  // Fetch user when the component mounts
-  useEffect(() => {
-    const fetchUser = async () => {
-      try {
-        const result = await getLoggedInUser();
-        setUser(result.id);
-        // You can perform additional actions here, like updating the UI
-      } catch (error) {
-        console.error('Error:', error);
-        setErrorUser(error);
-      } finally {
-        setLoadingUser(false);
-      }
-    };
-
-    fetchUser();
-  }, []); 
   
   useEffect(() => {
     const fetchProducts = async () => {
@@ -195,7 +167,7 @@ const [loadingUser, setLoadingUser] = useState(true);
           {/* Add more user information fields as needed */}
         </div>
       </div>
-       <Box sx={{display: 'flex', justifyContent:'center'}}>
+      <Box sx={{display: 'flex', justifyContent:'center'}}>
         <Button variant="contained" onClick={handleClickOpen}>Lägg till ny produkt</Button>      
       </Box>
       <Dialog open={open} onClose={handleClose}>
@@ -269,7 +241,7 @@ const [loadingUser, setLoadingUser] = useState(true);
       </Dialog>
       <div className="mainContent">
         <div className="productListContainer">
-          <h2 style={{ textAlign: 'center' }}>Currently Listed Products:</h2>
+          <h2 style={{ textAlign: 'center' }}>Dina listade produkter:</h2>
           <ul className="productList">
             {products.map((product, index) => (
               <li key={index} className="productItem" style={{ animationDelay: `${index * 0.4}s` }}>
@@ -283,10 +255,10 @@ const [loadingUser, setLoadingUser] = useState(true);
           </ul>
         </div>
         <div className="notificationSection">
-          <h2 style={{ textAlign: 'center' }}>Notifications:</h2>
+          <h2 style={{ textAlign: 'center' }}>Notifikationer:</h2>
           {notifications.length === 0 ? (
             <div className="noNotifications">
-              <p className="noNotificationsText">No notifications at the moment</p>
+              <p className="noNotificationsText">Inga notifikationer för tillfället</p>
               <img src={noNotificationsImage} alt="No Notifications" className="noNotificationsImage" />
             </div>
           ) : (