sidski/minecraft-tools
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: Persistent storage for todo + font fix

Browse source 
Signed-off-by: SindreKjelsrud <sindre@kjelsrud.dev>
This commit is contained in:
Sid 2025-07-05 17:56:37 +02:00
parent 2764f555de
commit 43aa945fc9
Signed by: sidski
GPG key ID: D2BBDF3EDE6BA9A6
2 changed files with 143 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/styles.ts
View file

@ -221,6 +221,7 @@ export const styles = StyleSheet.create({
flex: 1,
fontSize: 18,
color: "#333",
fontFamily: "Minecraft",
},
removeTodoButton: {
backgroundColor: "#FF6347",

226
app/todo.tsx
View file

@ -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>
);
}