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;