feat(frontend, backend): connect rxdb

[kand198]

Description

Closes this ticket.

lol:

This is a LARGE PR with a lot of potential to break things. It also includes a number of design changes. I'm very open to suggestions and requests for improvement.

Testing:

1. Launch backend with npx nx serve backend
2. Launch frontend with npx nx serve
3. Navigate to patient details page
4. Add a student with the "plus" button (NOTE: you cannot delete students at this time)

I would recommend checking that changes are persisted to the database by using the GraphQL playground.
You can check concurrency by opening a second browser, browser profile, or a new browser window in a private browsing mode (multiple tabs do NOT show concurrency and aren't explicitly supported in the current config).

Everything should update concurrently except for ENUM fields, which will require you to unload the patient and reload it (page refresh, or select a different patient). after debounce delay.

You can simulate going "offline" by shutting off the server, making some changes, then turning it back on.

You can simulate deleting a patient by editing the deletedAt field of a patient in the GraphQL playground.

Changes:

• Added functionality to the "Add Patient" button
• Major refactor for patient-related frontend and backend code
• Added RxDB schema and database for patient info
• Created a hook for accessing patient details
• Implemented RxDB pull and push replication, linked with backend
• Added method for mass-setting patients (required for RxDB push replicaiton)
• Resolved issue with dateOfBirth field returning null unexpectedly by adding custom scalar type
• Made all patient fields nullable on backend except for ID, to prevent losing information where a student may accidentally forget to fill in fields

To do before merging

Please let me know if any of these are out of scope or should be in a separate PR.

• Add tests
• Ensure deletedAt works
• Ensure offline functionality works
• Fix NPM vulnerabilities.
• Fix RxDB related failure in CI

To do in other PRs

• Ensure lastUpdatedAt wins
• Fix minUpdatedAt in the patientReplicationFeed query
• Ensure that only required info is being sent and recieved (optimise network usage)

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How Has This Been Tested?

TODO.
Basic local manual testing.

Test Configuration:

• Browser: Chrome (latest)
• Device: Windows Laptop

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged

[kand198]

@jcha-686 npm ci works for me locally but the action is failing. Would you be able to take a look for me? I'm a bit lost haha.

[kand198]

Self-review:

I'm relatively happy with the code as it stands. I don't like how boilerplatey the RxDB stuff is, and while I've tried to add abstraction, I made sure not to spend too much time on it. I'd be keen for any ideas on simple ways to improve it.

Ready to open PR for review now.

[uoa-lzha989]

As far as I can tell, it's looking good - just that one point (not sure if it was covered before)

[butterplup]

As far as I can tell LGTM. Nice job with the enum serialize/deserialize btw.

[yuliapechorina]

Great work! Just some feedback on functionality, will continue looking through the code itself:

I was able to follow the testing steps and everything persisted to the database:

Testing config:
Browser: Chrome
Device: Windows Laptop

Editing the patient's name or another input field in a browser didn't update in the other browser automatically without me refreshing. The name fields update in the tab name, but not the input itself.

Some changes I'd like to see are:

1. When you initially open the Patient Details page, the page is blank minus the table at the bottom. I know this is kind of OOS for your PR, but we can't really show that in the demo, so it'd be good if you changed this.
   -> Could you remove the table when no patient is selected, and have a message like "No patient selected yet!". Also, if you already have patients, could the user be automatically redirected to the first tab?

2. Since all fields are nullable in the DB, could you add asterisks next to the required fields on the FE side - just so the user knows what fields should be filled in?

[yuliapechorina]

The code looks nice and clean to me, just 2 nitpicks:

[hmit106]

LGTM, functionality is as described and code has no issues as far as I can see.

I noticed some general UI/usability issues that will need to be addressed in future, but they're well out of scope here so I put them in triage on the scrum board.

[yuliapechorina]

🚀 LGTM