[#157929923] add-badge-messages by matgentili · Pull Request #979 · pagopa/io-app

matgentili · 2019-04-24T07:28:40Z

[#157929923] not completed. For the moment the badge is visible in all the tabs. Logic for badge is not implemented

digitalcitizenship · 2019-04-24T07:32:34Z

	Warnings
⚠️	Remember to fix the PR title by removing WIP wording when ready

Affected stories

🌟 #157929923: Implementare badge nel tab dei messaggi con il numero di messaggi non letti

Generated by 🚫 dangerJS

fpersico · 2019-04-24T07:39:54Z

@matgentili @cloudify We are using native-base as UI library and it also has a Badge component. I don't think we need to add another UI library like react-native-elements.

matgentili · 2019-04-24T07:45:39Z

@fpersico ok, i remove react-native-elements library and use native-base.

cloudify · 2019-04-24T08:40:40Z

ts/components/messages/MessageListComponent.tsx

    const refreshControl = (
      <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
    );
-


why this change?

Sorry, i think i removed the line during implementing an other const that i removed later

cloudify · 2019-04-24T08:41:05Z

ts/navigation/MainNavigator.tsx

@@ -1,12 +1,6 @@
-/**


why you removed the comment?

Sorry, I didn't even notice it. Most likely I removed it while importing a library

Still removed

[#157929923] not completed. Badge graphic is ok on Android, I must check it on iOS. The logic for the badge counter has not implemented yet.

codecov · 2019-04-24T14:33:30Z

Codecov Report

Merging #979 into master will decrease coverage by 0.2%.
The diff coverage is 66.66%.

@@            Coverage Diff             @@
##           master     #979      +/-   ##
==========================================
- Coverage    46.5%   46.29%   -0.21%     
==========================================
  Files         201      199       -2     
  Lines        4455     4378      -77     
  Branches      873      818      -55     
==========================================
- Hits         2072     2027      -45     
+ Misses       2376     2346      -30     
+ Partials        7        5       -2

codecov · 2019-04-24T14:33:30Z

Codecov Report

❗ No coverage uploaded for pull request base (master@95ad2c4). Click here to learn what that means.
The diff coverage is 40.62%.

@@            Coverage Diff            @@
##             master     #979   +/-   ##
=========================================
  Coverage          ?   45.21%           
=========================================
  Files             ?      210           
  Lines             ?     4837           
  Branches          ?      948           
=========================================
  Hits              ?     2187           
  Misses            ?     2643           
  Partials          ?        7

[#157929923] not completed. Badge graphic is ok on Android, I must check it on iOS. The logic for the badge counter has not implemented yet.

cloudify · 2019-04-24T16:35:10Z

package.json

    "@types/react": "16.8.10",
    "@types/react-native": "0.57.42",
    "@types/react-native-background-timer": "^2.0.0",
+    "@types/react-native-elements": "^0.18.0",


this need to be removed too

cloudify · 2019-04-24T16:35:39Z

ts/components/messages/MessageListComponent.tsx

 import { MessageListItemComponent } from "./MessageListItemComponent";
-
+// tslint:disable-next-line: no-var-keyword
+var messagesToRead = 0;


don't use vars, the tslint rule is there for a reason :)

Ok, can i use let?

cloudify · 2019-04-24T16:35:52Z

ts/components/messages/MessageListComponent.tsx

    );

+    messagesToRead = messages.filter(obj => !obj.isRead).length;
+    alert(messagesToRead);


what's this alert?

It was only for tests and I forgot to remove it

cloudify · 2019-04-24T16:38:31Z

yarn.lock

@@ -1071,6 +1071,13 @@
  version "2.0.0"


since you didn't add any package, yarn.lock must not change

@matgentili please check this.

@fpersico Can i remove yarn.lock ? I don't add any package

Just revert the changes.

[#157929923] add-badge-messages. Modified badge layout and added method for reading the number of messages. Tested on ios and android

cloudify · 2019-04-29T15:11:16Z

ts/navigation/MainNavigator.tsx

      tabBarIcon: (options: { tintColor: string | null; focused: boolean }) => {
        const { routeName } = nav.state;
        const iconName: string = getIcon(routeName);
+        const messagesToRead = MessageListComponent.prototype.getMessagesToRead();


can you explain how this works?

I take from the component that manages the list of messages the number of unread messages and save them in a constant which is then used to update the view. Do you think that could be fine?

I don't think it could possibly work, did you tested it?

Yes, I have tested it on ios simulator and on android device and when I open a message the badge number is updated correctly.

cloudify · 2019-04-30T12:55:03Z

@matgentili you should create a custom component that subscribes to the redux store to get the list of messages

cloudify · 2019-05-03T10:09:35Z

@matgentili any update here?

matgentili · 2019-05-03T10:19:00Z

@cloudify I used Redux store as you suggested, now i'm testing it and soon I commit all ;)

[#157929923]-add-badge-message-tab. Added store redux for badge

Completed badge implementation. It works correctly on ios and android.

matgentili · 2019-05-13T12:28:26Z

fix - Now the badge number is retrieved using BadgeSelector instead of passing it during navigation

…m/teamdigitale/io-app into #157929923]-add-badge-message-tab

Fix implementation badge messages. Now I don't use reducer but i get the number for badge by list of messages

Added control if badge number is greater than 99

fpersico · 2019-05-19T08:05:05Z

ts/components/MessagesTabIcon.tsx

+        {messagesUnread > 0 ? (
+          Platform.OS === "ios" ? (
+            <Badge style={styles.badgeStyle}>
+              <Text style={[styles.textBadgeStyle, { top: 0 }]}>


No inline style

fpersico · 2019-05-19T08:05:23Z

ts/components/MessagesTabIcon.tsx

+/**
+ * Filters the list of messages and returns the number of unread messages.
+ */
+const getNumberMessagesUnread = (


Convert this to a redux selector

fpersico · 2019-05-19T08:06:09Z

ts/components/MessagesTabIcon.tsx

+
+const mapStateToProps = (state: GlobalState) => ({
+  messagesUnread:
+    getNumberMessagesUnread(lexicallyOrderedMessagesStateSelector(state)) < 99


You are calling the function twice!

fpersico · 2019-05-19T08:06:46Z

ts/navigation/MainNavigator.tsx

@@ -1,12 +1,6 @@
-/**


Still removed

fpersico · 2019-05-19T08:07:32Z

ts/navigation/MainNavigator.tsx

    // Android shadow
    elevation: variables.footerElevation
+  },
+  textBadgeStyle: {


Not used anymore?

fpersico · 2019-05-19T08:09:18Z

@matgentili Please clean this PR because it contains unused stuff.

Created selector for unread messages and improved the code

fpersico · 2019-05-20T10:53:23Z

yarn.lock

@@ -1071,6 +1071,13 @@
  version "2.0.0"


@matgentili please check this.

Revert yarn.lock

Fix for prettier after merge

…m/teamdigitale/io-app into #157929923]-add-badge-message-tab

Now the badge's text is centered. I moved one pixel. To be added to [#157929923] add-badge-messages #979

[#157929923] add-badge-messages

4fa82d7

[#157929923] not completed. For the moment the badge is visible in all the tabs. Logic for badge is not implemented

cloudify reviewed Apr 24, 2019

View reviewed changes

[#157929923]-add-badge-messages

2c986b9

[#157929923] not completed. Badge graphic is ok on Android, I must check it on iOS. The logic for the badge counter has not implemented yet.

[#157929923]-add-badge-messages

1f775c1

[#157929923] not completed. Badge graphic is ok on Android, I must check it on iOS. The logic for the badge counter has not implemented yet.

cloudify suggested changes Apr 24, 2019

View reviewed changes

[#157929923] add-badge-messages

4f7653e

[#157929923] add-badge-messages. Modified badge layout and added method for reading the number of messages. Tested on ios and android

matgentili marked this pull request as ready for review April 29, 2019 15:06

matgentili requested review from Undermaken and fpersico as code owners April 29, 2019 15:07

matgentili requested a review from cloudify April 29, 2019 15:09

cloudify reviewed Apr 29, 2019

View reviewed changes

[#157929923]-add-badge-message-tab

cc4db3a

[#157929923]-add-badge-message-tab. Added store redux for badge

fpersico changed the title ~~[#157929923] add-badge-messages~~ [#157929923] [WIP] add-badge-messages May 7, 2019

matgentili and others added 2 commits May 13, 2019 14:15

[#157929923]-add-badge-message-tab

740cf3d

Completed badge implementation. It works correctly on ios and android.

Merge branch 'master' into #157929923]-add-badge-message-tab

3c3eee9

matgentili added 2 commits May 13, 2019 15:03

[#157929923]-add-badge-message-tab

c6076fa

fix - Now the badge number is retrieved using BadgeSelector instead of passing it during navigation

Merge branch '#157929923]-add-badge-message-tab' of https://github.co…

d6c5379

…m/teamdigitale/io-app into #157929923]-add-badge-message-tab

matgentili requested a review from cloudify May 13, 2019 13:14

matgentili and others added 3 commits May 15, 2019 14:38

[#157929923] add badge message tab

c1c8ff7

Fix implementation badge messages. Now I don't use reducer but i get the number for badge by list of messages

[#157929923] add badge message tab

1e29f4f

Added control if badge number is greater than 99

Merge branch 'master' into #157929923]-add-badge-message-tab

b5163eb

fpersico suggested changes May 19, 2019

View reviewed changes

matgentili and others added 2 commits May 20, 2019 11:15

[#157929923] Add badge messages

1715e8d

Created selector for unread messages and improved the code

Merge branch 'master' into #157929923]-add-badge-message-tab

99c794d

matgentili requested a review from fpersico May 20, 2019 10:27

fpersico suggested changes May 20, 2019

View reviewed changes

yarn.lock

@@ -1071,6 +1071,13 @@

version "2.0.0"

Copy link

Contributor

fpersico May 20, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@matgentili please check this.

matgentili and others added 5 commits May 20, 2019 14:19

[#157929923] Add badge messages tab

571cefb

Revert yarn.lock

Merge branch 'master' into #157929923]-add-badge-message-tab

0e75fd4

[#157929923] Add badge messages tab

31e64be

Fix for prettier after merge

Merge branch '#157929923]-add-badge-message-tab' of https://github.co…

cb0706a

…m/teamdigitale/io-app into #157929923]-add-badge-message-tab

Merge branch 'master' into #157929923]-add-badge-message-tab

c6c1a47

matgentili requested a review from fpersico May 20, 2019 12:30

Merge branch 'master' into #157929923]-add-badge-message-tab

15f204f

fpersico approved these changes May 20, 2019

View reviewed changes

matgentili changed the title ~~[#157929923] [WIP] add-badge-messages~~ [#157929923] add-badge-messages May 20, 2019

fpersico merged commit b04228a into master May 20, 2019

matgentili added a commit that referenced this pull request May 22, 2019

[#157929923] Fix badge graphic

8aff619

Now the badge's text is centered. I moved one pixel. To be added to [#157929923] add-badge-messages #979

matgentili mentioned this pull request May 22, 2019

[#157929923] Fix badge graphic #1071

Merged

fpersico pushed a commit that referenced this pull request May 23, 2019

[#157929923] Fix badge graphic (#1071)

495097a

Now the badge's text is centered. I moved one pixel. To be added to [#157929923] add-badge-messages #979

Conversation

matgentili commented Apr 24, 2019

Uh oh!

digitalcitizenship commented Apr 24, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Affected stories

Uh oh!

fpersico commented Apr 24, 2019

Uh oh!

matgentili commented Apr 24, 2019

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

codecov bot commented Apr 24, 2019

Codecov Report

Uh oh!

codecov bot commented Apr 24, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

matgentili Apr 29, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

matgentili Apr 29, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cloudify commented Apr 30, 2019

Uh oh!

cloudify commented May 3, 2019

Uh oh!

matgentili commented May 3, 2019

Uh oh!

matgentili commented May 13, 2019

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

digitalcitizenship commented Apr 24, 2019 •

edited

Loading

codecov bot commented Apr 24, 2019 •

edited

Loading

matgentili Apr 29, 2019 •

edited

Loading

matgentili Apr 29, 2019 •

edited

Loading