currentCode

currentcode.js

export default function useFetchProductSubmissionTrend() {

  const [dataSeriesTrend, setDataSeriesTrend] = useState([]);
  const [selectedProductId, setSelectedProductId] = useState([]);
  const [dataSeriesHexCode, setDataSeriesHexCode] = useState([]);

  const [productList, setProductList] = useState([]);

  const [filterValue, setFilterValue] = useState({
    month: new Date().getMonth() + 1,
    year: new Date().getFullYear(),
  });

  const { data: dataTrendSubmission, refetch: refetchDataTrendSubmission } =
    useGetTrendSubmissionQuery({
      accessToken,
      month: filterValue.month,
      year: filterValue.year,
    });

  const handleChangeMonth = (event) => {
    const { value } = event.target;

    setFilterValue((state) => ({
      ...state,
      month: value === '0' ? 'all' : value,
    }));
  };

  const handleChangeYear = (event) => {
    setFilterValue((state) => ({
      ...state,
      year: event.target.value,
    }));
  };

  const handleSetDataSeriesTrend = (dataTrend) => {
    const transformedDataTrend = dataTrend?.map(
      // eslint-disable-next-line @typescript-eslint/no-unused-vars, camelcase
      ({ trends, hex, ...data }) => {
        return { ...data, data: trends };
      }
    );

    // extract hex color
    const extractHexCode = dataTrend?.map((product) => product.hex);

    // extract product id
    const extractProductId = dataTrend?.map((product) => product.id);

    setProductList(dataTrend);
    setSelectedProductId(extractProductId);
    setDataSeriesHexCode(extractHexCode);
    setDataSeriesTrend(transformedDataTrend);
  };

  const handleSelectProduct = (productId) => {
    if (selectedProductId.includes(productId)) {
      const filteredData = selectedProductId.filter(
        (item) => item !== productId
      );
      setSelectedProductId(filteredData);
    } else {
      setSelectedProductId([...selectedProductId, productId]);
    }
  };

  useEffect(() => {
    refetchDataTrendSubmission();
  }, [filterValue]);

  useEffect(() => {
    if (dataTrendSubmission?.data) {
      handleSetDataSeriesTrend(dataTrendSubmission?.data);
    }
  }, [dataTrendSubmission]);

  const filteredDataTrend = useMemo(() => {
    if (dataSeriesTrend) {
      const filteredProduct = dataSeriesTrend?.filter((item) =>
        selectedProductId?.includes(item.id)
      );
      return filteredProduct;
    }
    return [];
  }, [selectedProductId, dataSeriesTrend]);

  const options = {
    series: filteredDataTrend,
    chart: {
      type: 'area',
      height: 430,
      toolbar: { show: false },
      zoom: { enabled: false },
      stacked: true,
    },
    xaxis: {
      type: 'category',
      categories: dataTrendSubmission?.timeSeries ?? [],
      labels: {
        formatter(val) {
          return moment(val).format('D MMMM yyyy');
        },
      },
    },
    markers: {
      size: 6,
    },
    tooltip: {
      // show: false,
      // enabled: false,
      shared: false,
      intersect: true,
    },
    dataLabels: {
      show: false,
      enabled: false,
    },
    legend: {
      show: false,
    },
    colors: dataSeriesHexCode,
  };

  return {
    options,
    dataTrendSubmission,
    dataSeriesTrend,
    selectedProductId,
    productList,
    filterValue,
    handleSelectProduct,
    handleChangeMonth,
    handleChangeYear,
  };
}