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: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

TomTirapani · 2025-03-26T12:15:45Z

client-app/src/examples/contact/mobile/DirectoryPanelModel.ts

+// Shared from the desktop version
+import {PERSIST_APP} from '../AppModel';
+
+import ContactDetailsModel from './details/DetailsPanelModel';


Importing this under a different name to the class is confusing - let's use the same name in both the definition and its usages.

This must have been a missed update. Originally the files had bespoke names in the mobile app, but in a second pass I unified them with the desktop naming. Must have missed this change to the name reference. Ill update.

TomTirapani · 2025-03-26T12:25:39Z

client-app/src/examples/contact/mobile/details/DetailsPanel.ts

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


We should use a mobile navigator to handle drilldowns. This will allow us to:

Make the details its own page, meaning you don't need to handle visibility / transitions

Route to specific contacts by name

Support gesture navigation on device, etc

TomTirapani · 2025-03-26T12:27:02Z

client-app/src/examples/contact/mobile/AppComponent.ts

+import {panel} from '@xh/hoist/mobile/cmp/panel';
+import {Icon} from '@xh/hoist/icon';
+import {AppModel} from '../AppModel';
+import {contactsPage} from './DirectoryPanel';


I've said elsewhere, but renaming on import is confusing - lets keep import names, file names and class names consistent throughout

…ation flow - add link to desktop contacts to load mobile contacts

- this allows contacts to be shared between distinct child pages (directory and details) - migreates edit / favorite saves to app model - detail page uses a plain object rather than a grid record

RyanMG · 2025-04-01T01:00:02Z

client-app/src/examples/contact/desktop/AppComponent.ts

@@ -14,6 +15,13 @@ export const AppComponent = hoistCmp({
        return panel({
            tbar: appBar({
                icon: Icon.contact({size: '2x', prefix: 'fal'}),
+                leftItems: [
+                    a({


New link to let users access mobile contacts from the existing toolbox UI

RyanMG · 2025-04-01T01:01:34Z

client-app/src/examples/contact/mobile/AppModel.ts

+    themeAppOption
+} from '@xh/hoist/mobile/cmp/appOption';
+
+export default class AppModel extends BaseAppModel {


App model, as the root model for mobile contacts, now does a. lot more management of its children - including storing the fetched contact data and instantiating the models for the child views.

RyanMG · 2025-04-01T01:02:12Z

client-app/src/examples/contact/mobile/AppModel.ts

+            runInAction(() => {
+                this.tagList = uniq(this.contacts.flatMap(it => it.tags ?? [])).sort() as string[];
+            });
+            this.directoryPanelModel.loadAsync();


App fetches contacts, then tells the directory to load its grid.

+ Grid records observe changes to AppModel.contacts + Detail panel observes changes to AppModel.contacts

Suggested adjustments to mobile contact app

…hard coded option

…ly in mobile - mobile select cannot "multi select" - need to cast the single result to an array to save - use render to display tags correctly

RyanMG · 2025-04-01T17:13:16Z

client-app/src/apps/contact.ts

@@ -2,8 +2,8 @@ import '../Bootstrap';

 import {XH} from '@xh/hoist/core';
 import {AppContainer} from '@xh/hoist/desktop/appcontainer';
-import {AppComponent} from '../examples/contact/AppComponent';
-import {AppModel} from '../examples/contact/AppModel';
+import {AppComponent} from '../examples/contact/desktop/AppComponent';


You will se this update across this PR.
After some back and forth, Lee suggested that I nest the new mobile contacts under the parent /examples/contacts, and do the same with desktop.
This means that some of this PR will be just file path adjustments to accomodate this change.

RyanMG · 2025-04-01T17:13:50Z

client-app/src/examples/contact/desktop/AppComponent.ts


 export const AppComponent = hoistCmp({
    displayName: 'App',
    model: uses(AppModel),

    render() {
+        const domain = window.location.origin;


Unsure if there is a 'hoist' way to access the URI.

RyanMG · 2025-04-01T17:15:15Z

client-app/src/examples/contact/desktop/AppModel.ts

-import {ContactService} from './svc/ContactService';
-import {BaseAppModel} from '../../BaseAppModel';
-
-export const PERSIST_APP = {prefKey: 'contactAppState'};


As desktop AppModel is no longer the root for all of contacts, I moved this to here, which is common to both versions.

RyanMG · 2025-04-01T17:16:11Z

client-app/src/examples/contact/mobile/AppModel.ts

+        // Mobile select only allows single selections, while desktop allows multiple
+        // This means we receive an array on the desktop picker, and a single value here.
+        // Convert single result into an array of one to keep data consistent.
+        if (data.tags) {


Comment above explains this. At some point maybe mobile needs to be enhanced to support multi-select, but that seems out of scope here.

…n SASS file - was originally used for custom animtions, which are no longer used

RyanMG · 2025-04-01T17:27:34Z

gradle.properties

@@ -3,7 +3,7 @@ xhAppName=Toolbox
 xhAppPackage=io.xh.toolbox
 xhAppVersion=7.0-SNAPSHOT

-hoistCoreVersion=29.0-SNAPSHOT
+hoistCoreVersion=30.0-SNAPSHOT


I didnt make this upate. This is what is on develop
https://github.com/xh/toolbox/blob/develop/gradle.properties#L6
When I merged up this appeared. I rebased origin/develop into local/develop, then merged local/develop into this branch. That has never before made a commit list which was not mine.

…sisting

TomTirapani · 2025-04-02T15:54:25Z

client-app/src/examples/contact/mobile/AppModel.ts

+        this.detailsPanelModel = new DetailsPanelModel(this);
+    }
+
+    async updateContactAsync(id: string, data: PlainObject = {}) {


Is data optional here? I don't see why you call this without data?

If not, I'd recommend we lose the default {} value, and instead return early if data is null, to avoid the call for to the server for a no-op.

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

RyanMG and others added 2 commits March 13, 2025 17:13

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

Merge branch 'develop' into contact-app-mobile

75e2192

TomTirapani requested changes Mar 26, 2025

View reviewed changes

RyanMG added 3 commits March 30, 2025 17:57

feat(mobile contacts): set up mobile contacts to use native app navig…

9bc654c

…ation flow - add link to desktop contacts to load mobile contacts

feat(mobile contacts): migrate contact data store up to AppModel

b735ac7

- this allows contacts to be shared between distinct child pages (directory and details) - migreates edit / favorite saves to app model - detail page uses a plain object rather than a grid record

fix(mobile contacts): import name fixes

835f7c2

RyanMG commented Apr 1, 2025

View reviewed changes

TomTirapani and others added 5 commits April 1, 2025 14:35

+ Use AppModel.contacts as the sole observable source of truth

0733793

+ Grid records observe changes to AppModel.contacts + Detail panel observes changes to AppModel.contacts

Merge pull request #756 from xh/contact-app-mobile-tweaks

76b6ca3

Suggested adjustments to mobile contact app

Update hoist-core to 30.0-SNAPSHOT

efc4c7e

fix(mobile contacts): get the domain off window.location, and remove …

f4edffe

…hard coded option

fix(mobile contacts): tags were not being persisted / rendered proper…

84af811

…ly in mobile - mobile select cannot "multi select" - need to cast the single result to an array to save - use render to display tags correctly

RyanMG commented Apr 1, 2025

View reviewed changes

refactor(mobile contacts): mobile details page no longer needs its ow…

7923f43

…n SASS file - was originally used for custom animtions, which are no longer used

RyanMG commented Apr 1, 2025

View reviewed changes

RyanMG and others added 2 commits April 1, 2025 11:14

fix: isFavorites / favorites button was not properly toggling and per…

6c7ce8a

…sisting

Merge branch 'develop' into contact-app-mobile

75e84e1

TomTirapani reviewed Apr 2, 2025

View reviewed changes

Exit contact save event early if no new data was provided to be saved

06b92f8

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

TomTirapani Mar 26, 2025

RyanMG Mar 26, 2025

TomTirapani Mar 26, 2025

TomTirapani Mar 26, 2025

RyanMG Apr 1, 2025

RyanMG Apr 1, 2025

RyanMG Apr 1, 2025

RyanMG Apr 1, 2025

RyanMG Apr 1, 2025

RyanMG Apr 1, 2025

RyanMG Apr 1, 2025

RyanMG Apr 1, 2025

TomTirapani Apr 2, 2025

RyanMG Apr 2, 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

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

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