calendar pg ui

app/Announcements.js

@@ -43,11 +43,10 @@ const Announcement = ({item}) => {
 	return (
 		<View style={{borderWidth: 1, borderColor: '#323232', padding: '2%', marginHorizontal: '2%', marginBottom: '2%', borderRadius: 12}}>
 			<View style = {{display: 'flex', flexDirection: 'column', justifyContent: 'space-between'}}>
-				{dateInfo!==undefined?<Text style={{fontSize: 12, fontWeight: '200'}}>{dateInfo}</Text>:<></>}
+				<View style = {{width: '100%'}}>
-				<View style = {{width: '75%'}}>
 					<Text style={styles.title}>{item.item.message}</Text>
 				</View>
-				
+				{dateInfo!==undefined?<Text style={{fontSize: 12, fontWeight: '200'}}>{dateInfo}</Text>:<></>}
 			</View>
 		</View>
 	)
@@ -76,8 +75,8 @@ export const TeacherList = ({route}) => {
 		else if (itemDate > todayDate && itemDate <= weekFutureDate) {
 			future.push(route.params.data[i])
 		}
-		else if (itemDate >= weekPastDate && itemDate < todayDate) {
+		//else if (itemDate >= weekPastDate && itemDate < todayDate) {
-		//else if (itemDate < todayDate) {
+		else if (itemDate < todayDate) {
 			past.push(route.params.data[i])
 		}
 	}

app/Calendar.js

@@ -1,160 +1,3 @@
-/*import React, {useState} from 'react';
-import {
-  SafeAreaView,
-  StyleSheet,
-  ScrollView,
-  View,
-  Text,
-  StatusBar,
-  FlatList,
-  TouchableOpacity,
-  Image,
-} from 'react-native';
-
-import {	 
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
-
-import LinearGradient from 'react-native-linear-gradient';
-//import I18n from './i18n';
-import styles from './styles/liststyles'
-import { url } from './resources/fetchInfo.json'
-
-const getCurrentDate=()=>{
-  var date = new Date().getDate();
-  var month = new Date().getMonth() + 1;
-  var year = new Date().getFullYear();
-
-  return year + ',' + month + ',' + date;
-}
-const getWeekDate=()=>{
-  var date = new Date().getDate()-8;
-  var month = new Date().getMonth()+1;
-  var year = new Date().getFullYear();
-
-  return year + ',' + month + ',' + date;
-}
-
-const Event = ({item}) => {
-	const [visible, setVisible] = useState(false)
-  const today = new Date(getCurrentDate())
-  const itemDate = new Date(item.item.date)
-  const week = new Date(getWeekDate())
-	const extra = (
-		<>
-			<Text style={{fontSize:20, paddingHorizontal: '1%'}}>{item.item.text}</Text>
-      <View style={{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
-        <View style={{width: '10%', display: 'flex', justifyContent: 'center'}}>
-          <Image source={require('./assets/location.png')} style={{height: 22, width: 22}}/>
-        </View>
-        <View style={{width: '90%'}}>
-          <Text style={{fontSize:20}}>{item.item.location}</Text>
-        </View>
-        
-      </View>
-			
-		</>
-  )
-
-  if (itemDate.getTime() >= today.getTime()) {
-    return (
-      <TouchableOpacity style={styles.item1} onPress={()=>setVisible(!visible)} activeOpacity={0.8}>
-        <View style = {{display: 'flex', flexDirection: 'row', alignContent: 'center', justifyContent: 'space-between'}}>
-        <View style = {{display: 'flex', flexDirection: 'row', alignContent: 'center', width: '60%'}}>
-          <Image source ={require('./assets/calendar.png')}  style = {{height: 40, width: 40, marginRight: 15}}/>
-          <Text style={styles.title3}>{item.item.title}</Text>
-        </View>
-        <View style = {{display: 'flex', flexDirection: 'row', alignContent: 'center'}}>
-          <Text style = {{fontSize: 16, alignSelf: 'center'}}>{item.item.date}</Text>
-        </View>
-      </View>
-        {visible?extra:<></>}
-		  </TouchableOpacity>
-    )
-  }
-  else if (itemDate.getTime() >= week.getTime()){
-    return (
-		<TouchableOpacity style={{backgroundColor: '#e3e3e3', padding: 15, borderBottomWidth: 1, borderColor: 'black', width: '100%',}} onPress={()=>setVisible(!visible)} activeOpacity={0.8}>
-			<View style = {{display: 'flex', flexDirection: 'row', alignContent: 'center', justifyContent: 'space-between'}}>
-        <View style = {{display: 'flex', flexDirection: 'row', alignContent: 'center', width: '60%'}}>
-          <Image source ={require('./assets/calendar.png')}  style = {{height: 40, width: 40, marginRight: 15}}/>
-          <Text style={styles.title3}>{item.item.title}</Text>
-        </View>
-        <View style = {{display: 'flex', flexDirection: 'row', alignContent: 'center'}}>
-          <Text style = {{fontSize: 16, alignSelf: 'center'}}>{item.item.date}</Text>
-        </View>
-      </View>
-			{visible?extra:<></>}
-		</TouchableOpacity>
-	  )
-  }
-  else {
-    return (
-      null
-    )
-  }
-}
-
-class Calendar extends React.Component {
-
-	constructor(props) {
-		super(props)
-		this.state = {
-			data: []
-		}
-	}
-
-	componentDidMount() {
-		this.getData()
-		this.props.navigation.addListener(
-			'focus',
-			() => {
-				this.getData()
-			}
-		);
-	}
-
-	getData() {
-		fetch(`${url}/api/en/events`,{
-		  headers: {
-			'Cache-Control': 'no-cache'
-		  } })
-		  .then((response) => {
-			return response.text();
-		  })
-		  .then((json) => {
-			const data = JSON.parse(json).data
-      data.sort((a,b)=>new Date(b.date).getTime()-new Date(a.date).getTime())
-      console.log(data);
-			this.setState({data: data});
-		  })
-		  .catch((error) => console.error(error))
-	}
-
-	render() {
-		return (
-			<View>
-        <View style = {{height: 90, display: 'flex'}}>
-          <LinearGradient
-            colors={['#f99', 'white']}
-            style = {{height: '100%', borderBottomColor:'black', borderBottomWidth:0.5, display: 'flex', justifyContent: 'flex-end', paddingBottom: '2.5%'}}
-          >
-            <Text style = {{fontSize: 24, fontWeight: 'bold', alignSelf: 'center'}}>Calendar Events</Text>
-          </LinearGradient>
-         
-        </View>
-				<FlatList
-					data={this.state.data}
-					renderItem={item=><Event item={item}/>}
-					keyExtractor={item=>JSON.stringify(item)}
-				/>
-			</View>
-		)
-  }
-}
-
-export default Calendar;*/
-
 import React, {useState} from 'react';
 import {
   SafeAreaView,
@@ -171,71 +14,125 @@ import {
 import {	 
   ReloadInstructions,
 } from 'react-native/Libraries/NewAppScreen';
-
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import Icon from 'react-native-vector-icons/AntDesign'
 import LinearGradient from 'react-native-linear-gradient';
-
+import { NavigationContainer } from '@react-navigation/native'
+import { createStackNavigator } from '@react-navigation/stack'
 import styles from './styles/liststyles'
 import { url } from './resources/fetchInfo.json'
+import morestyles from './styles/morestyles'
+
+const Stack = createStackNavigator();
 
 const getCurrentDate=()=>{
   var date = new Date().getDate();
   var month = new Date().getMonth() + 1;
   var year = new Date().getFullYear();
 
-  return year + '-' + month + '-' + date;
+  return new Date(year, month, date);
+}
+export const EventInfo = ({route}) => {
+  const item = route.params;
+  const itemDate = new Date(item.date)
+  const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
+  const months = ['January','February','March','April','May','June','July','August','September','October','November','December',]
+  const dayOfWeek = days[itemDate.getDay()]
+  const month = months[itemDate.getMonth()]
+  const date = itemDate.getDate()
+  
+  return (
+    <View style = {{backgroundColor: 'white', flex:1}}>
+      <View style={{padding: '5%'}}>
+        <View style={{marginBottom: '7%'}}>
+          <Text style={[styles.title, {fontWeight: 'bold', marginBottom: '2%'}]}>Info</Text>
+          <Text style={[styles.title, {fontWeight: '200'}]}>{item.text}</Text>
+        </View>
+        <View style={{display: 'flex', flexDirection: 'row', marginBottom: '5%'}}>
+          <Ionicons name='location-outline' size={28} color={'#323232'}style={{marginRight: 15, alignSelf: 'center'}}/>
+          <View style={{display: 'flex'}}>
+            <Text style={{fontSize: 16}}>Location</Text>
+            <Text style={[styles.title, {fontSize: 16, fontWeight: '200'}]}>{item.location}</Text>
+          </View>
+        </View>
+        <View style={{display: 'flex', flexDirection: 'row', marginBottom: '5%'}}>
+          <Ionicons name='time-outline' size={28} color={'#323232'}style={{marginRight: 15, alignSelf: 'center'}}/>
+          <View style={{display: 'flex'}}>
+            <Text style={{fontSize: 16}}>Date</Text>
+            <Text style={[styles.title, {fontSize: 16, fontWeight: '200'}]}>{dayOfWeek}, {month} {date}</Text>
+          </View>
+        </View>
+        <View style={{display: 'flex', flexDirection: 'row'}}>
+          <Ionicons name='person-circle-outline' size={28} color={'#323232'}style={{marginRight: 15, alignSelf: 'center'}}/>
+          <View style={{display: 'flex'}}>
+            <Text style={{fontSize: 16}}>Organizer</Text>
+            <Text style={[styles.title, {fontSize: 16, fontWeight: '200'}]}>{item.name}</Text>
+            <Text style={[styles.title, {fontSize: 16, fontWeight: '200', textDecorationLine: 'underline'}]}>{item.emails}</Text>
+          </View>
+        </View>
+      </View>
+      
+      
+    </View>
+  )
+}
+const Event = (props) => {
+  const item = props.item
+  const date = item.item.date.split('-')
+
+  return (
+    <View>
+      <TouchableOpacity style={[styles.listItem, {padding: '2%'}]} onPress={()=>props.navigation.navigate('EventInfo', {data:props.data,name:props.name, title: item.item.title,text:item.item.text,location:item.item.location,date:item.item.date, name:item.item.name, emails: item.item.emails})} activeOpacity={0.8}>
+        <View style = {[styles.container2, {justifyContent: 'space-between'}]}>
+          <View style={{display: 'flex', flexDirection: 'row'}}>
+            <Ionicons name='calendar' size={32} color={'#323232'} style={{marginRight: 15}}/>
+            <View style = {{display: 'flex', alignContent: 'center', width: '80%'}}>
+              <Text style={styles.title}>{item.item.title}</Text>
+              <View style={{paddingBottom: '2%'}}><Text style = {{fontSize: 12, fontWeight: '200'}}>{`${date[1]}/${date[2]}/${date[0]}`}</Text></View>
+            </View>
+          </View>
+          <Image source = {require('./assets/forward.png')} style={{tintColor: '#b2b2b2'}}/>
+        </View>
+      </TouchableOpacity>
+    </View>    
+  )
 }
 
-const Event = ({item}) => {
+const background = (<LinearGradient
-	const [visible, setVisible] = useState(false)
+  colors={['#f99', 'white']}
-  const date = item.item.date.split('-')
+  style = {{flex:1,borderBottomColor:'black',borderBottomWidth:0.5}}
-  const today = new Date(getCurrentDate())
+  />)
-  const week = new Date().setDate(new Date().getDate() - 8)
-  const itemDate = new Date(item.item.date)
 
-	const extra = (
+function CalendarEvents () {
-		<>
+  return (
-			<Text style={{fontSize:20}}>{item.item.text}</Text>
+    <NavigationContainer independent={true}>
-			<Text style={{fontSize:20}}>Location: {item.item.location}</Text>
+      <Stack.Navigator>
-		</>
+        <Stack.Screen 
+          name = "Calendar"
+          component = {Calendar}
+          options={({
+            headerShown: true,
+            headerTitleStyle:morestyles.headerTitle,
+            headerBackground: ()=>background,
+            headerleft: null,
+            headerTitleAlign: 'center'
+          })}
+        />
+        
+        <Stack.Screen 
+          name = "EventInfo"
+          component = {EventInfo}
+          options={({route})=>({
+            title:route.params.title,
+            headerTitleStyle:morestyles.headerTitle,
+            headerBackground: ()=>background,
+            headerleft: null,
+            headerTitleAlign: 'center'
+          })}
+        />
+      </Stack.Navigator>
+    </NavigationContainer>
   ) 
-  if (itemDate >= today) {
-    
-    return (
-      <TouchableOpacity style={styles.item1} onPress={()=>setVisible(!visible)} activeOpacity={0.8}>
-        <View style = {{display: 'flex', flexDirection: 'row', alignContent: 'center', justifyContent: 'space-between'}}>
-        <View style = {{display: 'flex', flexDirection: 'row', alignContent: 'center', width: '60%'}}>
-          <Image source ={require('./assets/calendar.png')}  style = {{height: 40, width: 40, marginRight: 15}}/>
-          <Text style={styles.title3}>{item.item.title}</Text>
-        </View>
-        <View style = {{display: 'flex', flexDirection: 'row', alignContent: 'center'}}>
-          <Text style = {{fontSize: 16, alignSelf: 'center'}}>{`${date[1]}/${date[2]}/${date[0]}`}</Text>
-        </View>
-      </View>
-        {visible?extra:<></>}
-		  </TouchableOpacity>
-    )
-  }
-  else if (itemDate >= week){
-    return (
-		<TouchableOpacity style={{backgroundColor: '#e3e3e3', padding: 15, borderBottomWidth: 1, borderColor: 'black', width: '100%',}} onPress={()=>setVisible(!visible)} activeOpacity={0.8}>
-			<View style = {{display: 'flex', flexDirection: 'row', alignContent: 'center', justifyContent: 'space-between'}}>
-        <View style = {{display: 'flex', flexDirection: 'row', alignContent: 'center', width: '60%'}}>
-          <Image source ={require('./assets/calendar.png')}  style = {{height: 40, width: 40, marginRight: 15}}/>
-          <Text style={styles.title3}>{item.item.title}</Text>
-        </View>
-        <View style = {{display: 'flex', flexDirection: 'row', alignContent: 'center'}}>
-          <Text style = {{fontSize: 16, alignSelf: 'center'}}>{`${date[1]}/${date[2]}/${date[0]}`}</Text>
-        </View>
-      </View>
-			{visible?extra:<></>}
-		</TouchableOpacity>
-	  )
-  }
-  else {
-    return (
-      null
-    )
-  }
 }
 
 class Calendar extends React.Component {
@@ -275,25 +172,73 @@ class Calendar extends React.Component {
 	}
 
 	render() {
-		return (
+    const todayDate = getCurrentDate()
-			<View>
+    const weekPastDate = new Date();
-        <View style = {{height: global.headerHeight, display: 'flex'}}>
+    var pastDate = weekPastDate.getDate() - 7;
-          <LinearGradient
+    weekPastDate.setDate(pastDate);
-            colors={['#f99', 'white']}
+    const weekFutureDate = new Date();
-            style = {{height: '100%', borderBottomColor:'black', borderBottomWidth:0.5, display: 'flex', justifyContent: 'flex-end', paddingBottom: '2.5%'}}
+    var futureDate = weekFutureDate.getDate() + 7;
-          >
+    weekFutureDate.setDate(futureDate);
-            <Text style = {{fontSize: 24, fontWeight: 'bold', alignSelf: 'center'}}>Calendar Events</Text>
+    const today = []
-          </LinearGradient>
+    const past = []
+    const future = []
+    var todayBoolean = true
+    var pastBoolean = true
+    var futureBoolean = true
     
-        </View>
+    for (var i =0; i < this.state.data.length; i++) {
-				<FlatList
+      const itemDate = new Date(this.state.data[i].date)
-					data={this.state.data}
+      if (itemDate == todayDate) {
-					renderItem={item=><Event item={item}/>}
+        today.push(this.state.data[i])
-					keyExtractor={item=>JSON.stringify(item)}
+      }
-				/>
+      else if (itemDate > todayDate && itemDate <= weekFutureDate) {
-			</View>
+        future.push(this.state.data[i])
+      }
+      //else if (itemDate >= weekPastDate && itemDate < todayDate) {
+      else if (itemDate < todayDate) {
+        past.push(this.state.data[i])
+      }
+    }
+    if (today.length === 0) todayBoolean = false
+    if (past.length === 0) pastBoolean = false
+    if (future.length === 0) futureBoolean = false
+    var noAnn = (todayBoolean||pastBoolean||futureBoolean)
+		return (
+			<ScrollView style={{flex:1, backgroundColor: 'white'}}>
+        {todayBoolean?<View>
+          <LinearGradient start={{x: 0.25, y: .5}} end={{x: 1, y: 1}} colors={['#FF8484', '#FF1111']} style={{backgroundColor: 'red', width: '20%', padding: '2%', borderTopRightRadius: 20, borderBottomRightRadius: 20, marginVertical: '2%'}}>
+            <Text style={[styles.title, {color: 'white', fontWeight: 'bold'}]}>Today</Text>
+          </LinearGradient>
+          <FlatList
+            data={today}
+            renderItem={item=><Event item={item} name={item.name} navigation={this.props.navigation}/>} 
+            keyExtractor={item=>JSON.stringify(item)}
+          />
+        </View>: <></>}
+        {pastBoolean?<View>
+          <LinearGradient start={{x: 0.25, y: .5}} end={{x: 1, y: 1}} colors={['#FF8484', '#FF1111']} style={{backgroundColor: 'red', width: '20%', padding: '2%', borderTopRightRadius: 20, borderBottomRightRadius: 20, marginVertical: '2%'}}>
+            <Text style={[styles.title, {color: 'white', fontWeight: 'bold'}]}>Past</Text>
+          </LinearGradient>
+          <FlatList
+            data={past}
+            renderItem={item=><Event item={item} name={item.name} navigation={this.props.navigation}/>} 
+            keyExtractor={item=>JSON.stringify(item)}
+          />
+        </View>:<></>}
+        {futureBoolean?<View>
+          <LinearGradient start={{x: 0.25, y: .5}} end={{x: 1, y: 1}} colors={['#FF8484', '#FF1111']} style={{backgroundColor: 'red', width: '20%', padding: '2%', borderTopRightRadius: 20, borderBottomRightRadius: 20, marginVertical: '2%'}}>
+            <Text style={[styles.title, {color: 'white', fontWeight: 'bold'}]}>Future</Text>
+          </LinearGradient>
+          <FlatList
+            data={future}
+            renderItem={item=><Event item={item} name={item.name} navigation={this.props.navigation}/>} 
+            keyExtractor={item=>JSON.stringify(item)}
+          />
+        </View>:<></>}
+        {!noAnn?<Text style={{textAlign: 'center', fontSize: 20, paddingTop: '2%'}}>No Events</Text>:<></>}
+      </ScrollView>
 		)
   }
 }
 
-export default Calendar;
+export default CalendarEvents;

app/More.js

@@ -92,7 +92,8 @@ class More extends React.Component {
 						options={{
 							title:"More",
 							headerTitleStyle:styles.headerTitle,
-							headerBackground: ()=>background
+							headerBackground: ()=>background,
+							headerTitleAlign: 'center'
 						}}
 					/>
 					<Stack.Screen 
@@ -102,7 +103,8 @@ class More extends React.Component {
 							title:"Announcements",
 							headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
 							headerLeft:null,
-							headerBackground: ()=>background
+							headerBackground: ()=>background,
+							headerTitleAlign: 'center'
 						}}
 					/>
 					<Stack.Screen 
@@ -110,9 +112,10 @@ class More extends React.Component {
 						component={Resources}
 						options={{
 							title:"Resources",
-							headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
+							headerTitleStyle:styles.headerTitle,
 							headerLeft:null,
-							headerBackground: ()=>background
+							headerBackground: ()=>background,
+							headerTitleAlign: 'center'
 						}}
 					/>
 					<Stack.Screen 
@@ -120,9 +123,10 @@ class More extends React.Component {
 						component={StudentWeek}
 						options={{
 							title:"Student of the Week",
-							headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
+							headerTitleStyle:styles.headerTitle,
 							headerLeft:null,
-							headerBackground: ()=>background
+							headerBackground: ()=>background,
+							headerTitleAlign: 'center'
 						}}
 					/>
 					<Stack.Screen 
@@ -130,9 +134,10 @@ class More extends React.Component {
 						component={LunchEvents}
 						options={{
 							title:"Lunch Events",
-							headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
+							headerTitleStyle:styles.headerTitle,
 							headerLeft:null,
-							headerBackground: ()=>background
+							headerBackground: ()=>background,
+							headerTitleAlign: 'center'
 						}}
 					/>
 					<Stack.Screen 
@@ -140,9 +145,10 @@ class More extends React.Component {
 						component={SSLOps}
 						options={{
 							title:"SSL Opportunities",
-							headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
+							headerTitleStyle:styles.headerTitle,
 							headerLeft:null,
-							headerBackground: ()=>background
+							headerBackground: ()=>background,
+							headerTitleAlign: 'center'
 						}}
 					/>
 					<Stack.Screen 
@@ -150,9 +156,10 @@ class More extends React.Component {
 						component={ChallengeWeek}
 						options={{
 							title:"Challenge of the Week",
-							headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
+							headerTitleStyle:styles.headerTitle,
 							headerLeft:null,
-							headerBackground: ()=>background
+							headerBackground: ()=>background,
+							headerTitleAlign: 'center'
 						}}
 					/>
 					<Stack.Screen 
@@ -160,9 +167,10 @@ class More extends React.Component {
 						component={Poll}
 						options={{
 							title:"Polls",
-							headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
+							headerTitleStyle:styles.headerTitle,
 							headerLeft:null,
-							headerBackground: ()=>background
+							headerBackground: ()=>background,
+							headerTitleAlign: 'center'
 						}}
 					/>
 					<Stack.Screen 
@@ -173,7 +181,7 @@ class More extends React.Component {
 							headerTitleStyle:[styles.headerTitle,{alignSelf:'center'}],
 							headerLeft:null,
 							headerBackground: ()=>background,
-							headerShown:false
+							headerShown:false,
 						}}
 					/>
 					<Stack.Screen