Skip to content

Commit

Permalink
Merge branch 'main' of https://github.com/sahrohit/fullstack-ecommerce
Browse files Browse the repository at this point in the history
  • Loading branch information
@sahrohit
sahrohit committed Sep 22, 2023
2 parents 1ea936b + 1745af7 commit 4490402
Show file tree
Hide file tree
Showing 2 changed files with 10 additions and 281 deletions.
16 changes: 8 additions & 8 deletions apps/storefront/src/pages/products/favourite.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,3 @@
import Result from "@/components/shared/Result";
import {
Favourite,
useFavouritesWithProductQuery,
useMeQuery,
useRemoveFromFavouriteMutation,
} from "@/generated/graphql";
import {
AspectRatio,
Box,
Expand All @@ -19,9 +12,16 @@ import {
VStack,
useColorModeValue,
} from "@chakra-ui/react";
import Image from "next/image";
import {
Favourite,
useFavouritesWithProductQuery,
useMeQuery,
useRemoveFromFavouriteMutation,
} from "@/generated/graphql";
import Result from "@/components/shared/Result";
// import dayjs from "dayjs";
import ConfirmationModal from "@/components/helpers/ConfirmationModal";
import Image from "next/image";
import HeadingGroup from "@/components/pages/account/HeadingGroup";
import Navbar from "@/components/shared/navbar";
import { PriceTag } from "@/components/shared/product/PriceTag";
Expand Down
275 changes: 2 additions & 273 deletions apps/storefront/src/pages/test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,274 +1,3 @@
import Result from "@/components/shared/Result";
import {
Favourite,
useFavouritesWithProductQuery,
useMeQuery,
useRemoveFromFavouriteMutation,
} from "@/generated/graphql";
import {
AspectRatio,
Box,
Button,
HStack,
Heading,
Link,
SimpleGrid,
Skeleton,
Stack,
Text,
VStack,
useColorModeValue,
} from "@chakra-ui/react";
// import dayjs from "dayjs";
import ConfirmationModal from "@/components/helpers/ConfirmationModal";
import Image from "next/image";
import HeadingGroup from "@/components/pages/account/HeadingGroup";
import Navbar from "@/components/shared/navbar";
import { PriceTag } from "@/components/shared/product/PriceTag";
import services from "../../public/assets/services.svg";
const TestPage = () => <div>TestPage</div>;

const FavouritePage = () => {
const { data: user, loading: userLoading, error: userError } = useMeQuery();
const { data, loading, error } = useFavouritesWithProductQuery({
skip: !user?.me?.id,
});

if (error || userError) {
return (
<Result
heading={error ? error.name : userError?.name!}
type="error"
text={error ? error.message : userError?.message!}
dump={error ? error.stack : userError?.stack}
/>
);
}

return (
<>
<Navbar />
<Box
maxW="7xl"
mx="auto"
px={{ base: "4", md: "8", lg: "12" }}
py={{ base: "6", md: "8", lg: "12" }}
>
<HeadingGroup
py={4}
textAlign="center"
title="Favourites"
description="Your favourite products"
/>
<SimpleGrid
columns={[1, 1, 1, 2, 2]}
columnGap={{ base: "4", md: "6" }}
rowGap={{ base: "8", md: "4" }}
>
{/* eslint-disable-next-line no-nested-ternary */}
{loading || userLoading ? (
Array(4)
.fill("favourite-skeleton")
.map((mock, index) => (
<FavouriteProductCardSkeleton key={`${mock}-${index + 1}`} />
))
) : data?.favouritesWithProduct.length ? (
data?.favouritesWithProduct?.map((favourite) => (
<FavouriteProductCard
key={favourite.id}
favourite={favourite as Favourite}
/>
))
) : (
<VStack py={8} gap={4}>
<Image width={300} alt="App screenshot" src={services} />
<Box textAlign="center">
<Heading as="h3" fontSize="2xl" lineHeight="2">
Nothing in Favourites
</Heading>
<Text>
Save you favourite items here, so that you can buy it later.
</Text>
</Box>
</VStack>
)}
</SimpleGrid>
</Box>
</>
);
};

export default FavouritePage;

const FavouriteProductCard = ({ favourite }: { favourite: Favourite }) => {
const [removeFromFavouriteMutation, { loading }] =
useRemoveFromFavouriteMutation({
refetchQueries: ["FavouritesWithProduct"],
});
const {
name,
images: unsortedImages,
inventories,
identifier,
desc,
} = favourite.product;

const images = [...unsortedImages]?.sort((a, b) => a.sequence - b.sequence);

return (
<Stack
direction={{ base: "column", md: "row" }}
justify="center"
spacing="12"
shadow="md"
rounded="md"
p="4"
>
<Stack direction="column">
<Stack
alignSelf="flex-start"
justifyContent="space-between"
w="full"
direction={{ base: "row", md: "column" }}
>
<VStack spacing="1" alignItems="flex-start" alignSelf="flex-start">
<Text
fontWeight="medium"
fontSize="xl"
color={useColorModeValue("gray.700", "gray.400")}
>
{name}
</Text>
<Text>
{/* Starting from{" "} */}
<PriceTag
price={inventories?.[0]?.price || 0}
// salePrice={salePrice}
currency="NPR"
rootProps={{
display: "inline-flex",
}}
/>
</Text>
</VStack>
{/* <Stack
alignSelf="flex-start"
direction={{ base: "column", md: "row" }}
>
<Rating defaultValue={2} size="sm" />
<Text
fontSize="sm"
color={useColorModeValue("gray.600", "gray.400")}
>
12 Reviews
</Text>
</Stack> */}
<Box display={{ base: "none", lg: "block" }}>
<Text maxW="xs" noOfLines={2}>
{desc}
</Text>
</Box>
</Stack>
<VStack gap={2} w={{ base: "full", md: "unset" }}>
<Button
as={Link}
w="full"
href={`/products/${identifier}`}
_hover={{
textDecoration: "none",
}}
colorScheme="primary"
>
View Product
</Button>
<HStack w="full">
<ConfirmationModal
flexGrow={1}
isLoading={loading}
headerText="Remove from Favourites"
bodyText={`Are you sure you want to remove ${favourite.product.name} from your favourites?`}
onSuccess={() => {
removeFromFavouriteMutation({
variables: {
productId: favourite.productId,
},
});
}}
colorScheme="red"
>
Remove
</ConfirmationModal>
<Button flexGrow={1} variant="outline">
Add to Cart
</Button>
</HStack>
</VStack>
</Stack>{" "}
<AspectRatio
ratio={6 / 5}
as={Link}
href={`/products/${identifier}`}
w={{ base: "full", md: "180px" }}
flexGrow="1"
>
<Image
src={images?.[0]?.imageURL ?? "https://picsum.photos/200/300"}
alt={name}
width={400}
height={500}
draggable="false"
/>
</AspectRatio>
</Stack>
);
};

const FavouriteProductCardSkeleton = () => (
<Stack
direction={{ base: "column", md: "row" }}
justify="center"
spacing="12"
shadow="md"
rounded="md"
p="4"
>
<Stack direction="column" w="full">
<Stack
alignSelf="flex-start"
justifyContent="space-between"
w="full"
direction={{ base: "row", md: "column" }}
>
<VStack spacing="1" alignItems="flex-start" alignSelf="flex-start">
<Skeleton>
<Text fontWeight="medium" fontSize="xl">
Hello Hello Hello Hello
</Text>
</Skeleton>
<Skeleton>
<Text>Hello Hello</Text>
</Skeleton>
</VStack>

<Box display={{ base: "none", lg: "block" }}>
<Skeleton>
<Text maxW="xs" noOfLines={2}>
Hello
</Text>
</Skeleton>
</Box>
</Stack>
<VStack justifyContent="space-around" h="100%">
<Skeleton w="full">Hello</Skeleton>
<VStack gap={2} w="full">
<HStack w="full">
<Skeleton flexGrow={1}>Hello</Skeleton>
<Skeleton flexGrow={1}>Hello</Skeleton>
</HStack>
</VStack>
</VStack>
</Stack>{" "}
<AspectRatio ratio={6 / 5} w={{ base: "full", md: "180px" }}>
<Skeleton>Hello</Skeleton>
</AspectRatio>
</Stack>
);
export default TestPage;

2 comments on commit 4490402

@vercel
Copy link

@vercel vercel bot commented on 4490402 Sep 22, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

ecommerce-storefront-client – ./apps/storefront

ecommerce-storefront-client-git-main-sahrohit.vercel.app
hamropasal.vercel.app
ecommerce-storefront-client-sahrohit.vercel.app
rudejellyfish.live
www.rudejellyfish.live

@vercel
Copy link

@vercel vercel bot commented on 4490402 Sep 22, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

ecommerce-admin-client – ./apps/admin

ecommerce-admin-client-git-main-sahrohit.vercel.app
adminpasal.vercel.app
ecommerce-admin-client-sahrohit.vercel.app

Please sign in to comment.