Skip to content
Snippets Groups Projects
Commit f3dd3e0c authored by naavi.ahmed's avatar naavi.ahmed
Browse files

Redesigned app to act as a todo list and added validation for empty tasks.

parent 9af61f94
No related branches found
No related tags found
No related merge requests found
......@@ -8,74 +8,101 @@ import {
TextInput,
TouchableOpacity,
} from 'react-native';
import Film from 'components/Film';
import Task from 'components/Task';
import Cog from 'assets/98446.svg';
import { useRouter } from 'expo-router';
import { useColorScheme } from 'nativewind';
import { StatusBar } from 'expo-status-bar';
export default function Index() {
const [film, setFilm] = useState<string>('');
const [filmEntries, setFilmEntries] = useState<Array<string>>([]);
const [filmGrey, setFilmGrey] = useState<number>(1);
type TaskItem = {
text: string;
greyedOut: boolean;
};
const [task, setTask] = useState<string>('');
const [taskEntries, setTaskEntries] = useState<TaskItem[]>([]);
const [emptyError, setEmptyError] = useState(false);
const router = useRouter();
const {colorScheme, toggleColorScheme} = useColorScheme();
const handleAddFilm = () => {
const handleAddTask = () => {
const trimmed = task.trim();
if (!trimmed) {
setEmptyError(true);
return;
}
setEmptyError(false);
Keyboard.dismiss();
setFilmEntries([...filmEntries, film]);
setFilm('');
setTaskEntries([...taskEntries, { text: trimmed, greyedOut: false}]);
setTask('');
};
const popFilm = (index: number) => {
const filmsCopy = [...filmEntries];
filmsCopy.splice(index, 1);
setFilmEntries(filmsCopy);
const popTask = (index: number) => {
const tasksCopy = [...taskEntries];
tasksCopy.splice(index, 1);
setTaskEntries(tasksCopy);
};
const watchFilm = (index: number) => {
setFilmGrey(0.2 / filmGrey);
const watchTask = (index: number) => {
setTaskEntries(prev =>
prev.map((task, i) =>
i === index ? { ...task, greyedOut: !task.greyedOut} : task
)
);
};
return (
<View className="flex-1 bg-white dark:bg-neutral-900 py-10">
<StatusBar style={colorScheme=='dark' ? 'light' : 'dark'} />
{/* Film Listing */}
{/* task Listing */}
<View className="flex-row items-center justify-between px-4 pt-4">
<Text className="text-2xl font-bold dark:text-white">Your Films</Text>
<Text className="text-2xl font-bold dark:text-white">Your tasks</Text>
<TouchableOpacity onPress={() => router.navigate('./settings')}>
<Cog width={24} height={24} fill={colorScheme=="dark" ? "#fff" : "#000"} />
</TouchableOpacity>
</View>
<View className="pt-5 px-5">
<View className="mt-8" style={{ opacity: filmGrey }}>
{filmEntries.map((film, index) => (
<TouchableOpacity key={index} onPress={() => watchFilm(index)}>
<Film text={film} />
<View className="px-5">
<View className="mt-8">
{[...taskEntries]
.map((task, i) => ({ ...task, originalIndex: i}))
.sort((a, b) => Number(a.greyedOut) - Number(b.greyedOut))
.map((task) => (
<TouchableOpacity key={task.originalIndex} onPress={() => watchTask(task.originalIndex)}>
<Task text={task.text} opacity={task.greyedOut ? 0.4 : 1} />
</TouchableOpacity>
))}
</View>
</View>
{/* Create a film entry */}
{/* Create a task entry */}
<KeyboardAvoidingView
behavior={Platform.OS === 'android' ? 'height' : 'padding'}
className="absolute bottom-4 w-full flex-row justify-between items-center px-4"
>
<View className="flex-row items-end justify-between">
<View className="flex-1">
{emptyError && (
<Text className="text-center text-red-500 mt-1 ml-3 text-sm">Cannot add empty task!</Text>
)}
<TextInput
className="py-3 px-4 dark:text-white bg-gray-200 dark:bg-neutral-600 rounded-full w-[80%]"
className="py-3 px-4 dark:text-white bg-gray-200 dark:bg-neutral-600 rounded-full w-[98%]"
placeholderTextColor={colorScheme=="dark" ? "white" : "black"}
placeholder="Create a Film"
value={film}
onChangeText={text => setFilm(text)}
placeholder="Create a Task"
value={task}
onChangeText={text => setTask(text)}
/>
</View>
<TouchableOpacity onPress={handleAddFilm}>
<TouchableOpacity onPress={handleAddTask}>
<View className="w-14 h-14 bg-gray-200 dark:bg-neutral-600 rounded-full justify-center items-center">
<Text className="text-3xl text-sky-500">+</Text>
</View>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
</View>
);
......
import React from "react";
import { View, Text, TouchableOpacity } from "react-native";
type Synopsis = {
type TaskBox = {
text: string;
opacity?: number;
};
const Film = ({ text }: Synopsis) => {
const Task = ({ text, opacity = 1 }: TaskBox) => {
return (
<View className="bg-gray-200 p-4 rounded-xl flex-row items-center justify-between mb-5">
<View className="bg-gray-200 dark:bg-neutral-600 p-4 rounded-xl flex-row items-center justify-between mb-5" style={{ opacity }}>
<View className="flex-row items-center flex-wrap">
<TouchableOpacity className="w-6 h-6 bg-sky-400 opacity-40 mr-4 rounded-sm" />
<Text className="max-w-[80%]">{text}</Text>
<Text className="dark:text-white max-w-[80%]">{text}</Text>
</View>
<View className="w-4 h-4 border-2 border-blue-500 rounded-sm" />
</View>
);
};
export default Film;
export default Task;
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment