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'

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 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
  console.log(avatarUrl)
  var iconUrl
  if (avatarUrl != null) {
    iconUrl = { uri: avatarUrl }
  } else {
    iconUrl = require('C:/Coding/cs242-assignment3/GitView/assets/default.png')
  }
  dataFile['iconUrl'] = iconUrl
  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;