trampa-frontend/src/hooks/useSorting.js

import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { sortEnum } from "../enums/sortEnum";
import { setFilteredSortOption } from "../store/actions/filters/filtersActions";
import { selectSelectedSortOption } from "../store/selectors/filtersSelectors";
import { useQueryString } from "./useQueryString";
import { convertQueryStringFrontend } from "../util/helpers/queryHelpers";
import {
  KEY_PAGE,
  KEY_SORTBY,
  KEY_SORT_DATE,
  KEY_SORT_POPULAR,
  VALUE_SORTBY_NEW,
  VALUE_SORTBY_OLD,
  VALUE_SORTBY_POPULAR,
} from "../constants/queryStringConstants";

const useSorting = () => {
  const dispatch = useDispatch();
  const selectedSortOption = useSelector(selectSelectedSortOption);
  const sortOptions = sortEnum;
  const queryStringHook = useQueryString();

  // Setting sort option on initially load or refresh page
  useEffect(() => {
    if (queryStringHook.loadedFromURL) {
      const queryString = queryStringHook.queryString;
      let queryObject = new URLSearchParams(
        convertQueryStringFrontend(queryString)
      );
      if (queryObject.has(KEY_SORTBY)) {
        if (queryObject.get(KEY_SORTBY) === VALUE_SORTBY_NEW) {
          setSelectedSortOption(sortEnum.NEW);
        }
        if (queryObject.get(KEY_SORTBY) === VALUE_SORTBY_OLD) {
          setSelectedSortOption(sortEnum.OLD);
        }
        if (queryObject.get(KEY_SORTBY) === VALUE_SORTBY_POPULAR) {
          setSelectedSortOption(sortEnum.POPULAR);
        }
      } else {
        setSelectedSortOption(sortOptions.INITIAL);
      }
    }
  }, [queryStringHook.queryString, queryStringHook.loadedFromURL]);

  const setSelectedSortOption = (payload, shouldGoFirstPage = false) => {
    dispatch(setFilteredSortOption(payload));
    let _des_date = null;
    let _des_popular = null;
    if (payload.value === sortOptions.NEW.value) {
      _des_date = true;
    }
    if (payload.value === sortOptions.OLD.value) {
      _des_date = false;
    }
    if (payload.value === sortOptions.POPULAR.value) {
      _des_popular = true;
    }
    let queryArray = [];
    if (_des_date !== null) {
      queryArray.push({ key: KEY_SORT_DATE, value: `${_des_date}` });
      queryArray.push({ key: KEY_SORT_POPULAR });
    }
    if (_des_popular !== null) {
      queryArray.push({ key: KEY_SORT_POPULAR, value: `${_des_popular}` });
      queryArray.push({ key: KEY_SORT_DATE });
    }
    if (shouldGoFirstPage) {
      queryArray.push({ key: KEY_PAGE, value: "1" });
    }
    queryStringHook.appendMultipleToQueryString(queryArray);
  };

  const changeSorting = (payload) => {
    setSelectedSortOption(payload, true);
  };

  return {
    selectedSortOption,
    setSelectedSortOption,
    sortOptions,
    changeSorting,
  };
};
export default useSorting;