Skip to content

Commit

Permalink
Merge pull request #76 from La-Fresca/viewFoodItem
Browse files Browse the repository at this point in the history 
Add category selection component to the view all food items
  • Loading branch information
@DasunThathsara
DasunThathsara authored Aug 17, 2024
2 parents 84b81bc + c54baaa commit 68caff4
Show file tree
Hide file tree
Showing 13 changed files with 913 additions and 215 deletions.
376 changes: 352 additions & 24 deletions package-lock.json
View file

Large diffs are not rendered by default.

5 changes: 4 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,9 @@
"@mui/material": "^5.16.0",
"@mui/x-date-pickers": "^7.11.1",
"@nextui-org/react": "^2.4.2",
"@nextui-org/system": "^2.2.5",
"@nextui-org/tabs": "^2.0.35",
"@nextui-org/theme": "^2.2.9",
"@sweetalert2/theme-dark": "^5.0.17",
"@tanstack/react-query": "^5.51.23",
"apexcharts": "^3.41.0",
Expand Down Expand Up @@ -56,7 +59,7 @@
"react-toastify": "^9.1.3",
"sonner": "^1.5.0",
"sort-by": "^0.0.2",
"sweetalert2": "^11.12.3",
"sweetalert2": "^11.6.13",
"sweetalert2-react-content": "^5.0.7",
"tailwind-merge": "^2.4.0",
"zod": "^3.23.8"
Expand Down
10 changes: 5 additions & 5 deletions src/api/useFoods.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ function getToken() {
export const useFoods = () => {
const getAllFoods = async () => {
try {
const response = await fetch(`${API_URL}/food`, {
const response = await fetch(`${API_URL}/foodItem`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
Expand All @@ -35,7 +35,7 @@ export const useFoods = () => {

const addFood = async (data: Food) => {
try {
const response = await fetch(`${API_URL}/food`, {
const response = await fetch(`${API_URL}/foodItem`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Expand All @@ -54,7 +54,7 @@ export const useFoods = () => {

const getFoodById = async (id: string) => {
try {
const response = await fetch(`${API_URL}/food/${id}`, {
const response = await fetch(`${API_URL}/foodItem/${id}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
Expand All @@ -74,7 +74,7 @@ export const useFoods = () => {

const updateFood = async (id: string, data: Food) => {
try {
const response = await fetch(`${API_URL}/food/${id}`, {
const response = await fetch(`${API_URL}/foodItem/${id}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
Expand All @@ -93,7 +93,7 @@ export const useFoods = () => {

const deleteFood = async (id: string) => {
try {
const response = await fetch(`${API_URL}/food/delete/${id}`, {
const response = await fetch(`${API_URL}/foodItem/delete/${id}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
Expand Down
87 changes: 87 additions & 0 deletions src/components/User/AllFoodItems/ItemList.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
import { Link } from 'react-router-dom';
import { Button } from '@nextui-org/react';
import Star from '../FoodItem/Star';

interface Props {
id?: string;
name: string;
rating: number;
price: number;
image: string;
categories?: string[];
discountStatus?: string;
available?: number;
}

export default function ItemList({
id,
name,
rating,
image,
price,
discountStatus,
categories,
available,
}: Props) {
return (
<Link
to={`viewfood/${id}`}
className="hover:scale-105 transition-transform duration-300 hover:cursor-pointer mx-[10%] mt-[50px]"
>
<div
className="dark:border rounded-2xl border-foodbg bg-foodbg backdrop-blur-md w-55 h-850 p-2 py-2 overflow-hidden"
style={{
boxShadow: '0 0 10px 0 rgba(0, 0, 0, 0.2)',
backgroundColor: 'rgba(255, 255, 255, 0.01)',
}}
>
<Button
className="bg-gradient-to-r from-orange-600 to-orange-400 text-white shadow-lg rounded-full min-w-5"
style={{
position: 'absolute',
right: '5px',
top: '5px',
zIndex: '1',
}}
>
<b>+</b>
</Button>

{available == 0 ? (
<div className="absolute p-2 w-[120px] h-2 rotate-[135deg] bg-gradient-to-t from-red-600 to-red-900 translate-x-[-35px] translate-y-[20px]">
<p className="rotate-180 text-xs translate-y-[-7.5px] translate-x-[-15px] text-white">
UNAVAILABLE
</p>
</div>
) : discountStatus == '1' ? (
<div className="absolute p-2 w-[120px] h-2 rotate-[135deg] bg-gradient-to-t from-red-600 to-red-900 translate-x-[-35px] translate-y-[20px]">
<p className="rotate-180 text-xs translate-y-[-7.5px] translate-x-[-15px] text-white">
PROMOTION
</p>
</div>
) : null}

<div className="h-50 rounded-xl">
<img src={image} alt="" className="w-[100%] h-[200px] rounded-xl" />
</div>

<div className="px-3 mt-2">
<div className="h-[50px]">
<b className="text-foodbg dark:text-white text-xl">{name}</b>
</div>

<div className="flex items-center pt-2">
{Array.from({ length: 5 }).map((j, i) => {
return <Star key={`star-${i}`} highlight={i <= rating} />;
})}
</div>

<div className="font-bold text-foodbg dark:text-white pt-2 text-xl">
<span className="pr-2 text-orange-500">Rs.</span>
{price}
</div>
</div>
</div>
</Link>
);
}
182 changes: 78 additions & 104 deletions src/components/User/AllFoodItems/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
import Star from '../FoodItem/Star';
import { Button } from '@nextui-org/react';
import { Link } from 'react-router-dom';
import { Tabs, Tab, Card, CardBody } from '@nextui-org/react';
import { useFoods } from '@/api/useFoods';
import { useCombos } from '@/api/useCombos';
import { Food } from '@/types/food';
import { FoodCombo } from '@/types/combo';
import { useQuery, useMutation } from '@tanstack/react-query';
import Item from './ItemList';

function index() {
const { getAllFoods } = useFoods();
Expand Down Expand Up @@ -37,9 +35,16 @@ function index() {
const foods: Food[] = foodQuery.data;
const combos: FoodCombo[] = comboQuery.data;

const categories = ['Burger', 'Pizza', 'Coffee', 'Tea'];

return (
<div className="mx-auto max-w-screen-xl flex w-full flex-col">
<Tabs aria-label="Options" variant="underlined">
<Tabs
aria-label="Options"
variant="underlined"
color={'warning'}
radius="full"
>
<Tab key="FoodItems" title="Food Items">
<Card>
<CardBody>
Expand All @@ -51,63 +56,71 @@ function index() {
Not ready to checkout? Continue Shopping
</div>

<div className="mx-auto max-w-screen-xl grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols- gap-5">
{foods.map((_: Food) => {
return (
<Link
to={`viewfood/${_.id}`}
className="hover:scale-105 transition-transform duration-300 hover:cursor-pointer"
>
<Button
className="bg-gradient-to-r from-orange-600 to-orange-400 text-white shadow-lg rounded-3xl min-w-5"
style={{
position: 'relative',
left: '210px',
top: '45px',
zIndex: '1',
}}
>
<b>+</b>
</Button>
<div
className="dark:border rounded-2xl border-foodbg bg-foodbg backdrop-blur-md w-55 h-850 p-2 py-2"
style={{
marginLeft: '10%',
marginRight: '10%',
boxShadow: '0 0 10px 0 rgba(0, 0, 0, 0.2)',
backgroundColor: 'rgba(255, 255, 255, 0.01)',
}}
>
<div className="h-50">
<img src={_.image} alt="" className="w-[100%]" />
<Tabs
aria-label="Options"
variant="solid"
color={'warning'}
radius="full"
size="lg"
className="pt-6 dark:text-white text-foodbg"
>
<Tab key="All" title="All">
<Card>
<CardBody>
<div>
<div className="mx-auto max-w-screen-xl grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols- gap-5">
{foods.map((_: Food) => {
return (
<Item
id={_.id}
name={_.name}
rating={_.rating}
price={_.price}
image={_.image}
categories={_.categories}
discountStatus={_.discountStatus}
available={_.available}
/>
);
})}
</div>
</div>
</CardBody>
</Card>
</Tab>

<div className="px-3 mt-2">
<b className="text-foodbg dark:text-white text-xl">
{_.name}
</b>

<div className="flex items-center pt-2">
{Array.from({ length: 5 }).map((j, i) => {
return (
<Star
key={`star-${i}`}
highlight={i <= _.rating}
/>
);
})}
</div>

<div className="font-bold text-foodbg dark:text-white pt-2 text-xl">
<span className="pr-2 text-orange-500">Rs.</span>
{_.price}
{categories.map((category) => {
return (
<Tab key={category} title={category}>
<Card>
<CardBody>
<div>
<div className="mx-auto max-w-screen-xl grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols- gap-5">
{foods.map((_: Food) => {
if (_.categories.includes(category)) {
return (
<Item
key={_.id}
id={_.id}
name={_.name}
rating={_.rating}
price={_.price}
image={_.image}
categories={_.categories}
discountStatus={_.discountStatus}
available={_.available}
/>
);
}
})}
</div>
</div>
</div>
</div>
</Link>
</CardBody>
</Card>
</Tab>
);
})}
</div>
</Tabs>
</div>
</CardBody>
</Card>
Expand All @@ -126,54 +139,15 @@ function index() {
<div className="mx-auto max-w-screen-xl grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols- gap-5">
{combos.map((_: FoodCombo) => {
return (
<Link
to={`viewfood/${_.id}`}
className="hover:scale-105 transition-transform duration-300 hover:cursor-pointer"
>
<Button
className="bg-gradient-to-r from-orange-600 to-orange-400 text-white shadow-lg rounded-3xl min-w-5"
style={{
position: 'relative',
left: '210px',
top: '45px',
zIndex: '1',
}}
>
<b>+</b>
</Button>
<div
className="dark:border rounded-2xl border-foodbg bg-foodbg backdrop-blur-md w-55 h-850 p-2 py-2"
style={{
marginLeft: '10%',
marginRight: '10%',
boxShadow: '0 0 10px 0 rgba(0, 0, 0, 0.12)',
backgroundColor: 'rgba(255, 255, 255, 0.01)',
}}
>
<div className="h-50">
<img src={_.image} alt="" className="w-[100%]" />
</div>

<div className="px-3 mt-2">
<b className="text-foodbg dark:text-white text-xl">
{_.name}
</b>

<div className="flex items-center pt-2">
{Array.from({ length: 5 }).map((_, i) => {
return (
<Star key={`star-${i}`} highlight={i !== 4} />
);
})}
</div>

<div className="font-bold text-foodbg dark:text-white pt-2 text-xl">
<span className="pr-2 text-orange-500">Rs.</span>
{_.price}
</div>
</div>
</div>
</Link>
<Item
id={_.id}
name={_.name}
rating={_.rating}
price={_.price}
image={_.image}
discountStatus={_.discountStatus}
available={_.available}
/>
);
})}
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/components/User/Checkout/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -241,7 +241,7 @@ function index() {
</div>

<div
className="w-[100%] h-[200px] rounded-xl bg-foodbg"
className="w-[100%] h-[200px] rounded-xl bg-foodbg outline-none active:outline-none focus:outline-none"
style={{ backgroundColor: 'rgba(255, 255, 255, 0.05)' }}
>
<iframe
Expand All @@ -252,7 +252,7 @@ function index() {
allowFullScreen
loading="lazy"
referrerPolicy="no-referrer-when-downgrade"
className="rounded-xl h-[200px] w-[100%]"
className="rounded-xl h-[200px] w-[100%] outline-none active:outline-none focus:outline-none"
></iframe>
</div>

Expand Down
Loading

0 comments on commit 68caff4

Please sign in to comment.