Skip to content

Commit

Permalink
Fix items
Browse files Browse the repository at this point in the history
  • Loading branch information
@tamara-plante
tamara-plante committed Nov 4, 2024
1 parent b47a142 commit ea808b4
Show file tree
Hide file tree
Showing 5 changed files with 133 additions and 131 deletions.
3 changes: 1 addition & 2 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,12 +71,11 @@ function App() {
apiUrl: import.meta.env.VITE_API_URL,
authToken: authToken,
});
setIsInit(true);
} else {
setCartCount(0);
setServer({ apiUrl: server.apiUrl });
setIsInit(false);
}
setIsInit(true);
}, [isLoggedIn]);

return (
Expand Down
5 changes: 3 additions & 2 deletions src/api/useGetItems.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { useQuery } from "@tanstack/react-query";
import { useAppContext } from "../App";
import axios from "axios";
import useLoginStore from "../store/useLoginStore";

Expand Down Expand Up @@ -30,7 +29,9 @@ const fetchItems = async () => {
return { items: res.data as IItem[] };
}).catch((err) => {
throw new Error('Failed to fetch items');
}) */
}); */


const res = await axios.get(`${apiUrl}/api/items`, {
headers: { Authorization: `Bearer ${authToken}` },
});
Expand Down
4 changes: 3 additions & 1 deletion src/components/CardItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ interface Props {

const CardItem = ({ cardData }: Props) => {
return (
<Box position={'relative'} width={275} height={275}>
<Box position={'relative'} height={275}>
<FavoriteFab
itemId={cardData.item_id}
favorite={true}
Expand All @@ -28,10 +28,12 @@ const CardItem = ({ cardData }: Props) => {
':hover': { boxShadow: 1 },
positon: 'relative',
borderColor: '#eeeeee',
width: '100%',
}}
>
<Link to={`/items/${cardData.item_id}`}>
<CardMedia
component="img"
sx={{ height: 150 }}
image={cardData.image_url}
/>
Expand Down
9 changes: 6 additions & 3 deletions src/pages/Home.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,14 @@ export const Home = () => {

if (!isLoading)
return (
<Grid container spacing={1}>
<Grid container spacing={2} px={1}>
{items?.map((item: IItem) => {
return (
<Grid size={{ xs: 6, md: 2, lg: 3 }}>
<CardItem key={item.item_id} cardData={item} />
<Grid
key={item.item_id}
size={{ xs: 12, sm: 6, md: 3 }}
>
<CardItem cardData={item} />
</Grid>
);
})}
Expand Down
243 changes: 120 additions & 123 deletions src/pages/SingleItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import Grid from '@mui/material/Grid2';
import { useParams } from 'react-router-dom';
import FavoriteFab from '../components/FavoriteFab';
import { useAppContext } from '../App';
import { useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';
Expand Down Expand Up @@ -64,8 +63,10 @@ const SingleItem = () => {
queryKey: ['addCart'],
queryFn: async () => {
return axios
.post(`${server.apiUrl}/api/carts/${params.id}`, {
headers: { Authorization: `Bearer ${server.authToken}` },
.post(`${server.apiUrl}/api/carts/${params.id}`, null, {
headers: {
Authorization: `Bearer ${server.authToken}`,
},
})
.then((res) => {
if (res.status === 200) {
Expand All @@ -80,149 +81,145 @@ const SingleItem = () => {
refetch();
};

console.log('test', item);
if (isLoading) {
console.log('hello?');
if (!isLoading && item)
return (
<>
<div>Loading</div>
</>
);
}

return (
<Grid container spacing={2}>
{/* <p>{data}</p> */}
{/* Listing image */}
<Grid size={{ xs: 12, md: 8 }}>
<Box display={'flex'} maxHeight={{ xs: 250, sm: 400, md: 500 }}>
{/* <Stack
<Grid container spacing={2}>
{/* <p>{data}</p> */}
{/* Listing image */}
<Grid size={{ xs: 12, md: 8 }}>
<Box
display={'flex'}
maxHeight={{ xs: 250, sm: 400, md: 500 }}
>
{/* <Stack
spacing={1}
maxWidth={64}
sx={{ display: { xs: 'none', md: 'block' } }}
>
<Box sx={{ backgroundColor: 'red' }}>Hello world</Box>
<Box sx={{ backgroundColor: 'pink' }}>Hello world</Box>
</Stack> */}
<Box
width={'100%'}
position={'relative'}
overflow={'hidden'}
>
<FavoriteFab
itemId={item.item_id}
favorite={false}
size="medium"
/>
<Box
sx={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
objectFit: 'cover',
}}
width={'100%'}
position={'relative'}
overflow={'hidden'}
>
<img
src={item.image_url}
alt={item.name}
height={'100%'}
<FavoriteFab
itemId={item.item_id}
favorite={false}
size="medium"
/>
<Box
sx={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
objectFit: 'cover',
}}
>
<img
src={item.image_url}
alt={item.name}
height={'100%'}
/>
</Box>
</Box>
</Box>
</Box>
</Grid>
{/* Listing information */}
<Grid size={{ xs: 12, md: 4 }}>
<Box p={{ xs: 2, md: 5 }}>
<Typography
variant="body1"
sx={{ textTransform: 'uppercase' }}
color="primary"
>
{item.quantity > 0 ? 'In stock' : 'Out of stock'}
</Typography>
<Typography variant="h5" fontWeight={'bold'} gutterBottom>
CA${item.price}
</Typography>
<Typography variant="body1" my={2}>
{item.name}
</Typography>
<Typography variant="body2">{item.description}</Typography>
</Grid>
{/* Listing information */}
<Grid size={{ xs: 12, md: 4 }}>
<Box p={{ xs: 2, md: 5 }}>
<Typography
variant="body1"
sx={{ textTransform: 'uppercase' }}
color="primary"
>
{item.quantity > 0 ? 'In stock' : 'Out of stock'}
</Typography>
<Typography
variant="h5"
fontWeight={'bold'}
gutterBottom
>
CA${item.price}
</Typography>
<Typography variant="body1" my={2}>
{item.name}
</Typography>
<Typography variant="body2">
{item.description}
</Typography>
<Stack
spacing={1}
direction="row"
my={2}
alignItems={'center'}
>
<Typography fontSize={'0.9rem'}>
{item.store.name}
</Typography>
<Rating
name="read-only"
value={item.store.rating}
readOnly
/>
</Stack>
<Button
disabled={item.quantity === 0}
onClick={handleClick}
variant="contained"
fullWidth
sx={{ borderRadius: 50 }}
>
Add to cart
</Button>
</Box>
</Grid>
{/* Reviews */}
<Grid size={{ xs: 12, md: 8 }} p={2}>
<Stack
spacing={1}
direction="row"
my={2}
my={1}
alignItems={'center'}
>
<Typography fontSize={'0.9rem'}>
{item.store.name}
<Typography variant="h6">
{reviews.length} reviews
</Typography>
<Rating
name="read-only"
value={item.store.rating}
readOnly
/>
<Rating name="read-only" value={5} readOnly />
</Stack>
<Button
onClick={handleClick}
variant="contained"
fullWidth
sx={{ borderRadius: 50 }}
>
Add to basket
</Button>
</Box>
</Grid>
{/* Reviews */}
<Grid size={{ xs: 12, md: 8 }} p={2}>
<Stack spacing={1} direction="row" my={1} alignItems={'center'}>
<Typography variant="h6">
{reviews.length} reviews
</Typography>
<Rating name="read-only" value={5} readOnly />
</Stack>

{reviews.map((review, index) => {
return (
<Box key={index} py={2}>
<Rating
name="read-only"
value={review.rating}
readOnly
/>
<Typography variant="body1">
{review.description}
</Typography>
<Stack spacing={1} direction="row">
<Avatar sx={{ height: 20, width: 20 }}>
TP
</Avatar>
<Typography variant="body2" fontSize={'0.9rem'}>
<Link marginInlineEnd={2}>
{review.user.username}
</Link>
{review.date_created}
{reviews.map((review, index) => {
return (
<Box key={index} py={2}>
<Rating
name="read-only"
value={review.rating}
readOnly
/>
<Typography variant="body1">
{review.description}
</Typography>
</Stack>
</Box>
);
})}
<Stack spacing={1} direction="row">
<Avatar sx={{ height: 20, width: 20 }}>
TP
</Avatar>
<Typography
variant="body2"
fontSize={'0.9rem'}
>
<Link marginInlineEnd={2}>
{review.user.username}
</Link>
{review.date_created}
</Typography>
</Stack>
</Box>
);
})}
</Grid>
</Grid>
</Grid>
);
};

const cardData = {
img: 'https://picsum.photos/800/450?random=1',
name: 'Revolutionizing software development with cutting-edge tools',
description:
'Our latest engineering tools are designed to streamline workflows and boost productivity. Discover how these innovations are transforming the software development landscape.',
price: '10.99',
quantity: 13,
store: {
name: 'Store name',
rating: 5,
},
);
};

const reviews = [
Expand Down

0 comments on commit ea808b4

Please sign in to comment.