Component design

Hi all … happy New Year :slight_smile:

Starting off 2020 by learning about Stencil (and Ionic) and have a “simple” project in mind to help, but looking for guidance on “designing” or architecting the project in way that makes sense, follows best practice as much as possible, does suff the Stencil/Ionic way, and also can offer a good base with which to build upon down the track. I know … not asking for much am I :wink:

OK so my simple idea (hopefully) will use Wordpress as the CMS (I’m familiar with it, can create my own API routes etc and it’s easy for clients to use/update info).

I envisage a custom component that is used on the front-end site that simply displays a list of Drivers (with general info about each driver ie photo, name, licences etc). The site is really a normal WP site just with the use of the one component on one page … so not an app in the standard sense, and also not technically a PWA.

<sanz-drivers><sanz-drivers/>

However I’d like one bit of interactivity initially … to display the “status” of a Driver ie “Active” or “Inactive” and have it update every minute. Site only displays Active Drivers, but if a Driver changes their status to Active, their info should be added to the list so the User can immediately see the change without refreshing.

Or is there a more efficient way ie have the status “push” automatically if status changes? At this point there are only 12 Drivers, but potentially many more Users of the site at any given time, so thinking that could get resource intensive if there are many Users with the site open and polling the server every minute.

Can a Stencil component embedded in a standard site accept a “push” notification and then respond with changing what is displayed?

As far as architecture goes, I think a Service will be needed to pull the list of Drivers from the WP API. Would one of the methods in the service be Observable (not sure of the correct term here … ) then to keep track of the state (Active or Inactive)? Or would the whole service be tied into the state somehow? Would RxJS be a good option to use to control this state? Or is “state” even the correct thing to focus on given the end User of the site won’t actually click anything to interact with the component, it will be the Driver who changes a value (via WP) that should initiate the change in the view of the User?

As you can see I might be a little confused about how all the parts “fit” together. I just think the “component” idea of Stencil seems to fit the idea I want to achieve.

Thanks in advance for any thoughts/assistance :slight_smile:

Sanz