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.

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

Fixed Mobile View #2835

Closed
wants to merge 15 commits into from
7 changes: 5 additions & 2 deletions frontend/src/Component/Footer.js
Original file line number Diff line number Diff line change
@@ -191,7 +191,8 @@ function Footer() {
<a href="/" target="_blank" rel="noopener noreferrer">
<BsYoutube color="white" fontSize={25} className="ico" />
</a>
</span>
</span>

<span className="icons">
<a href="/" target="_blank" rel="noopener noreferrer">
<FaLinkedinIn color="white" fontSize={25} className="ico" />
@@ -201,10 +202,12 @@ function Footer() {
<a href="/" target="_blank" rel="noopener noreferrer">
<FaFacebookF color="white" fontSize={25} className="ico" />
</a>

</span>
<span className="icons">
<a href="/" target="_blank" rel="noopener noreferrer">
<FaGithubSquare

color="white"
fontSize={25}
className="ico"
@@ -217,6 +220,7 @@ function Footer() {
target="_blank"
rel="noopener noreferrer"
>

<AiOutlineMail
color="white"
fontSize={25}
@@ -233,5 +237,4 @@ function Footer() {
</footer>
);
}

export default Footer;
174 changes: 163 additions & 11 deletions frontend/src/Component/Home.js
Original file line number Diff line number Diff line change
@@ -13,8 +13,15 @@ import { deleteSource, setSource } from "../Slice/DataSlice";
import "../style/Home.css";
import NavbarItem from "./Navbar/NavbarItem";

const BACKEND = process.env.REACT_APP_BACKEND;
import toast from "react-hot-toast";
import NavbarRight from "./Navbar/NavbarRight";
import Tilt from "react-parallax-tilt";
import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
import "react-loading-skeleton/dist/skeleton.css";
import debounce from "lodash.debounce";


const BACKEND = process.env.REACT_APP_BACKEND;
function Home(props) {
const [bookmarks, setBookmark] = useState(null);
const [localStorageValue, setLocalStorageValue] = useState(
@@ -31,7 +38,7 @@ function Home(props) {
const [selectedFilters, setSelectedFilters] = useState([]);
const [filteredItems, setFilteredItems] = useState(jsonTools);
const [currentPage, setCurrentPage] = useState(1);
const postPerpage = 16;
const postPerpage = 16;
const lastPostIndex = currentPage * postPerpage;
const firstPostIndex = lastPostIndex - postPerpage;
const [dataBaseData, setDataBaseData] = useState([]);
@@ -42,12 +49,15 @@ function Home(props) {
const [searchQuery, setSearchQuery] = useState("");
const [searchResults, setSearchResults] = useState([]);
console.log(searchQuery);

const currentPost1 = dataBaseData;
let allvalue = [];

const handleBookmarks = () => {
const bookmark = JSON.parse(localStorage.getItem("bookmarks"));
setBookmark(bookmark);
};

useEffect(() => {
handleBookmarks();
}, []);
@@ -109,10 +119,10 @@ function Home(props) {

const filteredData = !!props.searchQuery
? allvalue.filter((datalist) => {
return datalist.productName
.toLowerCase()
.includes(props.searchQuery.toLowerCase());
})
return datalist.productName
.toLowerCase()
.includes(props.searchQuery.toLowerCase());
})
: allvalue;

const currentPost =
@@ -126,20 +136,17 @@ function Home(props) {
const prePage = () => {
if (currentPage > 1) {
setCurrentPage(currentPage - 1);
window.scrollTo({ top: document.body.scrollHeight * 0.2, behavior: "smooth" });
}
};

const nextPage = () => {
if (currentPage < npage) {
setCurrentPage(currentPage + 1);
window.scrollTo({ top: document.body.scrollHeight * 0.2, behavior: "smooth" });
}
};

const changeCPage = (id) => {
setCurrentPage(id);
window.scrollTo({ top: document.body.scrollHeight * 0.2, behavior: "smooth" });
};

const handleBookmark = (datalist) => {
@@ -280,8 +287,6 @@ function Home(props) {
setSearchResults(results);
}, 300);

let filterdata = [];

return (
<SkeletonTheme>
<div>
@@ -305,6 +310,12 @@ function Home(props) {
</h1>


<div className="hero-button-container" style={{display: "flex", justifyContent: "center"}}>
<button className="hero-button">
<NavbarItem description="Get Started" to="/open-source" />
</button>


<div className="hero-button-container" style={{ display: "flex", justifyContent: "center" }}>
<div
className="hero-button-container"
@@ -320,10 +331,56 @@ function Home(props) {
<Tilt>
<img src={Devlabs} alt="devlabs-removebg-preview" />
</Tilt>

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

</div>
<br />
<h3> Lets Get, What You seek!</h3>
{/* <NavbarRight setSearchQuery={setSearchQuery} /> */}
<div className="search-feilds">
<input
className="search-input text-white"
onChange={(e) => handleSearch(e.target.value)}
type="text"
placeholder="Search Tools ..."
/>
</div>
<br />
{searchQuery && searchResults.length === 0 && (
<div className="no-results">
<img src="./empty-state.png" height={"300px"} width={"300px"} style={{background: "none"}} alt="empty_state_img"/>
<h1>No matching tools found.</h1>
</div>
)}
{!loading && currentPost.length === 0 && (
<div className="empty-state">
<img
src="https://i.pinimg.com/originals/5d/35/e3/5d35e39988e3a183bdc3a9d2570d20a9.gif"
className="home-img"
alt="no post"
/>
<p>No posts found.</p>
</div>
)}

<div className="main" ref={ref}>
<div className="filter-container">
{filters.map((category) => (
<button
key={category}
className={`filter-button ${
selectedFilters.includes(category) ? "active_filter" : ""
}`}
onClick={() => handleFilterButtonClick(category)}
>
{category}
</button>
))}

<br />
<h3> Lets Get, What You seek!</h3>
{/* <NavbarRight setSearchQuery={setSearchQuery} /> */}
@@ -334,6 +391,7 @@ function Home(props) {
type="text"
placeholder="Search Tools ..."
/>

</div>
<br />
{searchQuery && searchResults.length === 0 && (
@@ -349,6 +407,32 @@ function Home(props) {
alt="empty_state_img"
/>


{!loading &&
filteredItems
.filter((item) => {
return searchQuery.toLowerCase() === ""
? item
: item.productName.toLowerCase().includes(searchQuery);
})
.slice(firstPostIndex, lastPostIndex)
.map((datalist) => {
return (
<div
className="content-box-home"
key={datalist.productName}
>
<img
className="logo"
src={datalist.image}
alt={datalist.category}
/>
<h2>{datalist.productName}</h2>
<p className="content-box-text">{datalist.description}</p>
<button
className="btn-b-box"
onClick={() => window.open(datalist.link)}

<h1>No matching tools found.</h1>
</div>
)}
@@ -421,6 +505,7 @@ function Home(props) {
<div
className="content-box-home"
key={datalist.productName}

>
<img
className="logo"
@@ -435,6 +520,72 @@ function Home(props) {
>
Link
</button>

)}
</div>
);
})}
</div>
<div className="pagination">
<ul>
<div className="page-item-prev">
<li>
<a href="#!" onClick={prePage}>
&lt;
</a>
</li>
</div>
<div className="page-wrapper">
{numbers.map((n, i) => {
// Calculate range of visible page numbers around current page
const start = Math.max(1, currentPage - 4); // Show 4 pages before current page
const end = Math.min(npage, start + 8); // Show 8 pages in total

// Show ellipsis if start is greater than 1
if (start > 1 && i === 1) {
return (
<li key={i}>
<span>...</span>
</li>
);
}

// Show ellipsis if end is less than npage
if (end < npage && i === numbers.length - 1) {
return (
<li key={i}>
<span>...</span>
</li>
);
}

// Display the page number if within the visible range
if (n >= start && n <= end) {
return (
<li
key={i}
className={`${currentPage === n ? "active" : ""}`}
>
<a href="#!" onClick={() => changeCPage(n)}>
{n}
</a>
</li>
);
}

return null; // Hide pages outside the visible range
})}
</div>
<div className="page-item-next">
<li>
<a href="#!" onClick={nextPage}>
&gt;
</a>
</li>
</div>
</ul>
</div>

{bookmarks?.some((item) =>
item.name.includes(datalist.productName)
) ? (
@@ -523,6 +674,7 @@ function Home(props) {
)}
</div>
<Testimonials />

</div>
</div>
</SkeletonTheme>
1 change: 1 addition & 0 deletions frontend/src/Component/Pagination.js
Original file line number Diff line number Diff line change
@@ -5,6 +5,7 @@ const Pagination = ({
firstCardIndex,
lastCardIndex,
dataLength,

allPagesNumbers,
currentPage,
handlePageChange,
Loading