Added websocket front

p4p1 · Apr 8, 2022 · bdf13f9 · bdf13f9
1 parent b8d29b3
commit bdf13f9
Show file tree

Hide file tree

Showing 7 changed files with 11,164 additions and 13,680 deletions.
diff --git a/app/navigation/BottomTabBar.js b/app/navigation/BottomTabBar.js
@@ -27,7 +27,7 @@ export default class BottomTabBar extends React.Component
     this.setState({selected: 0});
   }
   navigateWebSocket() {
-    this.props.navigation.navigate('Notifications');
+    this.props.navigation.navigate('Websocket');
     this.setState({selected: 1});
   }
   navigateCode() {

diff --git a/app/navigation/MainNavigator.js b/app/navigation/MainNavigator.js
@@ -8,6 +8,7 @@ import BottomTabBar from './BottomTabBar.js';
 import EditUserNavigation from './User/EditUserNavigation.js';
 import NotifNavigator from './Notif/NotifNavigator.js';
 import CodeNavigator from './Code/CodeNavigator.js';
+import WebsocketScreen from '../screens/Websockets/WebsocketScreen.js';
 
 const Tab = createBottomTabNavigator();
 
@@ -25,6 +26,10 @@ export default class MainNavigator extends React.Component
           {props => <NotifNavigator{...props} logout={() => this.props.logout()}
           token={this.props.token} url={this.props.url} />}
         </Tab.Screen>
+        <Tab.Screen name="Websocket">
+          {props => <WebsocketScreen {...props} logout={() => this.props.logout()}
+          token={this.props.token} url={this.props.url} />}
+        </Tab.Screen>
         <Tab.Screen name="Code">
           {props => <CodeNavigator{...props} logout={() => this.props.logout()}
           token={this.props.token} url={this.props.url} />}

diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/screens/Notifications/NotificationScreen.js b/app/screens/Notifications/NotificationScreen.js
@@ -43,6 +43,7 @@ export default class HomeScreen extends React.Component
     }).then((response) => response.json()).then((json) => {
       this.setState({ data: json });
       this.setState({refreshing: false});
+      this.setState({page: 0});
     }).catch((err) => {
       console.error(err);
       alert("Error: Could not connect");

diff --git a/app/screens/User/UserScreen.js b/app/screens/User/UserScreen.js
@@ -64,6 +64,11 @@ export default class UserScreen extends React.Component
             <Text style={styles.para}>{this.props.url}api/{this.state.data.api_id}/code</Text>
             <FontAwesomeIcon size={20} color={'#aaaaaa'} icon={ faCopy } />
           </TouchableOpacity>
+          <TouchableOpacity style={styles.save_clip}
+            onPress={() => Clipboard.setString(this.props.url.replace("https://", "wss://") + this.state.data.api_id)}>
+            <Text style={styles.para}>{this.props.url.replace("https://", "wss://")}{this.state.data.api_id}</Text>
+            <FontAwesomeIcon size={20} color={'#aaaaaa'} icon={ faCopy } />
+          </TouchableOpacity>
           <TextButton text="Change username and password" run={() => {this.props.navigation.navigate('Edit')}} />
           <TextButton text="Delete account" run={() => {this.props.navigation.navigate('Delete')}} />
           <TextButton text="Logout" run={() => {this.props.logout()}} />

diff --git a/app/screens/Websockets/WebsocketScreen.js b/app/screens/Websockets/WebsocketScreen.js
@@ -0,0 +1,184 @@
+import React from 'react';
+import { FlatList, Text, Modal, RefreshControl, StyleSheet, ScrollView, View, Clipboard, TouchableOpacity } from 'react-native';
+import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
+import { faCopy } from '@fortawesome/free-solid-svg-icons'
+
+import SplashScreen from '../SplashScreen';
+import Inspect from '../../components/Inspect.js';
+
+import PropTypes from 'prop-types';
+
+export default class WebsocketScreen extends React.Component
+{
+  constructor(props) {
+    super(props);
+    this.state = {
+      page: 0,
+      refreshing: false,
+      data: [],
+      api_id: undefined,
+      modal: false,
+      selected: undefined
+    }
+
+    this.onRefresh = this.onRefresh.bind(this);
+    this.loadMore = this.loadMore.bind(this);
+  }
+
+  onRefresh() {
+    this.setState({refreshing: true});
+    fetch(`${this.props.url}websocket/0`, {
+      method: 'GET',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+        'authorization': `Bearer ${this.props.token}`
+      }
+    }).then((response) => response.json()).then((json) => {
+      this.setState({ data: json });
+      this.setState({refreshing: false});
+      this.setState({page: 0});
+    }).catch((err) => {
+      console.error(err);
+      alert("Error: Could not connect");
+      this.setState({refreshing: false});
+      this.props.logout();
+    });
+  }
+
+  loadMore() {
+    var current_page = this.state.page + 1;
+    fetch(`${this.props.url}websocket/${current_page}`, {
+      method: 'GET',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+        'authorization': `Bearer ${this.props.token}`
+      }
+    }).then((response) => response.json()).then((json) => {
+      this.setState({data: [...this.state.data, ...json]});
+      this.setState({page: current_page});
+    }).catch((err) => {
+      console.error(err);
+      alert("Error: Could not connect");
+      this.props.logout();
+    });
+  }
+
+  componentDidMount() {
+    this.onRefresh();
+    fetch(`${this.props.url}user/get_api`, {
+      method: 'GET',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+        'authorization': `Bearer ${this.props.token}`
+      }
+    }).then((response) => response.json()).then((json) => {
+      this.setState({ api_id: json.token });
+    }).catch((err) => {
+      console.error(err);
+      alert("Error: Could not connect");
+      this.props.logout();
+    });
+  }
+
+  render () {
+    if (this.state.api_id == undefined) {
+      return (<SplashScreen />);
+    }
+    if (this.state.data.length == 0) {
+      return (
+        <View style={styles.container}>
+        <ScrollView style={{width:'90%', height:'80%' }}
+        refreshControl={<RefreshControl refreshing={this.state.refreshing}
+        onRefresh={this.onRefresh}/>}>
+          <View>
+            <Text style={styles.header}>Waiting for requests on</Text>
+            <TouchableOpacity style={styles.save_clip}
+              onPress={() => Clipboard.setString(this.props.url.replace("https://", "wss://") + this.state.api_id)}>
+              <Text style={styles.para}>{this.props.url.replace("https://", "wss://")}{this.state.api_id}</Text>
+              <FontAwesomeIcon size={20} color={'#aaaaaa'} icon={ faCopy } />
+            </TouchableOpacity>
+          </View>
+        </ScrollView>
+        </View>
+      );
+    }
+    return (
+      <View style={styles.container}>
+        <Modal animationType={"slide"} transparent={true}
+            visible={this.state.modal} onRequestClose={() =>
+            this.setState({modal: !this.state.modal})}>
+          <Inspect selected={this.state.selected} run={() =>
+            this.setState({modal: !this.state.modal})} />
+        </Modal>
+        <FlatList style={{width:'100%', height:'100%' }}
+          refreshControl={<RefreshControl refreshing={this.state.refreshing}
+          onRefresh={this.onRefresh}/>} keyExtractor={item => item._id} data={this.state.data}
+          renderItem={({item}) => (
+            <Text style={styles.content}>{item.content}</Text>
+          )} onEndReached={this.loadMore} onEndReachedThreshold={0.5} initialNumToRender={10}
+          ListFooterComponent={<View style={{height:80}}></View>}
+          ListHeaderComponent={<View style={{height:70}}></View>} />
+      </View>
+    );
+  }
+}
+
+WebsocketScreen.propTypes = {
+  url: PropTypes.string,
+  token: PropTypes.string,
+  logout: PropTypes.function,
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: '100%',
+    height: '100%',
+    backgroundColor: '#444333',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingBottom: 5,
+  },
+  save_clip:{
+    justifyContent: 'center',
+    flexDirection: 'row'
+  },
+  header: {
+    fontSize: 25,
+    fontWeight: 'bold',
+    color: '#fff',
+    paddingLeft: 5,
+    paddingRight: 10,
+    marginBottom: 15,
+    marginTop: 100,
+    textAlign: 'center',
+    width: '100%',
+  },
+  para: {
+    fontSize: 15,
+    color: '#aaaaaa',
+    paddingLeft: 5,
+    paddingRight: 10,
+    marginBottom: 15,
+    textAlign: 'center',
+  },
+  content: {
+    fontSize: 15,
+    color: '#fff',
+    marginLeft: 10,
+    marginRight: 10,
+    marginTop: 0,
+    marginBottom: 0,
+    backgroundColor: '#333333',
+    textAlign: 'left',
+  },
+  logo: {
+    width: 150,
+    height: 150,
+    marginBottom: 50,
+    borderRadius: 30,
+  },
+});
diff --git a/backend/routes/websocket.js b/backend/routes/websocket.js
@@ -15,7 +15,7 @@ router.get('/:page', middleware.isLoggedIn, function (req, res) {
     } else {
       Websocket.find({
         api_id: data[0].api_id
-      }).sort({date:-1}).limit((req.params.page == 0) ? 10 : req.params.page * 10)
+      }).limit((req.params.page == 0) ? 10 : req.params.page * 10)
         .skip(req.params.page  * 10).exec((err, data) => {
         if (err) {
           return res.status(500).send("Api id not found");