Skip to content

Commit bdf13f9

Browse files
p4p1p4p1
committed
Added websocket front
1 parent b8d29b3 commit bdf13f9

File tree

7 files changed

+11164
-13680
lines changed

7 files changed

+11164
-13680
lines changed

‎app/navigation/BottomTabBar.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export default class BottomTabBar extends React.Component
2727
this.setState({selected: 0});
2828
}
2929
navigateWebSocket() {
30-
this.props.navigation.navigate('Notifications');
30+
this.props.navigation.navigate('Websocket');
3131
this.setState({selected: 1});
3232
}
3333
navigateCode() {

‎app/navigation/MainNavigator.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import BottomTabBar from './BottomTabBar.js';
88
import EditUserNavigation from './User/EditUserNavigation.js';
99
import NotifNavigator from './Notif/NotifNavigator.js';
1010
import CodeNavigator from './Code/CodeNavigator.js';
11+
import WebsocketScreen from '../screens/Websockets/WebsocketScreen.js';
1112

1213
const Tab = createBottomTabNavigator();
1314

@@ -25,6 +26,10 @@ export default class MainNavigator extends React.Component
2526
{props => <NotifNavigator{...props} logout={() => this.props.logout()}
2627
token={this.props.token} url={this.props.url} />}
2728
</Tab.Screen>
29+
<Tab.Screen name="Websocket">
30+
{props => <WebsocketScreen {...props} logout={() => this.props.logout()}
31+
token={this.props.token} url={this.props.url} />}
32+
</Tab.Screen>
2833
<Tab.Screen name="Code">
2934
{props => <CodeNavigator{...props} logout={() => this.props.logout()}
3035
token={this.props.token} url={this.props.url} />}

‎app/package-lock.json‎

Lines changed: 10967 additions & 13678 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎app/screens/Notifications/NotificationScreen.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ export default class HomeScreen extends React.Component
4343
}).then((response) => response.json()).then((json) => {
4444
this.setState({ data: json });
4545
this.setState({refreshing: false});
46+
this.setState({page: 0});
4647
}).catch((err) => {
4748
console.error(err);
4849
alert("Error: Could not connect");

‎app/screens/User/UserScreen.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,11 @@ export default class UserScreen extends React.Component
6464
<Text style={styles.para}>{this.props.url}api/{this.state.data.api_id}/code</Text>
6565
<FontAwesomeIcon size={20} color={'#aaaaaa'} icon={ faCopy } />
6666
</TouchableOpacity>
67+
<TouchableOpacity style={styles.save_clip}
68+
onPress={() => Clipboard.setString(this.props.url.replace("https://", "wss://") + this.state.data.api_id)}>
69+
<Text style={styles.para}>{this.props.url.replace("https://", "wss://")}{this.state.data.api_id}</Text>
70+
<FontAwesomeIcon size={20} color={'#aaaaaa'} icon={ faCopy } />
71+
</TouchableOpacity>
6772
<TextButton text="Change username and password" run={() => {this.props.navigation.navigate('Edit')}} />
6873
<TextButton text="Delete account" run={() => {this.props.navigation.navigate('Delete')}} />
6974
<TextButton text="Logout" run={() => {this.props.logout()}} />

‎app/screens/Websockets/WebsocketScreen.js‎

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
import React from 'react';
2+
import { FlatList, Text, Modal, RefreshControl, StyleSheet, ScrollView, View, Clipboard, TouchableOpacity } from 'react-native';
3+
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
4+
import { faCopy } from '@fortawesome/free-solid-svg-icons'
5+
6+
import SplashScreen from '../SplashScreen';
7+
import Inspect from '../../components/Inspect.js';
8+
9+
import PropTypes from 'prop-types';
10+
11+
export default class WebsocketScreen extends React.Component
12+
{
13+
constructor(props) {
14+
super(props);
15+
this.state = {
16+
page: 0,
17+
refreshing: false,
18+
data: [],
19+
api_id: undefined,
20+
modal: false,
21+
selected: undefined
22+
}
23+
24+
this.onRefresh = this.onRefresh.bind(this);
25+
this.loadMore = this.loadMore.bind(this);
26+
}
27+
28+
onRefresh() {
29+
this.setState({refreshing: true});
30+
fetch(`${this.props.url}websocket/0`, {
31+
method: 'GET',
32+
headers: {
33+
Accept: 'application/json',
34+
'Content-Type': 'application/json',
35+
'authorization': `Bearer ${this.props.token}`
36+
}
37+
}).then((response) => response.json()).then((json) => {
38+
this.setState({ data: json });
39+
this.setState({refreshing: false});
40+
this.setState({page: 0});
41+
}).catch((err) => {
42+
console.error(err);
43+
alert("Error: Could not connect");
44+
this.setState({refreshing: false});
45+
this.props.logout();
46+
});
47+
}
48+
49+
loadMore() {
50+
var current_page = this.state.page + 1;
51+
fetch(`${this.props.url}websocket/${current_page}`, {
52+
method: 'GET',
53+
headers: {
54+
Accept: 'application/json',
55+
'Content-Type': 'application/json',
56+
'authorization': `Bearer ${this.props.token}`
57+
}
58+
}).then((response) => response.json()).then((json) => {
59+
this.setState({data: [...this.state.data, ...json]});
60+
this.setState({page: current_page});
61+
}).catch((err) => {
62+
console.error(err);
63+
alert("Error: Could not connect");
64+
this.props.logout();
65+
});
66+
}
67+
68+
componentDidMount() {
69+
this.onRefresh();
70+
fetch(`${this.props.url}user/get_api`, {
71+
method: 'GET',
72+
headers: {
73+
Accept: 'application/json',
74+
'Content-Type': 'application/json',
75+
'authorization': `Bearer ${this.props.token}`
76+
}
77+
}).then((response) => response.json()).then((json) => {
78+
this.setState({ api_id: json.token });
79+
}).catch((err) => {
80+
console.error(err);
81+
alert("Error: Could not connect");
82+
this.props.logout();
83+
});
84+
}
85+
86+
render () {
87+
if (this.state.api_id == undefined) {
88+
return (<SplashScreen />);
89+
}
90+
if (this.state.data.length == 0) {
91+
return (
92+
<View style={styles.container}>
93+
<ScrollView style={{width:'90%', height:'80%' }}
94+
refreshControl={<RefreshControl refreshing={this.state.refreshing}
95+
onRefresh={this.onRefresh}/>}>
96+
<View>
97+
<Text style={styles.header}>Waiting for requests on</Text>
98+
<TouchableOpacity style={styles.save_clip}
99+
onPress={() => Clipboard.setString(this.props.url.replace("https://", "wss://") + this.state.api_id)}>
100+
<Text style={styles.para}>{this.props.url.replace("https://", "wss://")}{this.state.api_id}</Text>
101+
<FontAwesomeIcon size={20} color={'#aaaaaa'} icon={ faCopy } />
102+
</TouchableOpacity>
103+
</View>
104+
</ScrollView>
105+
</View>
106+
);
107+
}
108+
return (
109+
<View style={styles.container}>
110+
<Modal animationType={"slide"} transparent={true}
111+
visible={this.state.modal} onRequestClose={() =>
112+
this.setState({modal: !this.state.modal})}>
113+
<Inspect selected={this.state.selected} run={() =>
114+
this.setState({modal: !this.state.modal})} />
115+
</Modal>
116+
<FlatList style={{width:'100%', height:'100%' }}
117+
refreshControl={<RefreshControl refreshing={this.state.refreshing}
118+
onRefresh={this.onRefresh}/>} keyExtractor={item => item._id} data={this.state.data}
119+
renderItem={({item}) => (
120+
<Text style={styles.content}>{item.content}</Text>
121+
)} onEndReached={this.loadMore} onEndReachedThreshold={0.5} initialNumToRender={10}
122+
ListFooterComponent={<View style={{height:80}}></View>}
123+
ListHeaderComponent={<View style={{height:70}}></View>} />
124+
</View>
125+
);
126+
}
127+
}
128+
129+
WebsocketScreen.propTypes = {
130+
url: PropTypes.string,
131+
token: PropTypes.string,
132+
logout: PropTypes.function,
133+
}
134+
135+
const styles = StyleSheet.create({
136+
container: {
137+
flex: 1,
138+
width: '100%',
139+
height: '100%',
140+
backgroundColor: '#444333',
141+
alignItems: 'center',
142+
justifyContent: 'center',
143+
paddingBottom: 5,
144+
},
145+
save_clip:{
146+
justifyContent: 'center',
147+
flexDirection: 'row'
148+
},
149+
header: {
150+
fontSize: 25,
151+
fontWeight: 'bold',
152+
color: '#fff',
153+
paddingLeft: 5,
154+
paddingRight: 10,
155+
marginBottom: 15,
156+
marginTop: 100,
157+
textAlign: 'center',
158+
width: '100%',
159+
},
160+
para: {
161+
fontSize: 15,
162+
color: '#aaaaaa',
163+
paddingLeft: 5,
164+
paddingRight: 10,
165+
marginBottom: 15,
166+
textAlign: 'center',
167+
},
168+
content: {
169+
fontSize: 15,
170+
color: '#fff',
171+
marginLeft: 10,
172+
marginRight: 10,
173+
marginTop: 0,
174+
marginBottom: 0,
175+
backgroundColor: '#333333',
176+
textAlign: 'left',
177+
},
178+
logo: {
179+
width: 150,
180+
height: 150,
181+
marginBottom: 50,
182+
borderRadius: 30,
183+
},
184+
});

‎backend/routes/websocket.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ router.get('/:page', middleware.isLoggedIn, function (req, res) {
1515
} else {
1616
Websocket.find({
1717
api_id: data[0].api_id
18-
}).sort({date:-1}).limit((req.params.page == 0) ? 10 : req.params.page * 10)
18+
}).limit((req.params.page == 0) ? 10 : req.params.page * 10)
1919
.skip(req.params.page * 10).exec((err, data) => {
2020
if (err) {
2121
return res.status(500).send("Api id not found");

0 commit comments

Comments
 (0)