bulletin-frontend/EventDetails.jsx at main · AshDev09/bulletin-frontend · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
// EventDetails.js
import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  StatusBar,
  useColorScheme,
  TouchableOpacity,
} from 'react-native';
import axios from 'axios';

const BASE_URL = Platform.OS === 'android' ? 'http://10.0.2.2:7001' : 'http://localhost:7001';
const EventDetails = ({ navigation, route }) => {
  const isDarkMode = useColorScheme() === 'dark';

  // Receive event data via route params
  const handleDelete = async () => {
  try {
    await axios.delete(`${BASE_URL}/api/events/${event._id}`);
    navigation.navigate('TeacherBulletinBoard', { deletedEventId: event._id });
  } catch (error) {
    console.error('Error deleting event:', error);
    Alert.alert('Error', 'Failed to delete the event.');
  }
};

  const { event } = route.params;

  return (
    <View style={styles.container}>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />

      <Text style={styles.loginText}>Event Details</Text>

      <View style={styles.infoBox}>
        <Text style={styles.label}>Event Name</Text>
        <Text style={styles.value}>{event.eventname}</Text>
      </View>

      <View style={styles.infoBox}>
        <Text style={styles.label}>Time</Text>
        <Text style={styles.value}>
          {new Date(event.date).toLocaleTimeString(undefined, {
            hour: '2-digit',
            minute: '2-digit',
          })}
        </Text>
      </View>

      <View style={styles.infoBox}>
        <Text style={styles.label}>Date</Text>
        <Text style={styles.value}>
          {new Date(event.date).toLocaleDateString(undefined, {
            year: 'numeric',
            month: 'long',
            day: 'numeric',
          })}
        </Text>
      </View>

      <View style={styles.infoBox}>
        <Text style={styles.label}>Info</Text>
        <Text style={styles.value}>{event.eventinfo}</Text>
      </View>

      <TouchableOpacity style={styles.button} onPress={() => navigation.goBack()}>
        <Text style={styles.buttonText}>Back</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#AFF4C6',
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: 20,
  },
  loginText: {
    fontSize: 30,
    color: 'black',
    marginBottom: 20,
    fontWeight: 'bold',
  },
  infoBox: {
    backgroundColor: '#fff',
    borderRadius: 8,
    width: 250,
    padding: 12,
    marginBottom: 15,
    elevation: 2,
  },
  label: {
    fontSize: 14,
    color: '#666',
    marginBottom: 4,
  },
  value: {
    fontSize: 16,
    color: '#222',
    fontWeight: '600',
  },
  button: {
    backgroundColor: '#000000',
    paddingVertical: 12,
    paddingHorizontal: 24,
    borderRadius: 8,
    marginTop: 20,
    alignItems: 'center',
    width: 250,
  },
  buttonText: {
    color: '#FFFFFF',
    fontSize: 16,
    fontWeight: '600',
    textAlign: 'center',
  },
});

export default EventDetails;