Migration of Profile Logic #1009

Abby-Wheelis · 2023-07-28T23:31:24Z

This PR continues where #994 leaves off, working towards fully migrating the logic pieces of the Profile/Settings Page

migrating settings.auth out of general-settings and into ProfileSettings

logout now also uses a Modal in Profile Settings

moved endForceSync over to profile settings

removal of some old code in general-settings, take care of some formatting in ProfileSettings

also app version was migrated here, still some places that it listens to call in general-settings, so need to migrate those soon

now a modal pops up instead of an AlertBar to take user input and act accordingly -- hard to replicate and test behavior in the emulator so more testing needed

Discovered Platform.OS will always return web right now, so had to switch for accessing device type form cordova

leveraging the appConfig listener to update the settings once they are ready

mostly migrated consent checking now - put off the reconsent proceedure until I figure out state.go

now using a reactNative paper dates to handle downloading the data dump -- noting that we could switch to downloading a range when we update the ControlHelper

all settings are stored in state in ProfileSettings! So no longer need to import them from the scope of general-settings

this element shows the status of the permissions and now gets called when you check the app status in settings - eventually need to be able to launch conditionally like it is in general-settings - also need to add in the permissions bars

deleting old code in general-settings fixing spacings adding comments about migration fix issue with not using authSettings

i18n.language is now used to access the locale that get's used for the date picker

only allow enable button when overallStatus is good

Abby-Wheelis · 2023-08-01T23:12:17Z

A few issues that have come up during migration that I'm working on solving next:

position Snackbar alerts properly - they are appearing off the visible part of the screen
userData is not loaded in the right time frame, need some sort of listener for the change in the service probably
permissions elements not currently in the status modal (<permissionscheck> element?) - need to understand this more so I can include and/or migrate it

Putting these off for later (discussion here)

privacy policy is yet to be migrated - this relies on the complex template html files rather than i18n, so hard to migrate
"go to states" need to be migrated - like those used for reconsent, checking logs, etc
few remaining parts of general-settings to be migrated

Once these are handled, all the functionality in general-settings will have been moved to ProfileSettings, but there is still heavy reliance on Angular services, and ProfileSettings is getting to be a long file, so I think I will want to refactor it into some more parts at some point.

… profile_logic_migration

Logout was not logging the user out, it was just refreshing. Now the logout works

creating a React version of the permissions checks, once this is ironed out, it should be helpful in the initial login as well

Abby-Wheelis · 2023-08-09T21:06:22Z

Continuing to migrate away from angular, and ionic popups in particular, I've been trying to convert the Permissions screen that pops up into a React element. This is what it looks like so far. It is controlled in the AppStatusModal element, but doesn't quite work yet.

When I pull up the Modal by clicking "check app status" an error is thrown in the console about the icon name being blank (there should still be status icons by all the line items). I think this is caused by the fact that "setting up" is not complete by the time the elements need to be displayed, so the variables that control the icon names are blank.

@JGreenlee do you know of a way to get this setting up/loading to happen before the element is displayed? I'm not sure how React handles that when it comes to hidden elements, I'm showing/hiding it the same way I am with other popups in ProfileSettings and haven't had this problem yet, so maybe it's an issue with the AppStatusModal itself and not the way React handles hidden things.

Abby-Wheelis · 2023-08-09T21:28:27Z

I have discovered that it is not a timing problem, it must be a different bug, as the icon names are set to blank in the log statement I placed after the set up functions are called, none of which are async.

Abby-Wheelis · 2023-09-08T21:13:29Z

So can you close the modal every time we switch between screens?

The duplicated modals are appearing one stacked on top of the other on the same screen, so there's no changing screens between having to deal with the two modals. I also don't see the console message after closing the first one, the modal's visibility is controlled by a boolean held in state.

This is what that behavior looks like:

DoubleModal.mov

shankari · 2023-09-08T21:18:05Z

At what point in that video do you see two modals? I am confused. That seems fine-ish to me? Unless there are some clicks that are not obvious...

Abby-Wheelis · 2023-09-08T21:27:34Z

That seems fine-ish to me? Unless there are some clicks that are not obvious...

At worst, it's a little annoying. There's two copies of the modal (one coming from ProfileSettings and one from LabelTab) and they both get tripped to open when there's a broken permission. They're one on top of the other, so I have to close them both, you can see in the video when the background color shifts is when the first modal closes.

around 12s I close the first one, then at 14 I refresh & close the second modal -- so 2 "extra" clicks

shankari · 2023-09-08T22:46:13Z

I am a bit tempted to merge with this given that it is currently broken very badly now and two clicks are better than no popup. And this is not a very frequent use case anyway

Abby-Wheelis · 2023-09-08T22:59:27Z

I am a bit tempted to merge with this given that it is currently broken very badly now and two clicks are better than no popup. And this is not a very frequent use case anyway

We'll be able to fix the duplication as soon as we can implement React routing, but I'm not sure if there's a good way to share the state across components that are essentially independent of each other while we're in this middle zone. I've tried a custom hook, but that has separate instances for each place it is used I believe, and when I've tried to research most of what I've found would work if we were fully React, or we could potentially use someone's library (see first answer), but I haven't come up with anything that works in this context.

The other option would be to merge the new modal on JUST the label screen, which I actually already tried earlier this morning on this branch. Let me know if that's preferred, and I'll test it more thoroughly and prepare a PR. Then we could maybe merge this PR right after the patches are on staging which I believe would maintain the timeline for React routing we were talking about earlier.

shankari · 2023-09-08T23:33:49Z

The other option would be to merge the new modal on JUST the label screen, which I actually already tried earlier this morning on this branch. Let me know if that's preferred, and I'll test it more thoroughly and prepare a PR. Then we could maybe merge this PR right after the patches are on staging which I believe would maintain the timeline for React routing we were talking about earlier.

@Abby-Wheelis So with this option, they would see the status modal popup on the label screen but would have to click on the button to launch it from the profile screen?

That actually sounds like a good idea given that the label screen is (currently) the hardcoded default for when the app is launched. It is also consistent with the pre-react migration. pre-react, I don't think we popped up the status screen if people changed to profile - they had to click to launch

JGreenlee · 2023-09-09T00:03:33Z

At worst, it's a little annoying. There's two copies of the modal (one coming from ProfileSettings and one from LabelTab) and they both get tripped to open when there's a broken permission. They're one on top of the other, so I have to close them both, you can see in the video when the background color shifts is when the first modal closes.

On resume, only open the app status modal if !window.appStatusModalOpened.
Then when it is opened, set window.appStatusModalOpened = true;

I think that would be good enough. Variables on the window are global and preserved within a session. It's a temporary workaround but we can do it all the right way next release

Abby-Wheelis · 2023-09-09T00:05:29Z

So with this option, they would see the status modal popup on the label screen but would have to click on the button to launch it from the profile screen?

@shankari yes. When something is broken, the modal will pop up regardless of screen, as long as they've visited the label screen before. And it works on a fresh launch because the label screen is the default. In Profile, clicking the button takes them to the old permissions page, but still works fine.

On resume, only open the app status modal if !window.appStatusModalOpened.
Then when it is opened, set window.appStatusModalOpened = true;

Ok, global is what I was looking for, let me try that out.

prevent the modal from profile and the modal from label from opening at the same time suggestion from: e-mission#1009 (comment)

Abby-Wheelis · 2023-09-09T00:43:23Z

That worked! Thank you @JGreenlee

Now, we have exactly 1 modal open

on launch (at label screen) if something is broken
on resume if something is broken if never visited profile screen before (2nd not even intialized)
on resume if something is broken if visited profile before (2nd is initialized, I watched that global prevent the 2nd from opening)

This resolved the modal-launching-if-broken oddness we've been chasing around, and so this should be good now and a fix to issue#967. The translate PR is also ready, and includes keys from the label screen translate#40

www/js/control/DataDatePicker.tsx

www/js/control/PopOpCode.jsx

As Jack pointed out in review, I did not need this argument to useTranslation() that allowed me to condense the two parts into one as well

As Jack pointed out in review, we need more permissions on Android to copy text, so, if the platform is android we'll do nothing here to avoid breaking over insufficient permissions

shankari · 2023-09-09T03:16:56Z

ok, so I'm going to start reviewing this now...

shankari

This looks good overall and I have no qualms with merging and pushing to staging.
I would like to have the one non-future comment in here (remove action button that doesn't work) addressed before we move to production at the end of next week.
We can then come back and check the future comments and fix them after the switch to react routing.

www/js/control/DataDatePicker.tsx

www/js/control/PopOpCode.jsx

www/js/control/PrivacyPolicyModal.tsx

www/js/control/general-settings.js

www/js/control/DataDatePicker.tsx

www/js/control/ProfileSettings.jsx

www/js/control/AppStatusModal.tsx

shankari

Going to merge this now because there is only one non-future change (removing the non-functional action button to change the notification time)

shankari · 2023-09-09T16:23:51Z

One more non-future change from:
e-mission/e-mission-docs#934 (comment)

We need to make sure that the instruction text is correct for Android 13. e.g. for "unused apps disabled" are the instructions on how to resolve correct on android 13, or do we need to add a new android-disable-gte-13?

            "unusedapprestrict": {
                "name": "Unused apps disabled",
                "description": {
                    "android-disable-lt-12": "On the app settings page, go to 'Permissions' and ensure that the app permissions will not be automatically reset.",
                    "android-disable-gte-12": "On the app settings page, turn off 'Remove permissions and free up space.'",
                    "ios": "Please allow."
                }
            },

Abby-Wheelis · 2023-09-11T16:07:16Z

future comments have been noted in: Next Phase of migrating Profile to React

Abby-Wheelis · 2023-09-11T16:34:46Z

Cleanup of now / near future comments: 🧹 Profile cleanup including the android text (3435e12)

Abby-Wheelis

For the most part, the changes represent moving away from angular and ionic code in order to implement things in React. We still use a lot of angular services, and the two log screens haven't been migrated yet.

AppStatusModal and PrivacyPolicyModal are two large pieces that are in Profile and Onboarding, so right now both versions are maintained, but it was my hope these would serve as a starting point when we get to the Onboarding migration.

Abby-Wheelis · 2023-09-11T16:42:00Z

www/js/control/ProfileSettings.jsx

+import AlertBar from "./AlertBar";
+import DataDatePicker from "./DataDatePicker";
+import AppStatusModal from "./AppStatusModal";
+import PrivacyPolicyModal from "./PrivacyPolicyModal";


Addition of the AlertBar -- which shows a "snackbar" at the bottom of the screen with a message in replacement of many ionic alerts -> cases include text copied, data pushed, etc.
DataDatePicker used for choosing the data that json dump download is used for, replaces the ionic datepicker with react native paper's which is cleaner and works better
AppStatusModal and PrivacyPolicyModal we have talked about in the PR, so I'm sure you're up to speed on those, but were major changes here.

Abby-Wheelis · 2023-09-11T16:43:30Z

www/js/control/ProfileSettings.jsx

-    const { settings, logOut, viewPrivacyPolicy,
-        fixAppStatus, forceSync, openDatePicker,
-        eraseUserData, refreshScreen, endForceSync, checkConsent, 
-        dummyNotification, invalidateCache, showLog, showSensed,
-        parseState, userDataSaved, userData, ui_config } = settingsScope;
+    const { showLog, showSensed } = settingsScope;


significantly less dependent on the settingsScope variables -- which means decreasing dependence on angular code, and approaching being able to use React routing

Abby-Wheelis · 2023-09-11T16:45:12Z

www/js/control/ProfileSettings.jsx

-    //conditional creation of setting sections
-    let userDataSection;
-    if(userDataSaved())
-    {
-        userDataSection = <ExpansionSection sectionTitle="control.user-data">
-                            <SettingRow textKey="control.erase-data" iconName="delete-forever" action={eraseUserData}></SettingRow>
-                            <ControlDataTable controlData={userData}></ControlDataTable>
-                        </ExpansionSection>;


removed userData section in anticipation of eliminating calories from dashboard, and thus need to collect/maintain/show this data

Abby-Wheelis · 2023-09-11T16:46:04Z

www/js/control/ProfileSettings.jsx

+        <Appbar.Header statusBarHeight={12} elevated={true} style={{ height: 46, backgroundColor: 'white', elevation: 3 }}>
+            <Appbar.Content title={t("control.profile")} />
+            <Text>{t('control.log-out')}</Text>
+            <IconButton icon="logout" onPress={() => setLogoutVis(true)}></IconButton>
+        </Appbar.Header>


addition of Appbar is what allowed the logout button to go all the way to the top of the screen, and matches the label screen, characteristic of UI making progress into React

Abby-Wheelis · 2023-09-11T16:47:22Z

www/js/control/ProfileSettings.jsx

+            <AlertBar visible={dataPushedVis} setVisible={setDataPushedVis} messageKey='all data pushed!'></AlertBar>
+            <AlertBar visible={invalidateSuccessVis} setVisible={setInvalidateSuccessVis} messageKey='success -> ' messageAddition={cacheResult}></AlertBar>
+            <AlertBar visible={noConsentMessageVis} setVisible={setNoConsentMessageVis} messageKey='general-settings.no-consent-message'></AlertBar> 
+


all of the Modal and AlertBar components replace ionic popups and their visibility is controlled by a state variable

Abby Wheelis added 23 commits July 28, 2023 15:00

move settings.auth

389ff41

migrating settings.auth out of general-settings and into ProfileSettings

migrated dummy notification function

36b4f57

migrate logout feature

0753328

logout now also uses a Modal in Profile Settings

migrate endForceSync

9010213

moved endForceSync over to profile settings

old code, formatting

b7e52f6

removal of some old code in general-settings, take care of some formatting in ProfileSettings

migrate forceSync

1b4b4e6

migrate user data methods

8d2e961

migrate sync settings

45d2527

migrate invalidate cache

06bb016

migrate connect settings

f277cb0

migrating refresh

ca85c8a

also app version was migrated here, still some places that it listens to call in general-settings, so need to migrate those soon

fix consent handling on sync handling

a978270

now a modal pops up instead of an AlertBar to take user input and act accordingly -- hard to replicate and test behavior in the emulator so more testing needed

migrate parse state

23d9161

platform.OS vs window.cordova.platformId

ee3243b

Discovered Platform.OS will always return web right now, so had to switch for accessing device type form cordova

cleaning up old code, formatting

b6970d9

migrate uiConfig settings

aa6459b

leveraging the appConfig listener to update the settings once they are ready

migrate consent check

27c9e1b

mostly migrated consent checking now - put off the reconsent proceedure until I figure out state.go

migrate datePicker

13678e0

now using a reactNative paper dates to handle downloading the data dump -- noting that we could switch to downloading a range when we update the ControlHelper

eliminate reliance on settings

b579684

all settings are stored in state in ProfileSettings! So no longer need to import them from the scope of general-settings

introduce new AppStatusModal

b9d4342

this element shows the status of the permissions and now gets called when you check the app status in settings - eventually need to be able to launch conditionally like it is in general-settings - also need to add in the permissions bars

cleaning up, comments, polishing

9c93a09

deleting old code in general-settings fixing spacings adding comments about migration fix issue with not using authSettings

update datepicker to use locale

bbb38e9

i18n.language is now used to access the locale that get's used for the date picker

make appModal conditional closing

26d13b7

only allow enable button when overallStatus is good

Abby Wheelis added 4 commits August 2, 2023 16:12

Merge remote-tracking branch 'upstream/framework_migration_prep' into…

4efcbca

… profile_logic_migration

fix logout fncn

e2aa3a5

Logout was not logging the user out, it was just refreshing. Now the logout works

converting app status checks

7604c33

creating a React version of the permissions checks, once this is ironed out, it should be helpful in the initial login as well

set up timing

6880c5a

only 1 modal

b0a24ea

prevent the modal from profile and the modal from label from opening at the same time suggestion from: e-mission#1009 (comment)

JGreenlee reviewed Sep 9, 2023

View reviewed changes

www/js/control/DataDatePicker.tsx Outdated Show resolved Hide resolved

JGreenlee reviewed Sep 9, 2023

View reviewed changes

www/js/control/PopOpCode.jsx Show resolved Hide resolved

Abby Wheelis added 3 commits September 8, 2023 19:42

remove unneeded argument

78e97c7

As Jack pointed out in review, I did not need this argument to useTranslation() that allowed me to condense the two parts into one as well

if android, do nothing on copy

a6a5581

As Jack pointed out in review, we need more permissions on Android to copy text, so, if the platform is android we'll do nothing here to avoid breaking over insufficient permissions

only show copy button on ios

91b24d2

shankari requested changes Sep 9, 2023

View reviewed changes

shankari approved these changes Sep 9, 2023

View reviewed changes

shankari merged commit 6abaae5 into e-mission:label_dashboard_profile_sept_2023 Sep 9, 2023

JGreenlee mentioned this pull request Sep 9, 2023

📊 Rewrite of the New Dashboard Tab #1018

Merged

Abby-Wheelis deleted the profile_logic_migration branch September 11, 2023 15:16

Abby-Wheelis mentioned this pull request Sep 11, 2023

🧹 Profile cleanup #1028

Merged

3 tasks

Abby-Wheelis commented Sep 11, 2023

View reviewed changes

shankari mentioned this pull request Sep 11, 2023

Changes on generic_metric and mode_specific_metrics in relation to Mo… e-mission/em-public-dashboard#91

Merged

shankari mentioned this pull request Sep 23, 2023

Merge 1.4.8 to master #1035

Merged

This was referenced Oct 17, 2023

✍ Angular Services needing rewrite e-mission/e-mission-docs#977

Closed

Reconsidering how to handle consent e-mission/e-mission-docs#1016

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Migration of Profile Logic #1009

Migration of Profile Logic #1009

Abby-Wheelis commented Jul 28, 2023

Abby-Wheelis commented Aug 1, 2023 •

edited

Loading

Abby-Wheelis commented Aug 9, 2023

Abby-Wheelis commented Aug 9, 2023

Abby-Wheelis commented Sep 8, 2023

shankari commented Sep 8, 2023

Abby-Wheelis commented Sep 8, 2023

shankari commented Sep 8, 2023

Abby-Wheelis commented Sep 8, 2023

shankari commented Sep 8, 2023 •

edited

Loading

JGreenlee commented Sep 9, 2023

Abby-Wheelis commented Sep 9, 2023

Abby-Wheelis commented Sep 9, 2023

shankari commented Sep 9, 2023

shankari left a comment •

edited

Loading

shankari left a comment

shankari commented Sep 9, 2023

Abby-Wheelis commented Sep 11, 2023

Abby-Wheelis commented Sep 11, 2023

Abby-Wheelis left a comment

Abby-Wheelis Sep 11, 2023

Abby-Wheelis Sep 11, 2023

Abby-Wheelis Sep 11, 2023

Abby-Wheelis Sep 11, 2023

Abby-Wheelis Sep 11, 2023

Migration of Profile Logic #1009

Migration of Profile Logic #1009

Conversation

Abby-Wheelis commented Jul 28, 2023

Abby-Wheelis commented Aug 1, 2023 • edited Loading

Abby-Wheelis commented Aug 9, 2023

Abby-Wheelis commented Aug 9, 2023

Abby-Wheelis commented Sep 8, 2023

shankari commented Sep 8, 2023

Abby-Wheelis commented Sep 8, 2023

shankari commented Sep 8, 2023

Abby-Wheelis commented Sep 8, 2023

shankari commented Sep 8, 2023 • edited Loading

JGreenlee commented Sep 9, 2023

Abby-Wheelis commented Sep 9, 2023

Abby-Wheelis commented Sep 9, 2023

shankari commented Sep 9, 2023

shankari left a comment • edited Loading

Choose a reason for hiding this comment

shankari left a comment

Choose a reason for hiding this comment

shankari commented Sep 9, 2023

Abby-Wheelis commented Sep 11, 2023

Abby-Wheelis commented Sep 11, 2023

Abby-Wheelis left a comment

Choose a reason for hiding this comment

Abby-Wheelis Sep 11, 2023

Choose a reason for hiding this comment

Abby-Wheelis Sep 11, 2023

Choose a reason for hiding this comment

Abby-Wheelis Sep 11, 2023

Choose a reason for hiding this comment

Abby-Wheelis Sep 11, 2023

Choose a reason for hiding this comment

Abby-Wheelis Sep 11, 2023

Choose a reason for hiding this comment

Abby-Wheelis commented Aug 1, 2023 •

edited

Loading

shankari commented Sep 8, 2023 •

edited

Loading

shankari left a comment •

edited

Loading