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

assignment3.0 ver3: done

parent ebae88ed
No related branches found
No related tags found
1 merge request!1<Assignment-3.0>
Hide whitespace changes
Inline Side-by-side
Showing
with 510 additions and 115 deletions
src/App.js
+ 24
− 114
View file @ 0406e34c
// 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';
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({
......@@ -72,13 +37,15 @@ function HomeScreen({ navigation }) {
/** 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
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) {
......@@ -86,37 +53,9 @@ function ProfileScreen({ route, navigation }) {
} else {
iconUrl = require('C:/Coding/cs242-assignment3/GitView/assets/default.png')
}
dataFile['iconUrl'] = iconUrl
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>
<Profile data={dataFile}/>
);
}
......@@ -137,18 +76,11 @@ function RepoScreen({ route, navigation }) {
</View>
)
}
const dataFile = {}
dataFile['cards'] = cards
dataFile['navi'] = navigation
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>
<Repo data={dataFile}/>
);
}
......@@ -156,18 +88,10 @@ function RepoScreen({ route, navigation }) {
function UnfoundScreen({ route, navigation }) {
const {errorMsg} = route.params
console.error(errorMsg)
const dataFile = {}
dataFile['navi'] = navigation
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>
<Unfound data={dataFile}/>
);
}
......@@ -211,14 +135,7 @@ function LoadProfileScreen({navigation}) {
})
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/>
);
}
......@@ -264,14 +181,7 @@ function LoadRepoScreen({navigation}) {
})
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/>
);
}
......
src/Components/Loading.js 0 → 100644
+ 29
− 0
View file @ 0406e34c
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
+ 10
− 1
View file @ 0406e34c
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();
......@@ -16,6 +15,16 @@ const styles = StyleSheet.create({
});
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}>
......
src/Components/Repo.js 0 → 100644
+ 35
− 0
View file @ 0406e34c
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 0 → 100644
+ 35
− 0
View file @ 0406e34c
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 0 → 100644
+ 1
− 0
View file @ 0406e34c
module.exports = 'test-file-stub';
\ No newline at end of file
src/__mocks__/styleMock.js 0 → 100644
+ 1
− 0
View file @ 0406e34c
module.exports = {};
\ No newline at end of file
src/__tests__/App-test.js 0 → 100644
+ 28
− 0
View file @ 0406e34c
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';
const Stack = createStackNavigator();
test('renders correctly', ({}) => {
// 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,
// navigation: navigation
// }
const tree = renderer.create(
<Loading />
).toJSON();
expect(tree).toMatchSnapshot();
});
\ No newline at end of file
src/__tests__/__snapshots__/App-test.js.snap 0 → 100644
+ 305
− 0
View file @ 0406e34c
// 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>
`;
src/package.json 0 → 100644
+ 42
− 0
View file @ 0406e34c
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject",
"test": "jest"
},
"jest": {
"preset": "react-native",
"setupFiles": [
"./node_modules/react-native-gesture-handler/jestSetup.js"
],
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
}
},
"dependencies": {
"@react-native-community/masked-view": "0.1.10",
"@react-navigation/native": "^5.9.3",
"@react-navigation/stack": "^5.14.3",
"expo": "~40.0.0",
"expo-status-bar": "~1.0.3",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
"react-native-gesture-handler": "~1.8.0",
"react-native-reanimated": "~1.13.0",
"react-native-safe-area-context": "3.1.9",
"react-native-screens": "~2.15.2",
"react-native-web": "~0.13.12",
"react-test-renderer": "^17.0.2"
},
"devDependencies": {
"@babel/core": "~7.9.0",
"jest": "^26.6.3"
},
"private": true
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment