[#157929923] add-badge-messages #979

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

@@ -71,7 +71,6 @@ class MessageListComponent extends React.Component<Props> {
    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

@@ -99,6 +99,7 @@
    "@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

@@ -12,7 +12,8 @@ import { MessageState } from "../../store/reducers/entities/messages/messagesByI
 import { PaymentByRptIdState } from "../../store/reducers/entities/payments";
 import { ServicesByIdState } from "../../store/reducers/entities/services/servicesById";
 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

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

+    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

@@ -178,20 +180,27 @@ const navigation = createBottomTabNavigator(
      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

@@ -87,6 +79,30 @@ const styles = StyleSheet.create({
    shadowRadius: variables.footerShadowRadius,
    // 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 fpersico and Undermaken 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 Outdated

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

[#157929923] add-badge-messages #979

[#157929923] add-badge-messages #979

Conversation

matgentili commented Apr 24, 2019

digitalcitizenship commented Apr 24, 2019 • edited Loading

Affected stories

fpersico commented Apr 24, 2019

matgentili commented Apr 24, 2019

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

codecov bot commented Apr 24, 2019

Codecov Report

codecov bot commented Apr 24, 2019 • edited Loading

Codecov Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

matgentili Apr 29, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

matgentili Apr 29, 2019 • edited Loading

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

cloudify commented Apr 30, 2019

cloudify commented May 3, 2019

matgentili commented May 3, 2019

matgentili commented May 13, 2019

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

fpersico commented May 19, 2019

Choose a reason for hiding this comment

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