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

Rob-explore items #482

Open
wants to merge 12 commits into
base: main
Choose a base branch
from
Open

Rob-explore items #482

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
431128e
Dynamic Hot Collections almost done
Oct 22, 2024
56b9cad
Hot Collections done
Oct 22, 2024
5c43612
Merge pull request #1 from Rob-Sanchez-Cs/rob-hotcollections
Rob-Sanchez-Cs Oct 22, 2024
7d0527a
New Items done except for countdown
Oct 23, 2024
0be8bf2
New Items done
Oct 23, 2024
acb4a63
Merge pull request #2 from Rob-Sanchez-Cs/rob-newitems
Rob-Sanchez-Cs Oct 23, 2024
e677629
Made paths and links dynamic
Oct 25, 2024
32b0a70
Merge pull request #3 from Rob-Sanchez-Cs/rob-newitems
Rob-Sanchez-Cs Oct 25, 2024
d8e0582
Top Sellers done
Oct 25, 2024
3946429
Remove console log
Oct 25, 2024
44b0ffb
Merge pull request #4 from Rob-Sanchez-Cs/rob-topsellers
Rob-Sanchez-Cs Oct 25, 2024
422512f
Explore Items done
Oct 25, 2024
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
356 changes: 190 additions & 166 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

10 changes: 9 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,17 @@
"@testing-library/jest-dom": "^5.16.2",
"@testing-library/react": "^12.1.4",
"@testing-library/user-event": "^13.5.0",
"axios": "^1.7.7",
"firebase": "^9.8.4",
"keen-slider": "^6.6.14",
"react": "^17.0.2",
"react-countdown": "^2.3.6",
"react-dom": "^17.0.2",
"react-icons": "^4.3.1",
"react-router-dom": "^6.2.2",
"react-scripts": "5.0.0",
"react-slick": "^0.30.2",
"slick-carousel": "^1.8.1",
"web-vitals": "^2.1.4"
},
"scripts": {
Expand All @@ -24,7 +29,10 @@
"extends": [
"react-app",
"react-app/jest"
]
],
"rules": {
"no-unused-vars": "off"
}
},
"browserslist": {
"production": [
Expand Down
4 changes: 2 additions & 2 deletions src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@ function App() {
<Routes>
<Route path="/" element={<Home />} />
<Route path="/explore" element={<Explore />} />
<Route path="/author" element={<Author />} />
<Route path="/item-details" element={<ItemDetails />} />
<Route path="/author/:id" element={<Author />} />
<Route path="/item-details/:id" element={<ItemDetails />} />
</Routes>
<Footer />
</Router>
Expand Down
65 changes: 65 additions & 0 deletions src/components/UI/NFTCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
import React from "react";
import { Link } from "react-router-dom";
import Countdown from "react-countdown";

const NFTCard = ({item, index, inSlider}) => {


return (

<div
key={index}
className={inSlider ? "" :"d-item col-lg-3 col-md-6 col-sm-6 col-xs-12"}
style={{ display: "block", backgroundSize: "cover" }}
>
<div className="nft__item">
<div className="author_list_pp">
<Link
to={"/author/" + item.authorId}
data-bs-toggle="tooltip"
data-bs-placement="top"
>
<img className="lazy" src={item.authorImage} alt="" />
<i className="fa fa-check"></i>
</Link>
</div>
{item.expiryDate && <div className="de_countdown"><Countdown date={item.expiryDate} /></div>}

<div className="nft__item_wrap">
<div className="nft__item_extra">
<div className="nft__item_buttons">
<button>Buy Now</button>
<div className="nft__item_share">
<h4>Share</h4>
<a href="" target="_blank" rel="noreferrer">
<i className="fa fa-facebook fa-lg"></i>
</a>
<a href="" target="_blank" rel="noreferrer">
<i className="fa fa-twitter fa-lg"></i>
</a>
<a href="">
<i className="fa fa-envelope fa-lg"></i>
</a>
</div>
</div>
</div>
<Link to={"/item-details/" + item.nftId}>
<img src={item.nftImage} className="lazy nft__item_preview" alt="" />
</Link>
</div>
<div className="nft__item_info">
<Link to={"/item-details/" + item.nftId}>
<h4>{item.title}</h4>
</Link>
<div className="nft__item_price">{item.price} ETH</div>
<div className="nft__item_like">
<i className="fa fa-heart"></i>
<span>{item.likes}</span>
</div>
</div>
</div>
</div>
);
};

export default NFTCard;
47 changes: 47 additions & 0 deletions src/components/UI/SkeletonNFTCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import React from "react";
import { Link } from "react-router-dom";

const SkeletonNFTCard = ({ index, inSlider }) => {

return (
<div className={inSlider ? "" : "col-lg-3 col-md-6 col-sm-6 col-xs-12"} key={index}>
<div className="nft__item">
<div className="author_list_pp">
<Link
to="/author"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Creator: Monica Lucas"
>
<div className="skeleton skeleton__pfp"></div>
</Link>
</div>
<div className="de_countdown skeleton">5h 30m 32s</div>

<div className="nft__item_wrap">
<div className="nft__item_extra">
<div className="nft__item_buttons">
<button>Buy Now</button>
<div className="nft__item_share">

</div>
</div>
</div>

<div className="skeleton skeleton__nft"></div>
</div>
<div className="nft__item_info">
<div className="skeleton skeleton__title"></div>
<div className="nft__item_price skeleton skeleton__price">
3.08 ETH
</div>
<div className="nft__item_like">
<i className="fa fa-heart"></i>
</div>
</div>
</div>
</div>
);
};

export default SkeletonNFTCard;
108 changes: 49 additions & 59 deletions src/components/explore/ExploreItems.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,78 +1,68 @@
import React from "react";
import React, {useState, useEffect} from "react";
import { Link } from "react-router-dom";
import AuthorImage from "../../images/author_thumbnail.jpg";
import nftImage from "../../images/nftImage.jpg";
import axios from "axios";
import Countdown from 'react-countdown';
import NFTCard from "../UI/NFTCard";
import SkeletonNFTCard from "../UI/SkeletonNFTCard";

const ExploreItems = () => {
async function fetchExploreData(numberClicks) {
const response = await axios.get(filterValue === "" ? "https://us-central1-nft-cloud-functions.cloudfunctions.net/explore" : `https://us-central1-nft-cloud-functions.cloudfunctions.net/explore?filter=${filterValue}`);
setExploreData(response.data.slice(0,8 + (numberClicks * 4)))
setLoading(false)
}

function handleBtnClick() {
fetchExploreData(numBtnClicks + 1);
setNumBtnClicks(numBtnClicks + 1);
}

function filterChange(value) {
setFilterValue(value)

}


const [loading, setLoading] = useState(true)
const [exploreData, setExploreData] = useState([])
const [numBtnClicks, setNumBtnClicks] = useState(0)
const [filterValue, setFilterValue] = useState("")

useEffect(() => {
fetchExploreData(0);

return () => {
setExploreData([])
}
}, [])

useEffect(() => {
fetchExploreData(numBtnClicks)
}, [filterValue])


return (
<>
<div>
<select id="filter-items" defaultValue="">
<select onChange={(e) => filterChange(e.target.value)} id="filter-items" defaultValue="">
<option value="">Default</option>
<option value="price_low_to_high">Price, Low to High</option>
<option value="price_high_to_low">Price, High to Low</option>
<option value="likes_high_to_low">Most liked</option>
</select>
</div>
{new Array(8).fill(0).map((_, index) => (
<div
key={index}
className="d-item col-lg-3 col-md-6 col-sm-6 col-xs-12"
style={{ display: "block", backgroundSize: "cover" }}
>
<div className="nft__item">
<div className="author_list_pp">
<Link
to="/author"
data-bs-toggle="tooltip"
data-bs-placement="top"
>
<img className="lazy" src={AuthorImage} alt="" />
<i className="fa fa-check"></i>
</Link>
</div>
<div className="de_countdown">5h 30m 32s</div>

<div className="nft__item_wrap">
<div className="nft__item_extra">
<div className="nft__item_buttons">
<button>Buy Now</button>
<div className="nft__item_share">
<h4>Share</h4>
<a href="" target="_blank" rel="noreferrer">
<i className="fa fa-facebook fa-lg"></i>
</a>
<a href="" target="_blank" rel="noreferrer">
<i className="fa fa-twitter fa-lg"></i>
</a>
<a href="">
<i className="fa fa-envelope fa-lg"></i>
</a>
</div>
</div>
</div>
<Link to="/item-details">
<img src={nftImage} className="lazy nft__item_preview" alt="" />
</Link>
</div>
<div className="nft__item_info">
<Link to="/item-details">
<h4>Pinky Ocean</h4>
</Link>
<div className="nft__item_price">1.74 ETH</div>
<div className="nft__item_like">
<i className="fa fa-heart"></i>
<span>69</span>
</div>
</div>
</div>
</div>
))}
<div className="col-md-12 text-center">
<Link to="" id="loadmore" className="btn-main lead">
{loading ? (new Array(8).fill(0).map((_, index) => (
<SkeletonNFTCard index={index} key={index} inSlider={false} />
))): (exploreData.map((item, index) => (
<NFTCard item={item} index={index} key={index} inSlider={false}/>
)))}
{numBtnClicks < 2 ? (<div className="col-md-12 text-center">
<Link to="" onClick={() => handleBtnClick()} id="loadmore" className="btn-main lead">
Load more
</Link>
</div>
</div>): <></>}
</>
);
};
Expand Down
Loading