houston-fe/src/Pages/Dashboard/index.tsx

import { FC, useState, useEffect, useRef } from 'react';

import { toast } from '@navi/web-ui/lib/primitives/Toast/index';

import FallbackComponent from '@src/components/Fallback';
import { ApiService } from '@src/services/api';
import useClickStream from '@src/services/clickStream';
import { CLICK_STREAM_EVENT_FACTORY } from '@src/services/clickStream/constants/values';
import { FETCH_INCIDENTS_DATA } from './constants';
import SearchResultsTable from './partials/SearchResultsTable';
import DashboardHeader from './partials/DashboardHeader';
import styles from './Dashboard.module.scss';
import { useDispatch, useSelector } from 'react-redux';
import { setDashboardData } from '@src/slices/dashboardSlice';
const Dashboard: FC = () => {
  const data = useSelector((state: any) => state.dashboard.data);
  const dispatch = useDispatch();
  const [pageDetails, setPageDetails] = useState({
    pageNumber: 0,
    pageSize: 10,
    totalElements: 0,
  });
  const [isLoading, setIsLoading] = useState<boolean>(false);
  const [currentPageNumber, setPageNumber] = useState<number>(0);
  const [currentPageSize, setPageSize] = useState<number>(10);
  const pageNumberRef = useRef(
    `page_number=${currentPageNumber}&page_size=${currentPageSize}`,
  );
  const searchParamRef = useRef('');

  const { fireEvent } = useClickStream();
  const { EVENT_NAME, SCREEN_NAME } = CLICK_STREAM_EVENT_FACTORY;

  const startIncidentSearch = (param = pageNumberRef.current): void => {
    const endPoint = FETCH_INCIDENTS_DATA(param);
    setIsLoading(true);
    ApiService.get(endPoint)
      .then(response => {
        setIsLoading(false);
        dispatch(setDashboardData(response?.data?.data));
        setPageDetails(response?.data?.pages);
      })
      .catch(error => {
        const toastMessage = `${
          error?.response?.data?.error?.message
            ? `${error?.response?.data?.error?.message},`
            : ''
        }
        Please reset the filters to view data.`;
        setIsLoading(false);
        toast.error(toastMessage);
        dispatch(setDashboardData([]));
      });
  };

  useEffect(() => {
    fireEvent(EVENT_NAME.Houston_dashboard_Land, {
      screen_name: SCREEN_NAME.DASHBOARD_PAGE,
    });
  }, []);

  useEffect(() => {
    startIncidentSearch();
    return () => {
      sessionStorage.removeItem('filter');
      sessionStorage.removeItem('date');
    };
  }, []);

  const handlePageNumber = (pageNumber: number): void => {
    const finalParams = `page_number=${
      pageNumber - 1
    }&page_size=${currentPageSize}`;
    setPageNumber(pageNumber - 1);
    pageNumberRef.current = `page_number=${
      pageNumber - 1
    }&page_size=${currentPageSize}`;
    startIncidentSearch(`${searchParamRef.current}${finalParams}`);
  };

  const handlePageSize = (pageSize: number): void => {
    const finalParams = `page_number=0&page_size=${pageSize}`;
    setPageSize(pageSize);
    pageNumberRef.current = `page_number=0&page_size=${pageSize}`;
    startIncidentSearch(`${searchParamRef.current}${finalParams}`);
  };

  const fetchIncidentData = (props: any): void => {
    const { filterQuery = '', isDrawer = false } = props;
    const dateparam = sessionStorage.getItem('date');
    let finalParams = filterQuery ? `${filterQuery}&` : '';
    if (dateparam) {
      if (!filterQuery.includes('from') && !filterQuery.includes('to')) {
        finalParams += dateparam + '&';
      } else {
        finalParams = filterQuery ? `${filterQuery}&` : '';
      }
    }
    setPageNumber(0);
    searchParamRef.current = finalParams;
    pageNumberRef.current = `page_number=${
      isDrawer ? currentPageNumber : '0'
    }&page_size=${currentPageSize}`;
    startIncidentSearch(`${finalParams}${pageNumberRef.current}`);
  };

  const returnTable = (): JSX.Element => {
    if (isLoading) {
      return <FallbackComponent />;
    }
    return (
      <div className={styles['table-wrapper']}>
        <SearchResultsTable
          currentPageSize={currentPageSize}
          currentPageData={data}
          pageDetails={pageDetails}
          handlePageNumberChange={handlePageNumber}
          handlePageSizeChange={handlePageSize}
          fetchIncidentData={fetchIncidentData}
        />
      </div>
    );
  };

  return (
    <div className={styles['dashboard-wrapper']}>
      <DashboardHeader fetchIncidentData={fetchIncidentData} />
      {returnTable()}
    </div>
  );
};

export default Dashboard;