[#157929923] add-badge-messages

ts/components/MessagesTabIcon.tsx

@@ -0,0 +1,96 @@
+import * as pot from "italia-ts-commons/lib/pot";
+import { Badge, View } from "native-base";
+import React from "react";
+import { Platform, StyleSheet, Text } from "react-native";
+import { connect } from "react-redux";
+import { lexicallyOrderedMessagesStateSelector } from "../store/reducers/entities/messages";
+import { MessageState } from "../store/reducers/entities/messages/messagesById";
+import { GlobalState } from "../store/reducers/types";
+import variables from "../theme/variables";
+import IconFont from "./ui/IconFont";
+
+type OwnProps = {
+  color?: string;
+};
+
+const styles = StyleSheet.create({
+  textBadgeStyle: {
+    fontSize: 10,
+    fontFamily: "Titillium Web",
+    fontWeight: "bold",
+    color: "white",
+    flex: 1,
+    position: "absolute",
+    height: 19,
+    width: 19,
+    textAlign: "center",
+    paddingRight: 3
+  },
+  badgeStyle: {
+    backgroundColor: variables.brandPrimary,
+    borderColor: "white",
+    borderWidth: 2,
+    position: "absolute",
+    elevation: 0.1,
+    shadowColor: "white",
+    height: 19,
+    width: 19,
+    left: 12,
+    bottom: 10
+  }
+});
+
+type Props = OwnProps & ReturnType<typeof mapStateToProps>;
+
+/**
+ * Filters the list of messages and returns the number of unread messages.
+ */
+const getNumberMessagesUnread = (
+  potMessagesState: pot.Pot<ReadonlyArray<MessageState>, string>
+): number =>
+  pot.getOrElse(
+    pot.map(potMessagesState, _ =>
+      _.filter(messageState => !messageState.isRead)
+    ),
+    []
+  ).length;
+
+/**
+ * Message icon add badge.
+ */
+class MessagesTabIcon extends React.PureComponent<Props> {
+  public render() {
+    const { color, messagesUnread } = this.props;
+    return (
+      <View>
+        <IconFont
+          name={"io-messaggi"}
+          size={variables.iconSize3}
+          color={color}
+        />
+        {messagesUnread > 0 ? (
+          Platform.OS === "ios" ? (
+            <Badge style={styles.badgeStyle}>
+              <Text style={[styles.textBadgeStyle, { top: 0 }]}>
+                {messagesUnread}
+              </Text>
+            </Badge>
+          ) : (
+            <Badge style={styles.badgeStyle}>
+              <Text style={styles.textBadgeStyle}>{messagesUnread}</Text>
+            </Badge>
+          )
+        ) : null}
+      </View>
+    );
+  }
+}
+
+const mapStateToProps = (state: GlobalState) => ({
+  messagesUnread:
+    getNumberMessagesUnread(lexicallyOrderedMessagesStateSelector(state)) < 99
+      ? getNumberMessagesUnread(lexicallyOrderedMessagesStateSelector(state))
+      : 99
+});
+
+export default connect(mapStateToProps)(MessagesTabIcon);

ts/components/messages/MessageListComponent.tsx

@@ -8,7 +8,6 @@ import {
   StyleSheet,
   View
 } from "react-native";
-
 import { NavigationEvents } from "react-navigation";
 import { MessageState } from "../../store/reducers/entities/messages/messagesById";
 import { PaymentByRptIdState } from "../../store/reducers/entities/payments";
@@ -42,7 +41,6 @@ const keyExtractor = (_: MessageState) => _.meta.id;
 class MessageListComponent extends React.Component<Props> {
   private renderItem = (info: ListRenderItemInfo<MessageState>) => {
     const { meta } = info.item;
-
     const service = this.props.servicesById[meta.sender_service_id];
 
     return (
@@ -76,7 +74,6 @@ class MessageListComponent extends React.Component<Props> {
       paymentByRptId,
       ListEmptyComponent
     } = this.props;
-
     const refreshControl = (
       <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
     );

ts/navigation/MainNavigator.tsx

@@ -1,10 +1,3 @@
-/**
- * Main navigator, handling the navigation within
- * the app *after* the login has occurred. This takes
- * care of displaying a tab navigator with the
- * appropriate icons
- */
-
 import * as React from "react";
 import { Platform, StyleSheet, Text } from "react-native";
 import {
@@ -14,7 +7,7 @@ import {
   NavigationState,
   StackActions
 } from "react-navigation";
-
+import MessagesTabIcon from "../components/MessagesTabIcon";
 import ProfileTabIcon from "../components/ProfileTabIcon";
 import IconFont from "../components/ui/IconFont";
 import I18n from "../i18n";
@@ -25,7 +18,6 @@ import PreferencesNavigator from "./PreferencesNavigator";
 import ProfileNavigator from "./ProfileNavigator";
 import ROUTES from "./routes";
 import WalletNavigator from "./WalletNavigator";
-
 type Routes = keyof typeof ROUTES;
 
 type RouteLabelMap = { [key in Routes]?: string };
@@ -87,6 +79,30 @@ const styles = StyleSheet.create({
     shadowRadius: variables.footerShadowRadius,
     // Android shadow
     elevation: variables.footerElevation
+  },
+  textBadgeStyle: {
+    fontSize: 10,
+    fontFamily: "Titillium Web",
+    fontWeight: "bold",
+    color: "white",
+    flex: 1,
+    position: "absolute",
+    height: 19,
+    width: 19,
+    textAlign: "center",
+    paddingRight: 3
+  },
+  badgeStyle: {
+    backgroundColor: variables.brandPrimary,
+    borderColor: "white",
+    borderWidth: 2,
+    position: "absolute",
+    elevation: 0.1,
+    shadowColor: "white",
+    height: 19,
+    width: 19,
+    left: 12,
+    bottom: 10
   }
 });
 
@@ -113,7 +129,6 @@ const getTabBarVisibility = (
   if (NoTabBarRoutes.indexOf(routeName) !== -1) {
     return false;
   }
-
   return true;
 };
 
@@ -166,22 +181,29 @@ const navigation = createBottomTabNavigator(
       tabBarIcon: (options: { tintColor: string | null; focused: boolean }) => {
         const { routeName } = nav.state;
         const iconName: string = getIcon(routeName);
-
+        if (routeName === ROUTES.MESSAGES_NAVIGATOR) {
+          return (
+            <MessagesTabIcon
+              color={options.tintColor === null ? undefined : options.tintColor}
+            />
+          );
+        }
         if (iconName === ROUTE_ICON.PROFILE_NAVIGATOR) {
           return (
             <ProfileTabIcon
               size={variables.iconSize3}
               color={options.tintColor === null ? undefined : options.tintColor}
             />
           );
+        } else {
+          return (
+            <IconFont
+              name={iconName}
+              size={variables.iconSize3}
+              color={options.tintColor === null ? undefined : options.tintColor}
+            />
+          );
         }
-        return (
-          <IconFont
-            name={iconName}
-            size={variables.iconSize3}
-            color={options.tintColor === null ? undefined : options.tintColor}
-          />
-        );
       },
       tabBarOnPress: options => {
         if (options.navigation.state.index > 0) {

ts/screens/messages/MessageDetailScreen.tsx

@@ -5,7 +5,6 @@ import * as React from "react";
 import { ActivityIndicator, Image, StyleSheet } from "react-native";
 import { NavigationScreenProps } from "react-navigation";
 import { connect } from "react-redux";
-
 import { CreatedMessageWithoutContent } from "../../../definitions/backend/CreatedMessageWithoutContent";
 import { ServiceId } from "../../../definitions/backend/ServiceId";
 import { ServicePublic } from "../../../definitions/backend/ServicePublic";
@@ -281,7 +280,6 @@ export class MessageDetailScreen extends React.PureComponent<Props, never> {
 
 const mapStateToProps = (state: GlobalState, ownProps: OwnProps) => {
   const messageId = ownProps.navigation.getParam("messageId");
-
   const maybeMessageState = fromNullable(
     messageStateByIdSelector(messageId)(state)
   );

ts/screens/messages/MessagesHomeScreen.tsx

@@ -15,7 +15,6 @@ import * as React from "react";
 import { StyleSheet } from "react-native";
 import { NavigationScreenProps } from "react-navigation";
 import { connect } from "react-redux";
-
 import MessagesArchive from "../../components/messages/MessagesArchive";
 import MessagesDeadlines from "../../components/messages/MessagesDeadlines";
 import MessagesInbox from "../../components/messages/MessagesInbox";
@@ -37,7 +36,6 @@ import customVariables from "../../theme/variables";
 
 // Used to disable the Deadlines tab
 const DEADLINES_TAB_ENABLED = false;
-
 type Props = NavigationScreenProps &
   ReturnType<typeof mapStateToProps> &
   ReturnType<typeof mapDispatchToProps>;
@@ -108,7 +106,6 @@ class MessagesHomeScreen extends React.Component<Props, State> {
   public componentDidMount() {
     this.props.refreshMessages();
   }
-
   public render() {
     const { searchText } = this.state;
 
@@ -273,7 +270,9 @@ const mapStateToProps = (state: GlobalState) => ({
 });
 
 const mapDispatchToProps = (dispatch: Dispatch) => ({
-  refreshMessages: () => dispatch(loadMessages.request()),
+  refreshMessages: () => {
+    dispatch(loadMessages.request());
+  },
   navigateToMessageDetail: (messageId: string) =>
     dispatch(navigateToMessageDetailScreenAction({ messageId })),
   updateMessagesArchivedState: (

ts/store/actions/messages.ts

@@ -54,10 +54,15 @@ export const setMessagesArchivedState = createAction(
     resolve({ ids, archived })
 );
 
+export const setNumberMessagesUnread = createStandardAction(
+  "SET_NUMBER_MESSAGES_UNREAD"
+)<number>();
+
 export type MessagesActions =
   | ActionType<typeof loadMessage>
   | ActionType<typeof loadMessageWithRelations>
   | ActionType<typeof loadMessages>
   | ActionType<typeof loadMessagesCancel>
   | ActionType<typeof setMessageReadState>
-  | ActionType<typeof setMessagesArchivedState>;
+  | ActionType<typeof setMessagesArchivedState>
+  | ActionType<typeof setNumberMessagesUnread>;

ts/store/reducers/entities/messages/index.ts

@@ -12,6 +12,7 @@ import messagesAllIdsReducer, {
   messagesAllIdsSelector,
   MessagesAllIdsState
 } from "./messagesAllIds";
+
 import messagesByIdReducer, {
   messagesStateByIdSelector,
   MessageStateById
@@ -34,7 +35,7 @@ const reducer = combineReducers<MessagesState, Action>({
 
 // Selectors
 
-/**
+/**-
  * Returns array of messages IDs inversely lexically ordered.
  */
 export const lexicallyOrderedMessagesIds = createSelector(