ZmenuInstantDownload.tsx 1.67 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67
import React from 'react';

import useApiService from 'src/shared/hooks/useApiService';

import { InstantDownloadTranscript } from 'src/shared/components/instant-download';
import { CircleLoader } from 'src/shared/components/loader/Loader';
import { TranscriptInResponse } from 'src/content/app/entity-viewer/shared/rest/rest-data-fetchers/transcriptData';

import { LoadingState } from 'src/shared/types/loading-state';

import styles from './Zmenu.scss';

type Props = {
  id: string;
};

const ZmenuInstantDownload = (props: Props) => {
  const transcriptId = getStableId(props.id);
  const params = {
    endpoint: `/lookup/id/${transcriptId}?content-type=application/json;expand=1`,
    host: 'https://rest.ensembl.org'
  };
  const { loadingState, data, error } = useApiService<TranscriptInResponse>(
    params
  );

  if (loadingState === LoadingState.LOADING) {
    return (
      <div className={styles.zmenuInstantDowloadLoading}>
        <CircleLoader />
      </div>
    );
  }

  if (error) {
    // TODO: decide how we handle errors in this case
    return null;
  }

  return (
    <InstantDownloadTranscript
      {...preparePayload(data as TranscriptInResponse)}
      layout="vertical"
    />
  );
};

// TODO: we may want to move this to a common helper file that deals with messaging with Genome Browser
const getStableId = (id: string) => id.split(':').pop();

const preparePayload = (transcript: TranscriptInResponse) => {
  const geneId = transcript.Parent;
  const transcriptId = transcript.id;
  const so_term = transcript.biotype;

  return {
    transcript: {
      id: transcriptId,
      so_term
    },
    gene: {
      id: geneId
    }
  };
};

export default ZmenuInstantDownload;