Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • marta873/tddd27_2024
1 result
Show changes
Commits on Source (3)
Hide whitespace changes
Inline Side-by-side
mysite/themeApp/urls.py
View file @ cebb2db9
...@@ -14,7 +14,7 @@ urlpatterns = [ ...@@ -14,7 +14,7 @@ urlpatterns = [
path('register/', views.UserRegister.as_view(), name='register'), path('register/', views.UserRegister.as_view(), name='register'),
path('logout/', views.Logout.as_view(), name='logout'), path('logout/', views.Logout.as_view(), name='logout'),
path('user/', views.UserView.as_view(), name='user'), 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('home/', views.HomeView.as_view(), name='home'),
path('getproducts/', views.ProductView.as_view(), name='product'), path('getproducts/', views.ProductView.as_view(), name='product'),
path('hometry/', views.HomeViewTry.as_view(), name="try"), path('hometry/', views.HomeViewTry.as_view(), name="try"),
......
theme-costume-app/src/About.js deleted 100644 → 0
View file @ 847dff4b
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
View file @ cebb2db9
import React, {useState} from 'react'; import React, {useState} from 'react';
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom'; import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
import Home from './Home'; import Home from './Home';
import About from './About';
import Profile from './Profile'; import Profile from './Profile';
import Charts from './Charts';
import Dashboard from './Dashboard';
import Login from './Login'; import Login from './Login';
import ResponsiveAppBar from './components/ResponsiveAppBar'; import ResponsiveAppBar from './components/ResponsiveAppBar';
import CategoriesPage from './CategoriesPage'; import CategoriesPage from './CategoriesPage';
...@@ -30,15 +27,9 @@ function App() { ...@@ -30,15 +27,9 @@ function App() {
<ResponsiveAppBar cartItems={[]}/> <ResponsiveAppBar cartItems={[]}/>
<Routes> <Routes>
<Route exact path="/" Component={Home} /> <Route exact path="/" Component={Home} />
<Route path="/about" Component={About} />
<Route path="/profile" element={<Profile user={user} onSignup={handleSignup}/>} /> <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="/" element={<Home />} />
<Route path="/news" element={<About />} />
<Route path="/Topplistan" element={<Charts />} />
<Route path="/Categories" element={<CategoriesPage />} /> <Route path="/Categories" element={<CategoriesPage />} />
<Route path="/dashboard" element={<Dashboard />} />
<Route path="/login" element={<Login />} /> <Route path="/login" element={<Login />} />
<Route path="/cart" element={<Cart />} /> <Route path="/cart" element={<Cart />} />
</Routes> </Routes>
......
theme-costume-app/src/Charts.js deleted 100644 → 0
View file @ 847dff4b
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
View file @ cebb2db9
...@@ -20,6 +20,7 @@ const sizes = ['X-Small', 'Small', 'Medium', 'Large', 'X-Large']; ...@@ -20,6 +20,7 @@ const sizes = ['X-Small', 'Small', 'Medium', 'Large', 'X-Large'];
const ProfilePage = () => { const ProfilePage = () => {
const [user, setUser] = useState({}); const [user, setUser] = useState({});
const [isLoggedIn, setLoggedIn] = useState(false); const [isLoggedIn, setLoggedIn] = useState(false);
const [products, setProducts] = useState([]);
// Fetch user when the component mounts // Fetch user when the component mounts
...@@ -28,7 +29,7 @@ const ProfilePage = () => { ...@@ -28,7 +29,7 @@ const ProfilePage = () => {
const fetchUser = async () => { const fetchUser = async () => {
const result = await getLoggedInUser(); const result = await getLoggedInUser();
console.log('result: ', result) console.log('result: ', result)
if (result != false) { if (result !== false) {
setUser(result); setUser(result);
setLoggedIn(true) setLoggedIn(true)
} else { } else {
...@@ -102,15 +103,15 @@ const ProfilePage = () => { ...@@ -102,15 +103,15 @@ const ProfilePage = () => {
rentPrice: formData.rentPrice, rentPrice: formData.rentPrice,
size: formData.size, size: formData.size,
userID: user.id, userID: user.id,
categories: [],
}; };
try { 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 setProducts([...products, result.data]); // Assuming the API returns the new product data
console.log('Product added successfully:', result.data); console.log('Product added successfully:', result.data);
window.location.reload();
handleClose(); // Close the modal or form handleClose(); // Close the modal or form
} }
} catch (error) { } catch (error) {
...@@ -121,15 +122,9 @@ const ProfilePage = () => { ...@@ -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 [loadingProducts, setLoadingProducts] = useState(true);
const [errorProducts, setErrorProducts] = useState(null); const [errorProducts, setErrorProducts] = useState(null);
useEffect(() => { useEffect(() => {
const fetchProducts = async () => { const fetchProducts = async () => {
...@@ -137,7 +132,7 @@ const [loadingUser, setLoadingUser] = useState(true); ...@@ -137,7 +132,7 @@ const [loadingUser, setLoadingUser] = useState(true);
const result = await getAllProducts(); const result = await getAllProducts();
if (user) { 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); setProducts(filteredProducts);
} else { } else {
console.warn('User ID is null or undefined'); console.warn('User ID is null or undefined');
......
theme-costume-app/src/components/ResponsiveAppBar.js
View file @ cebb2db9
...@@ -22,14 +22,11 @@ import Badge from '@mui/material/Badge'; ...@@ -22,14 +22,11 @@ import Badge from '@mui/material/Badge';
//const pages = ['Kategorier', 'Nyheter', 'Topplistan']; //const pages = ['Kategorier', 'Nyheter', 'Topplistan'];
const pages = [ const pages = [
{ title: 'Kategorier', link: '/categories' }, { title: 'Kategorier', link: '/categories' },
{ title: 'Nyheter', link: '/news' },
{ title: 'Topplistan', link: '/Topplistan' },
]; ];
const settings = [ const settings = [
{title: 'Profile', link: '/profile'}, {title: 'Profile', link: '/profile'},
{title: 'Dashboard', link: '/dashboard'}, // {title: 'Logout', link: '/logout'},
{title: 'Logout', link: '/logout'},
]; ];
function ResponsiveAppBar({ cartItems }) { function ResponsiveAppBar({ cartItems }) {
......
theme-costume-app/src/utils/api.js
View file @ cebb2db9
...@@ -6,7 +6,6 @@ axios.defaults.xsrfCookieName = 'csrftoken'; ...@@ -6,7 +6,6 @@ axios.defaults.xsrfCookieName = 'csrftoken';
axios.defaults.xsrfHeaderName = 'X-CSRFToken'; axios.defaults.xsrfHeaderName = 'X-CSRFToken';
axios.defaults.withCredentials = true; axios.defaults.withCredentials = true;
const TOKEN = localStorage.getItem("access_token"); // Replace with your Bearer token
export const login = async (username, password) => { export const login = async (username, password) => {
try { try {
...@@ -31,7 +30,7 @@ export const login = async (username, password) => { ...@@ -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(); const formData = new FormData();
formData.append("image", img) formData.append("image", img)
formData.append("price", price) formData.append("price", price)
...@@ -39,15 +38,17 @@ export const addProduct = async (img, price, rentPrice, name, size, userID) => { ...@@ -39,15 +38,17 @@ export const addProduct = async (img, price, rentPrice, name, size, userID) => {
formData.append("name", name) formData.append("name", name)
formData.append("size", size) formData.append("size", size)
formData.append("user_id", userID) formData.append("user_id", userID)
formData.append("categories", 1)
try { try {
const response = await axios.post('http://127.0.0.1:8000/themeApp/products/', formData, { const response = await axios.post('http://127.0.0.1:8000/themeApp/products/', formData, {
headers: { headers: {
'Content-Type': 'multipart/form-data', '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) { } catch (error) {
console.error('Error in adding product:', error) console.error('Error in adding product:', error)
} }
...@@ -73,7 +74,7 @@ export const getLoggedInUser = async () => { ...@@ -73,7 +74,7 @@ export const getLoggedInUser = async () => {
const {data} = await axios.get('http://localhost:8000/themeApp/user/', { const {data} = await axios.get('http://localhost:8000/themeApp/user/', {
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
'Authorization': `Bearer ${TOKEN}` 'Authorization': `Bearer ${localStorage.getItem("access_token")}`
} }
}); });
return data.user; return data.user;
...@@ -116,7 +117,7 @@ export const createOrder = async (totalPrice) => { ...@@ -116,7 +117,7 @@ export const createOrder = async (totalPrice) => {
},{ },{
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
'Authorization': `Bearer ${TOKEN}` 'Authorization': `Bearer ${localStorage.getItem("access_token")}`
} }
}); });
return result.data.order.id; return result.data.order.id;
...@@ -135,7 +136,7 @@ export const orderItem = async (orderID, productID, orderType, days=0) => { ...@@ -135,7 +136,7 @@ export const orderItem = async (orderID, productID, orderType, days=0) => {
}, { }, {
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
'Authorization': `Bearer ${TOKEN}`, 'Authorization': `Bearer ${localStorage.getItem("access_token")}`,
} }
} }
); );
......