styled category task view + edit task

SCCapstone · Apr 23, 2024 · 058faee · 058faee
1 parent 5cf3387
commit 058faee
Show file tree

Hide file tree

Showing 8 changed files with 238 additions and 158 deletions.
diff --git a/components/ActiveTasks.js b/components/ActiveTasks.js
@@ -2,10 +2,11 @@ import React, { useState, useEffect } from 'react';
 import { View, Text, TouchableOpacity, Switch } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { format, startOfMonth, endOfMonth, parseISO, isSameMonth } from 'date-fns';
-import styles from '../styles/ActiveTasksStyle';
 import { fetchTasksForUser } from '../services/AuthAPI';
 import eventEmitter from '../components/EventEmitter';
 import { useCurrentMonth } from './CurrentMonthContext';
+import { useTheme } from "../services/ThemeContext";
+import getStyles from "../styles/ActiveTasksStyle";
 
 
 const ActiveTasks = ({ userID }) => {
@@ -18,6 +19,8 @@ const ActiveTasks = ({ userID }) => {
         { label: 'Gym', color: '#FFD700' },
     ]);
     const [currentMonthOnly, setCurrentMonthOnly] = useState(false);
+    const { theme } = useTheme();
+    const styles = getStyles(theme);
 
     useEffect(() => {
         const fetchAndCountTasks = async () => {
@@ -54,7 +57,7 @@ const ActiveTasks = ({ userID }) => {
     return (
         <View style={styles.container}>
             <View style={styles.switchContainer}>
-                <Text>Showing: {currentMonthOnly ? "This Month's Tasks" : "All Time Tasks"}</Text>
+                <Text style={styles.taskText}>Showing: {currentMonthOnly ? "This Month's Tasks" : "All Time Tasks"}</Text>
                 <Switch
                     value={currentMonthOnly}
                     onValueChange={setCurrentMonthOnly}
@@ -64,7 +67,10 @@ const ActiveTasks = ({ userID }) => {
                 <TouchableOpacity
                     key={index}
                     style={[styles.circle, { backgroundColor: category.color }]}
-                    onPress={() => navigation.navigate('CategoryTasksView', { category: category.label, userID })}
+                    onPress={() => navigation.navigate('CategoryTasksView', { 
+                        category: category.label, 
+                        userID: userID,
+                    })}
                 >
                     <Text style={styles.countText}>{category.count}</Text>
                     <Text style={styles.labelText}>{category.label}</Text>

diff --git a/navigators/MainNavigator.js b/navigators/MainNavigator.js
@@ -96,11 +96,12 @@ function MainNavigator({ isLoggedIn }) {
         <Stack.Screen
           name="EditTaskScreen"
           component={EditTaskScreen}
-          options={{ title: 'Edit Task' }}
+          options={{ title: 'Edit Task', headerShown: false }}
         />
         <Stack.Screen
           name="CategoryTasksView"
           component={CategoryTasksView}
+          options={{ headerShown: false }}
       />
         <Stack.Screen 
           name="TaskDetailScreen" 

diff --git a/screens/CategoryTasksView.js b/screens/CategoryTasksView.js
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { View, Text, FlatList, TouchableOpacity } from 'react-native';
+import { View, Text, FlatList, TouchableOpacity, Pressable } from 'react-native';
 import { fetchTasksForUser } from '../services/AuthAPI';
 import { format } from 'date-fns';
 import eventEmitter from '../components/EventEmitter';
@@ -12,6 +12,7 @@ const CategoryTasksView = ({ route, navigation }) => {
     const { theme } = useTheme();
     const styles = getStyles(theme);
 
+
     useEffect(() => {
         const fetchCategoryTasks = async () => {
             const allTasks = await fetchTasksForUser(userID);
@@ -28,8 +29,15 @@ const CategoryTasksView = ({ route, navigation }) => {
     }, [category, userID]);
 
     return (
-        <View style={styles.container}>
+    <View style={{ flex: 1}}>
+        <View style={styles.header}>
+            <Pressable onPress={() => navigation.goBack()}>
+            <Text style={styles.backText}>←</Text>
+            </Pressable>
             <Text style={styles.title}>{`${category} Active Tasks`}</Text>
+            <View style={{width: 24}}/>
+        </View>
+        <View style={styles.container}> 
             <FlatList
                 data={tasks}
                 keyExtractor={item => item.id.toString()}
@@ -48,6 +56,8 @@ const CategoryTasksView = ({ route, navigation }) => {
                 )}
             />
         </View>
+    </View>
+
     );
 };
 

diff --git a/screens/EditTaskScreen.js b/screens/EditTaskScreen.js
@@ -5,7 +5,8 @@ import {
   Text,
   View,
   Switch,
-  TextInput
+  TextInput,
+  Pressable
 } from "react-native";
 import Header from "../components/Header";
 import DateTimePicker from "../components/DateTimePicker";
@@ -77,57 +78,70 @@ const EditTaskScreen = ({ route, navigation }) => {
   };
 
   return (
-    <ScrollView style={styles.screen}>
-      <Header onClose={() => navigation.goBack()} />
-      <TextInput
-        style={styles.input}
-        placeholder="Task Name"
-        value={taskName}
-        onChangeText={setTaskName}
-      />
-      <DateTimePicker date={date} onConfirm={setDate} />
-      <TextInput
-        style={styles.input}
-        placeholder="Location"
-        value={location}
-        onChangeText={setLocation}
-      />
-      <TypeSelector selectedType={taskType} onSelect={setTaskType} />
-      <TextInput
-        style={styles.input}
-        placeholder="Comments"
-        value={comment}
-        onChangeText={setComment}
-        multiline
-      />
-      <View style={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}>
-        <Text style={styles.priorityText}>Priority:</Text>
-        <Picker
-          selectedValue={priority}
-          onValueChange={(itemValue, itemIndex) => setPriority(itemValue)}
-          style={styles.priorityPicker}
-        >
-          <Picker.Item label="Low" value="low" />
-          <Picker.Item label="Medium" value="medium" />
-          <Picker.Item label="High" value="high" />
-        </Picker>
+    <View style={{ flex: 1}}>
+      <View style={styles.header}>
+        <Pressable onPress={() => navigation.goBack()}>
+          <Text style={styles.backText}>←</Text>
+        </Pressable>
+        <Text style={styles.title}>Edit Task</Text>
+        <View style={{width: 24}}/>
       </View>
-      <View style={styles.switchContainer}>
-        <Text style={styles.priorityText}>Task Completed:</Text>
-        <Switch
-          value={isCompleted}
-          onValueChange={(newVal) => {
-            setIsCompleted(newVal);
-            if (newVal) handleCompleteAndDeleteTask();
-          }}
+
+      <ScrollView style={styles.screen}>
+        <TextInput
+          style={styles.input}
+          placeholder="Task Name"
+          placeholderTextColor='gray'
+          value={taskName}
+          onChangeText={setTaskName}
         />
-      </View>
-      <CreateButton
-        onPress={handleUpdateTask}
-        label="Update Task"
-        disabled={!taskName.trim()}
-      />
-    </ScrollView>
+        <DateTimePicker date={date} onConfirm={setDate} />
+        <TextInput
+          style={styles.input}
+          placeholder="Location"
+          placeholderTextColor='gray'
+          value={location}
+          onChangeText={setLocation}
+        />
+        <TypeSelector selectedType={taskType} onSelect={setTaskType} />
+        <TextInput
+          style={styles.input}
+          placeholder="Comments"
+          placeholderTextColor='gray'
+          value={comment}
+          onChangeText={setComment}
+          multiline
+        />
+        <View style={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}>
+          <Text style={styles.priorityText}>Priority:</Text>
+          <Picker
+            selectedValue={priority}
+            onValueChange={(itemValue, itemIndex) => setPriority(itemValue)}
+            style={styles.priorityPicker}
+          >
+            <Picker.Item label="Low" value="low" />
+            <Picker.Item label="Medium" value="medium" />
+            <Picker.Item label="High" value="high" />
+          </Picker>
+        </View>
+        <View style={styles.switchContainer}>
+          <Text style={styles.priorityText}>Task Completed:</Text>
+          <Switch
+            value={isCompleted}
+            onValueChange={(newVal) => {
+              setIsCompleted(newVal);
+              if (newVal) handleCompleteAndDeleteTask();
+            }}
+          />
+        </View>
+        <CreateButton
+          onPress={handleUpdateTask}
+          label="Update Task"
+          disabled={!taskName.trim()}
+        />
+      </ScrollView>
+    </View>
+
   );
 };
 

diff --git a/styles/ActiveTasksStyle.js b/styles/ActiveTasksStyle.js
@@ -3,7 +3,7 @@ import { StyleSheet, Dimensions } from 'react-native';
 const { width } = Dimensions.get('window'); // Get the window width
 const circleSize = width / 4 - 10; // Calculate size to fit 4 across with padding
 
-export default StyleSheet.create({
+const getStyles = (theme) => StyleSheet.create({
     container: {
         flexDirection: 'row',
         justifyContent: 'space-around',
@@ -48,4 +48,9 @@ export default StyleSheet.create({
     lightText: {
         color: '#000000', // Dark text for light backgrounds
     },
-});
+    taskText: {
+        color: theme === 'dark' ? 'white' : 'black', 
+    },
+});
+
+export default getStyles;