adding configurability

src/components/Main.js

@@ -4,7 +4,7 @@ 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 { useFetchConfiguration } from '../hooks/useFetchConfiguration';
 
 import { NavigationBar } from './NavigationBar';
 import ArchivesPage from '../routes/archives/ArchivesPage';
@@ -37,9 +37,10 @@ function Main () {
     // use global state
     const [ my_state , my_dispatch] = useGlobalReducer()
 
+    useFetchConfiguration(get_backend_url("/esap-api/configuration"),{onMount:true})
+
     // 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.
@@ -84,7 +85,7 @@ function Main () {
                 </Switch>
             </div>
 
-            <footer><small>ASTRON - version 0.6.1 - 10 mar 2020</small></footer>
+            <footer><small>ASTRON - version 0.6.1 - 16 mar 2020</small></footer>
         </Router>
     );
 }

src/components/NavigationBar.js

 import React from 'react';
 
 import { Navbar, Nav } from 'react-bootstrap';
+
 import logo from '../assets/esap_logo.png';
 import { NavLink } from "react-router-dom"
 import { get_backend_url } from '../utils/web'
+import { GetLogo } from '../utils/config'
+
 
 export function NavigationBar() {
     const ESAP_GATEWAY = get_backend_url("/esap-api/")
+    console.log('NavigationBar')
+    let logo = GetLogo()
 
     return (
         <Navbar bg="dark" variant="dark">

src/components/buttons/AddToBasketButton.js

@@ -3,63 +3,17 @@ import {Button } from 'react-bootstrap'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faShoppingCart } from '@fortawesome/free-solid-svg-icons'
 
-import { get_backend_url } from '../../utils/web'
-import { RunQuery } from '../../utils/query'
-
-import { useGlobalReducer } from '../../Store';
-import { useFetchRunQuery } from '../../hooks/useFetchRunQuery';
-
-import { SET_DATASETS_TO_QUERY } from '../../reducers/GlobalStateReducer';
 
 // show a clickable icon
 export default function AddToBasketButton(props) {
 
-    // custom hooks
-    const [my_state, my_dispatch] = useGlobalReducer()
-    const fetchRunQuery = useFetchRunQuery(get_backend_url("/esap-api/run-query"), {})
-
-
-    const runQuery = (input_query) => {
-
-        let query = input_query.query
-
-        // if this is a VO query, then cut off everything but the ADQL itself so that the backend can parse it.
-        if (input_query.esap_service.toUpperCase()==='VO') {
-            //let query = input_query.query
-            let s = query.split('&QUERY=')
-            query = s[1]
-        }
-
-        let url = get_backend_url("/esap-api/run-query") + "?dataset_uri=" + input_query.dataset + "&query=" + query
-
-        // encode it
-        let s = encodeURI(url)
-
-        fetchRunQuery.fetchData(s, input_query.dataset)
-    }
-
-
-    // run all the queries in the selected list of queries
-    const runQueries = (queries) => {
-        let datasets_to_query = []
-        for (var i=0; i< queries.length; i++) {
-            datasets_to_query.push(queries[i].dataset)
-        }
-
-        // store the list of datasets to query. This can later be used as keys to iterate over the results
-        my_dispatch({type: SET_DATASETS_TO_QUERY, datasets_to_query: datasets_to_query})
-
-        // run the queries by firing a asyc request per query
-        queries.map(query => runQuery(query))
-    }
-
     // only show the  button when there is content
     if (!props) {
         return null
     }
 
     return (
-        <Button variant="outline-primary" onClick={() => runQueries(props.queries)}> <FontAwesomeIcon icon={faShoppingCart} /> Add To Basket</Button>
+        <Button variant="outline-primary" > <FontAwesomeIcon icon={faShoppingCart} /> Add To Basket</Button>
     );
 }
 

src/components/buttons/RunQueriesButton.js

@@ -4,7 +4,6 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faSyncAlt } from '@fortawesome/free-solid-svg-icons'
 
 import { get_backend_url } from '../../utils/web'
-import { RunQuery } from '../../utils/query'
 
 import { useGlobalReducer } from '../../Store';
 import { useFetchRunQuery } from '../../hooks/useFetchRunQuery';

src/config.js

-
-export function get_host() {
-    let protocol = window.location.protocol;
-    let slashes = protocol.concat("//");
-    let host = slashes.concat(window.location.hostname);
-    return host
-}
-
-export function get_alta_observations_url() {
-    let host = window.location.hostname;
-    let base_url
-
-    if (process.env.NODE_ENV === 'development') {
-        base_url = "http://localhost:8000/altapi/observations"
-    } else {
-        base_url = "https://"+host+"/altapi/observations"
-    }
-    return base_url
-}
-
-export function get_alta_releases_url() {
-    let protocol = window.location.protocol;
-    let slashes = protocol.concat("//");
-    let host = slashes.concat(window.location.hostname);
-    let base_url = host.concat("/altapi/releases")
-
-    if (process.env.NODE_ENV === 'development') {
-        base_url = "http://localhost:8000/altapi/releases"
-    }
-
-    return base_url
-}
-
-export function get_alta_frontend_query_url() {
-    let host = window.location.hostname;
-    let base_url
-
-    if (process.env.NODE_ENV === 'development') {
-        base_url = "http://localhost:3000/science/query"
-    } else {
-        base_url = "https://"+host+"/science/query"
-    }
-    return base_url
-}
-
-export function get_alta_frontend_observations_url() {
-    let host = window.location.hostname;
-    let base_url
-    if (process.env.NODE_ENV === 'development') {
-        base_url = "http://localhost:3000/science/observations"
-    } else {
-        base_url = "https://"+host+"/science/observations"
-    }
-    return base_url
-}
\ No newline at end of file

src/hooks/useFetchConfiguration.js

+import React, {useState, useEffect }  from 'react';
+import { useGlobalReducer } from '../Store';
+import { SET_CONFIGURATION, SET_STATUS_CONFIGURATION } from '../reducers/GlobalStateReducer';
+
+export const useFetchConfiguration = (url, options) => {
+    // use global state
+    const [ my_state , my_dispatch] = useGlobalReducer()
+    const [response, setResponse] = React.useState(null);
+    const [error, setError] = React.useState(null);
+
+    const fetchData = async (url) => {
+        try {
+
+            // dispatch the status to the global state
+            my_dispatch({type: SET_STATUS_CONFIGURATION, status: 'fetching'})
+
+            const res = await fetch(url, options);
+            const json = await res.json();
+
+            // this sets the json in the response, which is in itself a useState hook
+            setResponse(json);
+
+            // dispatch the fetched data and the status to the global state
+            my_dispatch({type: SET_CONFIGURATION, configuration: json})
+            my_dispatch({type: SET_STATUS_CONFIGURATION, status: 'fetched_configuration'})
+
+
+        } catch (error) {
+            setError(error);
+            my_dispatch({type: SET_STATUS_CONFIGURATION, status: 'error fetching configuration'})
+        }
+    };
+
+    React.useEffect(() => {
+        if(options.onMount){
+            fetchData(url);
+        }
+    }, []);
+
+    return { response, error, fetchData };
+};
\ No newline at end of file

src/reducers/GlobalStateReducer.js

@@ -2,6 +2,9 @@
 // This is the reducer for the global state providor.
 
 // possible actions
+export const SET_STATUS_CONFIGURATION = 'SET_STATUS_CONFIGURATION'
+export const SET_CONFIGURATION = 'SET_CONFIGURATION'
+
 export const SET_STATUS_ARCHIVES = 'SET_STATUS'
 export const SET_ACTIVE_ARCHIVE = 'SET_ACTIVE_ARCHIVE'
 export const SET_FETCHED_ARCHIVES = 'SET_FETCHED_ARCHIVES'
@@ -17,8 +20,10 @@ export const SET_FETCHED_QUERY_INPUT = 'SET_FETCHED_QUERY_INPUT'
 export const SET_FETCHED_QUERY_RESULTS = 'SET_FETCHED_QUERY_RESULTS'
 
 export const initialState = {
+        configuration: undefined,
+        status_configuration: "unfetched",
         status: "unfetched",
-        status_datasets: "unfeched",
+        status_datasets: "unfetched",
         status_query: "unfetched",
         id: undefined,
         archive: undefined,
@@ -35,6 +40,18 @@ export const initialState = {
 export const reducer = (state, action) => {
     switch (action.type) {
 
+        case SET_STATUS_CONFIGURATION:
+            return {
+                ...state,
+                status: action.status
+            };
+
+        case SET_CONFIGURATION:
+            return {
+                ...state,
+                configuration: action.configuration
+            };
+
         case SET_STATUS_ARCHIVES:
             return {
                 ...state,

src/routes/query/QueryArchives.js

@@ -12,7 +12,7 @@ import { useLocalStorage } from '../../hooks/useLocalStorage';
 import { SET_ESAP_QUERY, SET_FETCHED_QUERY_INPUT, SET_FETCHED_QUERY_RESULTS, SET_STATUS_RUN_QUERY } from '../../reducers/GlobalStateReducer'
 import { useFetchCreateQuery } from '../../hooks/useFetchCreateQuery';
 
-import schema_archives from './schema_archives.json'
+import schema_archives from './schema_datasets.json'
 
 
 export default function QueryArchives(props) {

src/utils/config.js

+import React from 'react';
+import { useGlobalReducer } from '../Store';
+
+import default_logo from '../assets/esap_logo.png';
+
+// note that the function name must start with a capital,
+// otherwise the function is not recognized as a react hook function.
+
+export function GetLogo() {
+    const [my_state, my_dispatch] = useGlobalReducer()
+
+    let logo = default_logo
+
+    try {
+        logo = my_state.configuration.config_from_settings.logo
+        if (logo===undefined) {
+            logo = default_logo
+        }
+
+    } catch (e) {
+        logo = default_logo
+    }
+
+    return logo
+}
\ No newline at end of file

src/utils/query.js

-import React from 'react';
-import { get_backend_url } from './web'
-
-import { useGlobalReducer } from '../Store';
-import { useFetchRunQuery } from '../hooks/useFetchRunQuery';
-
-// weird pitfall, if the function name is not capitalized then the function is not recognized as a React Hook Function.
-export function RunQuery(input_query) {
-
-    const [my_state, my_dispatch] = useGlobalReducer()
-    const fetchRunQuery = useFetchRunQuery(get_backend_url("/esap-api/run-query"), {})
-
-    let query = input_query.query
-
-    // if this is a VO query, then cut off everything but the ADQL itself so that the backend can parse it.
-    if (input_query.protocol.toUpperCase()==='ADQL') {
-        //let query = input_query.query
-        let s = query.split('&QUERY=')
-        query = s[1]
-    }
-
-    let url = get_backend_url("/esap-api/run-query") + "?dataset_uri=" + input_query.dataset + "&query=" + query
-
-    // encode it
-    let s = encodeURI(url)
-
-    alert(s)
-
-    fetchRunQuery.fetchData(url)
-
-    //my_dispatch({type: SET_ACTIVE_ARCHIVE, archive: archive})
-}

src/utils/web.js

@@ -6,6 +6,7 @@ export function get_backend_host() {
     let protocol = window.location.protocol;
     let slashes = protocol.concat("//");
     let host = slashes.concat(window.location.hostname);
+    //let host = "http://uilennest.net/esap-api/"
     return host
 }