Skip to content

Commit

Permalink
feat: codegen types for products & useOrderItemsStore
Browse files Browse the repository at this point in the history
  • Loading branch information
@Maiz27
Maiz27 committed Jan 14, 2024
1 parent 3fb81ff commit 1241504
Show file tree
Hide file tree
Showing 5 changed files with 447 additions and 79 deletions.
91 changes: 46 additions & 45 deletions apps/client/src/Products/ProductsCatalogue.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { useEffect, useState } from "react";
import { useFetchProducts } from "@/hooks/products";
import { Card, List, ListHeader } from "ui";
import { formatCost } from "@sahil/lib";
import { useOrderItemsStore } from "@/hooks/useOrderItemsStore";
import Link from "next/link";
import { useEffect, useState } from 'react';
import { useFetchProducts } from '@/hooks/products';
import { Card, List, ListHeader } from 'ui';
import { formatCost } from '@sahil/lib';
import { useOrderItemsStore } from '@/hooks/useOrderItemsStore';
import Link from 'next/link';
import {
HiArrowSmallLeft,
HiArrowSmallRight,
Expand All @@ -15,7 +15,8 @@ import {
HiOutlineBanknotes,
HiArrowPath,
HiSignalSlash,
} from "react-icons/hi2";
} from 'react-icons/hi2';
import { Products } from '@sahil/lib/graphql/__generated__/graphql';

export const ProductsCatalogue = () => {
const [offset, setOffset] = useState(0);
Expand All @@ -38,22 +39,22 @@ export const ProductsCatalogue = () => {
);

useEffect(() => {
setProducts(products);
setProducts(products as Products[]);
}, [products, setProducts]);

if (error) {
return (
<Card title="Unable to load products...">
<span className="shadow p-2 rounded-md w-fit text-2xl">
<Card title='Unable to load products...'>
<span className='shadow p-2 rounded-md w-fit text-2xl'>
<HiSignalSlash />
</span>
<p>
Products aren't loading due to a technical problem on our side. Please
try again. If the issue continues,{" "}
<span className="text-primary">contact support.</span>
try again. If the issue continues,{' '}
<span className='text-primary'>contact support.</span>
</p>
<div className="card-actions justify-end">
<button className="btn btn-sm btn-warning">
<div className='card-actions justify-end'>
<button className='btn btn-sm btn-warning'>
<HiArrowPath /> try again
</button>
</div>
Expand All @@ -63,10 +64,10 @@ export const ProductsCatalogue = () => {

if (loading) {
return (
<Card titleSize="sm">
<div className="flex items-center justify-center text-center">
<Card titleSize='sm'>
<div className='flex items-center justify-center text-center'>
<div>
<span className="loading loading-spinner loading-lg"></span>
<span className='loading loading-spinner loading-lg'></span>
<p>Loading Products</p>
</div>
</div>
Expand All @@ -82,22 +83,22 @@ export const ProductsCatalogue = () => {
});
};
const onRemoveOrderItem = (product: any) => {
console.log("remove product to order", product);
console.log('remove product to order', product);
};

return (
<Card>
<ListHeader
onNextPage={() => setOffset((prev) => prev + 12)}
onPreviousPage={() => setOffset((prev) => prev - 12)}
isNextDisabled={offset + 12 >= productsCount}
isNextDisabled={offset + 12 >= productsCount!}
isPrevDisabled={offset === 0}
size={productsCount}
limit={12}
sizeLabel="Products"
sizeLabel='Products'
/>
<List
data={products}
data={products as Products[]}
error={error}
loading={loading}
cols={4}
Expand All @@ -114,8 +115,8 @@ export const ProductsCatalogue = () => {
);
}}
/>
<div className="card-actions">
<Link href="/checkout" className="btn btn-sm btn-primary">
<div className='card-actions'>
<Link href='/checkout' className='btn btn-sm btn-primary'>
<HiOutlineShoppingCart /> Proceed to checkout
</Link>
</div>
Expand All @@ -138,55 +139,55 @@ export const ProductSummary = ({
}: ProductSummaryProps) => {
return (
<Card>
<div className="flex items-center justify-between">
<h3 className="card-title text-sm">{product.name}</h3>
<div className='flex items-center justify-between'>
<h3 className='card-title text-sm'>{product.name}</h3>
{product.discount && product.discount !== 0 && (
<div className="badge badge-accent">{product.discount}%</div>
<div className='badge badge-accent'>{product.discount}%</div>
)}
</div>
<div className="flex gap-2 items-center">
<div className="flex gap-2 items-center">
<span className="shadow p-2 rounded-md">
<div className='flex gap-2 items-center'>
<div className='flex gap-2 items-center'>
<span className='shadow p-2 rounded-md'>
<HiOutlineBanknotes />
</span>
{formatCost(product.price)}
</div>
</div>
<div className="card-actions items-center">
<div className='card-actions items-center'>
{!isInCart ? (
<button
className="btn btn-xs"
className='btn btn-xs'
onClick={() => onAddOrderItem(product)}
type="button"
title="Add Item"
type='button'
title='Add Item'
>
<HiOutlineShoppingCart /> Add Product
</button>
) : (
<div className="flex justify-between w-full">
<div className='flex justify-between w-full'>
<button
className="btn btn-xs btn-warning"
className='btn btn-xs btn-warning'
onClick={() => onRemoveOrderItem(product)}
type="button"
title="Add Item"
type='button'
title='Add Item'
>
<HiXMark /> Remove
</button>
<div className="flex gap-2 items-center">
<div className='flex gap-2 items-center'>
<button
className="btn btn-xs"
className='btn btn-xs'
onClick={() => onAddOrderItem(product)}
type="button"
title="Add Item"
type='button'
title='Add Item'
>
<HiMinus />
</button>
<div className="badge badge-neutral">1</div>
<div className='badge badge-neutral'>1</div>
<button
className="btn btn-xs"
className='btn btn-xs'
onClick={() => onAddOrderItem(product)}
type="button"
title="Add Item"
type='button'
title='Add Item'
>
<HiPlus />
</button>
Expand Down
11 changes: 6 additions & 5 deletions apps/client/src/hooks/products.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { useMutation, useQuery } from "@apollo/client";
import { FETCH_PRODUCTS, FETCH_PRODUCTS_BY_NAME } from "@sahil/lib/graphql";
import { useRouter } from "next/router";
import { useMutation, useQuery } from '@apollo/client';
import { FETCH_PRODUCTS, FETCH_PRODUCTS_BY_NAME } from '@sahil/lib/graphql';
import { GetProductsQuery } from '@sahil/lib/graphql/__generated__/graphql';
import { useRouter } from 'next/router';

export const useFetchProducts = ({
offset = 0,
Expand All @@ -14,7 +15,7 @@ export const useFetchProducts = ({

const graphqlQuery = name ? FETCH_PRODUCTS_BY_NAME : FETCH_PRODUCTS;

const { error, data, loading } = useQuery(graphqlQuery, {
const { error, data, loading } = useQuery<GetProductsQuery>(graphqlQuery, {
variables: {
offset,
limit,
Expand All @@ -25,6 +26,6 @@ export const useFetchProducts = ({
error,
data: data?.products,
loading,
productsCount: data?.products_aggregate?.aggregate.count,
productsCount: data?.products_aggregate?.aggregate?.count,
};
};
17 changes: 6 additions & 11 deletions apps/client/src/hooks/useOrderItemsStore.ts
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,13 @@
import { create } from 'zustand';

type OrderItem = {
productId: string;
quantity: number;
price: number;
};
import { Order_Item, Products } from '@sahil/lib/graphql/__generated__/graphql';

type OrderItemsStore = {
orderItems: OrderItem[];
orderItems: Order_Item[];
products: any[];
addOrderItem: (item: OrderItem) => void;
removeOrderItem: (item: OrderItem) => void;
updateOrderItem: (item: OrderItem) => void;
setProducts: (products: any[]) => void;
addOrderItem: (item: Order_Item) => void;
removeOrderItem: (item: Order_Item) => void;
updateOrderItem: (item: Order_Item) => void;
setProducts: (products: Products[]) => void;
};

const INITIAL_STATE = {
Expand Down
6 changes: 3 additions & 3 deletions apps/client/src/pages/checkout/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
} from 'react-icons/hi2';
import { usePlaceBusinessOrder } from '@/hooks/orders';
import { Key } from 'react';
import { Order_Item } from '@sahil/lib/graphql/__generated__/graphql';

export const OrderItem = ({
price,
Expand Down Expand Up @@ -78,9 +79,7 @@ export const OrderItems = ({ items }: { items: any }) => {
);
};

function calculateTotal(
arr: { productId: string; quantity: number; price: number }[]
) {
function calculateTotal(arr: Order_Item[]) {
// Initialize total items and total price
let totalItems = 0;
let totalPrice = 0;
Expand Down Expand Up @@ -114,6 +113,7 @@ export default function CheckoutPage() {
const { totalItems, totalPrice } = calculateTotal(orderItems);
const router = useRouter();

console.log(orderItems);
const onConfirmOrder = async () => {};

return (
Expand Down
Loading

0 comments on commit 1241504

Please sign in to comment.