Select Git revision
tmss_test_data_rest.py
Code owners
Assign users and groups as approvers for specific file changes. Learn more.
Main.js 3.07 KiB
import React, {useState, useEffect } from 'react';
import '../App.css';
import { get_backend_url } from '../utils/web'
import { useGlobalReducer } from '../Store';
import { useFetchArchives } from '../hooks/useFetchArchives';
import { useFetchDataSets } from '../hooks/useFetchDataSets';
import { NavigationBar } from './NavigationBar';
import ArchivesPage from '../routes/archives/ArchivesPage';
import DataSetsPage from '../routes/datasets/DataSetsPage';
import TelescopesPage from '../routes/telescopes/TelescopesPage';
import ArchiveDetails from '../routes/details/ArchiveDetails';
import QueryPage from '../routes/query/QueryPage';
import { About } from './About';
import {
BrowserRouter as Router,
Switch,
Route,
useParams
} from "react-router-dom";
// This site has multiple pages, all of which are rendered
// dynamically in the browser (not server rendered).
//
// Although the page does not ever refresh, notice how
// React Router keeps the URL up to date as you navigate
// through the site. This preserves the browser history,
// making sure things like the back button and bookmarks
// work properly.
function Main () {
// use global state
const [ my_state , my_dispatch] = useGlobalReducer()
// note that the resource 'archives-uri' is fetched instead of the more (human friendly) 'archives'
useFetchArchives(get_backend_url("/esap-api/archives-uri"),{onMount:true})
//useFetchDataSets(get_backend_url("/esap-api/datasets-uri"),{onMount:true})
return (
// basename defines which path is is added before the routing urls.
<Router basename="esap-gui">
<div>
<NavigationBar/>
{/*
A <Switch> looks through all its children <Route>
elements and renders the first one whose path
matches the current URL. Use a <Switch> any time
you have multiple routes, but you want only one
of them to render at a time
*/}
<Switch>
<Route exact path="/">
<ArchivesPage />
</Route>
<Route path="/telescopes">
<TelescopesPage />
</Route>
<Route path="/archives">
<ArchivesPage />
</Route>
<Route path="/datasets">
<DataSetsPage />
</Route>
<Route path="/query">
<QueryPage />
</Route>
<Route path="/about">
<About />
</Route>
<Route path="/archive/:uri" children={<DetailsForward />} />
</Switch>
</div>
<footer><small>ASTRON - version 0.4.3 - 17 feb 2020</small></footer>
</Router>
);
}
// reroute to dataproduct details
function DetailsForward() {
let { uri } = useParams();
return (
<ArchiveDetails uri={uri}/>
);
}
export default Main;