This article is part of series of articles named Constellation Flexible UI. Please check table of contents: https://support.pega.com/discussion/constellation-flexible-ui

We have done all the preparation steps as well we have a good understanding of Pega application that we integrate with as well as we understand core principles of Delight Design System that we will use. Let's refactor a little bit starting application that comes with SDKs. As this is just a sample application it needs to be tailored to specific needs.

Cleaning up project structure

After all the hard work with preparation it is time to get our hands dirty with some coding. We are almost there. Just a few things that we would like to do to refactor our sample app.

At this point you shall already have repo downloaded to your PC. Please open in the IDE of your choice. There are quite a few files and folder there:

Take you time to investigate all of them to make sure you understands their purpose. Main project files are located in src folder:

Couple of observations on how the code is structured:

•  barrels pattern in used (more about it here https://basarat.gitbook.io/typescript/main1/barrel). This is great for larger project but for smaller ones (like the one that we will create) it is not need so we will opt out from it
• SDKs are in path to migrate to TypeScript, although there is no full type safety so far SDK comes with eslint and prettier config that you can adjust to your needs components folder - you can delete it as we will recreate it
• samples - includes code for sample app. You can delete it, we don't need it anymore

For our sample app for Sweet Life company we will follow folder structure similar to one used in Next.js projects (here is more about https://nextjs.org/)

We will use following folder structure:

• app - this folder induces main app files, with separate file for each route. Folder components comprise of reusable UI parts like header of footer

• components (outside app folder) - here we will have our overwritten components from SDK
• design-system - here we will keep files specific to Delight Design System
• hooks - our custom hooks
• lib - libraries and utilities

Note: When modifying folder structure it is needed to reconfigure Webpack to properly build assed for browser.

Modularize code

In React SDK application file react-sdk/src/samples/Embedded/EmbeddedTopLevel /index.tsx consist of more than 500 lines. In one file there is logic responsible starting authentication, connection to Constellation as well as for screen rendering. We can apply rule of separation of concerns and split that code making it more reusable.

We create custom hook named useConstellation that will be responsible for connection to Infinity server.

This single line is responsible to connecting to Constellation. See details of custom hook here: https://github.com/kamiljaneczek/Sweet-Life-Pega/blob/main/src/hooks/useConstellation.ts It returns the Boolean that we can use later to conditionally render a screen. We will render Pega UI only author setting up connection to Pega

Before that we will show elegant (and animated) Loading component.