Finally the community bonding priod is over and the coding period has commensed. In this blog I have loads of content and code to cover!


In the community bonding period there were mainly 2 objectives we had set :


Most of my community bonding period was spend on the CI/CD part. The major cause of this was
cross-browser, cross-platform testing integration with React. The tool which was planned to be used was saucelabs and unfortunately for me 😕 there was no proper content regarding saucelabs integration with react to be found anywhere, I tried to make things work on my own and nearly succeeded testing on jest with snowpack and react, but snowpack could not resolve the dependencies inside the lh-toolkit-webcomponent monorepo when it was caching the files.

Snowpack serves the application unbundled during development. Each file needs to be -built only once and then is cached forever. When a file changes, Snowpack rebuilds that single file

As mainly we will be covering unit and integration testing, saucelabs will not be a neccessity as suggested by the saucelabs community. So I went on to setup the react app

  • testing : using react-testing-library with jest
  • deployment : gitlab pages
  • some eslint integration and git hooks.

Design part was smooth sailing and offered many insights that I might have not noticed until later, upon the suggestion of my mentor I have also documented the api endpoints. I will drop the file with the designs and the endpoints here : https://geforce6t.github.io/blog/categories/EHR/


the plan for the first coding week is to do the following:

  • setup the application
  • create home, login pages
  • implement the checkin workflow

monday: I started coding 🎉️ , and completed the first part of the plan.

tuesday: I started working on the project layout and accomplished the following :

  • organized project into different directories including pages, components, redux store, redux slices etc
  • added MUI with theme
  • created login and auth pages with support for other workflows in mind.
  • created redux auth workflow

wednesday: looked for ways to style the lit-components………, lit components uses shadow dom and the style encapsulation feature make it a little tricky to style custom components from the outside, I made some hacks to do the same using callback refs inside the react component where the lit component resides,but this approach would not be optimal.

Probably some minimal styles could be applied inside the lit components and would do great, anyhow I was able to style the material components using the global material css variables.

One of the things that I need to look into is to add some style to the lit-components as a whole : “margin, border shadow and stuff”, this will not be a big issue as I have a lot of other components to create so mainly the style will be global and can be done anytime.

So here is how the create-patient component has changed visually:


compared to above, this is what we have as default:


thursday: created the general search component.

the general serach component is something that I would like to talk about. The general search component was actually little difficult to implement. For different cases the search params, columns, query parameter may differ so to create a general purpose search component all of this features must be passed as attributes which was done in the implementation,

passing params to the search component

the functions used in the seach component are

  • one for search, based on fetching and storing the result after filtering the result to only include results for the columns using the query.
  • another for storing pagination contexts: next page and previous page url,

the most difficult part about the implementation was filtering results to form column enteries, the values that we may want can be nested one/many levels so it is very important to provide a query string to execute this filtering, it is not possible to pass this query string via props as it is inside a map method, so I created a function with switch case for different workflows that we will implement.

filtering data to display in the columns

finally the components looks like this :

serach component

friday: wrote the edit and show patient code to complete the layout of the checkin worklfow 🎉️, but there was one issue that came across while creating the put request, for some of the fhir components the values are not changing even after visually their value is changed, this might be an issue in the react app or the wc repo. I will take a look and solve this issue in the coming days!


  • add event handlers for the create patient page.
  • debug the value not changing issue while making a put request.
  • add css for element (not compulsary for now)

thanks for reading till the end ❤️ , see you next week 😄



Posted on


Updated on


Licensed under