File1: AllProductsSection
import {Component} from 'react'
import Loader from 'react-loader-spinner'
import Cookies from 'js-cookie'
import FiltersGroup from '../FiltersGroup'
import ProductCard from '../ProductCard'
import ProductsHeader from '../ProductsHeader'
import './[Link]'
const categoryOptions = [
{
name: 'Clothing',
categoryId: '1',
},
{
name: 'Electronics',
categoryId: '2',
},
{
name: 'Appliances',
categoryId: '3',
},
{
name: 'Grocery',
categoryId: '4',
},
{
name: 'Toys',
categoryId: '5',
},
]
const sortbyOptions = [
{
optionId: 'PRICE_HIGH',
displayText: 'Price (High-Low)',
},
{
optionId: 'PRICE_LOW',
displayText: 'Price (Low-High)',
},
]
const ratingsList = [
{
ratingId: '4',
imageUrl:
'[Link]
},
{
ratingId: '3',
imageUrl:
'[Link]
},
{
ratingId: '2',
imageUrl:
'[Link]
},
{
ratingId: '1',
imageUrl:
'[Link]
},
]
const apiStatusConstants = {
initial: 'INITIAL',
success: 'SUCCESS',
failure: 'FAILURE',
inProgress: 'IN_PROGRESS',
}
class AllProductsSection extends Component {
state = {
productsList: [],
apiStatus: [Link],
activeOptionId: sortbyOptions[0].optionId,
activeCategoryId: '',
searchInput: '',
activeRatingId: '',
}
componentDidMount() {
[Link]()
}
getProducts = async () => {
[Link]({
apiStatus: [Link],
})
const jwtToken = [Link]('jwt_token')
const {activeOptionId, activeCategoryId, searchInput, activeRatingId} =
[Link]
const apiUrl =
`[Link]
h=${searchInput}&rating=${activeRatingId}`
const options = {
headers: {
Authorization: `Bearer ${jwtToken}`,
},
method: 'GET',
}
const response = await fetch(apiUrl, options)
if ([Link]) {
const fetchedData = await [Link]()
const updatedData = [Link](product => ({
title: [Link],
brand: [Link],
price: [Link],
id: [Link],
imageUrl: product.image_url,
rating: [Link],
}))
[Link]({
productsList: updatedData,
apiStatus: [Link],
})
} else {
[Link]({
apiStatus: [Link],
})
}
}
changeSortby = activeOptionId => {
[Link]({activeOptionId}, [Link])
}
clearFilters = () => {
[Link](
{
searchInput: '',
activeCategoryId: '',
activeRatingId: '',
},
[Link],
)
}
changeRating = activeRatingId => {
[Link]({activeRatingId}, [Link])
}
changeCategory = activeCategoryId => {
[Link]({activeCategoryId}, [Link])
}
enterSearchInput = () => {
[Link]()
}
changeSearchInput = searchInput => {
[Link]({searchInput})
}
renderFailureView = () => (
<div className="products-error-view-container">
<img
src="[Link]
alt="products failure"
className="products-failure-img"
/>
<h1 className="product-failure-heading-text">
Oops! Something Went Wrong
</h1>
<p className="products-failure-description">
We are having some trouble processing your request. Please try again.
</p>
</div>
)
renderProductsListView = () => {
const {productsList, activeOptionId} = [Link]
const shouldShowProductsList = [Link] > 0
return shouldShowProductsList ? (
<div className="all-products-container">
<ProductsHeader
activeOptionId={activeOptionId}
sortbyOptions={sortbyOptions}
changeSortby={[Link]}
/>
<ul className="products-list">
{[Link](product => (
<ProductCard productData={product} key={[Link]} />
))}
</ul>
</div>
):(
<div className="no-products-view">
<img
src="[Link]
className="no-products-img"
alt="no products"
/>
<h1 className="no-products-heading">No Products Found</h1>
<p className="no-products-description">
We could not find any products. Try other filters.
</p>
</div>
)
}
renderLoadingView = () => (
<div className="products-loader-container">
<Loader type="ThreeDots" color="#0b69ff" height="50" width="50" />
</div>
)
renderAllProducts = () => {
const {apiStatus} = [Link]
switch (apiStatus) {
case [Link]:
return [Link]()
case [Link]:
return [Link]()
case [Link]:
return [Link]()
default:
return null
}
}
render() {
const {activeCategoryId, searchInput, activeRatingId} = [Link]
return (
<div className="all-products-section">
<FiltersGroup
searchInput={searchInput}
categoryOptions={categoryOptions}
ratingsList={ratingsList}
changeSearchInput={[Link]}
enterSearchInput={[Link]}
activeCategoryId={activeCategoryId}
activeRatingId={activeRatingId}
changeCategory={[Link]}
changeRating={[Link]}
clearFilters={[Link]}
/>
{[Link]()}
</div>
)
}
}
export default AllProductsSection
File2: FiltersGroup
import {BsSearch} from 'react-icons/bs'
import './[Link]'
const FiltersGroup = props => {
const renderRatingsFiltersList = () => {
const {ratingsList} = props
return [Link](rating => {
const {changeRating, activeRatingId} = props
const onClickRatingItem = () => changeRating([Link])
const ratingClassName =
activeRatingId === [Link] ? `and-up active-rating` : `and-up`
return (
<li
className="rating-item"
key={[Link]}
onClick={onClickRatingItem}
>
<img
src={[Link]}
alt={`rating ${[Link]}`}
className="rating-image"
/>
<p className={ratingClassName}>& up</p>
</li>
)
})
}
const renderRatingsFilters = () => (
<div>
<h1 className="rating-heading">Rating</h1>
<ul className="ratings-list">{renderRatingsFiltersList()}</ul>
</div>
)
const renderCategoriesList = () => {
const {categoryOptions} = props
return [Link](category => {
const {changeCategory, activeCategoryId} = props
const onClickCategoryItem = () => changeCategory([Link])
const isActive = [Link] === activeCategoryId
const categoryClassName = isActive
? `category-name active-category-name`
: `category-name`
return (
<li
className="category-item"
key={[Link]}
onClick={onClickCategoryItem}
>
<p className={categoryClassName}>{[Link]}</p>
</li>
)
})
}
const renderProductCategories = () => (
<>
<h1 className="category-heading">Category</h1>
<ul className="categories-list">{renderCategoriesList()}</ul>
</>
)
const onEnterSearchInput = event => {
const {enterSearchInput} = props
if ([Link] === 'Enter') {
enterSearchInput()
}
}
const onChangeSearchInput = event => {
const {changeSearchInput} = props
changeSearchInput([Link])
}
const renderSearchInput = () => {
const {searchInput} = props
return (
<div className="search-input-container">
<input
value={searchInput}
type="search"
className="search-input"
placeholder="Search"
onChange={onChangeSearchInput}
onKeyDown={onEnterSearchInput}
/>
<BsSearch className="search-icon" />
</div>
)
}
const {clearFilters} = props
return (
<div className="filters-group-container">
{renderSearchInput()}
{renderProductCategories()}
{renderRatingsFilters()}
<button
type="button"
className="clear-filters-btn"
onClick={clearFilters}
>
Clear Filters
</button>
</div>
)
}
export default FiltersGroup
File3 : withRouter(Header)
import {Link, withRouter} from 'react-router-dom'
import Cookies from 'js-cookie'
import './[Link]'
const Header = props => {
const onClickLogout = () => {
const {history} = props
[Link]('jwt_token')
[Link]('/login')
}
return (
<nav className="nav-header">
<div className="nav-content">
<div className="nav-bar-mobile-logo-container">
<Link to="/">
<img
className="website-logo"
src="[Link]
alt="website logo"
/>
</Link>
<button type="button" className="nav-mobile-btn">
<img
src="[Link]
alt="nav logout"
className="nav-bar-image"
onClick={onClickLogout}
/>
</button>
</div>
<div className="nav-bar-large-container">
<Link to="/">
<img
className="website-logo"
src="[Link]
alt="website logo"
/>
</Link>
<ul className="nav-menu">
<li className="nav-menu-item">
<Link to="/" className="nav-link">
Home
</Link>
</li>
<li className="nav-menu-item">
<Link to="/products" className="nav-link">
Products
</Link>
</li>
<li className="nav-menu-item">
<Link to="/cart" className="nav-link">
Cart
</Link>
</li>
</ul>
<button
type="button"
className="logout-desktop-btn"
onClick={onClickLogout}
>
Logout
</button>
</div>
</div>
<div className="nav-menu-mobile">
<ul className="nav-menu-list-mobile">
<li className="nav-menu-item-mobile">
<Link to="/" className="nav-link">
<img
src="[Link]
alt="nav home"
className="nav-bar-image"
/>
</Link>
</li>
<li className="nav-menu-item-mobile">
<Link to="/products" className="nav-link">
<img
src="[Link]
alt="nav products"
className="nav-bar-image"
/>
</Link>
</li>
<li className="nav-menu-item-mobile">
<Link to="/cart" className="nav-link">
<img
src="[Link]
alt="nav cart"
className="nav-bar-image"
/>
</Link>
</li>
</ul>
</div>
</nav>
)
}
export default withRouter(Header)
File4: Home
import Cookies from 'js-cookie'
import {Redirect, Link} from 'react-router-dom'
import Header from '../Header'
import './[Link]'
const Home = () => {
const jwtToken = [Link]('jwt_token')
if (jwtToken === undefined) {
return <Redirect to="/login" />
}
return (
<>
<Header />
<div className="home-container">
<div className="home-content">
<h1 className="home-heading">Clothes That Get YOU Noticed</h1>
<img
src="[Link]
alt="clothes that get you noticed"
className="home-mobile-img"
/>
<p className="home-description">
Fashion is part of the daily air and it does not quite help that it
changes all the time. Clothes have always been a marker of the era
and we are in a revolution. Your fashion makes you been seen and
heard that way you are. So, celebrate the seasons new and exciting
fashion in your own way.
</p>
<Link to="/products">
<button type="button" className="shop-now-button">
Shop Now
</button>
</Link>
</div>
<img
src="[Link]
alt="clothes that get you noticed"
className="home-desktop-img"
/>
</div>
</>
)
}
export default Home
File4 : LoginForm
import {Component} from 'react'
import Cookies from 'js-cookie'
import {Redirect} from 'react-router-dom'
import './[Link]'
class LoginForm extends Component {
state = {
username: '',
password: '',
showSubmitError: false,
errorMsg: '',
}
onChangeUsername = event => {
[Link]({username: [Link]})
}
onChangePassword = event => {
[Link]({password: [Link]})
}
onSubmitSuccess = jwtToken => {
const {history} = [Link]
[Link]('jwt_token', jwtToken, {
expires: 30,
path: '/',
})
[Link]('/')
}
onSubmitFailure = errorMsg => {
[Link]({showSubmitError: true, errorMsg})
}
submitForm = async event => {
[Link]()
const {username, password} = [Link]
const userDetails = {username, password}
const url = '[Link]
const options = {
method: 'POST',
body: [Link](userDetails),
}
const response = await fetch(url, options)
const data = await [Link]()
if ([Link] === true) {
[Link](data.jwt_token)
} else {
[Link](data.error_msg)
}
}
renderPasswordField = () => {
const {password} = [Link]
return (
<>
<label className="input-label" htmlFor="password">
PASSWORD
</label>
<input
type="password"
id="password"
className="password-input-field"
value={password}
onChange={[Link]}
placeholder="Password"
/>
</>
)
}
renderUsernameField = () => {
const {username} = [Link]
return (
<>
<label className="input-label" htmlFor="username">
USERNAME
</label>
<input
type="text"
id="username"
className="username-input-field"
value={username}
onChange={[Link]}
placeholder="Username"
/>
</>
)
}
render() {
const {showSubmitError, errorMsg} = [Link]
const jwtToken = [Link]('jwt_token')
if (jwtToken !== undefined) {
return <Redirect to="/" />
}
return (
<div className="login-form-container">
<img
src="[Link]
className="login-website-logo-mobile-image"
alt="website logo"
/>
<img
src="[Link]
className="login-image"
alt="website login"
/>
<form className="form-container" onSubmit={[Link]}>
<img
src="[Link]
className="login-website-logo-desktop-image"
alt="website logo"
/>
<div className="input-container">{[Link]()}</div>
<div className="input-container">{[Link]()}</div>
<button type="submit" className="login-button">
Login
</button>
{showSubmitError && <p className="error-message">*{errorMsg}</p>}
</form>
</div>
)
}
}
export default LoginForm
File5 : NotFound
import './[Link]'
const NotFound = () => (
<div className="not-found-container">
<img
src="[Link]
alt="not found"
className="not-found-img"
/>
</div>
)
export default NotFound
File6 : PrimeDealsSection
import {Component} from 'react'
import Cookies from 'js-cookie'
import Loader from 'react-loader-spinner'
import ProductCard from '../ProductCard'
import './[Link]'
const apiStatusConstants = {
initial: 'INITIAL',
success: 'SUCCESS',
failure: 'FAILURE',
inProgress: 'IN_PROGRESS',
}
class PrimeDealsSection extends Component {
state = {
primeDeals: [],
apiStatus: [Link],
}
componentDidMount() {
[Link]()
}
getPrimeDeals = async () => {
[Link]({
apiStatus: [Link],
})
const jwtToken = [Link]('jwt_token')
const apiUrl = '[Link]
const options = {
headers: {
Authorization: `Bearer ${jwtToken}`,
},
method: 'GET',
}
const response = await fetch(apiUrl, options)
if ([Link] === true) {
const fetchedData = await [Link]()
const updatedData = fetchedData.prime_deals.map(product => ({
title: [Link],
brand: [Link],
price: [Link],
id: [Link],
imageUrl: product.image_url,
rating: [Link],
}))
[Link]({
primeDeals: updatedData,
apiStatus: [Link],
})
}
if ([Link] === 401) {
[Link]({
apiStatus: [Link],
})
}
}
renderPrimeDealsList = () => {
const {primeDeals} = [Link]
return (
<div>
<h1 className="primedeals-list-heading">Exclusive Prime Deals</h1>
<ul className="products-list">
{[Link](product => (
<ProductCard productData={product} key={[Link]} />
))}
</ul>
</div>
)
}
renderPrimeDealsFailureView = () => (
<img
src="[Link]
alt="Register Prime"
className="register-prime-image"
/>
)
renderLoadingView = () => (
<div className="primedeals-loader-container">
<Loader type="ThreeDots" color="#0b69ff" height="50" width="50" />
</div>
)
render() {
const {apiStatus} = [Link]
switch (apiStatus) {
case [Link]:
return [Link]()
case [Link]:
return [Link]()
case [Link]:
return [Link]()
default:
return null
}
}
}
export default PrimeDealsSection
File7 : ProductCard
import {Link} from 'react-router-dom'
import './[Link]’
const ProductCard = props => {
const {productData} = props
const {title, brand, imageUrl, rating, price, id} = productData
return (
<li className="product-item">
<Link to={`/products/${id}`} className="link-item">
<img src={imageUrl} alt="product" className="thumbnail" />
<h1 className="title">{title}</h1>
<p className="brand">by {brand}</p>
<div className="product-details">
<p className="price">Rs {price}/-</p>
<div className="rating-container">
<p className="rating">{rating}</p>
<img
src="[Link]
alt="star"
className="star"
/>
</div>
</div>
</Link>
</li>
)
}
export default ProductCard
File8 : ProductItemDetails
import {Component} from 'react'
import {Link} from 'react-router-dom'
import Cookies from 'js-cookie'
import Loader from 'react-loader-spinner'
import {BsPlusSquare, BsDashSquare} from 'react-icons/bs'
import Header from '../Header'
import SimilarProductItem from '../SimilarProductItem'
import './[Link]'
const apiStatusConstants = {
initial: 'INITIAL',
success: 'SUCCESS',
failure: 'FAILURE',
inProgress: 'IN_PROGRESS',
}
class ProductItemDetails extends Component {
state = {
productData: {},
similarProductsData: [],
apiStatus: [Link],
quantity: 1,
}
componentDidMount() {
[Link]()
}
getFormattedData = data => ({
availability: [Link],
brand: [Link],
description: [Link],
id: [Link],
imageUrl: data.image_url,
price: [Link],
rating: [Link],
title: [Link],
totalReviews: data.total_reviews,
})
getProductData = async () => {
const {match} = [Link]
const {params} = match
const {id} = params
[Link]({
apiStatus: [Link],
})
const jwtToken = [Link]('jwt_token')
const apiUrl = `[Link]
const options = {
headers: {
Authorization: `Bearer ${jwtToken}`,
},
method: 'GET',
}
const response = await fetch(apiUrl, options)
if ([Link]) {
const fetchedData = await [Link]()
const updatedData = [Link](fetchedData)
const updatedSimilarProductsData = fetchedData.similar_products.map(
eachSimilarProduct => [Link](eachSimilarProduct),
)
[Link]({
productData: updatedData,
similarProductsData: updatedSimilarProductsData,
apiStatus: [Link],
})
}
if ([Link] === 404) {
[Link]({
apiStatus: [Link],
})
}
}
renderLoadingView = () => (
<div className="products-details-loader-container" data-testid="loader">
<Loader type="ThreeDots" color="#0b69ff" height="50" width="50" />
</div>
)
renderFailureView = () => (
<div className="product-details-failure-view-container">
<img
alt="failure view"
src="[Link]
className="failure-view-image"
/>
<h1 className="product-not-found-heading">Product Not Found</h1>
<Link to="/products">
<button type="button" className="button">
Continue Shopping
</button>
</Link>
</div>
)
onDecrementQuantity = () => {
const {quantity} = [Link]
if (quantity > 1) {
[Link](prevState => ({quantity: [Link] - 1}))
}
}
onIncrementQuantity = () => {
[Link](prevState => ({quantity: [Link] + 1}))
}
renderProductDetailsView = () => {
const {productData, quantity, similarProductsData} = [Link]
const {
availability,
brand,
description,
imageUrl,
price,
rating,
title,
totalReviews,
} = productData
return (
<div className="product-details-success-view">
<div className="product-details-container">
<img src={imageUrl} alt="product" className="product-image" />
<div className="product">
<h1 className="product-name">{title}</h1>
<p className="price-details">Rs {price}/-</p>
<div className="rating-and-reviews-count">
<div className="rating-container">
<p className="rating">{rating}</p>
<img
src="[Link]
alt="star"
className="star"
/>
</div>
<p className="reviews-count">{totalReviews} Reviews</p>
</div>
<p className="product-description">{description}</p>
<div className="label-value-container">
<p className="label">Available:</p>
<p className="value">{availability}</p>
</div>
<div className="label-value-container">
<p className="label">Brand:</p>
<p className="value">{brand}</p>
</div>
<hr className="horizontal-line" />
<div className="quantity-container">
<button
type="button"
className="quantity-controller-button"
onClick={[Link]}
data-testid="minus"
>
<BsDashSquare className="quantity-controller-icon" />
</button>
<p className="quantity">{quantity}</p>
<button
type="button"
className="quantity-controller-button"
onClick={[Link]}
data-testid="plus"
>
<BsPlusSquare className="quantity-controller-icon" />
</button>
</div>
<button type="button" className="button add-to-cart-btn">
ADD TO CART
</button>
</div>
</div>
<h1 className="similar-products-heading">Similar Products</h1>
<ul className="similar-products-list">
{[Link](eachSimilarProduct => (
<SimilarProductItem
productDetails={eachSimilarProduct}
key={[Link]}
/>
))}
</ul>
</div>
)
}
renderProductDetails = () => {
const {apiStatus} = [Link]
switch (apiStatus) {
case [Link]:
return [Link]()
case [Link]:
return [Link]()
case [Link]:
return [Link]()
default:
return null
}
}
render() {
return (
<>
<Header />
<div className="product-item-details-container">
{[Link]()}
</div>
</>
)
}
}
export default ProductItemDetails
File 9 : Products
import AllProductsSection from '../AllProductsSection'
import PrimeDealsSection from '../PrimeDealsSection'
import Header from '../Header'
import './[Link]'
const Products = () => (
<>
<Header />
<div className="product-sections">
<PrimeDealsSection />
<AllProductsSection />
</div>
</>
)
export default Products
File 10 : ProductsHeader
import {BsFilterRight} from 'react-icons/bs'
import './[Link]'
const ProductsHeader = props => {
const onChangeSortby = event => {
const {changeSortby} = props
changeSortby([Link])
}
const {sortbyOptions, activeOptionId} = props
return (
<div className="products-header">
<h1 className="products-list-heading">All Products</h1>
<div className="sort-by-container">
<BsFilterRight className="sort-by-icon" />
<p className="sort-by">Sort by</p>
<select
className="sort-by-select"
value={activeOptionId}
onChange={onChangeSortby}
>
{[Link](eachOption => (
<option
key={[Link]}
value={[Link]}
className="select-option"
>
{[Link]}
</option>
))}
</select>
</div>
</div>
)
}
export default ProductsHeader
File 11 :
import {Redirect, Route} from 'react-router-dom'
import Cookie from 'js-cookie'
const ProtectedRoute = props => {
const token = [Link]('jwt_token')
if (token === undefined) {
return <Redirect to="/login" />
}
return <Route {...props} />
}
export default ProtectedRoute
import './[Link]'
const SimilarProductItem = props => {
const {productDetails} = props
const {title, brand, imageUrl, rating, price} = productDetails
return (
<li className="similar-product-item">
<img
src={imageUrl}
className="similar-product-image"
alt={`similar product ${title}`}
/>
<p className="similar-product-title">{title}</p>
<p className="similar-products-brand">by {brand}</p>
<div className="similar-product-price-rating-container">
<p className="similar-product-price">Rs {price}/-</p>
<div className="similar-product-rating-container">
<p className="similar-product-rating">{rating}</p>
<img
src="[Link]
alt="star"
className="similar-product-star"
/>
</div>
</div>
</li>
)
}
export default SimilarProductItem
import {Route, Switch, Redirect} from 'react-router-dom'
import LoginForm from './components/LoginForm'
import Home from './components/Home'
import Products from './components/Products'
import ProductItemDetails from './components/ProductItemDetails'
import Cart from './components/Cart'
import NotFound from './components/NotFound'
import ProtectedRoute from './components/ProtectedRoute'
import './[Link]'
const App = () => (
<Switch>
<Route exact path="/login" component={LoginForm} />
<ProtectedRoute exact path="/" component={Home} />
<ProtectedRoute exact path="/products" component={Products} />
<ProtectedRoute exact path="/products/:id" component={ProductItemDetails} />
<ProtectedRoute exact path="/cart" component={Cart} />
<Route path="/not-found" component={NotFound} />
<Redirect to="not-found" />
</Switch>
)
export default App
Hi chatgpt , good morning I need your sincere help to make a the documentation of above all the
codes with file headings mentioned in the as className or export file name
Make a pdf
Dont rewrite the code just Give the code as it is with description and make a pdf