(feat) add empty message to my blogs list

__tests__/blogs/__snapshots__/BlogsListScreen.js.snap

@@ -2,6 +2,46 @@
 
 exports[`blog list screen component should renders correctly 1`] = `
 <RCTScrollView
+ ListEmptyComponent={
+ <View
+ style={
+ Object {
+ "alignItems": "center",
+ "flex": 1,
+ "flexDirection": "row",
+ "height": 667,
+ "justifyContent": "center",
+ }
+ }
+ >
+ <View
+ style={
+ Object {
+ "alignItems": "center",
+ "flex": 1,
+ "flexDirection": "column",
+ "justifyContent": "center",
+ }
+ }
+ >
+ <Text
+ style={
+ Object {
+ "color": "#888",
+ "fontFamily": "Roboto",
+ "fontSize": 24,
+ "fontWeight": "200",
+ "marginBottom": 8,
+ "marginTop": 8,
+ "textAlign": "center",
+ }
+ }
+ >
+ This list is empty
+ </Text>
+ </View>
+ </View>
+ }
  ListFooterComponent={null}
  ListHeaderComponent={
  <View>

locales/en.json

@@ -95,7 +95,8 @@
  "tabMyBlogs":"MY BLOGS",
  "errorLoading":"There was an error loading this blog.",
  "error":"SORRY, WE COULDN'T LOAD THE BLOG",
- "blogs":"Blogs"
+ "blogs":"Blogs",
+ "blogListEmpty" : "This list is empty"
  },
  "boosts":{
  "selected":"SELECTED",

locales/es.json

@@ -89,7 +89,8 @@
  "tabMyBlogs": "MI BLOG",
  "blogs": "Blog",
  "errorLoading": "Error cargando este blog.",
- "error": "PERDON, NO PUEDO CARGAR ESTE BLOG"
+ "error": "PERDON, NO PUEDO CARGAR ESTE BLOG",
+ "blogListEmpty" : "Esta lista está vacía"
  },
  "boosts": {
  "selected": "SELECCIONADO",

src/blogs/BlogsListScreen.js

@@ -7,6 +7,7 @@ import {
  FlatList,
  ActivityIndicator,
  StyleSheet,
+ Text
 } from 'react-native';
 
 import {
@@ -18,6 +19,7 @@ import BlogCard from './BlogCard';
 import Toolbar from '../common/components/toolbar/Toolbar';
 import TagsSubBar from '../newsfeed/topbar/TagsSubBar';
 import { CommonStyle as CS } from '../styles/Common';
+import { ComponentsStyle } from '../styles/Components';
 import { MINDS_CDN_URI, MINDS_FEATURES } from '../config/Config';
 import ErrorLoading from '../common/components/ErrorLoading';
 import { withErrorBoundary } from '../common/components/ErrorBoundary';
@@ -122,13 +124,22 @@ export default class BlogsListScreen extends Component {
  * Render
  */
  render() {
+ let empty = null;
  const store = this.props.blogs;
 
  const footer = this.getFooter()
+ 
+ empty = (
+ <View style={ComponentsStyle.emptyComponentContainer}>
+ <View style={ComponentsStyle.emptyComponent}>
+ <Text style={ComponentsStyle.emptyComponentMessage}>{i18n.t('blogs.blogListEmpty')}</Text>
+ </View>
+ </View>);
 
  return (
  <FlatList
  data={store.list.entities.slice()}
+ ListEmptyComponent={!this.props.blogs.list.loaded && !this.props.blogs.list.refreshing? null : empty}
  removeClippedSubviews
  onRefresh={this.refresh}
  refreshing={store.list.refreshing}