Increase/decrease folder's counter (#56)

nodejs-assets/nodejs-project/package.json

@@ -7,7 +7,7 @@
   "license": "MIT",
   "dependencies": {
     "@hyperswarm/dht": "^5.0.11",
-    "@telios/telios-client-backend": "4.1.1",
+    "@telios/telios-client-backend": "4.1.6",
     "intl": "^1.2.5",
     "sodium-native-nodejs-mobile": "^3.2.0-2",
     "utp-native-nodejs-mobile": "github:rangermauve/utp-native-nodejs-mobile#ios-support"

src/Navigator.tsx

@@ -68,6 +68,7 @@ export type RootStackParams = {
   newAlias: { namespace: string };
   newAliasRandom: undefined;
   aliasInfo: { aliasId: string; aliasName: string };
+  emailDetail: { emailId: string; isUnread: boolean };
 };
 
 export type RegisterStackParams = {
@@ -106,7 +107,6 @@ export type ProfileStackParams = {
 
 export type InboxStackParams = {
   inboxMain: undefined;
-  emailDetail: { emailId: string; folderId: number };
 };
 
 const CoreStack = createNativeStackNavigator<CoreStackProps>();
@@ -146,11 +146,6 @@ const InboxRoot = () => (
         ),
       })}
     />
-    <InboxStack.Screen
-      name="emailDetail"
-      component={EmailDetailScreen}
-      options={{ title: '' }}
-    />
   </InboxStack.Navigator>
 );
 
@@ -290,6 +285,19 @@ function CoreScreen() {
                 ),
               })}
             />
+            <Stack.Screen
+              name="emailDetail"
+              component={EmailDetailScreen}
+              options={({ navigation, route }) => ({
+                title: '',
+                headerLeft: () => (
+                  <NavIconButton
+                    icon={{ name: 'chevron-back', size: 28 }}
+                    onPress={() => navigation.goBack()}
+                  />
+                ),
+              })}
+            />
           </Stack.Group>
         </>
       ) : (

src/components/DraweContent/DrawerContent.tsx

@@ -3,30 +3,53 @@ import {
   DrawerContentScrollView,
   DrawerContentComponentProps,
 } from '@react-navigation/drawer';
-import { useAppSelector } from '../../hooks';
+import { useAppDispatch, useAppSelector } from '../../hooks';
 import { Image, Text, View } from 'react-native';
 import { IconButton } from '../IconButton';
 import { colors } from '../../util/colors';
 import Avatar from '../Avatar/Avatar';
 import DrawerAliasesSection from '../DrawerAliasesSection/DrawerAliasesSection';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 import { DrawerCell } from '../DrawerCell/DrawerCell';
-import { selectMailBoxAddress } from '../../store/selectors/email';
+import {
+  selectMailBoxAddress,
+  selectMailBoxId,
+} from '../../store/selectors/email';
+import { folderSelectors } from '../../store/adapters/folders';
+import { FoldersId } from '../../store/types/enums/Folders';
+import { getMailboxFolders } from '../../store/thunks/email';
+import styles from './styles';
 import {
   selectAccountAvatar,
   selectAccountDisplayName,
 } from '../../store/selectors/account';
 
-import styles from './styles';
-
 export const DrawerContent = (props: DrawerContentComponentProps) => {
+  const dispatch = useAppDispatch();
   const mailboxAddress = useAppSelector(selectMailBoxAddress);
   const displayName = useAppSelector(selectAccountDisplayName);
   const avatar = useAppSelector(selectAccountAvatar);
+  const mailboxId = useAppSelector(selectMailBoxId);
   const selectedRoute = props.state.routes[props.state.index];
+  const folders = useAppSelector(state =>
+    folderSelectors.selectEntities(state.folders),
+  );
+
+  const getFolderUnreadCount = (folderId: number): string | undefined => {
+    if (folders) {
+      const folder = folders[folderId];
+      if (folder && folder.count > 0) {
+        return folder.count.toString();
+      }
+    }
+    return undefined;
+  };
 
-  const onRefresh = () => {
-    //todo
+  const onRefresh = async () => {
+    // await dispatch(getNewMailFlow());
+    if (mailboxId) {
+      await dispatch(getMailboxFolders({ id: mailboxId }));
+    }
   };
 
   return (
@@ -72,6 +95,7 @@ export const DrawerContent = (props: DrawerContentComponentProps) => {
           label="Inbox"
           focused={selectedRoute.name === 'inbox'}
           leftIcon={{ name: 'mail-outline' }}
+          rightText={getFolderUnreadCount(FoldersId.inbox)}
           onPress={() => props.navigation.navigate('inbox')}
         />
 

src/components/EmailCell/EmailCell.tsx

@@ -22,16 +22,14 @@ type EmailCellPropsWithType = EmailCellProps & { type: ComponentTypes };
 const DefaultEmailCell = (props: EmailCellProps) =>
   EmailCellRender({ ...props, type: ComponentTypes.DEFAULT });
 
-const SearhEmailCell = (props: EmailCellProps) =>
+const SearchEmailCell = (props: EmailCellProps) =>
   EmailCellRender({ ...props, type: ComponentTypes.SEARCH });
 
 const EmailCellRender = ({ email, onPress, type }: EmailCellPropsWithType) => {
   let fromName;
-  let fromEmail;
   if (email?.fromJSON) {
     const from = JSON.parse(email?.fromJSON);
     fromName = from[0].name;
-    fromEmail = from[0].address;
   }
   const isUnread = !!email.unread;
 
@@ -75,5 +73,5 @@ const EmailCellRender = ({ email, onPress, type }: EmailCellPropsWithType) => {
 };
 
 export const EmailCell = Object.assign(DefaultEmailCell, {
-  Search: memo(SearhEmailCell),
+  Search: memo(SearchEmailCell),
 });

src/components/MailList/index.tsx

@@ -8,18 +8,12 @@ import { EmptyComponent } from './components/EmptyComponent';
 import { colors } from '../../util/colors';
 import useInfiniteScroll from '../../hooks/useInfiniteScroll';
 
-export type MailListItem = {
-  id: string;
-  onSelect?: () => void;
-  mail?: Email;
-};
-
 export type MailListProps = {
   items: Email[];
   getMoreData: (offset: number, perPage: number) => Promise<Email[]>;
   resetData?: () => void;
   headerComponent?: React.ComponentType<any> | React.ReactElement;
-  onItemPress?: (itemId: string) => void;
+  onItemPress?: (itemId: string, isUnread: boolean) => void;
   headerAnimatedValue?: any;
 };
 
@@ -34,11 +28,14 @@ export const MailList = ({
   const { isLoading, flatListProps } = useInfiniteScroll<Email>({
     getData: getMoreData,
     resetData,
-    perPage: 4,
+    perPage: 10,
   });
 
   const renderItem = ({ item }: { item: Email }) => (
-    <EmailCell email={item} onPress={() => onItemPress?.(item.emailId)} />
+    <EmailCell
+      email={item}
+      onPress={() => onItemPress?.(item.emailId, item.unread)}
+    />
   );
 
   return (

src/components/MailListHeaderTitle.tsx

@@ -8,6 +8,7 @@ const styles = StyleSheet.create({
     width: 10,
     aspectRatio: 1,
     borderRadius: 10,
+    marginLeft: 11,
   },
   titleContainer: {
     flexDirection: 'row',
@@ -31,7 +32,7 @@ export default ({
   return (
     <View style={styles.titleContainer}>
       <Text
-        style={[{ ...fonts.title2, marginRight: 11 }, titleStyle]}
+        style={[{ ...fonts.title2 }, titleStyle]}
         numberOfLines={1}
         ellipsizeMode="tail">
         {title}

src/components/MailWithFiltersContainer/index.tsx

@@ -1,7 +1,10 @@
 import { useAppDispatch, useAppSelector } from '../../hooks';
 import { FoldersId } from '../../store/types/enums/Folders';
 import React, { useLayoutEffect, useState } from 'react';
-import MailFilters, { FilterOption, FilterType } from '../MailList/components/MailFilters';
+import MailFilters, {
+  FilterOption,
+  FilterType,
+} from '../MailList/components/MailFilters';
 import { resetMailsByFolder } from '../../store/emails';
 import { View } from 'react-native';
 import styles from './styles';
@@ -59,11 +62,8 @@ export default ({
     });
   }, []);
 
-  const onSelectEmail = (emailId: string) => {
-    navigation.navigate('inbox', {
-      screen: 'emailDetail',
-      params: { emailId: emailId },
-    });
+  const onSelectEmail = (emailId: string, isUnread: boolean) => {
+    navigation.navigate('emailDetail', { emailId: emailId, isUnread });
   };
 
   const resetData = (filter: FilterType) => () =>

src/screens/AliasInfo/index.tsx

@@ -44,7 +44,7 @@ export const AliasInfoScreen = ({
       try {
         await dispatch(
           removeAliasFlow({
-            aliasId: alias._id,
+            aliasId: alias.aliasId,
             address: alias.name,
             domain: emailPostfix,
             namespaceName: alias.namespaceKey,
@@ -89,7 +89,7 @@ export const AliasInfoScreen = ({
         </View>
         {!!alias.namespaceKey && (
           <DescriptionSection
-            aliasId={alias._id}
+            aliasId={alias.aliasId}
             domain={emailPostfix}
             aliasDescription={alias.description}
           />
@@ -103,15 +103,15 @@ export const AliasInfoScreen = ({
       <SeparatorLine />
       <View style={styles.sectionContainer}>
         <CurrentStateSection
-          aliasId={alias._id}
+          aliasId={alias.aliasId}
           domain={emailPostfix}
           aliasDisabled={alias.disabled}
         />
       </View>
       <SeparatorLine />
       <ForwardAddressesSection
         domain={emailPostfix}
-        aliasId={alias._id}
+        aliasId={alias.aliasId}
         aliasFwdAddresses={alias.fwdAddresses || []}
       />
       <SeparatorLine />