sslops page finished

app/SSLOps.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   SafeAreaView,
   StyleSheet,
@@ -6,6 +6,8 @@ import {
   View,
   Text,
   StatusBar,
+  FlatList,
+  TouchableOpacity,
 } from 'react-native';
 
 import {
@@ -15,12 +17,57 @@ import {
   DebugInstructions,
   ReloadInstructions,
 } from 'react-native/Libraries/NewAppScreen';
+import styles from './styles/liststyles';
+import { url } from './resources/fetchInfo.json';
+
+const SSLElement = ({item}) => {
+  const [visible, setVisible] = useState(0)
+  const extra = visible?(<Text>{'\n'}{item.item.title} {"\n\n"}Details: {item.item.text}{"\n\n"}Where: {item.item.loc}{"\n\n"}Teacher: {item.item.teacher}</Text>):(<></>);
+  return(
+    <View>
+      <TouchableOpacity style={styles.item} onPress={()=>setVisible(!visible)} activeOpacity={0.8}>
+      <Text style={styles.title}>{item.item.name}</Text>
+      {extra}
+      </TouchableOpacity>
+    </View>
+    )
+}
 
 class SSLOps extends React.Component {
+	
+	constructor(props) {
+		super(props)
+		this.state = {
+			data: []
+		}
+	}
+	
+	componentDidMount() {
+		fetch(`${url}/api/en/sslOps`,{
+			headers: {
+				'Cache-Control': 'no-cache'
+			}
+			}
+		)
+		.then((response) => {
+      console.log(response);
+			return response.text();
+		})
+		.then((json) => {
+			this.setState({data: JSON.parse(json).ops});
+		})
+		.catch((error) => console.error(error))
+	}
+	
 	render() {
+    console.log(this.state.data)
 		return (
-			<View>
+			<View style={styles.container}>
-			
+				<FlatList
+					data={this.state.data}
+					renderItem={item=><SSLElement item={item}/>}
+					keyExtractor={item=>JSON.stringify(item)}
+				/>
 			</View>
 		)
 	}

app/resources/fetchInfo.json

@@ -1 +1 @@
-{"url":"http://10.0.2.2:5000"}
+{"url":"http://127.0.0.1:5000"}

ios/Podfile.lock

@@ -300,6 +300,8 @@ PODS:
     - React-Core (= 0.63.2)
     - React-cxxreact (= 0.63.2)
     - React-jsi (= 0.63.2)
+  - RNCAsyncStorage (1.12.0):
+    - React
   - RNCMaskedView (0.1.10):
     - React
   - RNGestureHandler (1.7.0):
@@ -363,6 +365,7 @@ DEPENDENCIES:
   - React-RCTText (from `../node_modules/react-native/Libraries/Text`)
   - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
+  - "RNCAsyncStorage (from `../node_modules/@react-native-community/async-storage`)"
   - "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)"
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - RNReanimated (from `../node_modules/react-native-reanimated`)
@@ -440,6 +443,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/Libraries/Vibration"
   ReactCommon:
     :path: "../node_modules/react-native/ReactCommon"
+  RNCAsyncStorage:
+    :path: "../node_modules/@react-native-community/async-storage"
   RNCMaskedView:
     :path: "../node_modules/@react-native-community/masked-view"
   RNGestureHandler:
@@ -492,6 +497,7 @@ SPEC CHECKSUMS:
   React-RCTText: 1b6773e776e4b33f90468c20fe3b16ca3e224bb8
   React-RCTVibration: 4d2e726957f4087449739b595f107c0d4b6c2d2d
   ReactCommon: a0a1edbebcac5e91338371b72ffc66aa822792ce
+  RNCAsyncStorage: 3eea36d9460c5159b592f9ecbe5a77f8aca98006
   RNCMaskedView: f5c7d14d6847b7b44853f7acb6284c1da30a3459
   RNGestureHandler: b6b359bb800ae399a9c8b27032bdbf7c18f08a08
   RNReanimated: 7de2dca51deacff78bb880f63c1389a24311b376