Merge branch 'rm-unnecessary' into 'main'

Rm unnecessary

See merge request !17

mysite/themeApp/urls.py

@@ -14,7 +14,7 @@ urlpatterns = [
     path('register/', views.UserRegister.as_view(), name='register'),
     path('logout/', views.Logout.as_view(), name='logout'),
     path('user/', views.UserView.as_view(), name='user'),
-    path('products/<int:user_id>', views.UserProducts.as_view(), name='products'),
+    path('products/<int:user_id>', views.UserProducts.as_view(), name='products'), # not used currently
     path('home/', views.HomeView.as_view(), name='home'),
     path('getproducts/', views.ProductView.as_view(), name='product'),
     path('hometry/', views.HomeViewTry.as_view(), name="try"),

theme-costume-app/src/About.js

-import React from 'react';
-import MyComponent from './components/MyComponent';
-
-const About = () => {
-  return (
-    <div>
-      <h2>About Page</h2>
-      <p>Learn more about our company.</p>
-      <MyComponent />
-    </div>
-  );
-};
-
-export default About;

theme-costume-app/src/App.js

 import React, {useState} from 'react';
 import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
 import Home from './Home';
-import About from './About';
 import Profile from './Profile';
-import Charts from './Charts';
-import Dashboard from './Dashboard';
 import Login from './Login';
 import ResponsiveAppBar from './components/ResponsiveAppBar';
 import CategoriesPage from './CategoriesPage';
@@ -30,15 +27,9 @@ function App() {
         <ResponsiveAppBar cartItems={[]}/>
         <Routes>
           <Route exact path="/" Component={Home} />
-          <Route path="/about" Component={About} /> 
           <Route path="/profile" element={<Profile user={user} onSignup={handleSignup}/>} />
-          <Route path="/about" Component={Home} />
-          <Route path="/Charts" Component={Charts} />
           <Route path="/" element={<Home />} />
-          <Route path="/news" element={<About />} />
-          <Route path="/Topplistan" element={<Charts />} />
           <Route path="/Categories" element={<CategoriesPage />} />
-          <Route path="/dashboard" element={<Dashboard />} />
           <Route path="/login" element={<Login />} />
           <Route path="/cart" element={<Cart />} />
         </Routes>  

theme-costume-app/src/Charts.js

-import React, { useState, useEffect } from 'react';
-import axios from 'axios';
-import Carousel from './components/Carousel';
-import halloweenImg from './assets/halloween3.jpg'
-import christmasImg from './assets/christmas.jpg'
-import collegeImg from './assets/college.webp'
-
-import Product from './components/Product';
-import { Grid, ThemeProvider, Typography } from '@mui/material';
-
-import cheerleader from './assets/manlig-hejarklacksledare.jpg';
-import yellowSuit from './assets/suitmeister-gul-kostym.jpg';
-import glitterHatt from './assets/glitterhatt-guld.jpg';
-import bananaCostume from './assets/banan-maskeraddrakt.jpg'
-import grandma from './assets/grandma-maskeraddrakt.jpg'
-import cow from './assets/kossa-budget.jpg'
-import cheerleaderRed from './assets/manlig-hejarklacksledare-rod.jpg'
-import nun from './assets/manlig-nunna.jpg'
-import sjuksköterska from './assets/manlig-sjukskoterska.jpg'
-import tennisProf from './assets/tennisproffs-maskeraddrakt.jpg'
-import theme from './styles/theme.js'
-
-
-const Home = () => {
-
-  const [categories, setCategories] = useState([]);
-  const [loadingCategories, setLoadingCategories] = useState(true);
-  const [errorCategories, setErrorCategories] = useState(null);
-
-  useEffect(() => {
-    axios.get('http://127.0.0.1:8000/themeApp/categories/')
-      .then(response => {
-        setCategories(response.data);
-        setLoadingCategories(false);
-      })
-      .catch(error => {
-        setErrorCategories(error);
-        setLoadingCategories(false);
-      });
-  }, []);
-
-  const products = [
-    { id: 1, imageUrl: cheerleader, price: 29.99, categories: ['College'], purchases: 40},
-    { id: 2, imageUrl: yellowSuit, price: 39.99, categories: ['Christmas'], purchases: 50 },
-    { id: 3, imageUrl: glitterHatt, price: 49.99, categories: ['Christmas'], purchases: 10 },
-    { id: 4, imageUrl: bananaCostume, price: 29.99, categories: ['College'], purchases: 20 },
-    { id: 5, imageUrl: grandma, price: 39.99, categories: ['Family'], purchases: 30 },
-    { id: 6, imageUrl: cow, price: 49.99, categories: ['Farm'], purchases: 60 },
-    { id: 7, imageUrl: cheerleaderRed, price: 49.99, categories: ['College'], purchases: 70 },
-    { id: 8, imageUrl: nun, price: 29.99, categories: ['Halloween'], purchases: 80 },
-    { id: 9, imageUrl: sjuksköterska, price: 39.99, categories: ['Halloween'], purchases: 90 },
-    { id: 10, imageUrl: tennisProf, price: 49.99, categories: ['Halloween'], purchases: 100 },
-    // Add more products as needed
-  ];
-
-  const sortedProducts = products.slice().sort((a, b) => b.purchases - a.purchases);
-
-
-  return (
-    <ThemeProvider theme={theme}>
-
-    <div>
-      {loadingCategories ? (
-          <p>Loading categories...</p>
-        ) : errorCategories ? (
-          <p>Error loading categories: {errorCategories.message}</p>
-        ) : (
-          <Carousel showingItems={1} items={categories.map(category => ({
-            name: category.name,
-            source: category.image
-          }))} />
-        )}
-      <div style={{ padding: 16 }}>
-        <Typography 
-          variant='h3'
-          color='primary'
-          >
-          Topplistan
-        </Typography>
-        <Grid container spacing={3}>
-          {sortedProducts.map((product) => (
-            <Grid key={product.id} item xs={12} sm={6} md={4} lg={3}>
-              <Product imageUrl={product.imageUrl} price={product.price} />
-            </Grid>
-          ))}
-        </Grid>
-      </div>
-    </div>
-    </ThemeProvider>
-  );
-};
-
-export default Home;

theme-costume-app/src/Profile.js

@@ -20,6 +20,7 @@ const sizes = ['X-Small', 'Small', 'Medium', 'Large', 'X-Large'];
 const ProfilePage = () => {
   const [user, setUser] = useState({});
   const [isLoggedIn, setLoggedIn] = useState(false);
+  const [products, setProducts] = useState([]);
 
   
   // Fetch user when the component mounts
@@ -28,7 +29,7 @@ const ProfilePage = () => {
     const fetchUser = async () => {
       const result = await getLoggedInUser();
       console.log('result: ', result)
-      if (result != false) {
+      if (result !== false) {
         setUser(result);
         setLoggedIn(true)
       } else {
@@ -102,15 +103,15 @@ const ProfilePage = () => {
       rentPrice: formData.rentPrice,
       size: formData.size,
       userID: user.id,
+      categories: [],
     };
   
     try {
-      const result = await addProduct(newProduct.picture, newProduct.price, newProduct.rentPrice, newProduct.name, newProduct.size, newProduct.userID);
+      const result = await addProduct(newProduct.picture, newProduct.price, newProduct.rentPrice, newProduct.name, newProduct.size, newProduct.userID, newProduct.categories);
       
-      if (result === 201) { // Assuming 201 is the status code for successful creation
+      if (result.status === 201) { // Assuming 201 is the status code for successful creation
         setProducts([...products, result.data]); // Assuming the API returns the new product data
         console.log('Product added successfully:', result.data);
-        window.location.reload(); 
         handleClose(); // Close the modal or form
       } 
     } catch (error) {
@@ -121,15 +122,9 @@ const ProfilePage = () => {
 
   
 
-const [loading, setLoading] = useState(true);
-const [error, setError] = useState(null);
-const [loadingUser, setLoadingUser] = useState(true);
-  const [errorUser, setErrorUser] = useState(null);
   
-  const [products, setProducts] = useState([]);
   const [loadingProducts, setLoadingProducts] = useState(true);
   const [errorProducts, setErrorProducts] = useState(null);
-
   
   useEffect(() => {
     const fetchProducts = async () => {
@@ -137,7 +132,7 @@ const [loadingUser, setLoadingUser] = useState(true);
         const result = await getAllProducts();
   
         if (user) {
-          const filteredProducts = result.data.filter(product => product.user_id === user);
+          const filteredProducts = result.data.filter(product => product.user_id === user.id);
           setProducts(filteredProducts);
         } else {
           console.warn('User ID is null or undefined');

theme-costume-app/src/components/ResponsiveAppBar.js

@@ -22,14 +22,11 @@ import Badge from '@mui/material/Badge';
 //const pages = ['Kategorier', 'Nyheter', 'Topplistan'];
 const pages = [
   { title: 'Kategorier', link: '/categories' },
-  { title: 'Nyheter', link: '/news' },
-  { title: 'Topplistan', link: '/Topplistan' },
 ];
 
 const settings = [
   {title: 'Profile', link: '/profile'},
-  {title: 'Dashboard', link: '/dashboard'},
-  {title: 'Logout', link: '/logout'},
+  // {title: 'Logout', link: '/logout'},
 ];
 
 function ResponsiveAppBar({ cartItems }) {

theme-costume-app/src/utils/api.js

@@ -6,7 +6,6 @@ axios.defaults.xsrfCookieName = 'csrftoken';
 axios.defaults.xsrfHeaderName = 'X-CSRFToken';
 axios.defaults.withCredentials = true;
 
-const TOKEN = localStorage.getItem("access_token"); // Replace with your Bearer token
 
 export const login = async (username, password) => {
   try {
@@ -31,7 +30,7 @@ export const login = async (username, password) => {
 }
 
 
-export const addProduct = async (img, price, rentPrice, name, size, userID) => {
+export const addProduct = async (img, price, rentPrice, name, size, userID, categories) => {
   const formData = new FormData();
   formData.append("image", img)
   formData.append("price", price)
@@ -39,15 +38,17 @@ export const addProduct = async (img, price, rentPrice, name, size, userID) => {
   formData.append("name", name)
   formData.append("size", size)
   formData.append("user_id", userID)
+  formData.append("categories", 1)
   
   try {
     const response = await axios.post('http://127.0.0.1:8000/themeApp/products/', formData, {
       headers: {
         'Content-Type': 'multipart/form-data',
-        'Authorization': `Bearer ${TOKEN}`
+        'Authorization': `Bearer ${localStorage.getItem("access_token")}`
       },
     });
-    return response.status
+    console.log('resopnse: ', response.data)
+    return response
   } catch (error) {
     console.error('Error in adding product:', error)
   }
@@ -73,7 +74,7 @@ export const getLoggedInUser = async () => {
     const {data} = await axios.get('http://localhost:8000/themeApp/user/', {
     headers: {
       'Content-Type': 'application/json',
-      'Authorization': `Bearer ${TOKEN}`
+      'Authorization': `Bearer ${localStorage.getItem("access_token")}`
     }
     });
     return data.user;
@@ -116,7 +117,7 @@ export const createOrder = async (totalPrice) => {
     },{
       headers: {
         'Content-Type': 'application/json',
-        'Authorization': `Bearer ${TOKEN}`
+        'Authorization': `Bearer ${localStorage.getItem("access_token")}`
       }
     });
     return result.data.order.id;
@@ -135,7 +136,7 @@ export const orderItem = async (orderID, productID, orderType, days=0) => {
     }, {
       headers: {
         'Content-Type': 'application/json',
-        'Authorization': `Bearer ${TOKEN}`,
+        'Authorization': `Bearer ${localStorage.getItem("access_token")}`,
       }
     }
     );