SubsetDetailsPage.tsx 3.44 KB
Newer Older
1
2
3
import React from 'react';
import {Link} from 'react-router-dom';
import {useTranslation} from 'react-i18next';
Matija Obreza's avatar
Matija Obreza committed
4
// import {useSelector} from "react-redux";
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

// model
import Subset from "@genesys-pgr/client/model/subset/Subset";
import Accession from "@genesys-pgr/client/model/accession/Accession";

// service
import {AccessionService, SubsetService} from '@genesys-pgr/client/service';

// ui
import {Property} from 'ui/common/Property';
import Loading from 'ui/common/Loading';
import PageTitle from 'ui/common/PageTitle';

interface SubsetDetailsPageProps {
  match: any;
  publicWebsiteUrl: string;
}

const SubsetDetailsPage = ({match}: SubsetDetailsPageProps) => {

  // util
  const {t} = useTranslation();

  // state
  const [subset, setSubset] = React.useState<Subset>();
  const [accessions, setAccessions] = React.useState<Accession[]>();
  // redux
Matija Obreza's avatar
Matija Obreza committed
32
  // const publicWebsiteUrl = useSelector((state: any) => state?.apiInfo?.apiInfo?.publicWebsiteUrl);
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

  const loadData = React.useCallback((uuid: string): Promise<void> => {
    return SubsetService
      .get(uuid)
      .then((data) => {
        console.log('subset: ', data);
        setSubset(data);
        AccessionService
          .list({subsets: [data.uuid]}, {page: 0})
          .then((accessions) => setAccessions(accessions.content));
      })
      .catch((e) => {
        console.log('Api call failed: ', e);
      });
  }, []);

  React.useEffect(() => {
    loadData(match.params.uuid);
  }, [loadData, match.params])


  if (!subset) {
    return (
      <>
        <PageTitle title={t('loading')}/>
        <Loading/>
      </>
    );
  }

  let propertyIndex = 0;

  return (
    <>
      <PageTitle title={t('pagetitle.subset', {subsetTitle: subset.title})}/>
Matija Obreza's avatar
Matija Obreza committed
68
      <h1>{subset.title}</h1>
69

Matija Obreza's avatar
Matija Obreza committed
70
      {subset.description && <p>{subset.description}</p> }
71

Matija Obreza's avatar
Matija Obreza committed
72
      {subset.institute &&
73
      <Property
Matija Obreza's avatar
Matija Obreza committed
74
75
        title={t('subset.institute')}
        value={ subset.institute.fullName }
76
77
78
79
        index={propertyIndex++}
      />
      }

Matija Obreza's avatar
Matija Obreza committed
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
      {subset.creators && subset.creators.length > 0 && (
        <>
          <Property
            title={t('subset.creators')}
            value={
              <>
                {subset.creators.map((creat) => (
                  <div key={creat.id}><b>{ creat.fullName }</b> ({ t(`creator.role.${creat.role }`) })</div>
                ))}
              </>
            }
            index={propertyIndex++}
          />
        </>
      )}

96
97
      {subset.accessionCount &&
      <Property
Matija Obreza's avatar
Matija Obreza committed
98
        title={t('subset.accessionCount')} value={ subset.accessionCount }
99
100
101
102
103
104
        index={propertyIndex++}
      />
      }

      {subset.crops && subset.crops.length > 0 &&
      <Property
Matija Obreza's avatar
Matija Obreza committed
105
        title={t('subset.crops')} value={ subset.crops.join(', ') }
106
107
108
109
110
111
        index={propertyIndex++}
      />
      }

      {subset.source &&
      <Property
Matija Obreza's avatar
Matija Obreza committed
112
        title={t('subset.source')} value={<a href={subset.source}>{subset.source}</a>}
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
        index={propertyIndex++}
      />
      }

      {accessions && accessions.length > 0 && (
        <>
          <h2 className="mt-4">{t('subset.details.accessions')}</h2>
          <Property
            title={t('subset.accessions')}
            value={(
              <ul>{accessions.map((acc) => (
                <li key={acc.id}><Link to={`/a/${acc.uuid}`}>{acc.accessionNumber}</Link></li>
              ))}
              </ul>
            )}
            index={propertyIndex++}
          />
        </>
      )}

    </>
  );
};

export default SubsetDetailsPage;