created collapsibleCardView as generic

src/components/collapsibleCard/index.js

@@ -0,0 +1,4 @@
+import CollapsibleCard from "./view/collapsibleCardView";
+
+export { CollapsibleCard };
+export default CollapsibleCard;

src/components/collapsibleCard/view/collapsibleCardStyles.js

@@ -0,0 +1,21 @@
+import EStyleSheet from "react-native-extended-stylesheet";
+
+export default EStyleSheet.create({
+  container: {
+    flexDirection: "row",
+  },
+  container: {
+    backgroundColor: "$white",
+    marginTop: 8,
+    marginBottom: 8,
+    overflow: "hidden",
+    shadowOpacity: 0.8,
+    borderWidth: 0.8,
+    shadowColor: "#e7e7e7",
+    borderColor: "#e7e7e7",
+    flexDirection: "column",
+  },
+  content: {
+    backgroundColor: "$white",
+  },
+});

src/components/collapsibleCard/view/collapsibleCardView.js

@@ -0,0 +1,95 @@
+import React, { Component } from "react";
+import { View, TouchableHighlight, Text, Animated } from "react-native";
+
+// Constants
+
+// Components
+import { ContainerHeader } from "../../containerHeader";
+// Styles
+// eslint-disable-next-line
+import styles from "./collapsibleCardStyles";
+
+class CollapsibleCardView extends Component {
+  /* Props
+    * ------------------------------------------------
+    *   @prop { type }    expanded                - Description....
+    *   @prop { type }    children                - Description....
+    *   @prop { type }    title                   - Description....
+    *
+    */
+  anime = {
+    height: new Animated.Value(),
+    expanded: false,
+    contentHeight: 0,
+  };
+  constructor(props) {
+    super(props);
+
+    this.anime.expanded = props.expanded;
+
+    this.state = {
+      expanded: props.expanded || false,
+    };
+  }
+
+  // Component Life Cycles
+
+  // Component Functions
+  _initContentHeight = evt => {
+    if (this.anime.contentHeight > 0) return;
+    this.anime.contentHeight = evt.nativeEvent.layout.height;
+    this.anime.height.setValue(
+      this.anime.expanded ? this._getMaxValue() : this._getMinValue()
+    );
+  };
+
+  _getMaxValue() {
+    return this.anime.contentHeight;
+  }
+  _getMinValue() {
+    return 0;
+  }
+
+  _toggleOnPress = () => {
+    Animated.timing(this.anime.height, {
+      toValue: this.anime.expanded ? this._getMinValue() : this._getMaxValue(),
+      duration: 200,
+    }).start();
+    this.anime.expanded = !this.anime.expanded;
+
+    this.setState({
+      expanded: this.anime.expanded,
+    });
+  };
+
+  render() {
+    const { title, children } = this.props;
+    const { expanded } = this.state;
+
+    return (
+      <View style={styles.container}>
+        <TouchableHighlight
+          underlayColor="transparent"
+          onPress={() => this._toggleOnPress()}
+        >
+          <ContainerHeader
+            fontSize="12"
+            color="#788187"
+            fontSize={12}
+            title={title}
+            iconName={expanded ? "md-arrow-dropup" : "md-arrow-dropdown"}
+          />
+        </TouchableHighlight>
+
+        <Animated.View
+          style={[styles.content, { height: this.anime.height }]}
+          onLayout={e => this._initContentHeight(e)}
+        >
+          {children}
+        </Animated.View>
+      </View>
+    );
+  }
+}
+
+export default CollapsibleCardView;

src/components/containerHeader/view/containerHeaderStyles.js

@@ -5,16 +5,23 @@ export default EStyleSheet.create({
     width: "$deviceWidth",
     height: 50,
     backgroundColor: "$white",
+    flexDirection: "row",
+    justifyContent: "space-between",
+  },
+  hasTopBorder: {
     borderTopColor: "#cfcfcf",
-    justifyContent: "center",
-    borderTopColor: "#e7e7e7",
     borderTopWidth: 1,
   },
   title: {
-    alignSelf: "flex-start",
+    alignSelf: "center",
-    fontSize: 14,
     color: "$primaryGray",
-    fontWeight: "bold",
+    fontSize: 14,
-    marginLeft: 26,
+    marginLeft: 32,
+  },
+  icon: {
+    alignSelf: "center",
+    color: "#c1c5c7",
+    fontSize: 18,
+    marginRight: 32,
   },
 });

src/components/containerHeader/view/containerHeaderView.js

@@ -1,5 +1,6 @@
 import React, { Component } from "react";
 import { View, Text } from "react-native";
+import Ionicons from "react-native-vector-icons/Ionicons";
 
 // Constants
 
@@ -24,11 +25,28 @@ class ContainerHeaderView extends Component {
   // Component Functions
 
   render() {
-    const { title } = this.props;
+    const {
+      title,
+      isBoldTitle,
+      color,
+      hasSeperator,
+      fontSize,
+      iconName,
+    } = this.props;
 
     return (
-      <View style={styles.wrapper}>
+      <View style={[styles.wrapper, hasSeperator && styles.hasTopBorder]}>
-        <Text style={styles.title}>{title}</Text>
+        <Text
+          style={[
+            styles.title,
+            isBoldTitle && { fontWeight: "bold" },
+            color && { color: color },
+            fontSize && { fontSize: fontSize },
+          ]}
+        >
+          {title}
+        </Text>
+        {iconName && <Ionicons style={styles.icon} name={iconName} />}
       </View>
     );
   }

src/components/notification/view/notificationView.js

@@ -125,14 +125,14 @@ class NotificationView extends Component {
           rightIconName="ios-checkmark"
         />
         <ScrollView style={styles.scrollView}>
-          <ContainerHeader title="Recent" />
+          <ContainerHeader hasSeperator isBoldTitle title="Recent" />
           <FlatList
             data={notification}
             renderItem={({ item }) => this._getRenderItem(item)}
             keyExtractor={item => item.email}
           />
           {/* Will remove follow lines */}
-          <ContainerHeader title="Yesterday" />
+          <ContainerHeader hasSeperator isBoldTitle title="Yesterday" />
           <FlatList
             data={notification}
             renderItem={({ item }) => this._getRenderItem(item)}

src/screens/home/feed.js

@@ -23,6 +23,7 @@ import Placeholder from "rn-placeholder";
 import { PostCard } from "../../components/postCard";
 import { FilterBar } from "../../components/filterBar";
 
+import { CollapsibleCard } from "../../components/collapsibleCard";
 /* eslint-enable no-unused-vars */
 
 class FeedPage extends React.Component {
@@ -113,7 +114,18 @@ class FeedPage extends React.Component {
   render() {
     return (
       <View style={{ flex: 1 }}>
-        {this.state.isReady && (
+        <CollapsibleCard title="Customized Card 1" expanded={true}>
+          <Text>Hello, this is first line.</Text>
+          <Text>Hello, this is second line.</Text>
+          <Text>Hello, this is third line.</Text>
+          <Text>Hello, this is first line.</Text>
+          <Text>Hello, this is second line.</Text>
+          <Text>Hello, this is third line.</Text>
+          <Text>Hello, this is first line.</Text>
+          <Text>Hello, this is second line.</Text>
+          <Text>Hello, this is third line.</Text>
+        </CollapsibleCard>
+        {/* {this.state.isReady && (
           <FilterBar
             dropdownIconName="md-arrow-dropdown"
             options={[
@@ -181,7 +193,7 @@ class FeedPage extends React.Component {
               />
             </View>
           </View>
-        )}
+        )} */}
       </View>
     );
   }

src/screens/home/home.js

@@ -177,7 +177,6 @@ const styles = {
   },
   tabbarItem: {
     flex: 1,
-    paddingHorizontal: 7,
     backgroundColor: "#f9f9f9",
     minWidth: Dimensions.get("window").width,
   },

src/screens/profile/profile.js

@@ -6,7 +6,7 @@ import { getTimeFromNow } from "../../utils/time";
 import FastImage from "react-native-fast-image";
 
 import ScrollableTabView from "@esteemapp/react-native-scrollable-tab-view";
-import { TabBar } from "../../../components/tabBar";
+import { TabBar } from "../../components/tabBar";
 import DiscoverPage from "../discover/discover";
 import { PostCard } from "../../components/postCard";
 import Comment from "../../components/comment/comment";

src/screens/profile/screen/profileScreen.js

@@ -24,7 +24,8 @@ import {
 
 // Styles
 import styles from "./profileStyles";
-/* eslint-enable no-unused-vars */
+
+import { CollapsibleCard } from "../../../components/collapsibleCard";
 
 class ProfileScreen extends React.Component {
   static get options() {
@@ -68,8 +69,9 @@ class ProfileScreen extends React.Component {
   }
 
   async componentDidMount() {
+    let isLoggedIn;
     await getAuthStatus().then(res => {
-      const isLoggedIn = res;
+      isLoggedIn = res;
     });
 
     if (isLoggedIn) {
@@ -87,14 +89,14 @@ class ProfileScreen extends React.Component {
       });
 
       user = await getUser(userData[0].username);
-      about = JSON.parse(user.json_metadata);
+      // json_metadata: "{}" can be ceme as emty object if the account new!
-      // BUG: json_metadata: "{}" is coming emty object!!
+      about = user.json_metadata && JSON.parse(user.json_metadata);
       this.setState(
         {
           user: user,
           isLoggedIn: isLoggedIn,
           follows: follows,
-          about: about.profile,
+          about: about && about.profile,
         },
         () => {
           this.getBlog(userData[0].username);
@@ -175,20 +177,25 @@ class ProfileScreen extends React.Component {
     //TODO: Refactor ME !
     return (
       <View style={styles.container}>
-        {this.state.isLoggedIn ? (
+        <CollapsibleCard title="Customized Card 1" expanded={true}>
+          <Text>Hello, this is first line.</Text>
+          <Text>Hello, this is second line.</Text>
+          <Text>Hello, this is third line.</Text>
+        </CollapsibleCard>
+        {/* {this.state.isLoggedIn ? (
           <View style={{ flex: 1 }}>
             <View style={styles.content}>
               <FastImage
                 style={styles.cover}
                 source={{
-                  uri: this.state.about.cover_image,
+                  uri: this.state.about && this.state.about.cover_image,
                   priority: FastImage.priority.high,
                 }}
               />
               <FastImage
                 style={styles.avatar}
                 source={{
-                  uri: this.state.about.profile_image,
+                  uri: this.state.about && this.state.about.profile_image,
                   priority: FastImage.priority.high,
                 }}
               />
@@ -196,7 +203,7 @@ class ProfileScreen extends React.Component {
                 <Text style={{ fontWeight: "bold" }}>
                   {this.state.user.name}
                 </Text>
-                <Text>{this.state.about.about}</Text>
+                <Text>{this.state.about && this.state.about.about}</Text>
               </Body>
               <Card style={{ margin: 0 }}>
                 <CardItem style={styles.about}>
@@ -226,7 +233,7 @@ class ProfileScreen extends React.Component {
                         }}
                         name="md-pin"
                       />
-                      {this.state.about.location}
+                      {this.state.about && this.state.about.location}
                     </Text>
                   </View>
                   <View style={{ flex: 0.5 }}>
@@ -331,7 +338,7 @@ class ProfileScreen extends React.Component {
           </View>
         ) : (
           <DiscoverPage />
-        )}
+        )} */}
       </View>
     );
   }

src/utils/realm.js

@@ -0,0 +1,21 @@
+import { getUserData, getAuthStatus } from "../realm/realm";
+
+export const getUserIsLoggedIn = () => {
+  getAuthStatus()
+    .then(res => {
+      return res;
+    })
+    .catch(() => {
+      return null;
+    });
+};
+
+export const getUserDataFromRealm = () => {
+  getUserData()
+    .then(res => {
+      userData = Array.from(res);
+    })
+    .catch(() => {
+      return null;
+    });
+};