This code will grow larger and is not easy to maintain nor scalable, I am planning to add Redux but don’t know how to do it, I also want to spli the code into smaller components
/* eslint-disable jsx-a11y/anchor-is-valid */
//App.js
import React, { useState, useCallback } from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import './App.css';
import Footer from './components/footer/Footer';
import filteredData from './components/data/filteredData';
function Testing({ handleCategoryClick, handleSearchChange }) {
console.log(handleCategoryClick, handleSearchChange);
return (
<div>
<h1>Hello</h1>
</div>
);
}
function Articles({ handleCategoryClick, handleSearchChange }) {
console.log(handleCategoryClick, handleSearchChange);
return (
<div>
<h1>Wasabito</h1>
</div>
);
}
function CategoryLink({ cat, selectedCategory, handleCategoryClick }) {
const isActive = selectedCategory === cat;
const handleClick = useCallback(() => handleCategoryClick(cat), [handleCategoryClick, cat]);
return (
<span
className={`nav-link-second p-2 d-none d-md-block ${isActive ? 'active' : ''}`}
style={{ cursor: 'pointer' }}
onClick={handleClick}
>
{cat}
</span>
);
}
function Card({ item }) {
return (
<div className="col-md-4 mb-3" key={item.id}>
<div className="card">
<div className="card-body">
<div className="frame-color"></div>
<p className="card-text">{item.category}</p>
<p className="card-text">{item.description}</p>
<Link to={item.pagePath} className="btn btn-primary">
{item.text}
</Link>
</div>
</div>
</div>
);
}
function App() {
const itemsPerPage = 9;
const [currentPage, setCurrentPage] = useState(1);
const [selectedCategory, setSelectedCategory] = useState(null);
const [searchTerm, setSearchTerm] = useState('');
const handlePageChange = useCallback((pageNumber) => {
setCurrentPage(pageNumber);
}, []);
const handleCategoryClick = useCallback((category) => {
setSelectedCategory(category);
setCurrentPage(1);
}, []);
const handleSearchChange = useCallback((event) => {
setSearchTerm(event.target.value);
setCurrentPage(1);
}, []);
const filteredCards = filteredData.filter((item) => {
const { category, text, description } = item;
const lowerCaseSearchTerm = searchTerm.toLowerCase();
return (
(!selectedCategory || selectedCategory === 'All' || category === selectedCategory) &&
(category.toLowerCase().includes(lowerCaseSearchTerm) ||
text.toLowerCase().includes(lowerCaseSearchTerm) ||
description.toLowerCase().includes(lowerCaseSearchTerm))
);
});
const totalCards = filteredCards.length;
const totalPages = Math.ceil(totalCards / itemsPerPage);
const indexOfLastCard = currentPage * itemsPerPage;
const indexOfFirstCard = indexOfLastCard - itemsPerPage;
const currentCards = filteredCards.slice(indexOfFirstCard, indexOfLastCard);
const pageNumbers = Array.from({ length: totalPages }, (_, i) => i + 1);
return (
<Router>
<div>
{selectedCategory === null && (
<div className="p-3 mb-2 bg-primary text-white" style={{ background: 'linear-gradient(to right, #00c6ff, #0072ff)', marginTop: '20px' }}>
Mas Verificaciones
</div>
)}
<div className="nav-scroller py-1 mb-2 custom-class1">
<nav className="nav d-flex justify-content-between px-3">
<h2>
<a href="/">
<img src="logo.png" alt=" " />
</a>
</h2>
{[
'Estados Unidos',
'Mexico',
'America Latina',
'Resto del Mundo',
'Covid-19',
'Salud',
'Medio Ambiente',
'Guerra en Ucrania',
].map((cat) => (
<CategoryLink
key={cat}
cat={cat}
selectedCategory={selectedCategory}
handleCategoryClick={handleCategoryClick}
/>
))}
</nav>
</div>
<div className="container">
<div className="row">
<div className="col-md-12 mb-3">
<input
type="text"
className="form-control"
placeholder="Search..."
value={searchTerm}
onChange={handleSearchChange}
/>
</div>
</div>
</div>
<Routes>
<Route
path="/"
element={
<>
<div className="container">
<div className="row">
{currentCards.map((item) => (
<Card key={item.id} item={item} />
))}
</div>
</div>
<nav aria-label="...">
<ul className="pagination justify-content-center">
<li className={`page-item ${currentPage === 1 ? 'disabled' : ''}`}>
<a
className="page-link"
href="#"
onClick={() => setCurrentPage(currentPage - 1)}
tabIndex="-1"
>
Previous
</a>
</li>
{pageNumbers.map((number) => (
<li key={number} className={`page-item ${currentPage === number ? 'active' : ''}`}>
<a className="page-link" href="#" onClick={() => setCurrentPage(number)}>
{number}
</a>
</li>
))}
<li className={`page-item ${currentPage === totalPages ? 'disabled' : ''}`}>
<a className="page-link" href="#" onClick={() => setCurrentPage(currentPage + 1)}>
Next
</a>
</li>
</ul>
</nav>
</>
}
/>
<Route path="/" element={<App />} />
<Route path="/testing/:id" element={<Testing handleCategoryClick={handleCategoryClick} handleSearchChange={handleSearchChange} />} />
<Route path="/articles/:id" element={<Articles handleCategoryClick={handleCategoryClick} handleSearchChange={handleSearchChange} />} />
</Routes>
<Footer />
</div>
</Router>
);
}
export default App;
//components/data/filteredData.js
const filteredData = [
{
id: 1,
category: "Mexico",
pagePath: "/articles/1",
text: "Learn More",
description: "loren ipsum loren ipssum loren ipsum"
},
{
id: 2,
category: "Estados Unidos",
pagePath: "/testing/1",
text: "Learn More",
description: "loren ipsum loren ipssum loren ipsum"
},
]
export default filteredData;
I have installed the Redux package using npm and created a Redux store in my application. I have not defined reducers and actions to handle the state management. In my components, I expected that after integrating Redux, I would be able to store and manage the application state centrally. I wanted to be able to dispatch actions to update the state and access the updated state in my components
