showOverview with Redux

entrypoints/client.tsx

-import { showGenesysUI } from 'genesys';
+import {
+  showGenesysUI,
+  // showOverview, // for testing
+} from 'genesys';
 
 const queryLang = document.location.search && document.location.search.substr(1) || undefined;
 
-showGenesysUI(document.getElementById('genesys'), {
+const config = {
   clientId: 'defaultclient@localhost',
   clientKey: 'changeme',
   apiUrl: 'http://localhost:8080',
   filter: { institute: { code: [ 'COL003', 'BEL084', 'ETH013' ] } },
   accession: { enabled: true },
   language: { locale: queryLang, enableSwitch: true },
-  request: { enabled: false },
-});
+  request: { enabled: true },
+};
+
+showGenesysUI(document.getElementById('genesys'), config);
+// showOverview(document.getElementById('genesys'), config);

src/accession/AccessionOverviewSection.tsx

@@ -193,7 +193,7 @@ class AccessionOverviewSection extends React.Component<IAccessionOverviewPagePro
 }
 
 const mapStateToProps = (state) => ({
-  countryCodes: state.decoding.codes,
+  countryCodes: state.decoding.countryCodes,
 });
 
 export default connect(mapStateToProps)(withTranslation()(AccessionOverviewSection));

src/config/config.ts

@@ -5,15 +5,20 @@ export class Config {
   public filter: Record<string, any>;
 
   // module config
-  public accession: BaseFeatureConfig;
   public language: Partial<LanguageConfig>;
-  public request: BaseFeatureConfig;
+  public accession?: BaseFeatureConfig;
+  public request?: BaseFeatureConfig;
 
   public constructor(config: Config) {
     this.apiUrl = config.apiUrl;
     this.clientId = config.clientId;
     this.clientKey = config.clientKey;
     this.filter = config.filter;
+
+    // features
+    this.accession = config.accession || {} as BaseFeatureConfig;
+    this.request = config.request || {} as BaseFeatureConfig;
+    this.language = config.language || { locale: 'en' };
   }
 }
 
@@ -34,4 +39,4 @@ export const DefaultConfig = new Config( {
   language: { locale: 'en', enableSwitch: true },
   accession: { enabled: true },
   request: { enabled: true },
-})
+});

src/core/reducer/decoding.ts

@@ -3,9 +3,9 @@ import update from 'immutability-helper';
 import { RECEIVE_COUNTRY_CODES_DECODED } from 'core/constants/decoding';
 
 const INITIAL_STATE: {
-  codes: Record<string, string>,
+  countryCodes: Record<string, string>,
 } = {
-  codes: null,
+  countryCodes: null,
 };
 
 export default (state = INITIAL_STATE, action: { type?: string, payload?: any } = { type: '', payload: {} }) => {
@@ -13,7 +13,7 @@ export default (state = INITIAL_STATE, action: { type?: string, payload?: any }
   switch (action.type) {
     case RECEIVE_COUNTRY_CODES_DECODED: {
       return update(state, {
-        codes: { $set: action.payload },
+        countryCodes: { $set: action.payload },
       });
     }
 

src/genesys.tsx

@@ -52,10 +52,10 @@ function checkAccessTokens(apiUrl: string, clientId: string, clientSecret: strin
 };
 
 export function showGenesysUI(holdingNode: HTMLElement, config: Config = DefaultConfig) {
-  const { apiUrl, clientId, clientKey } = config;
+  const { apiUrl, clientId, clientKey, language } = config;
   reconfigureServiceAxios({ apiUrl });
 
-  initI18n(config.language.locale);
+  initI18n(language.locale);
   store.dispatch(setConfig(config));
 
   checkAccessTokens(apiUrl, clientId, clientKey).then( (result) => {
@@ -76,16 +76,19 @@ export function showGenesysUI(holdingNode: HTMLElement, config: Config = Default
 }
 
 
-export function showOverview(holdingNode: HTMLElement, config: Config = DefaultConfig, language: string = 'en') {
-  const { apiUrl, clientId, clientKey, filter } = config;
+export function showOverview(holdingNode: HTMLElement, config: Config = DefaultConfig) {
+  const { apiUrl, clientId, clientKey, language } = config;
   reconfigureServiceAxios({ apiUrl });
 
-  initI18n(language);
+  initI18n(language.locale);
+  store.dispatch(setConfig(config));
 
   checkAccessTokens(apiUrl, clientId, clientKey).then( (result) => {
 
     ReactDOM.render(
-      <OverviewPage filter={ filter } />,
+      <Provider store={ store }>
+        <OverviewPage/>
+      </Provider>,
       holdingNode,
     );
   }).catch((err) => {