Tryag File Manager

/var/www/html/tpid-konsulin/konsulin-cust-react/src/views/SearchPage.tsx

import { Capacitor } from '@capacitor/core'
import images from 'assets/images'
import { Header, ModalFilterProduct, ProductItem } from 'components'
import { API } from 'config/api'
import { useGlobalContext } from 'hooks/context'
import { useFilterData } from 'hooks/useFIlterData'
import { useGet, usePost } from 'hooks/useRequest'
import React, { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { FILTER_PRODUCT } from './ProductList'

export const SearchPage: React.FC = () => {
  const navigate = useNavigate()
  const { openAlert } = useGlobalContext()
  const [searchItem, setSearchItem] = useState<string>()
  const [productList, setProductList] = useState<any>([])
  const [popularList, setPopularList] = useState<any>([])
  const [dataProduct, getProduct] = usePost({ isLoading: false })
  const [dataBestSeller, getDataBestSeller] = useGet()
  const [enterPress, setEnterPress] = useState<boolean>(false)
  const [showModalFilter, setModalFilter] = useState<boolean>(false)
  const [currentFilter, setCurrentFilter] = useState<any>({
    selectedFilter: '',
    max: null,
    min: null,
    selectedCity: [],
    selectedPromo: [],
    ratingProduct: [],
    sellProduct: {},
  })
  const { filterCity, filterOrderBy, filterPromo } = useFilterData()
  const [isFiltered, setFiltered] = useState<boolean>(false)
  let debounceTimeout: any = 100

useEffect(() => {
    const { data } = dataProduct
    if (data?.status === 'success') {
      setProductList(data?.result)
    } else if (data?.status === 'fail') {
      setProductList([])
    }
  }, [dataProduct])

useEffect(() => {
    const { data } = dataBestSeller
    if (data?.status === 'success') {
      setPopularList(data?.result)
    } else if (data?.status === 'fail') {
      openAlert({ messages: data?.messages })
    }
  }, [dataBestSeller])

useEffect(() => {
    getDataBestSeller.getRequest(API.HOME_PRODUCT_RECOMMENDATION)
  }, [])

useEffect(() => {
    debounceTimeout = setTimeout(() => {
      getProduct.getRequest(API.PRODUCT_CATEGORY_LIST, {
        search_key: searchItem,
        filter_sorting: currentFilter.selectedFilter,
        filter_min_price: currentFilter.min,
        filter_max_price: currentFilter.max,
        city: currentFilter.selectedCity,
        promo: currentFilter.selectedPromo,
        rating: currentFilter.ratingProduct,
        sell: currentFilter.sellProduct,
      })
    }, 300)
  }, [searchItem])

const handleSearch = (
    search_key: any,
    filter?: {
      selectedFilter?: string
      max?: number
      min: number
      city?: Array<number>
      promo?: Array<number>
      rating?: Array<number>
      sell?: any
    }
  ) => {
    setEnterPress(false)
    if (search_key) {
      if (debounceTimeout) {
        clearTimeout(debounceTimeout)
      }
      setSearchItem(search_key)
    } else if (filter) {
      setFiltered(true)
      getProduct.getRequest(API.PRODUCT_CATEGORY_LIST, {
        search_key: search_key,
        filter_sorting: filter.selectedFilter,
        filter_min_price: filter.min,
        filter_max_price: filter.max,
        city: filter.city,
        promo: filter.promo,
        rating: filter.rating,
        sell: filter.sell,
      })
    }
  }

const handleFilter = (
    selectedFilter: string,
    max: number,
    min: number,
    selectedCity?: Array<number>,
    selectedPromo?: Array<number>,
    ratingProduct?: Array<number>,
    sellProduct?: any
  ) => {
    setFiltered(true)
    setEnterPress(true)
    setSearchItem(searchItem)
    getProduct.getRequest(API.PRODUCT_CATEGORY_LIST, {
      search_key: searchItem,
      filter_sorting: selectedFilter,
      filter_max_price: max,
      filter_min_price: min,
      city: selectedCity,
      promo: selectedPromo,
      rating: ratingProduct,
      sell: sellProduct,
    })
    setCurrentFilter({
      selectedFilter: selectedFilter,
      max: max,
      min: min,
      selectedCity: selectedCity,
      selectedPromo: selectedPromo,
      ratingProduct: ratingProduct,
      sellProduct: sellProduct,
    })
  }

return (
    <div className='-mx-4 h-full -mt-[1.2rem] bg-white'>
      <div className='ml-4'>
        <Header
          autoFocus
          placeholder='Ketik Nama Produk'
          onBackClick={() => navigate(-1)}
          onSearchClick={() => void 0}
          onSearchItem={(e) => handleSearch(e)}
          onEnterPress={(e) => setEnterPress(true)}
        />
      </div>

{!searchItem && (
        <div>
          <p className='text-sm text-neutral-30 mb-4 mx-4 font-semi-bold pt-4'>
            PENCARIAN POPULER
          </p>
          {popularList?.map((items: any) => (
            <div
              className='py-4 mx-4 -mt-5 flex items-center gap-4'
              onClick={() =>
                navigate(`/store/product-detail/${items.id_product}`)
              }
            >
              <img src={items?.image} alt='' className='w-8 h-8 rounded' />
              <p className='text-sm'>{items?.product_name}</p>
            </div>
          ))}
        </div>
      )}

<div className='pt-2'>
        {searchItem && productList?.length !== 0 && !enterPress ? (
          productList?.map((item: any) => (
            <div
              className='flex items-center mx-8 gap-4 border-b border-b-neutral-10 mb-4 mt-2 pb-2 last:border-b-0'
              onClick={
                item?.stock_status === 'Sold Out'
                  ? () => void null
                  : () => navigate(`/store/product-detail/${item.id_product}`)
              }
            >
              <img src={images?.ic_search_plain} alt='' className='w-6 h-6' />
              <p>{item?.product_name}</p>
            </div>
          ))
        ) : (
          <div
            className={`pt-4 w-full flex items-center gap-4 px-4 mb-4, ${
              searchItem ? '' : 'hidden'
            }`}
          >
            <img src={images.ic_search} alt='' className='w-6 h-6' />
            <p className='text-sm'>Hasil Pencarian Untuk {searchItem}</p>
          </div>
        )}
      </div>

{searchItem && productList?.length !== 0 && enterPress && (
        <div className='grid grid-cols-2 gap-4 mx-4 pb-4 mt-4'>
          {productList?.map((item: any) => (
            <ProductItem
              item={item}
              parentCategory={item?.product_category_name}
              onClick={
                item?.stock_status === 'Sold Out'
                  ? () => void null
                  : () => navigate(`/store/product-detail/${item.id_product}`)
              }
              onDeleteWishlist={() => void 0}
            />
          ))}
        </div>
      )}

{searchItem && productList?.length === 0 && enterPress && !isFiltered && (
        <div className='my-auto mx-4 mt-8'>
          <img
            src={images.bg_no_product}
            alt=''
            className='mx-auto w-60 h-60'
          />
          <p className='text-sm font-semi-bold text-center text-primary-base mt-4'>
            Tidak Ada Hasil Pencarian Untuk {searchItem}
          </p>
        </div>
      )}

{searchItem && productList?.length === 0 && enterPress && isFiltered && (
        <div className='my-auto mx-4 mt-8'>
          <img
            src={images.bg_no_product}
            alt=''
            className='mx-auto w-60 h-60'
          />
          <p className='text-sm font-semi-bold text-center text-primary-base mt-4'>
            Produk tidak ditemukan
          </p>
        </div>
      )}

{searchItem && productList?.length !== 0 && enterPress && (
        <div
          className={`fixed bottom-0 w-full mx-auto pb-5 z-20 ${
            Capacitor.isNativePlatform()
              ? 'max-w-content-full'
              : 'max-w-content ml-4'
          }`}
        >
          <div className='flex mx-auto -ml-4 justify-center items-center w-full'>
            <div
              className='flex bg-white w-fit p-1 px-2 gap-2 rounded-md shadow-md items-center'
              onClick={() => setModalFilter(true)}
            >
              <img src={images?.ic_filter} alt='' className='w-6' />
              <p className='text-primary-light text-sm'>Filter</p>
            </div>
          </div>
        </div>
      )}

<ModalFilterProduct
        showModalFilter={showModalFilter}
        filterDataSet={filterOrderBy}
        filterCity={filterCity}
        filterPromo={filterPromo}
        isRating
        isSellFilter
        onSubmitFilter={(
          selectedFilter,
          max,
          min,
          selectedCity,
          selectedPromo,
          ratingProduct,
          sellProduct
        ) =>
          handleFilter(
            selectedFilter,
            max!,
            min!,
            selectedCity,
            selectedPromo,
            ratingProduct,
            sellProduct
          )
        }
        handleHideFilter={() => setModalFilter(false)}
      />
    </div>
  )
}