From 43aa945fc907b1f575002e55f15ff30e1b6d4263 Mon Sep 17 00:00:00 2001
From: SindreKjelsrud <sindre@kjelsrud.dev>
Date: Sat, 5 Jul 2025 17:56:37 +0200
Subject: [PATCH] fix: Persistent storage for todo + font fix

Signed-off-by: SindreKjelsrud <sindre@kjelsrud.dev>
---
 app/styles.ts |   1 +
 app/todo.tsx  | 226 +++++++++++++++++++++++++++++++-------------------
 2 files changed, 143 insertions(+), 84 deletions(-)

diff --git a/app/styles.ts b/app/styles.ts
index 721fdb1..7f7357d 100644
--- a/app/styles.ts
+++ b/app/styles.ts
@@ -221,6 +221,7 @@ export const styles = StyleSheet.create({
     flex: 1,
     fontSize: 18,
     color: "#333",
+    fontFamily: "Minecraft",
   },
   removeTodoButton: {
     backgroundColor: "#FF6347",
diff --git a/app/todo.tsx b/app/todo.tsx
index e0a8eae..09e11b3 100644
--- a/app/todo.tsx
+++ b/app/todo.tsx
@@ -1,14 +1,16 @@
+import AsyncStorage from "@react-native-async-storage/async-storage";
 import { useRouter } from "expo-router";
-import { useState } from "react";
+import React, { useEffect, useState } from "react";
 import {
-    ImageBackground,
-    KeyboardAvoidingView,
-    Platform,
-    ScrollView,
-    Text,
-    TextInput,
-    TouchableOpacity,
-    View
+  Alert,
+  ImageBackground,
+  KeyboardAvoidingView,
+  Platform,
+  ScrollView,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View
 } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { styles } from "./styles";
@@ -16,86 +18,142 @@ import { styles } from "./styles";
 const converterBgImage = require("../assets/images/todo.png");
 
 export default function CoordinateConverter() {
-  const router = useRouter();
-  const [todos, setTodos] = useState<string[]>([]);
-  const [newTodo, setNewTodo] = useState<string>("");
+    const router = useRouter();
+    const [todos, setTodos] = useState<string[]>([]);
+    const [newTodo, setNewTodo] = useState<string>("");
 
-  const addTodo = () => {
-    if (newTodo.trim().length > 0) {
-      setTodos([...todos, newTodo.trim()]);
-      setNewTodo("");
-    }
-  };
+    // Define a unique key for AsyncStorage
+    const STORAGE_KEY = "@my_todo_list";
 
-  const removeTodo = (index: number) => {
-    const updatedTodos = todos.filter((_, i) => i !== index);
-    setTodos(updatedTodos);
-  };
+    // --- Persistence Logic ---
+    useEffect(() => {
+        loadTodos();
+    }, []);
+    useEffect(() => {
+        saveTodos();
+    }, [todos]);
 
-  return (
-    <View style={styles.converterScreenRoot}>
-      <ImageBackground
-        source={converterBgImage}
-        style={styles.converterBackgroundImage}
-        resizeMode="cover"
-      >
-        <View style={styles.converterBackgroundOverlay} />
-      </ImageBackground>
+    // Async function to load todos from AsyncStorage
+    const loadTodos = async () => {
+        try {
+            const jsonValue = await AsyncStorage.getItem(STORAGE_KEY);
+            if (jsonValue != null) {
+                const parsedTodos = JSON.parse(jsonValue);
+                if (Array.isArray(parsedTodos)) {
+                    setTodos(parsedTodos);
+                } else {
+                    console.warn("Loaded data is not an array, initializing empty todo list.");
+                    setTodos([]);
+                }
+            }
+        } catch (e) {
+            console.error("Failed to load todos:", e);
+            Alert.alert("Error", "Failed to load your todo list.");
+        }
+    };
 
-      <SafeAreaView style={styles.converterContentWrapper}>
-        <KeyboardAvoidingView
-          style={styles.converterContainer}
-          behavior={Platform.OS === "ios" ? "padding" : "height"}
-        >
-          <ScrollView contentContainerStyle={styles.converterScrollContent}>
-            {/* Custom Back Button */}
-            <TouchableOpacity
-              onPress={() => router.back()}
-              style={styles.backButton}
+    // Async function to save todos to AsyncStorage
+    const saveTodos = async () => {
+        try {
+            const jsonValue = JSON.stringify(todos);
+            await AsyncStorage.setItem(STORAGE_KEY, jsonValue);
+        } catch (e) {
+            console.error("Failed to save todos:", e);
+            Alert.alert("Error", "Failed to save your todo list.");
+        }
+    };
+
+    const addTodo = () => {
+        if (newTodo.trim().length > 0) {
+            setTodos((prevTodos) => [...prevTodos, newTodo.trim()]);
+            setNewTodo("");
+        }
+    };
+
+    const removeTodo = (index: number) => {
+        const updatedTodos = todos.filter((_, i) => i !== index);
+        setTodos(updatedTodos);
+    };
+
+    return (
+        <View style={styles.converterScreenRoot}>
+            <ImageBackground
+                source={converterBgImage}
+                style={styles.converterBackgroundImage}
+                resizeMode="cover"
             >
-              <Text style={styles.backButtonText}>← Go Back</Text>
-            </TouchableOpacity>
+                <View style={styles.converterBackgroundOverlay} />
+            </ImageBackground>
 
-            <Text style={styles.converterTitle}>Todo List</Text>
-
-            {/* Todo Input Section */}
-            <View style={styles.todoInputContainer}>
-              <TextInput
-                style={styles.todoInputField}
-                placeholder="Add a new todo..."
-                placeholderTextColor="#666"
-                value={newTodo}
-                onChangeText={setNewTodo}
-                onSubmitEditing={addTodo}
-              />
-              <TouchableOpacity onPress={addTodo} style={styles.addTodoButton}>
-                <Text style={styles.addTodoButtonText}>Add</Text>
-              </TouchableOpacity>
-            </View>
-
-            {/* Todo List Display */}
-            <View style={styles.todoListContainer}>
-              {todos.length === 0 ? (
-                <Text style={styles.placeholderText}>
-                  Your todo list is empty. Add some tasks!
-                </Text>
-              ) : (
-                todos.map((todo, index) => (
-                  <View key={index} style={styles.todoItem}>
-                    <Text style={styles.todoText}>{todo}</Text>
-                    <TouchableOpacity
-                      onPress={() => removeTodo(index)}
-                      style={styles.removeTodoButton}
+            <SafeAreaView style={styles.converterContentWrapper}>
+                <KeyboardAvoidingView
+                    style={styles.converterContainer}
+                    behavior={Platform.OS === "ios" ? "padding" : "height"}
+                >
+                    <ScrollView
+                        contentContainerStyle={styles.converterScrollContent}
                     >
-                      <Text style={styles.removeTodoButtonText}>X</Text>
-                    </TouchableOpacity>
-                  </View>
-                ))
-              )}
-            </View>
-          </ScrollView>
-        </KeyboardAvoidingView>
-      </SafeAreaView>
-    </View>
-  );
+                        {/* Custom Back Button */}
+                        <TouchableOpacity
+                            onPress={() => router.back()}
+                            style={styles.backButton}
+                        >
+                            <Text style={styles.backButtonText}>
+                                ← Go Back
+                            </Text>
+                        </TouchableOpacity>
+
+                        <Text style={styles.converterTitle}>Todo List</Text>
+
+                        {/* Todo Input Section */}
+                        <View style={styles.todoInputContainer}>
+                            <TextInput
+                                style={styles.todoInputField}
+                                placeholder="Add a new todo..."
+                                placeholderTextColor="#666"
+                                value={newTodo}
+                                onChangeText={setNewTodo}
+                                onSubmitEditing={addTodo}
+                            />
+                            <TouchableOpacity
+                                onPress={addTodo}
+                                style={styles.addTodoButton}
+                            >
+                                <Text style={styles.addTodoButtonText}>
+                                    Add
+                                </Text>
+                            </TouchableOpacity>
+                        </View>
+
+                        {/* Todo List Display */}
+                        <View style={styles.todoListContainer}>
+                            {todos.length === 0 ? (
+                                <Text style={styles.placeholderText}>
+                                    Your todo list is empty. Add some tasks!
+                                </Text>
+                            ) : (
+                                todos.map((todo, index) => (
+                                    <View key={index} style={styles.todoItem}>
+                                        <Text style={styles.todoText}>
+                                            {todo}
+                                        </Text>
+                                        <TouchableOpacity
+                                            onPress={() => removeTodo(index)}
+                                            style={styles.removeTodoButton}
+                                        >
+                                            <Text
+                                                style={styles.removeTodoButtonText}
+                                            >
+                                                X
+                                            </Text>
+                                        </TouchableOpacity>
+                                    </View>
+                                ))
+                            )}
+                        </View>
+                    </ScrollView>
+                </KeyboardAvoidingView>
+            </SafeAreaView>
+        </View>
+    );
 }
\ No newline at end of file