Skip to content

Commit

Permalink
Merge pull request #7 from NCOBBagg/Cam-Author
Browse files Browse the repository at this point in the history 
Cam author
  • Loading branch information
@NCOBBagg
NCOBBagg authored Oct 23, 2024
2 parents 327671e + 14d8760 commit 754063f
Show file tree
Hide file tree
Showing 8 changed files with 343 additions and 137 deletions.
4 changes: 2 additions & 2 deletions src/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,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
2 changes: 1 addition & 1 deletion src/components/UI/CountdownTimer.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const CountdownTimer = ({ expiryDate }) => {
clearInterval(timer);
}
}, 1000);

return () => clearInterval(timer);
}, [expiryDate]);

Expand Down
129 changes: 81 additions & 48 deletions src/components/author/AuthorItems.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,61 +1,94 @@
import React from "react";
import { Link } from "react-router-dom";
import AuthorImage from "../../images/author_thumbnail.jpg";
import nftImage from "../../images/nftImage.jpg";
import React, { useEffect, useState } from "react";
import { Link, useParams } from "react-router-dom";
import Skeleton from "react-loading-skeleton";
import axios from "axios";

const AuthorItems = ({ data }) => {
const [loading, setLoading] = useState(true);
const [author, setAuthor] = useState();
const { id } = useParams();

async function fetchAuthorDetails() {
try {
const { data } = await axios.get(
`https://us-central1-nft-cloud-functions.cloudfunctions.net/authors?author=${id}`
);
setAuthor(data);
} catch (error) {
console.error("Error fetching data", error);
} finally {
setLoading(false);
}
}

useEffect(() => {
fetchAuthorDetails();
}, []);

const AuthorItems = () => {
return (
<div className="de_tab_content">
<div className="tab-1">
<div className="row">
{new Array(8).fill(0).map((_, index) => (
<div className="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="">
<img className="lazy" src={AuthorImage} alt="" />
<i className="fa fa-check"></i>
</Link>
{loading
? new Array(8).fill(0).map((_, index) => (
<div
className="col-lg-3 col-md-6 col-sm-6 col-xs-12"
key={index}
>
<Skeleton height={380} width={240} />
</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>
))
: data.map((item, index) => (
<div
className="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="">
<img className="lazy" src={author.authorImage} alt="" />
<i className="fa fa-check"></i>
</Link>
</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>
<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">2.52 ETH</div>
<div className="nft__item_like">
<i className="fa fa-heart"></i>
<span>97</span>
</div>
</div>
</div>
</div>
))}
))}
</div>
</div>
</div>
Expand Down
166 changes: 113 additions & 53 deletions src/components/explore/ExploreItems.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,77 +1,137 @@
import React from "react";
import React, { useEffect, useState } 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 CountdownTimer from "../UI/CountdownTimer";
import Skeleton from "react-loading-skeleton";

const ExploreItems = () => {
const [exploreItems, setExploreItems] = useState([]);
const [loading, setLoading] = useState(true);
const [loadMoreItems, setLoadMoreItems] = useState(8);
const [filter, setFilter] = useState("");

useEffect(() => {
fetchExploreItems(filter);
}, [filter]);

async function fetchExploreItems(filter = "") {
setLoading(true);
try {
let url = `https://us-central1-nft-cloud-functions.cloudfunctions.net/explore?filter=${filter}`;

const { data } = await axios.get(url);
setExploreItems(data);
} catch (error) {
console.error("Error fetching data", error);
} finally {
setLoading(false);
}
}

const filterChange = (event) => {
setFilter(event.target.value);
};

const loadItems = () => {
setLoadMoreItems((prevCount) => prevCount + 4);
};

return (
<>
<div>
<select id="filter-items" defaultValue="">
<select id="filter-items" defaultValue="" onChange={filterChange}>
<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>
{loading
? new Array(4).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" }}
>
<Skeleton height={400} width={"100%"} />
</div>
<div className="de_countdown">5h 30m 32s</div>
))
: exploreItems.slice(0, loadMoreItems).map((exploreItems, 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/${exploreItems.authorId}`}
data-bs-toggle="tooltip"
data-bs-placement="top"
>
<img
className="lazy"
src={exploreItems.authorImage}
alt=""
/>
<i className="fa fa-check"></i>
</Link>
</div>
{exploreItems.expiryDate && (
<div className="de_countdown">
<CountdownTimer expiryDate={exploreItems.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 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/${exploreItems.nftId}`}>
<img
src={exploreItems.nftImage}
className="lazy nft__item_preview"
alt=""
/>
</Link>
</div>
<div className="nft__item_info">
<Link to={`/item-details/${exploreItems.nftId}`}>
<h4>{exploreItems.title}</h4>
</Link>
<div className="nft__item_price">
{exploreItems.price} ETH
</div>
<div className="nft__item_like">
<i className="fa fa-heart"></i>
<span>{exploreItems.likes}</span>
</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">
Load more
</Link>
{loadMoreItems < exploreItems.length && (
<button onClick={loadItems} className="btn-main lead">
Load more
</button>
)}
</div>
</>
);
Expand Down
4 changes: 2 additions & 2 deletions src/components/home/HotCollections.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ const HotCollections = () => {
<div className="" key={index}>
<div className="nft_coll">
<div className="nft_wrap">
<Link to="/item-details">
<Link to={`/item-details/${collections.nftId}`}>
<img
src={collections.nftImage}
className="lazy img-fluid"
Expand All @@ -91,7 +91,7 @@ const HotCollections = () => {
</Link>
</div>
<div className="nft_coll_pp">
<Link to="/author">
<Link to={`/author/${collections.authorId}`}>
<img
className="lazy pp-coll"
src={collections.authorImage}
Expand Down
Loading

0 comments on commit 754063f

Please sign in to comment.