Contact app mobile #752

RyanMG · 2025-03-13T04:08:18Z

As an onboarding exercise, it was suggested that I would build a mobile version of the existing toolbox contacts app. I used this to

Get familiar with how toolbox instantiates entrypoints / app routes
Learn how to build UI / model data / bindings / etc within the hoist FE exosystem
Get familar with as many interfaces as I could (typing, styling, property options, etc)

I pulled as much of the common parts of the desktop contact app as I could - specifically sharing SCSS definitions where overrides or replacements were not needed, and sharing the contact service, which as an API should behave the same between the versions.

However, sharing implementation code proved messier, and may. not be possible in any way where its complexity would be justified in the saved footprint. Currently if I try to make this "common" component builder step, the code fails to execute with an error that a mobile application is importing desktop components (and vice versa). This will mean that for now, any code updates may need to be done in two separate places, violating a pretty basic DRY principle.

I will provide inline comments to this code where specificity is merited, but a few top level notes here:

Any new application entry point into toolbox appears to need a new entry to the OAuth provider (Auth0 in this case?) for a valid redirect URL. I am getting a 403 currently when the application refreshes and requests an updated accessToken (https://login.xh.io/oauth/token), and this appears to stem from it not liking my provided redirect_uri (in this case http://localhost:3000/mobileContacts/). I worked around this for my work by just disabling outh in my local hoist-core, but we will need to look into this if any new routes are merged
Would like to pick someone's brain on the webpack dev server. I hit an issue at one point where I accidentally entered /contactsMobile (plural contactS) rather than /contactMobile, and webpack was serving me the chunkhash for the standard contact page. It seems the webpack server does some sort of pattern matcher for entry points where it finds the closest entry point matching the provided pathname left-to-right. So for instance, I can load /app as I would expect, but /apppppppp would also load the base app entry point. /ap however would not, since it does not make an exact match before the pathname ends. Not critical, just weird and I could not find the cause. Would be good to better understand.
I'll need to do more reviewing / get some pointers on how persistence is set up. You will see that I ended up using localstorge to persist user favorites. I was not seeing that working in the existing contacts app (on dev, not just local). It works properly in both places with this change, but I am not doing it in what appears to be the prescribed way. It also appears that this persistance is something I will be using all the time here, so the sooner I get a handle on it the better.

Note:

The inline comments on this PR are almost all still valid, despite being noted as "outdated". Lee suggested reconfguring my folder choices to create a root "contact" folder which can house common / shared files, then within create "desktop" and "mobile" folders for respective, dedicated code. This was a full refactor of file structure, which broke the previous comments - hense them showing as outdated.

…ing the mobile contacts example

- implements grid and images view - scales grid view down to just name and location to better use narrow space - grid / image button group uses images to better use space - some styling work to prevent overflow of top bar UI in common widths

…mobile. - Prep for this to migrate to src/examples/

…contactMobile path

- webpack seemed to want to load the base "contacts" every time any path was requested with "contact" in the name - contactMobile was always being loaded using the contact.js bunble - mobile seems not to have the same issue, so mobileContacts is loading with no issue

- details page is by defaul flex none and width 0 - selecting an option adds a class to show the details - X button added to details header which removes the class and hides the details

…iew is hidden

…olling of child elements

- favorites button will toggle the record as favorite - edit button enabled to allow editing - save button will properly call to persist changes

- favorite icon is present in grid list view - properly show all persisted contact data in details form

- share SCSS files where between desktop / mobile where unchanged - import desktop SCSS into mobile SCSS file where we need to add defintions - some added classes to properly sync UI between desktop and mobile

… mobile - now unused

- add specificity to a custom class to avoid the need for !important (lesser evil) - move an import to the UI comments rather than the model component where I had accidently placed it

…ance (WIP) - persisting in DB now works for view type and favorites - seems unnessessiary boilerplate, so likely this needs more iteration as I learn the process

- css comment update where I needed to increate specificity on a class def - post-save contact update the record rather than resyncing / rebuilding the entire page

- group grid view listing by isFavorite - remove custom isFavorite render (will not show when the column is the group directive) - remove now unneeded styling for isFavorite cell

RyanMG · 2025-03-13T20:11:38Z

client-app/src/examples/contact/svc/ContactService.ts

@@ -52,6 +53,11 @@ export class ContactService extends HoistService {
        const {userFaves} = this,
            isFavorite = userFaves.includes(id);

+        XH.setPref(PERSIST_APP.prefKey, {


As noted above, I will need some help with persistence management.

Existing (desktop) contacts is saving grid / tile view, but is NOT saving favorites. I see the userFaves being wired up, but then the persistence code never gets called subsequently when the state changes on an item. I am unsure why.

So this resolves it - call persistence manually to save the value. But ultimately I should understand why its not working by default and resolve it that way.

RyanMG · 2025-03-13T20:12:19Z

client-app/src/examples/contactMobile/ContactPage.scss

@@ -0,0 +1 @@
+@import '../contact/DirectoryPanel';


No change to CSS, but I do need it present / loaded.

RyanMG · 2025-03-13T20:14:19Z

client-app/src/examples/contactMobile/ContactsPageModel.ts

+    setDisplayMode(value: 'grid' | 'tiles') {
+        this.displayMode = value;
+
+        XH.setPref(PERSIST_APP.prefKey, {


See https://github.com/xh/toolbox/pull/752/files#r1994240772. This was persisting correctly alone, but if I include the above fix to user favorites and NOT this, then saving a favorite will clobber the save of mode.

RyanMG · 2025-03-13T20:16:36Z

client-app/src/examples/contactMobile/cmp/FavoriteButton.ts

@@ -0,0 +1,24 @@
+import {hoistCmp} from '@xh/hoist/core';


A lot of these components are visually exactly the same as the desktop counterpoints - so ideally I share some of all of the execution to avoid repetition. However, the need for DESKTOP versions of components there and MOBILE version here means that this is not possible in my testing - the app would complain of any imports to a mobile app which themselves included imports of desktop items.

RyanMG · 2025-03-13T20:20:01Z

client-app/src/examples/contactMobile/cmp/TileView.ts

+                className: 'tb-contact-tile__bar',
+                // This inline style defintion keeps me from needing to fight with
+                // existing styles when making the mobile button want to center itself
+                style: {alignItems: 'center'},


I had a fair bit of fighting the styling while working on this.

We define some styles in SCSS files to customer a component or layout. Said component / layout will already have some styling present from existing styles from XH / TB / BP. Then additionally you can define some styles on an element component which are writing direct to the styles tag.
This ultimately meant for me that any styles I applied in an SCSS file were clobbered right off by either an existing style tag or - more often - existing styles with far greater specificity. In this case, using an inline style was of highest import, and so was allowing this align-items style to win over the native styles applied to a mobile button.

RyanMG · 2025-03-13T20:22:02Z

client-app/src/examples/contactMobile/details/ContactDetails.scss

@@ -0,0 +1,48 @@
+.tb-mobile-contact-details-panel {


This file is not entirely different from the desktop styles, but for mobile I needed CSS animations. Trying to inhert the common parts was proving troublesome due to the nesting.

RyanMG · 2025-03-13T20:22:28Z

client-app/src/examples/contactMobile/details/ContactDetails.ts

+        const {currentRecord, visible} = model;
+
+        return panel({
+            className: `tb-mobile-contact-details-panel${visible ? '--details-visible' : ''}`,


Hide it until needed, since its "off screen".

RyanMG · 2025-03-13T20:23:18Z

client-app/src/examples/contactMobile/details/ContactDetails.ts

+    }
+});
+
+const contactProfile = hoistCmp.factory({


All the definitions below here are another instance where they LOOK the same as the desktop counterparts, but use MOBILE versions of components.

RyanMG · 2025-03-13T20:24:25Z

client-app/src/examples/contactMobile/details/ContactDetailsModel.ts

+        const {readonly, isDirty} = formModel;
+
+        // Pulled from standard details page
+        // How could the form be "dirty" if it's readonly?


Unsure if I am missing something in the isDirty logic?

…rent - Shared components can now live in the root - name updates to mobile UI and model to align with the desktop names

RyanMG added 16 commits March 11, 2025 13:03

feat(mobile contacts): implement mobile view card and routes for hous…

83f74c3

…ing the mobile contacts example

chore: remove previously created mobile contacts example out of /src/…

d3ae54f

…mobile. - Prep for this to migrate to src/examples/

chore: previous mobile contacts app code now placed in new /examples/…

bba655e

…contactMobile path

ui: copy over favorite button SCSS file

2d77257

Merge branch 'develop' into contact-app-mobile

aa19fd2

feat(mobile contacts): hide / show contact details

4df8677

- details page is by defaul flex none and width 0 - selecting an option adds a class to show the details - X button added to details header which removes the class and hides the details

feat(mobile contacts): clear grid / tile selection when the details v…

1e1a5f8

…iew is hidden

ui(mobile contacts): contact details animate properly in and out

8aa46fd

fix(mobile contacts): explicit height on content details to allow scr…

f03878b

…olling of child elements

feat(mobile contacts): implement contact details bottom bar

ccc571a

- favorites button will toggle the record as favorite - edit button enabled to allow editing - save button will properly call to persist changes

ui(mobile contacts): add contact data into ui

79768c8

- favorite icon is present in grid list view - properly show all persisted contact data in details form

feat(mobile contacts): persist user favorites in localstorage

f8c2574

ui(mobile contacts): CSS cleanup

4bf46b0

- share SCSS files where between desktop / mobile where unchanged - import desktop SCSS into mobile SCSS file where we need to add defintions - some added classes to properly sync UI between desktop and mobile

refactor(mobile contacts): better semantic name for entrypoint

b344237

RyanMG added the wip label Mar 13, 2025

RyanMG added 5 commits March 12, 2025 21:21

chore(mobile contacts): remove contact service code bootstrapped into…

4104855

… mobile - now unused

ui(mobile contacts): styling pattern adjustments / comments

e0fc1fb

- add specificity to a custom class to avoid the need for !important (lesser evil) - move an import to the UI comments rather than the model component where I had accidently placed it

feat(mobile contacts): replace localstorage favorites with DB persist…

8f4f800

…ance (WIP) - persisting in DB now works for view type and favorites - seems unnessessiary boilerplate, so likely this needs more iteration as I learn the process

feat(mobile contacts): TODO cleanups

45d7a4e

- css comment update where I needed to increate specificity on a class def - post-save contact update the record rather than resyncing / rebuilding the entire page

feat(mobile contacts): grid view grouping

5ea7796

- group grid view listing by isFavorite - remove custom isFavorite render (will not show when the column is the group directive) - remove now unneeded styling for isFavorite cell

RyanMG commented Mar 13, 2025

View reviewed changes

refactor(mobile contacts): nest mobile and desktop under "contact" pa…

6b0ada2

…rent - Shared components can now live in the root - name updates to mobile UI and model to align with the desktop names

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Contact app mobile #752

Contact app mobile #752

RyanMG commented Mar 13, 2025 •

edited

Loading

RyanMG Mar 13, 2025

RyanMG Mar 13, 2025

RyanMG Mar 13, 2025

RyanMG Mar 13, 2025

RyanMG Mar 13, 2025

RyanMG Mar 13, 2025

RyanMG Mar 13, 2025

RyanMG Mar 13, 2025

RyanMG Mar 13, 2025

Contact app mobile #752

Are you sure you want to change the base?

Contact app mobile #752

Conversation

RyanMG commented Mar 13, 2025 • edited Loading

Note:

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

RyanMG commented Mar 13, 2025 •

edited

Loading