added placeholders when creating account

app/mobile/ios/Databag.xcodeproj/project.pbxproj

@@ -310,7 +310,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				ASSETCATALOG_COMPILER_INCLUDE_ALL_APPICON_ASSETS = YES;
 				CLANG_ENABLE_MODULES = YES;
-				CURRENT_PROJECT_VERSION = 17;
+				CURRENT_PROJECT_VERSION = 18;
 				DEVELOPMENT_TEAM = 3P65PQ7SUR;
 				ENABLE_BITCODE = NO;
 				GCC_PREPROCESSOR_DEFINITIONS = (
@@ -348,7 +348,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				ASSETCATALOG_COMPILER_INCLUDE_ALL_APPICON_ASSETS = YES;
 				CLANG_ENABLE_MODULES = YES;
-				CURRENT_PROJECT_VERSION = 17;
+				CURRENT_PROJECT_VERSION = 18;
 				DEVELOPMENT_TEAM = 3P65PQ7SUR;
 				INFOPLIST_FILE = Databag/Info.plist;
 				INFOPLIST_KEY_CFBundleDisplayName = Databag;

app/mobile/src/session/cards/Cards.jsx

@@ -39,12 +39,21 @@ export function CardsTitle({ state, actions, openRegistry }) {
 
 export function CardsBody({ state, actions, openContact }) {
   return (
-    <FlatList style={styles.cards}
+    <>
-      data={state.cards}
+      { state.cards.length == 0 && (
-      initialNumToRender={25}
+        <View style={styles.notfound}>
-      renderItem={({ item }) => <CardItem item={item} openContact={openContact} />}
+          <Text style={styles.notfoundtext}>No Contacts Found</Text>
-      keyExtractor={item => item.cardId}
+        </View>
-    />
+      )}
+      { state.cards.length != 0 && (
+        <FlatList style={styles.cards}
+          data={state.cards}
+          initialNumToRender={25}
+          renderItem={({ item }) => <CardItem item={item} openContact={openContact} />}
+          keyExtractor={item => item.cardId}
+        />
+      )}
+    </>
   );
 }
 

app/mobile/src/session/cards/Cards.styled.js

@@ -104,6 +104,16 @@ export const styles = StyleSheet.create({
   findarea: {
     borderTopWidth: 1,
     borderColor: Colors.divider,
+  },
+  notfound: {
+    width: '100%',
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  notfoundtext: {
+    fontSize: 20,
+    color: Colors.grey,
   }
 })
 

app/mobile/src/session/cards/useCards.hook.js

@@ -88,7 +88,6 @@ export function useCards() {
         return -1;
       });
     }
-    filtered.push({cardId:''});
     updateState({ cards: filtered }); 
   }, [card, state.filter, state.sorting]);
 

app/mobile/src/session/channels/Channels.jsx

@@ -44,12 +44,19 @@ export function ChannelsBody({ state, actions, openConversation }) {
 
   return (
     <>
-      <FlatList style={styles.channels}
+      { state.channels.length == 0 && (
-        data={state.channels}
+        <View style={styles.channels}>
-        initialNumToRender={25}
+          <Text style={styles.notfound}>No Topics Found</Text>
-        renderItem={({ item }) => <ChannelItem item={item} openConversation={openConversation} />}
+        </View>
-        keyExtractor={item => (`${item.cardId}:${item.channelId}`)}
+      )}
-      />
+      { state.channels.length > 0 && (
+        <FlatList style={styles.channels}
+          data={state.channels}
+          initialNumToRender={25}
+          renderItem={({ item }) => <ChannelItem item={item} openConversation={openConversation} />}
+          keyExtractor={item => (`${item.cardId}:${item.channelId}`)}
+        />
+      )}
       <Modal
         animationType="fade"
         transparent={true}
@@ -106,12 +113,19 @@ export function Channels({ openConversation }) {
         </View>
       </SafeAreaView>
       <SafeAreaView style={styles.channels} edges={['left']}>
-        <FlatList 
+        { state.channels.length == 0 && (
-          data={state.channels}
+          <View style={styles.channels}>
-          initialNumToRender={25}
+            <Text style={styles.notfound}>No Topics Found</Text>
-          renderItem={({ item }) => <ChannelItem item={item} openConversation={openConversation} />}
+          </View>
-          keyExtractor={item => (`${item.cardId}:${item.channelId}`)}
+        )}
-        />
+        { state.channels.length != 0 && (
+          <FlatList 
+            data={state.channels}
+            initialNumToRender={25}
+            renderItem={({ item }) => <ChannelItem item={item} openConversation={openConversation} />}
+            keyExtractor={item => (`${item.cardId}:${item.channelId}`)}
+          />
+        )}
       </SafeAreaView>
       <SafeAreaView style={styles.bottomArea} edges={['left']}>
         <TouchableOpacity style={styles.addbottom}>

app/mobile/src/session/channels/Channels.styled.js

@@ -56,12 +56,18 @@ export const styles = StyleSheet.create({
     flexGrow: 1,
     flexShrink: 1,
   },
+  notfound: {
+    fontSize: 20,
+    color: Colors.grey,
+  },
   channels: {
     flexShrink: 1,
     flexGrow: 1,
     width: '100%',
     paddingLeft: 16,
     paddingRight: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
   },
   addbottom: {
     backgroundColor: Colors.primary,

app/mobile/src/session/profile/Profile.jsx

@@ -123,16 +123,31 @@ export function Profile() {
         )}
         <TouchableOpacity style={styles.detail} onPress={actions.showDetailEdit}>
           <View style={styles.attribute}>
-            <Text style={styles.nametext}>{ state.name }</Text>
+            { state.name && (
+              <Text style={styles.nametext}>{ state.name }</Text>
+            )}
+            { !state.name && (
+              <Text style={styles.nonametext}>Name</Text>
+            )}
             <Ionicons name="edit" size={16} color={Colors.text} />
           </View>
           <View style={styles.attribute}>
             <Ionicons name="enviromento" size={14} color={Colors.text} />
-            <Text style={styles.locationtext}>{ state.location }</Text>
+            { state.location && (
+              <Text style={styles.locationtext}>{ state.location }</Text>
+            )}
+            { !state.location && (
+              <Text style={styles.nolocationtext}>Location</Text>
+            )}
           </View> 
           <View style={styles.attribute}>
             <Ionicons name="book" size={14} color={Colors.text} />
-            <Text style={styles.descriptiontext}>{ state.description }</Text>
+            { state.description && (
+              <Text style={styles.descriptiontext}>{ state.description }</Text>
+            )}
+            { !state.description && (
+              <Text style={styles.nodescriptiontext}>Description</Text>
+            )}
           </View> 
         </TouchableOpacity>
         <View style={styles.visible}>

app/mobile/src/session/profile/Profile.styled.js

@@ -75,6 +75,12 @@ export const styles = StyleSheet.create({
     alignItems: 'center',
     paddingBottom: 8,
   },
+  nonametext: {
+    fontSize: 18,
+    paddingRight: 8,
+    fontWeight: 'bold',
+    color: Colors.grey,
+  },
   nametext: {
     fontSize: 18,
     paddingRight: 8,
@@ -83,10 +89,22 @@ export const styles = StyleSheet.create({
   locationtext: {
     fontSize: 16,
     paddingLeft: 8,
+    color: Colors.text,
+  },
+  nolocationtext: {
+    fontSize: 16,
+    paddingLeft: 8,
+    color: Colors.grey,
   },
   descriptiontext: {
     fontSize: 16,
-    paddingLeft: 8
+    paddingLeft: 8,
+    color: Colors.text,
+  },
+  nodescriptiontext: {
+    fontSize: 16,
+    paddingLeft: 8,
+    color: Colors.grey,
   },
   visible: {
     display: 'flex',