-
Notifications
You must be signed in to change notification settings - Fork 10
/
index.jsx
74 lines (67 loc) · 2.04 KB
/
index.jsx
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
68
69
70
71
72
73
74
import React, {useEffect} from "react";
import { useQuery } from '@tanstack/react-query';
import {
Blocks,
Hero,
IconList,
IconListItem,
StatBlock
} from "@civicactions/data-catalog-components";
import Layout from '../../components/Layout';
import FeaturedDatasets from '../../components/FeaturedDatasets';
import copy from "../../assets/copy.json";
const Home = () => {
const datasets = useQuery({
queryKey: ['datasets'],
queryFn: () => {
return fetch(`${import.meta.env.VITE_REACT_APP_ROOT_URL}/metastore/schemas/dataset/items?show-reference-ids`).then(
(res) => res.json(),
)
}
}).data;
const themes = useQuery({
queryKey: ['themes'],
queryFn: () => {
return fetch(`${import.meta.env.VITE_REACT_APP_ROOT_URL}/metastore/schemas/theme/items`).then(
(res) => res.json(),
)
}
}).data;
const orderedDatasets = (datasets && datasets.length) ? datasets.sort(function(a,b) {
return a.title - b.title;
}): [];
const fDatasets = orderedDatasets.length > 3 ? orderedDatasets.slice(orderedDatasets.length -3, orderedDatasets.length) : orderedDatasets;
const items = (themes && themes.length) ?
themes.map(x => {
let item = {
identifier: x.identifier,
ref: `search?theme=${x.data}`,
title: x.data,
size: "100"
};
return item;
}) : [];
return (
<Layout title="Home">
<div className="home-page">
<Hero title={copy.hero[0].title} intro={copy.hero[0].intro} gradient={'rgb(22, 46, 81), rgb(9, 120, 188)'} />
<div className="container">
<IconList
items={items}
component={IconListItem}
paneTitle="Dataset Topics"
className="opendata-icon-list"
/>
</div>
<Blocks
items={copy.stats}
component={StatBlock}
containerClass=""
blockClass="StatBlock"
/>
<FeaturedDatasets datasets={fDatasets} />
</div>
</Layout>
);
}
export default Home;