PublicationsModal.tsx

import Image from 'next/image';
import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
import { getPublications } from '@/redux/publications/publications.thunks';
import { useEffect, useMemo } from 'react';
import { publicationsListDataSelector } from '@/redux/publications/publications.selectors';
import { useAppSelector } from '@/redux/hooks/useAppSelector';
import spinnerIcon from '@/assets/vectors/icons/spinner.svg';
import { modelsNameMapSelector } from '@/redux/models/models.selectors';
import { FIRST_ARRAY_ELEMENT } from '@/constants/common';
import {
  PublicationsTable,
  PublicationsTableData,
} from './PublicationsTable/PublicationsTable.component';

export const PublicationsModal = (): JSX.Element => {
  const dispatch = useAppDispatch();
  const data = useAppSelector(publicationsListDataSelector);
  const mapsNames = useAppSelector(modelsNameMapSelector);

  const parsedData: PublicationsTableData[] | undefined = useMemo(() => {
    const dd = data?.map(item => ({
      pubmedId: item.publication.article.pubmedId,
      title: item.publication.article.title,
      authors: item.publication.article.authors,
      journal: item.publication.article.journal,
      year: item.publication.article.year,
      elementsOnMap: '{link to element on map}',
      submaps: mapsNames[item.elements[FIRST_ARRAY_ELEMENT].modelId],
    }));
    return dd || [];
  }, [data, mapsNames]);

  useEffect(() => {
    if (!data) {
      dispatch(getPublications({ params: {} }));
    }
  }, [data, dispatch]);

  return (
    <div className="flex w-full flex-1 flex-col items-center justify-center overflow-hidden bg-white">
      {/* <PublicationsSearch /> */}
      {data ? (
        <PublicationsTable data={parsedData} />
      ) : (
        <Image
          src={spinnerIcon}
          alt="spinner icon"
          height={40}
          width={40}
          className="animate-spin"
        />
      )}
    </div>
  );
};