added expo-to-do-app

react-native-to-do-app/.gitignore

@@ -0,0 +1,40 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+.env
+
+/android
+/ios

react-native-to-do-app/App.js

@@ -0,0 +1,29 @@
+import { PaperProvider } from "react-native-paper";
+import { NavigationContainer } from "@react-navigation/native";
+import { createStackNavigator } from "@react-navigation/stack";
+import Cover from "./screens/Cover";
+import Home from "./screens/Home";
+import AddTaskModal from "./components/AddTaskModal";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
+import Categories from './screens/Categories';
+
+export default function App() {
+  const Stack = createStackNavigator();
+
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <NavigationContainer>
+        <PaperProvider>
+          <Stack.Navigator>
+            <Stack.Screen name="Cover" component={Cover} />
+            <Stack.Screen name="Categories" component={Categories} />
+            <Stack.Screen name="Tasks" component={Home} />
+            <Stack.Group screenOptions={{ presentation: 'modal' }}>
+              <Stack.Screen name="Add Task" component={AddTaskModal} />
+            </Stack.Group>
+          </Stack.Navigator>
+        </PaperProvider>
+      </NavigationContainer>
+    </GestureHandlerRootView>
+  );
+}

react-native-to-do-app/README.md

@@ -0,0 +1,27 @@
+# To Do App
+A simple To Do application built with React Native and Expo for iOS. The app uses [SQLite Cloud](https://sqlitecloud.io/) as a database. 
+
+## Features
+- Add Tasks: Create new tasks with titles and optional tags.
+- Edit Task Status: Update task status when completed.
+- Delete Tasks: Remove tasks from your list.
+- Dropdown Menu: Select categories for tasks from a predefined list.
+
+## Set Up
+After you've cloned the repo create a `.env` file and add your SQLite Cloud connection string. Make sure your connection string includes the name of your database before the api key. If the database name isn't included, you'll get an error when you run the application. 
+```bash
+DB_CONNECTON_STRING="<your-connection-string>" 
+```
+
+## Installation
+```bash
+npm install
+npm start
+```
+This command will start expo.
+
+## Usage
+Running on Mobile:
+
+Open the Expo Go app on your mobile device.
+Scan the QR code displayed in the terminal.

react-native-to-do-app/app.json

@@ -0,0 +1,33 @@
+{
+  "expo": {
+    "name": "mobile-to-do-app",
+    "slug": "mobile-to-do-app",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    },
+    "extra": {
+      "eas": {
+        "projectId": "faffd54b-fc15-4368-987a-a73b08640cfd"
+      }
+    },
+    "owner": "unatarajan"
+  }
+}

react-native-to-do-app/babel.config.js

@@ -0,0 +1,16 @@
+module.exports = function (api) {
+  api.cache(false);
+  return {
+    presets: ["babel-preset-expo"],
+    plugins: [
+      "react-native-paper/babel",
+      [
+        "module:react-native-dotenv",
+        {
+          moduleName: "@env",
+          path: ".env",
+        },
+      ],
+    ],
+  };
+};

react-native-to-do-app/components/AddTaskModal.js

@@ -0,0 +1,125 @@
+import React, { useState, useEffect } from "react";
+import { View, StyleSheet, Alert, Platform } from "react-native";
+import { TextInput, Button, Modal } from "react-native-paper";
+import DropdownMenu from "./DropdownMenu";
+import db from "../db/dbConnection";
+
+export default AddTaskModal = ({
+  modalVisible,
+  addTaskTag,
+  setModalVisible,
+}) => {
+  const [taskTitle, setTaskTitle] = useState("");
+  const [tagsList, setTagsList] = useState([]);
+  const [selectedTag, setSelectedTag] = useState({});
+
+  const closeModal = () => {
+    setModalVisible(false);
+  };
+
+  const handleAddTask = () => {
+    if (taskTitle.trim()) {
+      addTaskTag({ title: taskTitle.trim(), isCompleted: false }, selectedTag);
+      setTaskTitle("");
+      setSelectedTag({});
+      closeModal();
+    } else {
+      Alert.alert("Please add a new task.");
+    }
+  };
+
+  const getTags = async () => {
+    try {
+      const tags = await db.sql("SELECT * FROM tags");
+      setTagsList(tags);
+    } catch (error) {
+      console.error("Error getting tags", error);
+    }
+  };
+
+  useEffect(() => {
+    getTags();
+  }, []);
+
+  return (
+    <Modal
+      style={styles.modalContainer}
+      visible={modalVisible}
+      onDismiss={closeModal}
+    >
+      <View>
+        <View style={styles.newTaskBox}>
+          <TextInput
+            mode="flat"
+            style={[
+              styles.textInput,
+              Platform.OS === "web" && {
+                boxShadow: "none",
+                border: "none",
+                outline: "none",
+              },
+            ]}
+            contentStyle={styles.textInputContent}
+            underlineColor="transparent"
+            activeUnderlineColor="#6BA2EA"
+            value={taskTitle}
+            onChangeText={setTaskTitle}
+            label="Enter a new task"
+            keyboardType="default"
+          />
+        </View>
+        <DropdownMenu tagsList={tagsList} setSelectedTag={setSelectedTag} />
+        <Button
+          style={styles.addTaskButton}
+          textColor="black"
+          onPress={handleAddTask}
+        >
+          Add task
+        </Button>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  modalContainer: {
+    flex: 1,
+    backgroundColor: "white",
+    padding: 10,
+  },
+  newTaskBox: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: 1,
+    borderColor: "lightgray",
+    backgroundColor: "#f0f5fd",
+    marginBottom: 10,
+  },
+  textInput: {
+    width: "100%",
+    backgroundColor: "transparent",
+    height: 50,
+  },
+  textInputContent: {
+    backgroundColor: "transparennt",
+    borderWidth: 0,
+    paddingLeft: 10,
+  },
+  button: {
+    height: 50,
+    width: 50,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  closeButton: {
+    alignItems: "flex-start",
+    bottom: 180,
+    left: -10,
+    zIndex: 1,
+  },
+  addTaskButton: {
+    backgroundColor: "#b2cae9",
+    marginTop: 10,
+  },
+});

react-native-to-do-app/components/DropdownMenu.js

@@ -0,0 +1,67 @@
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import RNPickerSelect from "react-native-picker-select";
+
+export default DropdownMenu = ({ tagsList, selectedTag, setSelectedTag }) => {
+  const TAGS = tagsList.map((tag) => {
+    return { label: tag.name, value: tag.name };
+  });
+
+  const getTagId = (value) => {
+    const tagId = tagsList.filter((tag) => {
+      return tag.name === value;
+    });
+    return tagId[0]?.id;
+  };
+
+  return (
+    <View style={styles.container}>
+      <RNPickerSelect
+        items={TAGS}
+        onValueChange={(value) =>
+          setSelectedTag({ id: getTagId(value), name: value })
+        }
+        placeholder={{ label: "Select a category", value: null }}
+        value={selectedTag}
+        style={pickerSelectStyles}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    borderColor: "lightgray",
+    borderWidth: 1,
+    borderRadius: 5,
+    backgroundColor: "#f0f5fd",
+    marginBottom: 10,
+  },
+});
+
+const pickerSelectStyles = StyleSheet.create({
+  inputIOS: {
+    height: 50,
+    fontSize: 16,
+    paddingVertical: 12,
+    paddingHorizontal: 10,
+    borderWidth: 1,
+    borderColor: "lightgray",
+    borderRadius: 4,
+    color: "black",
+    backgroundColor: "#f0f5fd",
+    paddingRight: 30,
+  },
+  inputAndroid: {
+    height: 50,
+    fontSize: 16,
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+    borderWidth: 1,
+    borderColor: "lightgray",
+    borderRadius: 4,
+    color: "black",
+    backgroundColor: "#f0f5fd",
+    paddingRight: 30,
+  },
+});