search-context.js

import React, { useState, useEffect, useRef } from "react";
import FileSaver from "file-saver";
import qs from "qs";

const SearchContext = React.createContext({
  setFormData: () => {},
  formData: {},
  setSearchIsLoading: () => {},
  searchIsLoading: false,
  setTableData: () => {},
  tableData: {},
  fetchCompanies: () => {},
  page: undefined,
  setPage: () => {},
  getNewSearch: () => {},
  sort: {},
  sortWithColumn: () => {},
  exportSearch: () => {},
  queryParams: {},
  selectedCompanies: [],
  setSelectedCompanies: () => {}
});

const SearchContextWrapper = ({ children }) => {
  const [formData, setFormData] = useState({});
  const [searchIsLoading, setSearchIsLoading] = useState(false);
  const [tableData, setTableData] = useState(false);
  const [page, setPage] = useState(undefined);
  const [sort, setSort] = useState({});
  const [queryParams, setQueryParams] = useState({});
  const loadRef = useRef({
    hasQS: false,
    loaded: false
  });
  const [selectedCompanies, setSelectedCompanies] = useState([]);

  useEffect(() => {
    const { location } = window;
    const parsed = qs.parse(location.search.replace("?", ""));
    setQueryParams(parsed);
    loadRef.current.hasQS = true;
  }, []);

  const sortWithColumn = column => {
    if (searchIsLoading) {
      return;
    }

    if (sort?.field === column.accessor) {
      if (sort.order === "asc") {
        setSort({ field: column.accessor, order: "desc" });
      } else if (sort.order === "desc") {
        setSort({});
      }
    } else {
      setSort({ field: column.accessor, order: "asc" });
    }
  };

  const exportSearch = async ({ currentPage = page, sorting = sort }) => {
    const formRequestJson = {
      filters: formData,
      page: currentPage,
      ...(sorting?.field && { sorting })
    };

    try {
      setSearchIsLoading(true);
      const result = await fetch("/search/export-all", {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify(formRequestJson)
      });

      if (!result.ok) {
        throw new Error();
      }

      const blob = await result.blob();
      FileSaver.saveAs(blob, `privco_export_${Date.now()}.xlsx`);
      setSearchIsLoading(false);
    } catch (error) {
      setSearchIsLoading(false);
    }
  };

  const fetchCompanies = async ({
    currentPage = page,
    sorting = sort,
    src = ""
  }) => {
    const formRequestJson = {
      filters: formData,
      page: currentPage,
      size: 25,
      ...(sorting?.field && { sorting })
    };

    try {
      setSearchIsLoading(true);
      const result = await fetch("search/company/filter", {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        mode: "cors",
        body: JSON.stringify(formRequestJson)
      });

      if (!result.ok) {
        throw new Error();
      }

      const json = await result.json();
      setTableData(json);
      setSearchIsLoading(false);
    } catch (error) {
      setSearchIsLoading(false);
    }
  };

  useEffect(() => {
    if (!searchIsLoading && page !== undefined) {
      fetchCompanies({ sorting: sort, src: "sort" });
    }
  }, [sort]);

  const getNewSearch = () => {
    setPage(1);
    setSort([]);
    fetchCompanies({ currentPage: 1, sorting: [], src: "new search" });
  };

  useEffect(() => {
    if (
      loadRef.current.hasQS &&
      !loadRef.current.loaded &&
      (formData?.query || formData?.keyword?.selection?.length)
    ) {
      loadRef.current.loaded = true;
      getNewSearch();
    }
  }, [formData]);

  useEffect(() => {
    if (!searchIsLoading && page !== undefined) {
      fetchCompanies({ src: "page" });
    }
  }, [page]);

  const initialState = {
    formData,
    setFormData,
    searchIsLoading,
    setSearchIsLoading,
    tableData,
    setTableData,
    fetchCompanies,
    page,
    setPage,
    getNewSearch,
    sort,
    sortWithColumn,
    exportSearch,
    queryParams,
    selectedCompanies,
    setSelectedCompanies
  };

  return (
    <SearchContext.Provider value={initialState}>
      {children}
    </SearchContext.Provider>
  );
};

export { SearchContextWrapper, SearchContext };