App.js

// import { StatusBar } from 'expo-status-bar';
// import React from 'react';
// import { StyleSheet, Text, View } from 'react-native';
// import { NavigationContainer } from '@react-navigation/native';
// import { createStackNavigator } from '@react-navigation/stack';

// function HomeScreen() {
//   return (
//     <View style={viewStyleVertical}>
//       <Text>Home Screen</Text>
//     </View>
//   );
// }

// const Stack = createStackNavigator();

// export default function App() {
//   return (
//     <View style={styles.container}>
//       <Text>Open up App.js to start working on your app!!!</Text>
//       <StatusBar style="auto" />
//       <NavigationContainer>
//         <Stack.Navigator>
//           <Stack.Screen name="Home" component={HomeScreen} />
//         </Stack.Navigator>
//       </NavigationContainer>
//     </View>
//   );
// }

// const styles = StyleSheet.create({
//   container: {
//     flex: 1,
//     backgroundColor: '#fff',
//     alignItems: 'center',
//     justifyContent: 'center',
//   },
// });

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';

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'}
});

/** 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 }) {
  const {name, login, avatarUrl, bio, createdAt, email, websiteUrl, repositories} = route.params;
  const nameContent = 'Name: \n' + name;
  const userNameContent = 'UserName\n: ' + login
  const bioContent = 'Bio: \n' + bio
  const createDate = 'Create at: \n' + createdAt
  const emailContent = 'Email: \n' + email
  const websiteLink = 'Website: \n' + websiteUrl
  const repoCount = 'Repository count: ' + repositories['nodes'].length
  console.log(avatarUrl)
  var iconUrl
  if (avatarUrl != null) {
    iconUrl = { uri: avatarUrl }
  } else {
    iconUrl = require('C:/Coding/cs242-assignment3/GitView/assets/default.png')
  }
  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>
  );
}

/** 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>
    )
  }

  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>
  );
}

/** Unfound page **/
function UnfoundScreen({ route, navigation }) {
  const {errorMsg} = route.params
  console.error(errorMsg)
  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>
  );
}

/** 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 (
    <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 style={{width: 200, height: 200}} source={require('C:/Coding/cs242-assignment3/GitView/assets/loading.png')} />
      </View>
      </ImageBackground>
    </View>
  );
}

/** 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 (
    <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 style={{width: 200, height: 200}} source={require('C:/Coding/cs242-assignment3/GitView/assets/loading.png')} />
      </View>
      </ImageBackground>
    </View>
  );
}

/** 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;