Lesson 37 (Video 35)- Create Search Box Error

import React, { useEffect, useReducer, useState } from ‘react’;
import { Link, useNavigate, useLocation } from ‘react-router-dom’;
import axios from ‘axios’;
import { toast } from ‘react-toastify’;
import { getError } from ‘../utils’;
import { Helmet } from ‘react-helmet-async’;
import Row from ‘react-bootstrap/Row’;
import Col from ‘react-bootstrap/Col’;
import Rating from ‘../components/Rating’;
import LoadingBox from ‘../components/LoadingBox’;
import MessageBox from ‘../components/MessageBox’;
import Button from ‘react-bootstrap/Button’;
import Product from ‘../components/Product’;
import LinkContainer from ‘react-router-bootstrap/LinkContainer’;

const reducer = (state, action) => {
switch (action.type) {
case ‘FETCH_REQUEST’:
return { …state, loading: true };
case ‘FETCH_SUCCESS’:
return {
…state,
products: action.payload.products,
page: action.payload.page,
pages: action.payload.pages,
countProducts: action.payload.countProducts,
loading: false,
};
case ‘FETCH_FAIL’:
return { …state, loading: false, error: action.payload };

default:
return state;
}
};

const prices = [
{
name: ‘$1 to $50’,
value: ‘1-50’,
},
{
name: ‘$51 to $200′,
value: ’51-200’,
},
{
name: ‘$201 to $1000’,
value: ‘201-1000’,
},
];

export const ratings = [
{
name: ‘4stars & up’,
rating: 4,
},

{
name: ‘3stars & up’,
rating: 3,
},

{
name: ‘2stars & up’,
rating: 2,
},

{
name: ‘1stars & up’,
rating: 1,
},
];

export default function SearchScreen() {
const navigate = useNavigate();
const { search } = useLocation();
const sp = new URLSearchParams(search);
const category = sp.get(‘category’) || ‘all’;
const query = sp.get(‘query’) || ‘all’;
const price = sp.get(‘price’) || ‘all’;
const rating = sp.get(‘rating’) || ‘all’;
const order = sp.get(‘order’) || ‘newest’;
const page = sp.get(‘page’) || 1;

const [{ loading, error, products, pages, countProducts }, dispatch] =
useReducer(reducer, {
loading: true,
error: ”,
});

useEffect(() => {
const fetchData = async () => {
try {
const { data } = await axios.get(‘/api/products/search’, {
params: {
page: page,
query: query,
category: category,
price: price,
rating: rating,
order: order,
},
});
dispatch({ type: ‘FETCH_SUCCESS’, payload: data });
} catch (err) {
dispatch({
type: ‘FETCH_FAIL’,
payload: getError(error),
});
}
};
fetchData();
}, [category, error, order, page, price, query, rating]);

const [categories, setCategories] = useState([]);
useEffect(
() => {
const fetchCategories = async () => {
try {
const { data } = await axios.get(`/api/products/categories`);
setCategories(data);
} catch (err) {
toast.error(getError(err));
}
};
fetchCategories();
},
[dispatch],
categories
);

const getFilterUrl = (filter) => {
const filterPage = filter.page || page;
const filterCategory = filter.category || category;
const filterQuery = filter.query || query;
const filterRating = filter.rating || rating;
const filterPrice = filter.price || price;
const sortOrder = filter.order || order;
return {
pathname: ‘/search’,
search: `?category=${filterCategory}&query=${filterQuery}&price=${filterPrice}&rating=${filterRating}&order=${sortOrder}&page=${filterPage}`,
};
};
return (

Search Products

Department

Any

{categories.map((c) => (

{c}

))}

Price

Any

{prices.map((p) => (

{p.name}

))}

Avg. Customer Review

{ratings.map((r) => (

))}

{loading ? (

) : error ? (
{error}
) : (

{countProducts === 0 ? ‘No’ : countProducts} Results
{query !== ‘all’ && ‘ : ‘ + query}
{category !== ‘all’ && ‘ : ‘ + category}
{price !== ‘all’ && ‘ : Price ‘ + price}
{rating !== ‘all’ && ‘ : Rating ‘ + rating + ‘ & up’}
{query !== ‘all’ ||
category !== ‘all’ ||
rating !== ‘all’ ||
price !== ‘all’ ? (
navigate(‘/search’)}
>

) : null}

Sort by{‘ ‘}
{
navigate(getFilterUrl({ order: e.target.value }));
}}
>
Newest Arrivals
Price: Low to High
Price: High to Low
Avg. Customer Reviews

{products.length === 0 && (
No Product Found
)}

{products.map((product) => (

))}

{[…Array(pages).keys()].map((x) => (

{x + 1}

))}

)}

);
}