Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

add scroll functionality #87

Open
wants to merge 2 commits into
base: development
Choose a base branch
from
Open

add scroll functionality #87

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f06a04f
add scroll functionality
kelvinSeamount Nov 9, 2023
6ac85ff
fix card styling and tag issue
Nov 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 49 additions & 39 deletions src/app/components/Card.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,47 +1,57 @@
export default function Card({ title, imageUrl, tag, name }) {
const badgeClassNames = tag.length > 0 ? "badge badge-outline" : "";
export default function Card({ title, imageUrl, tag, name, description }) {
const badgeClassNames =
tag && tag.length > 0
? "badge badge-outline border-lime-500 text-lime-600"
: "";
console.log(tag);
return (
<>
<div className="w-64 m-4 transition duration-300 ease-in-out shadow-xl card card-compact bg-base-100 hover:scale-105">
<figure>
{imageUrl ? (
<img
src={imageUrl}
alt={title} // Use the title as alt text for accessibility
/>
) : (
<span className="mt-12 loading loading-ring loading-lg"></span>
)}
</figure>
<div className="card-body">
<div className="justify-start card-actions">
{tag && <div className={badgeClassNames}>{tag}</div>}
</div>
<h2 className="card-title">{title}</h2>
<p>{name}</p>
<div className="justify-end card-actions">
{tag.length > 0 && (
<button className="mt-3 btn bg-amber-100 hover:group hover:bg-amber-200 hover:border-amber-300">
<svg
xmlns="http://www.w3.org/2000/svg"
className="w-3 h-3 transition-transform duration-300 group-hover:translate-x-2"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M8.25 4.5l7.5 7.5-7.5 7.5"
/>
</svg>
View Recipe!
</button>
<div className="w-1/6 m-4">
{" "}
{/* Adjust width and padding */}
<div className="transition duration-300 ease-in-out shadow-xl card card-compact bg-base-100 hover:scale-105">
{" "}
<figure>
{imageUrl ? (
<img

Check warning on line 16 in src/app/components/Card.js

View workflow job for this annotation

GitHub Actions / build 

Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element
src={imageUrl}
alt={title} // Use the title as alt text for accessibility
/>
) : (
<span className="mt-12 loading loading-ring loading-lg"></span>
)}
</figure>
<div className="card-body">
<div className="justify-start card-actions">
{tag && tag.length > 0 && (
<div className={badgeClassNames}>{tag[0].display_name}</div>
)}
</div>
<h2 className="card-title">{title}</h2>
<p>{description}</p>
<div className="justify-end card-actions">
{tag.length > 0 && (
<button className="mt-3 btn bg-amber-100 hover:group hover:bg-amber-200 hover:border-amber-300">
<svg
xmlns="http://www.w3.org/2000/svg"
className="w-3 h-3 transition-transform duration-300 group-hover:translate-x-2"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M8.25 4.5l7.5 7.5-7.5 7.5"
/>
</svg>
View Recipe!
</button>
)}
</div>
</div>
</div>
</div>{" "}
</div>
</>
);
Expand Down
143 changes: 105 additions & 38 deletions src/app/components/Main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,74 +1,141 @@
"use client";

import { useState, useEffect } from "react";
import SearchBar from "./SearchBar";
import Card from "./Card";
import { useState, useEffect } from "react";
import WelcomeModal from "./WelcomeModal";

export default function Main() {
const [searchRecipe, setSearchRecipe] = useState("");
const [data, setData] = useState([]);
const [imageUrl, setImageUrl] = useState("");
const [dataToShow, setDataToShow] = useState([]);
const [tag, setTag] = useState([]);
const [name, setName] = useState("");

const url =
"https://tasty.p.rapidapi.com/recipes/list?from=0&size=20&q=chicken%20soup";
const [description, setDescription] = useState([]);
const [pageNumber, setPageNumber] = useState(1);
const [isLoading, setIsLoading] = useState(false);
const [paginationNumbers, setpaginationNumbers] = useState([]);
const itemsPerPage = 5;
const url = "https://tasty.p.rapidapi.com/recipes/list";

useEffect(() => {
const options = {
method: "GET",
headers: {
"X-RapidAPI-Key": process.env.NEXT_PUBLIC_TASTY_API_KEY,
"X-RapidAPI-Host": "tasty.p.rapidapi.com",
},
};
fetch(url, options)
.then((response) => response.json())
.then((response) => {
console.log(response);
setData(response.results);
// Set the imageUrl state to the thumbnail_url of the first recipe
if (response.results && response.results.length > 0) {
setImageUrl(response.results[0].thumbnail_url);
// Check if tags are available and set the first one, otherwise set an empty array
setTag(
response.results[0].tags && response.results[0].tags.length > 0
? response.results[0].tags[0].display_name
: []
);
setName(response.results[0].name);
}
})
.catch((err) => {
console.error(err);
});
}, []);
window.scrollTo({
top: 0,
behavior: "smooth",
});
}, [pageNumber]);

function handleSubmit(e) {
e.preventDefault();
}

function setPaginationNumbers(response) {
let arr = [];
if (response > 0) {
for (let i = 1; i <= response; i++) {
arr.push(i);
}
setpaginationNumbers(arr);
}
}

function getDataByKey(val) {
const data = setTimeout(async () => {
try {
setIsLoading(true);
const _data = await fetch(`${url}?q=${val}`, {
headers: {
"X-RapidAPI-Key": process.env.NEXT_PUBLIC_TASTY_API_KEY,
"X-RapidAPI-Host": "tasty.p.rapidapi.com",
},
});
const response = await _data.json();
setData(response.results);
setIsLoading(false);
const _datatoShow = response?.results?.slice(0, itemsPerPage);
setDataToShow(_datatoShow);
setPaginationNumbers(
Math.floor(response?.results?.length / itemsPerPage)
);
} catch (error) {
setIsLoading(false);
}
}, 5000);
return () => {
clearTimeout(data);
};
}

//Reset function to reset when typing
function handleReset() {
if (searchRecipe !== "") {
setSearchRecipe("");
} else {
}
}

const handleSsearch = async (val) => {
setSearchRecipe(val);
const response = await getDataByKey(val);
};

const handlePaginate = (num) => {
setPageNumber(num);
const arr = [...data];
const nextArr = arr.slice(
itemsPerPage * num - itemsPerPage,
itemsPerPage * num
);
setDataToShow(nextArr);
};

return (
<div>
<WelcomeModal />
<br />
{console.log(data)}
<SearchBar
handleSubmit={handleSubmit}
handleReset={handleReset}
searchRecipe={searchRecipe}
setSearchRecipe={handleSsearch}
/>
<div className="flex flex-wrap justify-center mb-12 ">
<Card data={data} imageUrl={imageUrl} tag={tag} name={name} />
<div className="flex flex-wrap justify-center m-12">
{!isLoading &&
data &&
data.length > 0 &&
dataToShow.map((response, index) => {
const { tags, thumbnail_url, name, description } = response;

return (
<Card
key={index}
imageUrl={thumbnail_url}
title={name}
tag={tags}
name={name}
description={description}
/>
);
})}
</div>

<div style={{ display: "flex", gap: 5, justifyContent: "center" }}>
{paginationNumbers?.map((item) => {
return (
<label
key={item}
style={{ cursor: "pointer", marginTop: "40px" }}
onClick={() => handlePaginate(item)}
>
{item}
</label>
);
})}
</div>

{isLoading && (
<div className="flex justify-center">
<span className=" loading loading-ring loading-lg"></span>
</div>
)}
</div>
);
}
7 changes: 6 additions & 1 deletion src/app/components/SearchBar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
"use client";

export default function SearchBar({ handleSubmit, handleReset, searchRecipe }) {
export default function SearchBar({
handleSubmit,
handleReset,
searchRecipe,
setSearchRecipe,
}) {
return (
<>
{/* <div className="mt-5">
Expand Down
Loading