Skip to content
Snippets Groups Projects
Commit ebae88ed authored by zshan2's avatar zshan2
Browse files

re-commit src files

parent a29c7d1b
No related branches found
No related tags found
1 merge request!1<Assignment-3.0>
GitView @ 69028274
Subproject commit 690282746b8a50666215d24d2bf4c8cb7801b9de
// 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;
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'}
});
const Profile = (props) => {
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/assets/adaptive-icon.png

17.1 KiB

src/assets/default.png

59.5 KiB

src/assets/favicon.png

1.43 KiB

src/assets/ice.jpg

122 KiB

src/assets/icon.png

21.9 KiB

src/assets/loading.png

28.5 KiB

src/assets/splash.png

47.3 KiB

src/assets/warn.png

24.1 KiB

0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment