Merge branch 'assignment-3.0' into 'master'

<Assignment-3.0>

See merge request !1

GitView @ 69028274

+Subproject commit 690282746b8a50666215d24d2bf4c8cb7801b9de

src/App.js

+import * as React from 'react';
+import { Pressable, View, Text, Image, StyleSheet, ImageBackground } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
+import Loading from './Components/Loading'
+import Profile from './Components/Profile'
+import Repo from './Components/Repo'
+import Unfound from './Components/Unfound'
+import DataGenerator from './Components/DataGenerator'
+
+const Stack = createStackNavigator();
+const styles = StyleSheet.create({
+  viewStyleVertical : { alignItems: 'center', justifyContent: 'center', margin: '10%' },
+  viewStyleHorizon : { flex: 1, flexDirection: 'row', justifyContent: 'space-between'},
+  pressableStyle : {flex: 1, flexDirection: 'row', justifyContent: 'space-between', backgroundColor:'lavender', paddingHorizontal:20, 
+  paddingVertical:10, borderColor:'thistle', borderWidth:2, borderRadius:5, marginHorizontal: 10, marginTop: 10},
+  image: { flex: 1, resizeMode: "cover", justifyContent: "center"},
+  container : {flex: 1},
+  textBox : {flex: 1, marginTop: 20, backgroundColor:'white', borderColor:'black', borderWidth:2, borderRadius:5, 
+  marginHorizontal: 10, paddingVertical:10, paddingHorizontal: 50, alignItems: 'flex-start'}
+});
+
+function generateData(route, navigation) {
+  const {name, login, avatarUrl, bio, createdAt, email, websiteUrl, repositories} = route.params;
+  const dataFile = {}
+  dataFile['navi'] = navigation
+  dataFile['nameContent'] = 'Name: \n' + name
+  dataFile['userNameContent'] = 'UserName\n: ' + login
+  dataFile['bioContent'] = 'Bio: \n' + bio
+  dataFile['createDate'] = 'Create at: \n' + createdAt
+  dataFile['emailContent'] = 'Email: \n' + email
+  dataFile['websiteLink'] = 'Website: \n' + websiteUrl
+  dataFile['repoCount'] = 'Repository count: ' + repositories['nodes'].length
+  var iconUrl
+  if (avatarUrl != null) {
+    iconUrl = { uri: avatarUrl }
+  } else {
+    iconUrl = require('C:/Coding/cs242-assignment3/GitView/assets/default.png')
+  }
+  dataFile['iconUrl'] = iconUrl
+  return dataFile
+}
+
+
+/** Home page **/
+function HomeScreen({ navigation }) {
+  return (
+    <View style={styles.container}>
+      <ImageBackground source={require('C:/Coding/cs242-assignment3/GitView/assets/ice.jpg')} style={styles.image}>
+      <View style={styles.viewStyleVertical}>
+        <Pressable  style={styles.pressableStyle} onPress={() => navigation.navigate('LoadingProfile')}>
+          <Text> Start </Text>
+        </Pressable>
+      </View>
+      </ImageBackground>
+    </View>
+  );
+}
+
+/** Profile page **/
+function ProfileScreen({ route, navigation }) {
+  var dataFile = generateData(route, navigation)
+  return (
+      <Profile data={dataFile}/>
+  );
+}
+
+/** Repo page **/
+function RepoScreen({ route, navigation }) {
+  const {nodes} = route.params
+  let cards = [];
+  for (let i = 0; i < nodes.length; i++) {
+    var repoName = 'Repo name: \n' + nodes[i]['name'] + '\n'
+    var repoDescription = 'Repo description: \n' + nodes[i]['description'] + '\n'
+    var repoOwner = 'Repo owner: \n' + nodes[i]['owner']['login'] + '\n'
+    var nativeID = 'repo#' + i
+    cards.push(
+    <View style={styles.textBox} nativeID={nativeID}>
+      <Text> {repoName} </Text>
+      <Text> {repoDescription} </Text>
+      <Text> {repoOwner} </Text>
+    </View>
+    )
+  }
+  const dataFile = {}
+  dataFile['cards'] = cards
+  dataFile['navi'] = navigation
+  return (
+    <Repo data={dataFile}/>
+  );
+}
+
+/** Unfound page **/
+function UnfoundScreen({ route, navigation }) {
+  const {errorMsg} = route.params
+  console.error(errorMsg)
+  const dataFile = {}
+  dataFile['navi'] = navigation
+  return (
+    <Unfound data={dataFile}/>
+  );
+}
+
+/** Loading Profile page **/
+function LoadProfileScreen({navigation}) {
+  const dataJson = require('C:/Coding/cs242-assignment3/env.json');
+  fetch(dataJson['endPoint'], {
+    method: 'POST',
+    headers: {
+      "Content-Type": "application/json",
+      "Authorization": dataJson['token']
+    },
+    body: JSON.stringify({
+      query: `
+        query {
+          viewer {
+            name
+            login
+            avatarUrl
+            bio
+            createdAt
+            email
+            websiteUrl
+            repositories(last:100, privacy:PUBLIC){
+              nodes{
+                name
+              }
+            }
+          }
+        }
+      `
+    })
+  })
+  .then(res => res.json())
+  .then((data)=> {
+    navigation.navigate('Profile', data['data']['viewer'])
+  })
+  .catch(error => {
+    console.error('Error:', error)
+    navigation.navigate('Unfound', {errorMsg: error})
+  })
+
+  return (
+    <Loading/>
+  );
+}
+
+/** Loading Repo page **/
+function LoadRepoScreen({navigation}) {
+  // setTimeout(function(){
+  //   navigation.navigate('Unfound'); 
+  // }, 1000)
+  const dataJson = require('C:/Coding/cs242-assignment3/env.json');
+  fetch(dataJson['endPoint'], {
+    method: 'POST',
+    headers: {
+      "Content-Type": "application/json",
+      "Authorization": dataJson['token']
+    },
+    body: JSON.stringify({
+      query: `
+        query {
+          viewer{
+            repositories(last:100, privacy:PUBLIC){
+              nodes{
+                name
+                owner{
+                  login
+                }
+                description
+              }
+            }
+          }
+        }
+      `
+    })
+  })
+  .then(res => res.json())
+  // .then((data) => console.log(data['data']['viewer']['repositories']['nodes']))
+  // .then((data) => console.log(data))
+  .then((data)=> {
+    navigation.navigate('Repo', data['data']['viewer']['repositories'])
+  })
+  .catch(error => {
+    console.error('Error:', error)
+    navigation.navigate('Unfound', {errorMsg: error})
+  })
+
+  return (
+    <Loading/>
+  );
+}
+
+/** Page loader **/
+function App() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator initialRouteName="Home">
+        <Stack.Screen name="Home" component={HomeScreen} options={{ title: 'Github User Info' }}/>
+        <Stack.Screen name="Profile" component={ProfileScreen} />
+        <Stack.Screen name="Repo" component={RepoScreen} options={{ title: 'Repositories' }}/>
+        <Stack.Screen name="LoadingProfile" component={LoadProfileScreen} />
+        <Stack.Screen name="LoadingRepo" component={LoadRepoScreen} />
+        <Stack.Screen name="Unfound" component={UnfoundScreen} options={{ title: 'Error' }}/>
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
+
+export default App;

src/Components/DataGenerator.js

+
+function generateData(route, navigation) {
+    const {name, login, avatarUrl, bio, createdAt, email, websiteUrl, repositories} = route.params;
+    const dataFile = {}
+    dataFile['navi'] = navigation
+    dataFile['nameContent'] = 'Name: \n' + name
+    dataFile['userNameContent'] = 'UserName\n: ' + login
+    dataFile['bioContent'] = 'Bio: \n' + bio
+    dataFile['createDate'] = 'Create at: \n' + createdAt
+    dataFile['emailContent'] = 'Email: \n' + email
+    dataFile['websiteLink'] = 'Website: \n' + websiteUrl
+    dataFile['repoCount'] = 'Repository count: ' + repositories['nodes'].length
+    var iconUrl
+    if (avatarUrl != null) {
+      iconUrl = { uri: avatarUrl }
+    } else {
+      iconUrl = require('C:/Coding/cs242-assignment3/GitView/assets/default.png')
+    }
+    dataFile['iconUrl'] = iconUrl
+    return dataFile
+  }
+  
+module.exports = generateData;
\ No newline at end of file

src/Components/Loading.js

+import * as React from 'react';
+import { Pressable, View, Text, Image, StyleSheet, ImageBackground } from 'react-native';
+
+const styles = StyleSheet.create({
+  viewStyleVertical : { alignItems: 'center', justifyContent: 'center', margin: '10%' },
+  viewStyleHorizon : { flex: 1, flexDirection: 'row', justifyContent: 'space-between'},
+  pressableStyle : {flex: 1, flexDirection: 'row', justifyContent: 'space-between', backgroundColor:'lavender', paddingHorizontal:20, 
+  paddingVertical:10, borderColor:'thistle', borderWidth:2, borderRadius:5, marginHorizontal: 10, marginTop: 10},
+  image: { flex: 1, resizeMode: "cover", justifyContent: "center"},
+  container : {flex: 1},
+  textBox : {flex: 1, marginTop: 20, backgroundColor:'white', borderColor:'black', borderWidth:2, borderRadius:5, 
+  marginHorizontal: 10, paddingVertical:10, paddingHorizontal: 50, alignItems: 'flex-start'}
+});
+
+const Loading = () => {
+    const pic = require('C:/Coding/cs242-assignment3/GitView/assets/loading.png')
+    return (
+        <View style={styles.container}>
+            <ImageBackground source={require('C:/Coding/cs242-assignment3/GitView/assets/ice.jpg')} style={styles.image}>
+            <View style={styles.viewStyleVertical}>
+                <Text style={{ fontSize: 30 }}>Loading......</Text>
+                <Image source={pic} style={{width: 200, height: 200}}/>
+            </View>
+            </ImageBackground>
+        </View>
+    )
+}
+
+export default Loading;
\ No newline at end of file

src/Components/Profile.js

+import * as React from 'react';
+import { Pressable, View, Text, Image, StyleSheet, ImageBackground } from 'react-native';
+import { createStackNavigator } from '@react-navigation/stack';
+
+const Stack = createStackNavigator();
+const styles = StyleSheet.create({
+  viewStyleVertical : { alignItems: 'center', justifyContent: 'center', margin: '10%' },
+  viewStyleHorizon : { flex: 1, flexDirection: 'row', justifyContent: 'space-between'},
+  pressableStyle : {flex: 1, flexDirection: 'row', justifyContent: 'space-between', backgroundColor:'lavender', paddingHorizontal:20, 
+  paddingVertical:10, borderColor:'thistle', borderWidth:2, borderRadius:5, marginHorizontal: 10, marginTop: 10},
+  image: { flex: 1, resizeMode: "cover", justifyContent: "center"},
+  container : {flex: 1},
+  textBox : {flex: 1, marginTop: 20, backgroundColor:'white', borderColor:'black', borderWidth:2, borderRadius:5, 
+  marginHorizontal: 10, paddingVertical:10, paddingHorizontal: 50, alignItems: 'flex-start'}
+});
+
+const Profile = (props) => {
+    const file = props.data
+    const iconUrl = file['iconUrl']
+    const nameContent = file['nameContent']
+    const userNameContent = file['userNameContent']
+    const bioContent = file['bioContent']
+    const websiteLink = file['websiteLink']
+    const emailContent = file['emailContent']
+    const createDate = file['createDate']
+    const repoCount = file['repoCount']
+    const navigation = file['navi']
+    return (
+        <View style={styles.container}>
+            <ImageBackground source={require('C:/Coding/cs242-assignment3/GitView/assets/ice.jpg')} style={styles.image}> 
+            <View style={styles.viewStyleVertical}>
+                <View style={styles.viewStyleVertical}> 
+                <Image style={{width: 100, height: 100}} source={iconUrl} />
+                </View>
+                <View style={styles.viewStyleHorizon}> 
+                <Pressable style={styles.pressableStyle}> 
+                    <Text> Followers </Text>
+                </Pressable>
+                <Pressable style={styles.pressableStyle}>
+                    <Text> Followings </Text>
+                </Pressable>
+                </View>
+                <View style={styles.viewStyleVertical} > 
+                <Text style={styles.textBox}> {nameContent} </Text>
+                <Text style={styles.textBox}> {userNameContent} </Text>
+                <Text style={styles.textBox}> {bioContent} </Text>
+                <Text style={styles.textBox}> {websiteLink} </Text>
+                <Text style={styles.textBox}> {emailContent} </Text>
+                <Text style={styles.textBox}> {createDate} </Text>
+                </View>
+                <View style={styles.viewStyleVertical} > 
+                <Pressable  style={styles.pressableStyle} onPress={() => navigation.navigate('LoadingRepo')}> 
+                    <Text> {repoCount} </Text>
+                </Pressable>
+                </View>
+            </View>
+            </ImageBackground>
+        </View>
+    )
+}
+
+export default Profile;
\ No newline at end of file

src/Components/Repo.js

+import * as React from 'react';
+import { Pressable, View, Text, Image, StyleSheet, ImageBackground } from 'react-native';
+import { createStackNavigator } from '@react-navigation/stack';
+
+const Stack = createStackNavigator();
+const styles = StyleSheet.create({
+  viewStyleVertical : { alignItems: 'center', justifyContent: 'center', margin: '10%' },
+  viewStyleHorizon : { flex: 1, flexDirection: 'row', justifyContent: 'space-between'},
+  pressableStyle : {flex: 1, flexDirection: 'row', justifyContent: 'space-between', backgroundColor:'lavender', paddingHorizontal:20, 
+  paddingVertical:10, borderColor:'thistle', borderWidth:2, borderRadius:5, marginHorizontal: 10, marginTop: 10},
+  image: { flex: 1, resizeMode: "cover", justifyContent: "center"},
+  container : {flex: 1},
+  textBox : {flex: 1, marginTop: 20, backgroundColor:'white', borderColor:'black', borderWidth:2, borderRadius:5, 
+  marginHorizontal: 10, paddingVertical:10, paddingHorizontal: 50, alignItems: 'flex-start'}
+});
+
+const Repo = (props) => {
+    const file = props.data
+    const cards = file['cards']
+    const navigation = file['navi']
+    return (
+        <View style={styles.container}>
+            <ImageBackground source={require('C:/Coding/cs242-assignment3/GitView/assets/ice.jpg')} style={styles.image}>
+            <View style={styles.viewStyleVertical}>
+                {cards}
+                <Pressable  style={styles.pressableStyle} onPress={() => navigation.navigate('Profile')}>
+                <Text> Go to Profile </Text>
+                </Pressable>
+            </View>
+            </ImageBackground>
+        </View>
+    )
+}
+
+export default Repo;
\ No newline at end of file

src/Components/Unfound.js

+import * as React from 'react';
+import { Pressable, View, Text, Image, StyleSheet, ImageBackground } from 'react-native';
+import { createStackNavigator } from '@react-navigation/stack';
+
+const Stack = createStackNavigator();
+const styles = StyleSheet.create({
+  viewStyleVertical : { alignItems: 'center', justifyContent: 'center', margin: '10%' },
+  viewStyleHorizon : { flex: 1, flexDirection: 'row', justifyContent: 'space-between'},
+  pressableStyle : {flex: 1, flexDirection: 'row', justifyContent: 'space-between', backgroundColor:'lavender', paddingHorizontal:20, 
+  paddingVertical:10, borderColor:'thistle', borderWidth:2, borderRadius:5, marginHorizontal: 10, marginTop: 10},
+  image: { flex: 1, resizeMode: "cover", justifyContent: "center"},
+  container : {flex: 1},
+  textBox : {flex: 1, marginTop: 20, backgroundColor:'white', borderColor:'black', borderWidth:2, borderRadius:5, 
+  marginHorizontal: 10, paddingVertical:10, paddingHorizontal: 50, alignItems: 'flex-start'}
+});
+
+const Unfound = (props) => {
+    const dataFile = props.data
+    const navigation = dataFile['navi']
+    return (
+        <View style={styles.container}>
+            <ImageBackground source={require('C:/Coding/cs242-assignment3/GitView/assets/ice.jpg')} style={styles.image}>
+            <View style={styles.viewStyleVertical}>
+                <Text style={{ fontSize: 30 }}> Error! Check log to see details </Text>
+                <Image style={{width: 200, height: 200}} source={require('C:/Coding/cs242-assignment3/GitView/assets/warn.png')} />
+                <Pressable  style={styles.pressableStyle} onPress={() => navigation.navigate('Home')}> 
+                <Text> Go back to Home Page </Text>
+                </Pressable>
+            </View>
+            </ImageBackground>
+        </View>
+    )
+}
+
+export default Unfound;
\ No newline at end of file

src/__mocks__/fileMock.js

+module.exports = 'test-file-stub';
\ No newline at end of file

src/__mocks__/styleMock.js

+module.exports = {};
\ No newline at end of file

src/__tests__/App-test.js

+import 'react-native';
+import React from 'react';
+import Profile from '../Components/Profile';
+import App from '../App'
+import renderer from 'react-test-renderer';
+import Loading from '../Components/Loading';
+import Repo from '../Components/Repo';
+import { createStackNavigator } from '@react-navigation/stack';
+import { NavigationContainer } from '@react-navigation/native';
+import Unfound from '../Components/Unfound';
+
+const Stack = createStackNavigator();
+
+test('renders correctly', () => {
+    const tree = renderer.create(
+      <Loading />
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  test('renders correctly', ({navigation}) => {
+    const dataFile = {
+      iconUrl: "https://avatars.githubusercontent.com/u/42978932?u=b4a7beb2752bb6059cd13d12ca26d097767abf77&v=4",
+      nameContent: null,
+      userNameContent: null,
+      bioContent: null,
+      websiteLink: null,
+      emailContent: null,
+      createData: null,
+      repoCount: 0,
+      navi: navigation
+    }
+    const tree = renderer.create(
+      <Profile data={dataFile}/>
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  test('renders correctly', ({navigation}) => {
+    const dataFile = {
+      iconUrl: "https://avatars.githubusercontent.com/u/42978932?u=b4a7beb2752bb6059cd13d12ca26d097767abf77&v=4",
+      nameContent: null,
+      userNameContent: null,
+      bioContent: null,
+      websiteLink: null,
+      emailContent: null,
+      createData: null,
+      repoCount: 0,
+      navi: navigation
+    }
+    const tree = renderer.create(
+      <Repo data={dataFile}/>
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  test('renders correctly', ({navigation}) => {
+    const dataFile = {
+      navi: navigation
+    }
+    const tree = renderer.create(
+      <Unfound data={dataFile}/>
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
\ No newline at end of file

src/__tests__/UnitTest.js

+import 'react-native';
+import React from 'react';
+import Profile from '../Components/Profile';
+import App from '../App'
+import renderer from 'react-test-renderer';
+import Loading from '../Components/Loading';
+import Repo from '../Components/Repo';
+import { createStackNavigator } from '@react-navigation/stack';
+import { NavigationContainer } from '@react-navigation/native';
+import Unfound from '../Components/Unfound';
+
+const Stack = createStackNavigator();
+
+const generateData = require()
\ No newline at end of file

src/__tests__/__snapshots__/App-test.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityIgnoresInvertColors={true}
+    style={
+      Object {
+        "flex": 1,
+        "justifyContent": "center",
+        "resizeMode": "cover",
+      }
+    }
+  >
+    <Image
+      source="test-file-stub"
+      style={
+        Array [
+          Object {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          Object {
+            "height": undefined,
+            "width": undefined,
+          },
+          undefined,
+        ]
+      }
+    />
+    <View
+      style={
+        Object {
+          "alignItems": "center",
+          "justifyContent": "center",
+          "margin": "10%",
+        }
+      }
+    >
+      <View
+        style={
+          Object {
+            "alignItems": "center",
+            "justifyContent": "center",
+            "margin": "10%",
+          }
+        }
+      >
+        <Image
+          source="test-file-stub"
+          style={
+            Object {
+              "height": 100,
+              "width": 100,
+            }
+          }
+        />
+      </View>
+      <View
+        style={
+          Object {
+            "flex": 1,
+            "flexDirection": "row",
+            "justifyContent": "space-between",
+          }
+        }
+      >
+        <View
+          accessible={true}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "backgroundColor": "lavender",
+              "borderColor": "thistle",
+              "borderRadius": 5,
+              "borderWidth": 2,
+              "flex": 1,
+              "flexDirection": "row",
+              "justifyContent": "space-between",
+              "marginHorizontal": 10,
+              "marginTop": 10,
+              "paddingHorizontal": 20,
+              "paddingVertical": 10,
+            }
+          }
+        >
+          <Text>
+             Followers 
+          </Text>
+        </View>
+        <View
+          accessible={true}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "backgroundColor": "lavender",
+              "borderColor": "thistle",
+              "borderRadius": 5,
+              "borderWidth": 2,
+              "flex": 1,
+              "flexDirection": "row",
+              "justifyContent": "space-between",
+              "marginHorizontal": 10,
+              "marginTop": 10,
+              "paddingHorizontal": 20,
+              "paddingVertical": 10,
+            }
+          }
+        >
+          <Text>
+             Followings 
+          </Text>
+        </View>
+      </View>
+      <View
+        style={
+          Object {
+            "alignItems": "center",
+            "justifyContent": "center",
+            "margin": "10%",
+          }
+        }
+      >
+        <Text
+          style={
+            Object {
+              "alignItems": "flex-start",
+              "backgroundColor": "white",
+              "borderColor": "black",
+              "borderRadius": 5,
+              "borderWidth": 2,
+              "flex": 1,
+              "marginHorizontal": 10,
+              "marginTop": 20,
+              "paddingHorizontal": 50,
+              "paddingVertical": 10,
+            }
+          }
+        >
+           nameContent 
+        </Text>
+        <Text
+          style={
+            Object {
+              "alignItems": "flex-start",
+              "backgroundColor": "white",
+              "borderColor": "black",
+              "borderRadius": 5,
+              "borderWidth": 2,
+              "flex": 1,
+              "marginHorizontal": 10,
+              "marginTop": 20,
+              "paddingHorizontal": 50,
+              "paddingVertical": 10,
+            }
+          }
+        >
+           userNameContent 
+        </Text>
+        <Text
+          style={
+            Object {
+              "alignItems": "flex-start",
+              "backgroundColor": "white",
+              "borderColor": "black",
+              "borderRadius": 5,
+              "borderWidth": 2,
+              "flex": 1,
+              "marginHorizontal": 10,
+              "marginTop": 20,
+              "paddingHorizontal": 50,
+              "paddingVertical": 10,
+            }
+          }
+        >
+           bioContent 
+        </Text>
+        <Text
+          style={
+            Object {
+              "alignItems": "flex-start",
+              "backgroundColor": "white",
+              "borderColor": "black",
+              "borderRadius": 5,
+              "borderWidth": 2,
+              "flex": 1,
+              "marginHorizontal": 10,
+              "marginTop": 20,
+              "paddingHorizontal": 50,
+              "paddingVertical": 10,
+            }
+          }
+        >
+           websiteLink 
+        </Text>
+        <Text
+          style={
+            Object {
+              "alignItems": "flex-start",
+              "backgroundColor": "white",
+              "borderColor": "black",
+              "borderRadius": 5,
+              "borderWidth": 2,
+              "flex": 1,
+              "marginHorizontal": 10,
+              "marginTop": 20,
+              "paddingHorizontal": 50,
+              "paddingVertical": 10,
+            }
+          }
+        >
+           emailContent 
+        </Text>
+        <Text
+          style={
+            Object {
+              "alignItems": "flex-start",
+              "backgroundColor": "white",
+              "borderColor": "black",
+              "borderRadius": 5,
+              "borderWidth": 2,
+              "flex": 1,
+              "marginHorizontal": 10,
+              "marginTop": 20,
+              "paddingHorizontal": 50,
+              "paddingVertical": 10,
+            }
+          }
+        >
+           createDate 
+        </Text>
+      </View>
+      <View
+        style={
+          Object {
+            "alignItems": "center",
+            "justifyContent": "center",
+            "margin": "10%",
+          }
+        }
+      >
+        <View
+          accessible={true}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "backgroundColor": "lavender",
+              "borderColor": "thistle",
+              "borderRadius": 5,
+              "borderWidth": 2,
+              "flex": 1,
+              "flexDirection": "row",
+              "justifyContent": "space-between",
+              "marginHorizontal": 10,
+              "marginTop": 10,
+              "paddingHorizontal": 20,
+              "paddingVertical": 10,
+            }
+          }
+        >
+          <Text>
+             repoCount 
+          </Text>
+        </View>
+      </View>
+    </View>
+  </View>
+</View>
+`;