Enhance AttendanceScreen functionality: update date selection logic, …

…add previous date color tracking, and improve UI for skipped dates
manaspros · Jan 8, 2025 · 83957f0 · 83957f0
1 parent 2a7e13e
commit 83957f0
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 16 deletions.
diff --git a/src/screens/AttendanceScreen.js b/src/screens/AttendanceScreen.js
@@ -161,17 +161,60 @@ const AttendanceScreen = ({ navigation }) => {
     setMarkedDates(newMarkedDates);
   };
 
+  const [previousDateColor, setPreviousDateColor] = useState({});
+
   const handleDateSelect = (date) => {
-    const dayOfWeek = getDayOfWeek(date.dateString);
+    const { dateString } = date;
+    const dayOfWeek = getDayOfWeek(dateString);
+
     if (
       courseSchedules[course]?.[dayOfWeek] &&
-      !courseHolidays[course]?.includes(date.dateString)
+      !courseHolidays[course]?.includes(dateString)
     ) {
-      setSelectedDate(date.dateString);
+      // Update the previous date color
+      if (selectedDate) {
+        setMarkedDates((prev) => ({
+          ...prev,
+          [selectedDate]: {
+            ...prev[selectedDate],
+            customStyles: {
+              ...prev[selectedDate]?.customStyles,
+              container: {
+                backgroundColor: previousDateColor[selectedDate] || "white",
+              },
+            },
+          },
+        }));
+      }
+
+      setPreviousDateColor((prev) => ({
+        ...prev,
+        [dateString]:
+          markedDates[dateString]?.customStyles?.container?.backgroundColor ||
+          "white",
+      }));
+
+      // Change the new date color to blue
+      setMarkedDates((prev) => ({
+        ...prev,
+        [dateString]: {
+          ...prev[dateString],
+          customStyles: {
+            ...prev[dateString]?.customStyles,
+            container: {
+              backgroundColor: "blue",
+            },
+          },
+        },
+      }));
+
+      // Set the newly selected date
+      setSelectedDate(dateString);
     } else {
       Alert.alert("No classes scheduled or holiday on this day.");
     }
   };
+
   const handleMarkAllClasses = async (status) => {
     if (!selectedDate) {
       Alert.alert("Please select a valid date.");
@@ -479,6 +522,9 @@ const AttendanceScreen = ({ navigation }) => {
           <Text style={styles.legendItem}>
             <View style={styles.gray} /> Holiday
           </Text>
+          <Text style={styles.legendItem}>
+            <View style={styles.black} /> Skipped
+          </Text>
         </View>
 
         <View style={styles.floatingButtons}>
@@ -570,7 +616,7 @@ const styles = StyleSheet.create({
   legendItem: {
     flexDirection: "row",
     alignItems: "center",
-    marginBottom: 2,
+    marginBottom: 0.5,
   },
   oneClass: {
     width: 15,
@@ -602,6 +648,12 @@ const styles = StyleSheet.create({
     backgroundColor: "gray",
     borderRadius: 5,
   },
+  black: {
+    width: 15,
+    height: 15,
+    backgroundColor: "black",
+    borderRadius: 5,
+  },
   floatingButtons: {
     flexDirection: "row",
     justifyContent: "space-between",

diff --git a/src/store/course-schedule-notime.js b/src/store/course-schedule-notime.js
@@ -2,30 +2,30 @@ const courseSchedules = {
   "Introduction to IoT": {
     startDate: "2025-01-03",
     Thursday: 1,
-    Friday: 1,
+    Friday: 2,
     endDate: "2025-05-21",
   },
   "Design &Prototyping": {
     startDate: "2025-01-02",
     Wednesday: 1,
-    Thursday: 1,
+    Thursday: 2,
     endDate: "2025-05-21",
   },
   "3D Printing": {
     startDate: "2025-01-03",
-    Monday: 1,
+    Monday: 2,
     Wednesday: 1,
     endDate: "2025-05-21",
   },
   "Introduction to AI and ML": {
     startDate: "2025-01-03",
-    Monday: 2,
+    Monday: 3,
     endDate: "2025-05-21",
   },
   "Communication and Discourse Strategies": {
     startDate: "2025-01-03",
     Tuesday: 1,
-    Friday: 1,
+    Friday: 2,
     endDate: "2025-05-21",
   },
   Calculus: {
@@ -44,7 +44,7 @@ const courseSchedules = {
     startDate: "2025-01-03",
     Monday: 2,
     Wednesday: 1,
-    Thursday: 1,
+    Thursday: 2,
     Friday: 1,
     endDate: "2025-02-24",
   },

diff --git a/src/store/course-schedule.js b/src/store/course-schedule.js
@@ -2,24 +2,24 @@ const courseSchedules = {
   "Introduction to IoT": {
     startDate: "2025-01-03",
     Thursday: { period: 1, time: "12:00 PM - 1:00 PM" },
-    Friday: { period: 2, time: "9:00 AM - 11:00 AM" },
+    Friday: { period: 1, time: "9:00 AM - 11:00 AM" },
     endDate: "2025-05-21",
   },
   "Design &Prototyping": {
     startDate: "2025-01-02",
     Wednesday: { period: 1, time: "10:00 AM - 11:00 AM" },
-    Thursday: { period: 2, time: "9:00 AM - 11:00 AM" },
+    Thursday: { period: 1, time: "9:00 AM - 11:00 AM" },
     endDate: "2025-05-21",
   },
   "3D Printing": {
     startDate: "2025-01-03",
-    Monday: { period: 2, time: "4:00 PM - 6:00 PM" },
+    Monday: { period: 1, time: "4:00 PM - 6:00 PM" },
     Wednesday: { period: 1, time: "12:00 PM - 1:00 PM" },
     endDate: "2025-05-21",
   },
   "Introduction to AI and ML": {
     startDate: "2025-01-03",
-    Monday: { period: 3, time: "2:00 PM - 4:00 PM \n 10:00 AM - 11:00 AM" },
+    Monday: { period: 2, time: "2:00 PM - 4:00 PM \n 10:00 AM - 11:00 AM" },
     endDate: "2025-05-21",
   },
   "Communication and Discourse Strategies": {
@@ -44,7 +44,7 @@ const courseSchedules = {
     startDate: "2025-01-03",
     Monday: { period: 2, time: "11:00 AM - 1:00 PM" },
     Wednesday: { period: 1, time: "9:00 AM - 10:00 AM" },
-    Thursday: { period: 2, time: "2:00 PM - 4:00 PM" },
+    Thursday: { period: 1, time: "2:00 PM - 4:00 PM" },
     Friday: { period: 1, time: "11:00 AM - 12:00 PM" },
     endDate: "2025-02-27",
   },
@@ -115,7 +115,9 @@ const courseSchedules = {
   "Optimization Techniques(CSE) 1st Half": {
     startDate: "2025-01-03",
     Monday: { period: 1, time: "3:00 PM - 4:00 PM" },
-    Wednesday: { period: 2, time: "9:00 AM - 11:00 AM" },
+    Tuesday: { period: 2, time: "2:00 PM - 4:00 PM" },
+    Wednesday: { period: 2, time: "2:00 PM - 4:00 PM" },
+    Thursday: { period: 1, time: "11:00 AM - 12:00 PM" },
     endDate: "2025-02-27",
   },
   "Object Oriented Programming(CSE) 2nd Half": {