Feeding backend configs to React Components

mksd · July 9, 2019, 10:39am

Let me present a simple use case to ask my question. @andu033 is integrating Attachments widgets into React Components as part of GSoC 2019. When coming to the thumbnail component we need to know in which format to display the date-time stamp. Attachments (the module) has been providing this to its framing GSP pages through a config passed on from the controller (here and here). This was simple because everything was “attachments”.

Now in React Components, I understand that we want components to be standalone, however they might need to share configs for the sake of UI consistency. Such as how to format dates for instance.

I saw this

github.com

openmrs/openmrs-react-components/blob/d48744d6eb8dc46aa406dabb1390645b9038c3b9/src/components/widgets/CustomDatePicker.jsx#L162


    customInput={
    <DateDisplay
      hasInput={hasInput}
      usePortalMode={usePortalMode}
      formControlStyle={this.props.formControlStyle}
      error
      label={otherProps.label}
      labelClassName={otherProps.labelClassName}
    />
  }
    dateFormat="dd MMM yyyy"
    onChange={this.handleChange}
    minDate={this.props.minDate}
    maxDate={this.props.maxDate}
    selected={selected}
    excludeDates={[hasInput]}
    withPortal={usePortalMode}
  />
);


const displayValue = otherProps.displayValue === undefined ? ' ' : format(parse(otherProps.displayValue), DATE_FORMAT);

How do we avoid this for instance? Should the store maintain an expandable configuration, or what would be your take on this?

mogoodrich · July 9, 2019, 3:56pm

@mksd my quick thought would be that a “dateFormat” prop is added to the “CustomDatePicker” element, and it passes that on the DateDisplay.

That prop would be mandatory, but would have a default value of “dd MMM yyyy”.

Longer term, we may want to store a default date format in the store and so the precedent would be:

Value passed in as dateFormat prop, if present
Default date format from the store
“dd MMM yyyy”

But now as I’m rereading you question… does this answer it, or is it really a bigger question of how to pass configuration that is currently specified server-side to a React Components front-end?

Take care, Mark

mksd · July 9, 2019, 4:50pm

Thanks @mogoodrich, yes it’s rather the latter about this:

Default date format from the store

This suggests that the store would be pre-filled with defaults, and those have to be managed somewhere. It doesn’t have to come from the backend though, there could be some sort of front-end config for that (a bit like Bahmni Apps is being configured).

mogoodrich · July 9, 2019, 5:48pm

So there’s already a “metadata” section of the store that has been set up… seems natural for it to be stored there, perhaps as a “config” subsection? Or maybe we want config separate from metadata?

github.com

openmrs/openmrs-react-components/blob/master/src/store.js#L28




export const reducers = combineReducers({
  session: sessionReducers,
  system: systemReducers,
  loginLocations: loginReducers,
  header: headerReducers,
  patients: patientsReducer,
  patientSearch: patientSearchReducers,
  errors: errorsReducers,
  form: formReducers,
  metadata: combineReducers({
    concepts: conceptReducer,
    globalProperties: globalPropertyReducer,
    locations: locationsReducer,
    patientIdentifierTypes: patientIdentifierTypesReducer,
  })
});


export const selectors = {


  getPatientStore: (state) => {

Note that there’s already means to fetch and cache global properties:

github.com

openmrs/openmrs-react-components/blob/master/src/features/globalproperty/actions.js

import GLOBAL_PROPERTY_TYPES from "./types.js";

/**
 * Usage:
 *
 * "fetchGlobalProperty" is called with a global property name; it will fetch that global property and
 * place the name/value pair in the global property metadata cache
 *
 * At this point, the global property should be available via getGlobalProperty or getGlobalProperties selectors provided by the store
 * Note that the saga that handles fetchGlobalProperty is "smart" enough to not refetch a GP if it is already in the store
 *
 * Sample usage:
 *
 * import { selectors } from "../../store";
 * import { globalPropertyActions } from "../../features/globalProperty";
 *
 *  ...
 *
 * // fetch the GP on mount if not available
 * componentDidMount() {

This file has been truncated. show original

Take care, Mark