Skip to content

Commit baaa213

Browse files
javaThoncjavaThonc
authored
Add files via upload
1 parent 8e8bdb3 commit baaa213

File tree

9 files changed

+1282
-0
lines changed

9 files changed

+1282
-0
lines changed

‎screens/Follower.js‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
import React, { Component } from 'react';
2+
import { ScrollView, StyleSheet, Text, View, Image } from 'react-native';
3+
import {ImageBackground, rgb } from 'react-native'
4+
import { AppRegistry, SectionList , FlatList, Linking, TouchableOpacity} from 'react-native';
5+
import * as Animatable from 'react-native-animatable';
6+
AnimatImg = Animatable.createAnimatableComponent(Image);
7+
8+
const axios = require('axios');
9+
10+
11+
// Create reusable components for the text
12+
class TextView extends Component {
13+
render() {
14+
return (
15+
<Text style={{fontSize: 20}}>{this.props.text}</Text>
16+
);
17+
}
18+
}
19+
20+
// Default class that represent the main components in the
21+
// Follower page
22+
export default class Repositories extends React.Component {
23+
static navigationOptions = {
24+
title: 'Followers',
25+
headerStyle: {
26+
backgroundColor: 'rgb(245,245, 240)',
27+
},
28+
};
29+
// constructor that has a default urlAvatar because it must have one
30+
constructor(props){
31+
super(props);
32+
this.state = {
33+
urlAvatar: 'https://facebook.github.io/react-native/docs/assets/favicon.png',// Place holder
34+
data: [],
35+
}
36+
}
37+
38+
// Render function that display the necessary data
39+
render() {
40+
let table = []
41+
// For loop that consequtively generate all the views that come from API
42+
for (let i = 0; i < this.state.data.length; i+=4) {
43+
let row = []
44+
let content = []
45+
for(let j = i; j < i+4 && j < this.state.data.length; j++){
46+
let index = i+j
47+
content.push(<TouchableOpacity onPress={()=>{Linking.openURL(this.state.data[j]['html_url'])}}>
48+
<AnimatImg
49+
animation = 'bounceIn'
50+
style = {styles.userIconStyle}
51+
source = {{uri: this.state.data[j]['avatar_url']}}
52+
53+
/>
54+
</TouchableOpacity>)
55+
}
56+
row.push(<View style = {styles.accoutInfoStyle}>{content}</View>)
57+
table.push(<View style = {styles.accountStyle}>{row}</View>)
58+
}
59+
return (
60+
<ScrollView style={styles.container}>
61+
<AnimatView animation ="bounceInDown" style ={styles.viewCon} >
62+
<Animatable.Text style = {styles.RepoStyle}>
63+
{this.state.data.length}
64+
</Animatable.Text>
65+
</AnimatView>
66+
{table}
67+
</ScrollView>
68+
);
69+
}
70+
// Fetch data from API in github
71+
async getData(){
72+
axios.get('https://api.github.com/users/facebook-github-bot/followers')
73+
.then((res) => {
74+
const dataAPI = res.data;
75+
// Split text into individual words and count length
76+
this.setState({
77+
data:dataAPI
78+
})
79+
AsyncStorage.setItem('@MySuperStore:followerList', JSON.stringify(this.state.data));
80+
})
81+
}
82+
// Fetch data after creating the data
83+
componentDidMount(){
84+
this.getData();
85+
}
86+
87+
}
88+
// Different styles for different views in the profile Page
89+
const styles = StyleSheet.create({
90+
viewCon:{
91+
backgroundColor:'rgb(22, 104, 204)',
92+
},
93+
container: {
94+
flex: 1,
95+
backgroundColor: '#fff',
96+
},
97+
userIconStyle:{
98+
width: 80,
99+
height: 80,
100+
backgroundColor: 'transparent',
101+
borderColor: 'rgb(245,245,240)',
102+
borderWidth: 2,
103+
borderRadius:40,
104+
},
105+
userInfoStyle:{
106+
flex: 1,
107+
paddingBottom:5
108+
},
109+
RepoStyle:{
110+
flex: 1,
111+
justifyContent: 'center',
112+
flexDirection: 'row',
113+
textAlign:'center',
114+
fontSize:110,
115+
fontWeight: 'bold',
116+
color:'white',
117+
fontFamily: 'AvenirNextCondensed-Heavy'
118+
},
119+
accoutInfoStyle:{
120+
flex: 1,
121+
justifyContent: 'space-between',
122+
paddingTop: 5,
123+
paddingBottom: 5,
124+
flexDirection: 'row',
125+
paddingLeft:15,
126+
paddingRight:15
127+
},
128+
accountStyle:{
129+
paddingTop: 50,
130+
},
131+
132+
133+
134+
});

‎screens/Following.js‎

Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
import React, { Component } from 'react';
2+
import { ScrollView, StyleSheet, Text, View, Image,TextInput } from 'react-native';
3+
import {ImageBackground, rgb } from 'react-native'
4+
import { AppRegistry, SectionList , FlatList, Linking, TouchableOpacity,AsyncStorage} from 'react-native';
5+
import * as Animatable from 'react-native-animatable';
6+
import { Button, Icon,SearchBar} from 'react-native-elements'
7+
import Ionicons from 'react-native-vector-icons/Ionicons';
8+
AnimatImg = Animatable.createAnimatableComponent(Image);
9+
AnimatText = Animatable.createAnimatableComponent(TextInput);
10+
AnimateButton= Animatable.createAnimatableComponent(Button);
11+
import Search from './search';
12+
13+
14+
const axios = require('axios');
15+
16+
17+
// Create reusable components for the text
18+
class TextView extends Component {
19+
render() {
20+
return (
21+
<Text style={{fontSize: 20}}>{this.props.text}</Text>
22+
);
23+
}
24+
}
25+
26+
// Default class that represent the main components in the
27+
// Follower page
28+
export default class Repositories extends React.Component {
29+
static navigationOptions = {
30+
title: 'Following',
31+
headerStyle: {
32+
backgroundColor: 'rgb(245,245,240)',
33+
},
34+
};
35+
36+
// constructor that has a default urlAvatar because it must have one
37+
constructor(props){
38+
super(props);
39+
this.state = {
40+
urlAvatar: 'https://facebook.github.io/react-native/docs/assets/favicon.png',// Place holder
41+
data: [],
42+
target: "" ,
43+
value: "",
44+
fulldata:[],
45+
search : '',
46+
47+
}
48+
}
49+
handleSearch = text => {
50+
this.setState({ search:text });
51+
};
52+
53+
// Render function that display the necessary data
54+
render() {
55+
const { search } = this.state;
56+
57+
let table = []
58+
// For loop that consequtively generate all the views that come from API
59+
for (let i = 0; i < this.state.data.length; i+=4) {
60+
let row = []
61+
let content = []
62+
for(let j = i; j < i+4 && j < this.state.data.length; j++){
63+
let index = i+j
64+
content.push(<TouchableOpacity onPress={()=>{Linking.openURL(this.state.data[j]['html_url'])}}>
65+
<Image
66+
style = {styles.userIconStyle}
67+
source = {{uri: this.state.data[j]['avatar_url']}}
68+
/>
69+
</TouchableOpacity>)
70+
}
71+
row.push(<View style = {styles.accoutInfoStyle}>{content}</View>)
72+
table.push(<View style = {styles.accountStyle}>{row}</View>)
73+
}
74+
return (
75+
76+
<ScrollView style={styles.container}>
77+
78+
<AnimatView animation ="bounceInDown" style ={styles.viewCon} >
79+
<Animatable.Text style = {styles.RepoStyle}>{this.state.data.length}</Animatable.Text>
80+
<SearchBar
81+
platform = 'ios'
82+
placeholder="Enter the Username!!!"
83+
onChangeText= {this.handleSearch}
84+
value={this.state.search}
85+
/>
86+
<Button
87+
onPress = { () =>{
88+
AsyncStorage.setItem('@MySuperStore:type','repositories');
89+
AsyncStorage.setItem('@MySuperStore:search',this.state.search);
90+
AsyncStorage.setItem('@MySuperStore:para','score');
91+
this.props.navigation.navigate('search');
92+
}
93+
}
94+
title="GO"
95+
color="white"
96+
accessibilityLabel="Learn more about this purple button"
97+
/>
98+
</AnimatView>
99+
100+
{table}
101+
</ScrollView>
102+
);
103+
}
104+
// Fetch data from API in github
105+
async getData(){
106+
axios.get('https://api.github.com/users/'+ 'javaThonc' +'/following')
107+
.then((res) => {
108+
const dataAPI = res.data;
109+
// Split text into individual words and count length
110+
this.setState({
111+
data:dataAPI,
112+
})
113+
AsyncStorage.setItem('@MySuperStore:followingList', JSON.stringify(this.state.data));
114+
})
115+
}
116+
// Fetch data after creating the data
117+
componentDidMount(){
118+
this.getData();
119+
}
120+
121+
}
122+
// Different styles for different views in the profile Page
123+
const styles = StyleSheet.create({
124+
Button:{
125+
height: 50,
126+
paddingTop:100,
127+
backgroundColor:'#1E6738',
128+
},
129+
viewCon:{
130+
backgroundColor:'rgb(22, 104, 204)',
131+
},
132+
container: {
133+
flex: 1,
134+
backgroundColor: '#fff',
135+
},
136+
userIconStyle:{
137+
width: 80,
138+
height: 80,
139+
backgroundColor: 'transparent',
140+
borderColor: 'rgb(245,245, 240)',
141+
borderWidth: 2,
142+
borderRadius:40,
143+
},
144+
userInfoStyle:{
145+
flex: 1,
146+
paddingBottom:5
147+
},
148+
RepoStyle:{
149+
flex: 1,
150+
justifyContent: 'center',
151+
flexDirection: 'row',
152+
textAlign:'center',
153+
fontSize:110,
154+
fontWeight: 'bold',
155+
color:'white',
156+
fontFamily: 'AvenirNextCondensed-Heavy'
157+
},
158+
accoutInfoStyle:{
159+
flex: 1,
160+
justifyContent: 'space-between',
161+
paddingTop: 5,
162+
paddingBottom: 5,
163+
flexDirection: 'row',
164+
paddingLeft:15,
165+
paddingRight:15
166+
},
167+
accountStyle:{
168+
paddingTop: 50,
169+
},
170+
171+
172+
173+
});

0 commit comments

Comments
 (0)