Merge branch 'os-events' of sa1177/ProjectGroup8 into main

components/EventCard.js

@@ -0,0 +1,37 @@
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import Colors from "../constants/colors";
+
+const EventCard = (props) => {
+  return (
+    <TouchableOpacity style={{ ...styles.screen, ...props.style }}>
+      <View style={styles.eventItem}>
+        <Text style={styles.text}>
+          {props.event._name} ({props.event._date})
+        </Text>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  screen: {
+    flex: 1,
+    alignItem: "center",
+    justifyContent: "center",
+    backgroundColor: Colors.primary500,
+  },
+  eventItem: {
+    margin: 10,
+    padding: 10,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: "white",
+    height: 60,
+    backgroundColor: Colors.primary400,
+  },
+  text: {
+    color: "white",
+  },
+});
+
+export default EventCard;

data/EventData.js

@@ -0,0 +1,23 @@
+import { Event } from "../models/Event.js";
+
+const events = [
+  {
+    name: "Christmas",
+    date: "2020-12-24",
+    category: "family",
+  },
+  {
+    name: "Valentines Day",
+    date: "2021-02-14",
+    category: "friends",
+  },
+  {
+    name: "Birthday",
+    date: "2021-03-14",
+    category: "family",
+  },
+];
+
+export const EVENTS = events.map(
+  (event) => new Event(event.name, event.date, event.category)
+);

models/Event.js

@@ -0,0 +1,12 @@
+import { v4 as generateUniqueKey } from "uuid";
+
+export class Event {
+  constructor(name, date, category) {
+    this._key = generateUniqueKey();
+    this._name = name;
+    this._date = date;
+    this._category = category;
+    this._giftList = [];
+    this._personList = [];
+  }
+}

navigation/Navigator.js

@@ -8,6 +8,7 @@ import Colors from "../constants/colors";
 import MainScreen from "../screens/MainScreen";
 import LogoTitle from "../components/LogoTitle";
 import PersonOverviewScreen from "../screens/PersonOverviewScreen";
+import EventOverviewScreen from "../screens/EventOverviewScreen";
 
 const Tab = createBottomTabNavigator();
 
@@ -58,7 +59,7 @@ function Navigator() {
         />
         <Tab.Screen
           name="Calendar"
-          component={MainScreen}
+          component={EventOverviewScreen}
           options={{
             tabBarIcon: ({ color, size }) => (
               <Icon name="calendar-outline" color={color} size={size} />

screens/EventOverviewScreen.js

@@ -0,0 +1,33 @@
+import { ScrollView, StyleSheet, View } from "react-native";
+import { StatusBar } from "expo-status-bar";
+
+import { EVENTS } from "../data/EventData";
+
+import Colors from "../constants/colors";
+import EventCard from "../components/EventCard";
+import FloatingButton from "../components/FloatingButton";
+
+const eventsToDisplay = EVENTS.map((event, index) => {
+  return <EventCard event={event} key={index} />;
+});
+
+const EventOverviewScreen = (props) => {
+  return (
+    <View style={styles.container}>
+      <ScrollView>{eventsToDisplay}</ScrollView>
+      <FloatingButton />
+      <StatusBar style="auto" />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.primary500,
+    alignItem: "center",
+    justifyContent: "center",
+  },
+});
+
+export default EventOverviewScreen;