From 10462ff55b50f535b30ccead4ee3b2c7d2a6b984 Mon Sep 17 00:00:00 2001
From: Emily Liu <emilyliu@Emilys-MBP.fios-router.home>
Date: Wed, 21 Oct 2020 15:35:35 -0400
Subject: [PATCH] SSLOps, LunchEvent pg to match design team+style

---
 app/Clubs.js             |  17 +++++++--
 app/LunchEvents.js       |  59 ++++++++++++++++++++++++++-----
 app/SSLOps.js            |  73 ++++++++++++++++++++++++++++++++-------
 app/Staff.js             |   2 +-
 app/assets/lunch.png     | Bin 0 -> 6313 bytes
 app/assets/sslopps.png   | Bin 0 -> 5803 bytes
 app/styles/liststyles.js |  16 +++++++++
 7 files changed, 143 insertions(+), 24 deletions(-)
 create mode 100644 app/assets/lunch.png
 create mode 100644 app/assets/sslopps.png

diff --git a/app/Clubs.js b/app/Clubs.js
index 4a50f18..10e2adf 100644
--- a/app/Clubs.js
+++ b/app/Clubs.js
@@ -10,7 +10,8 @@ import {
   FlatList,
   TouchableOpacity,
   Image,
-  TouchableHighlight
+  TouchableHighlight,
+  Linking
 } from 'react-native';
 
 import {
@@ -25,6 +26,7 @@ import { createStackNavigator } from '@react-navigation/stack'
 import { SearchBar } from 'react-native-elements';
 import styles from './styles/liststyles'
 import { url } from './resources/fetchInfo.json'
+import LinearGradient from 'react-native-linear-gradient';
 
 const Stack = createStackNavigator();
 
@@ -32,7 +34,18 @@ export const ClubInfo = ({route}) => {
   const item = route.params;
   return (
     <View style = {{padding: 10}}>
-      <Text style = {{fontSize: 28}}>Meeting Time and Day: {'\n'}{item.meeting}{"\n\n"}Zoom Link: {'\n'}{item.link}{"\n\n"}Sponsor: {'\n'}{item.sponsor}</Text>
+      <View style ={styles.infoContainer}>
+        <Text style = {styles.title1}>Meeting Time and Day: </Text>
+        <Text style = {styles.title}>{item.meeting}</Text>
+      </View>
+      <View style ={styles.infoContainer}>
+        <Text style = {styles.title1}>Zoom Link: </Text>
+        <Text style = {styles.link} onPress={() => Linking.openURL(item.link)}>{item.link}</Text>
+      </View>
+			<View style ={styles.infoContainer}>
+        <Text style = {styles.title1}>Sponsor: </Text>
+			  <Text style = {styles.title}>{item.sponsor}</Text>
+      </View>
     </View>
   )
 }
diff --git a/app/LunchEvents.js b/app/LunchEvents.js
index 4bc67e2..a1db09b 100644
--- a/app/LunchEvents.js
+++ b/app/LunchEvents.js
@@ -8,6 +8,7 @@ import {
   StatusBar,
   FlatList,
   TouchableOpacity,
+  Image,
 } from 'react-native';
 
 import {
@@ -17,22 +18,62 @@ import {
   DebugInstructions,
   ReloadInstructions,
 } from 'react-native/Libraries/NewAppScreen';
-
+import { NavigationContainer } from '@react-navigation/native'
+import { createStackNavigator } from '@react-navigation/stack'
 import styles from './styles/liststyles'
 import { url } from './resources/fetchInfo.json'
+const Stack = createStackNavigator();
 
-const LunchEvent = ({item}) => {
-	const [visible, setVisible] = useState(0)
-	const extra = visible?(<Text>{'\n'}{item.item.text}{'\n\n'}Location: {item.item.loc}</Text>):(<></>);
+const LunchEvent = (props) => {
+	const item = props.item
 	return(
 		<View>
-			<TouchableOpacity style={styles.item} onPress={()=>setVisible(!visible)} activeOpacity={0.8}>
-				<Text style={styles.title}>{item.item.title}</Text>
-				{extra}
+			<TouchableOpacity style={styles.item1} onPress={()=>props.navigation.navigate('LunchInfo', {data:props.data,name:props.name,text:item.text,loc:item.loc})} activeOpacity={0.8}>
+			<View style = {{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
+				<Image source = {require('./assets/lunch.png')} style = {{height: 40, width: 40, marginRight: 10}}/>
+				<Text style={styles.title}>{item.title}</Text>
+			</View>
 			</TouchableOpacity>
 		</View>
 	)
 }
+export const LunchInfo = ({route}) => {
+	const item = route.params;
+	return (
+	  <View style = {{padding: 10}}>
+		<View style ={styles.infoContainer}>
+			<Text style = {styles.title1}>Description: </Text>
+			<Text style = {styles.title}>{item.text}</Text>
+		</View>
+		<View style ={styles.infoContainer}>
+			<Text style = {styles.title1}>Location: </Text>
+			<Text style = {styles.link}>{item.loc}</Text>
+		</View>
+	  </View>
+	)
+  }
+function Lunch () {
+	return (
+	  <NavigationContainer independent={true}>
+		<Stack.Navigator>
+		  <Stack.Screen 
+			name = "LunchEvents"
+			component = {LunchEvents}
+			options={({
+			  headerShown: false
+			})}
+		  />
+		  <Stack.Screen 
+			name = "LunchInfo"
+			component = {LunchInfo}
+			options={({route})=>({
+			  title:route.params.name
+			})}
+		  />
+		</Stack.Navigator>
+	  </NavigationContainer>
+	) 
+  }
 
 class LunchEvents extends React.Component {
 	
@@ -64,7 +105,7 @@ class LunchEvents extends React.Component {
 			<View style={styles.container}>
 				<FlatList
 					data={this.state.data}
-					renderItem={item=><LunchEvent item={item}/>}
+					renderItem={({item}) => <LunchEvent item={item} name={item.title} navigation={this.props.navigation}/>}
 					keyExtractor={item=>JSON.stringify(item)}
 				/>
 			</View>
@@ -72,4 +113,4 @@ class LunchEvents extends React.Component {
 	}
 }
 
-export default LunchEvents;
+export default Lunch;
diff --git a/app/SSLOps.js b/app/SSLOps.js
index 129125a..72860ba 100644
--- a/app/SSLOps.js
+++ b/app/SSLOps.js
@@ -8,6 +8,7 @@ import {
   StatusBar,
   FlatList,
   TouchableOpacity,
+  Image,
 } from 'react-native';
 
 import {
@@ -17,21 +18,69 @@ import {
   DebugInstructions,
   ReloadInstructions,
 } from 'react-native/Libraries/NewAppScreen';
+import { NavigationContainer } from '@react-navigation/native'
+import { createStackNavigator } from '@react-navigation/stack'
 import styles from './styles/liststyles';
 import { url } from './resources/fetchInfo.json';
 
-const SSLElement = ({item}) => {
-  const [visible, setVisible] = useState(0)
-  const extra = visible?(<Text>{'\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.title}</Text>
-      {extra}
-      </TouchableOpacity>
-    </View>
+const Stack = createStackNavigator();
+
+export const SSLInfo = ({route}) => {
+	const item = route.params;
+	console
+	return (
+		<View style = {{padding: 10}}>
+			<View style ={styles.infoContainer}>
+				<Text style = {styles.title1}>Description: </Text>
+				<Text style = {styles.title}>{item.text}</Text>
+			</View>
+			<View style ={styles.infoContainer}>
+				<Text style = {styles.title1}>Who: </Text>
+				<Text style = {styles.link}>{item.teacher}</Text>
+			</View>
+					<View style ={styles.infoContainer}>
+				<Text style = {styles.title1}>Where: </Text>
+					<Text style = {styles.title}>{item.loc}</Text>
+			</View>
+		</View>
+	)
+  }
+
+function SSLElement (props) {
+	const item = props.item;
+	return(
+		<View>
+			<TouchableOpacity style={styles.item1} onPress={()=>props.navigation.navigate('SSLInfo', {data: props.data, name: item.item.title, text: item.item.text, loc:item.item.loc, teacher: item.item.teacher})} activeOpacity={0.8}>
+				<View style = {{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
+					<Image source = {require('./assets/sslopps.png')} style = {{height: 40, width: 40, marginRight: 10}}/>
+					<Text style={styles.title}>{item.item.title}</Text>
+				</View>
+			</TouchableOpacity>
+		</View>
     )
 }
+function SSLOpp () {
+	return (
+	  <NavigationContainer independent={true}>
+		<Stack.Navigator>
+		  <Stack.Screen 
+			name = "SSLOps"
+			component = {SSLOps}
+			options={({
+			  headerShown: false
+			})}
+		  />
+		  <Stack.Screen 
+			name = "SSLInfo"
+			component = {SSLInfo}
+			options={({route})=>({
+			  title:route.params.title
+			})}
+		  />
+		</Stack.Navigator>
+	  </NavigationContainer>
+	) 
+  }
 
 class SSLOps extends React.Component {
 	
@@ -63,7 +112,7 @@ class SSLOps extends React.Component {
 			<View style={styles.container}>
 				<FlatList
 					data={this.state.data}
-					renderItem={item=><SSLElement item={item}/>}
+					renderItem={item=><SSLElement item={item} name={item.title} navigation={this.props.navigation}/>}
 					keyExtractor={item=>JSON.stringify(item)}
 				/>
 			</View>
@@ -71,4 +120,4 @@ class SSLOps extends React.Component {
 	}
 }
 
-export default SSLOps;
\ No newline at end of file
+export default SSLOpp;
\ No newline at end of file
diff --git a/app/Staff.js b/app/Staff.js
index e0ad176..4c4fcc2 100644
--- a/app/Staff.js
+++ b/app/Staff.js
@@ -30,7 +30,7 @@ const StaffElement = ({item}) => {
 	<View>
 	  <TouchableOpacity style={styles.item1} onPress={()=>setVisible(!visible)} activeOpacity={0.8}>
     <View style = {{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
-      <Image source = {require('./assets/clubs.png')} style = {{height: 40, width: 40, marginRight: 10}}/>
+      <Image source = {require('./assets/staff.png')} style = {{height: 40, width: 40, marginRight: 10}}/>
       <Text style={styles.title}>{item.item.name}</Text>
     </View>
 		{visible?extra:<></>}
diff --git a/app/assets/lunch.png b/app/assets/lunch.png
new file mode 100644
index 0000000000000000000000000000000000000000..b22878ccfd3a8ed2c17cf05e433cfca8e959f540
GIT binary patch
literal 6313
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
NB{@~u8flY|{{VaoeQ5vy

literal 0
HcmV?d00001

diff --git a/app/assets/sslopps.png b/app/assets/sslopps.png
new file mode 100644
index 0000000000000000000000000000000000000000..4af2185b71505da92f5dac1435079b5eaf21d1e6
GIT binary patch
literal 5803
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

literal 0
HcmV?d00001

diff --git a/app/styles/liststyles.js b/app/styles/liststyles.js
index 20d555d..67ed989 100644
--- a/app/styles/liststyles.js
+++ b/app/styles/liststyles.js
@@ -29,6 +29,22 @@ const styles = StyleSheet.create({
 	  alignSelf:'flex-end',
 	  marginTop:'-3%',
 	  marginRight:'-3%'
+  },
+  title1: {
+    fontSize: 28,
+    fontWeight: 'bold',
+  },
+  link: {
+    fontSize: 28,
+    textDecorationLine: 'underline',
+    textDecorationStyle: "solid",
+    textDecorationColor: "#000",
+  },
+  infoContainer: {
+    backgroundColor: 'white',
+    borderRadius: 6,
+    padding: 5,
+    marginBottom: 10,
   }
 });