Proyectos de Subversion LeadersLinked - SPA

import React from "react";

import { useSelector } from "react-redux";

import { useLocation } from "react-router-dom";

import { Search } from "@mui/icons-material";

import { Grid } from "@mui/material";

import { debounce } from "@utils";

import { useFetch, useSearchQuery } from "@hooks";

import Input from "@components/UI/inputs/Input";

import Spinner from "@components/UI/Spinner";

import Pagination from "@components/common/Pagination";

import SearchList from "@components/search/SearchList";

import SearchFilters from "@components/search/SearchFilters";

const SearchPage = () => {

  const { search, pathname } = useLocation();

  const labels = useSelector(({ intl }) => intl.labels);

  const { loading, data } = useFetch(pathname + search, {

    current: { items: [] },

    total: {

      pages: 1,

    },

  });

  const { setParam, getParam } = useSearchQuery();

  const handleSearch = debounce((e) => setParam("keyword", e.target.value));

  return (

    <>

      <Input

        icon={<Search />}

        variant="search"

        onChange={handleSearch}

        placeholder={labels.search}

        defaultValue={getParam("keyword")}

      />

      <Grid container spacing={1}>

        <Grid item xs={12} md={4} display="flex" direction="column" gap={1}>

          <SearchFilters />

        </Grid>

        <Grid item xs={12} md={8} display="flex" direction="column" gap={1}>

          {loading ? (

            <Spinner />

          ) : (

            <>

              <SearchList items={data.current.items} />

              <Pagination

                page={data.current?.page}

                pages={data.total.pages}

                onChange={(page) => setParam("page", page)}

              />

            </>

          )}

        </Grid>

      </Grid>

    </>

  );

};

export default SearchPage;