RN Challenge - Muhammad Rayhan Ravianda

README.md

@@ -1,29 +1,35 @@
 # RN-Challenge
+
 MoneyHub is a team of fun, fast, and friendly builders. Everyone from interns to the CEO have some level of technical skill. Everyone is judged based on their creation and outcome. Not their background. Not their appearances.
 
 We welcome all kinds of builders, creators, and designers. This challenge is specifically for developers. We don't care much about your resume. If you think you can build awesome products and learn fast. This challenge is for you.
 
 This is a set of open ended challenges for you to show us your skills. Clone this repo, build an awesome app, and open a PR. The whole team will review your creation.
 
 ## Instructions
+
 ### 1. Learn
+
 - Download the [MoneyHub App](http://onelink.to/x9xxwg). Try to understand how the features are implemented. If you join the team, you'll be the one making these features!
-- Feel free to learn from any resources. [React Native Website](https://reactnative.dev), [YouTube](https://www.youtube.com/results?search_query=react+native+tutorial), etc. 
+- Feel free to learn from any resources. [React Native Website](https://reactnative.dev), [YouTube](https://www.youtube.com/results?search_query=react+native+tutorial), etc.
 - We have a udemy account you can borrow (reach out to [email protected]). This one is really good. Please reach out!
 - Understand how GitHub works. It's a standard tool in the industry. [GitHub Tutorial](https://guides.github.com/activities/hello-world/)
 
 ### 2. Build
+
 - You have 1 week to complete the challenge. We can see the commits timeline
 - Implementation (code) and design (UI/UX) will be evaluated
 
 ### 3. Show
+
 - Impress us with your skills
 - Go beyond the requirements
 - Beat the competition
 - Join us
 - Win
 
 ### Submissions
+
 - Setup your dev environment by following this ([React Native Getting started Guide](https://reactnative.dev/docs/getting-started))
 - Clone the challenge repository
 - Create a dedicated branch
@@ -34,6 +40,7 @@ This is a set of open ended challenges for you to show us your skills. Clone thi
 - Notify us. Please send an email to [email protected] [[email protected]](mailto:[email protected])
 
 ### Suggestions
+
 - Make it easy for us to try your app. Add instructions on how to run your demo. There's a section below you can fill in
 - Don't be afraid if you're still a newbie. We will judge what you built adjusted with your experience. If you're just starting out, but can learn fast. We want you :)
 - Make something fun. We love to party too! :D
@@ -42,12 +49,15 @@ This is a set of open ended challenges for you to show us your skills. Clone thi
 - Be prepared to explain your decisions and your thought process in the next interview. We're curious about how you think! :)
 
 ## Challenge
+
 Joko is a very responsible and organized person. He writes down all his to-do items in a day. And clears all the things he needs to do before the day ends
 
 Create a React Native app where Joko can keep track of the things he need to do in his day
 
 ## Requirements
+
 Your app should be able to complete these tasks:
+
 - Add a new to-do item
 - Mark a to-do item as done
 - Delete a to-do item
@@ -56,6 +66,7 @@ Your app should be able to complete these tasks:
 - Filter between completed and incomplete items
 
 ### Bonus:
+
 - Enable search for the to-do items
 - Include animations
 - Persist data using Contexts and/or Async Storage
@@ -65,4 +76,21 @@ Your app should be able to complete these tasks:
 - Somehow make this boring app fun! show some crazy pokemon animation or something :P
 
 ## How to run the demo
-(REPLACE THIS WITH YOUR INSTRUCTIONS)
+
+1. [Clone](https://github.com/ravmhmmd/RN-Challenge.git) or [download](https://github.com/ravmhmmd/RN-Challenge/archive/refs/heads/main.zip) this repository.
+2. Download Expo Go in your mobile device through Google Play Store (Android) or App Store (iOS).
+3. Run your terminal at change the directory to the repository dir.
+4. Install npm with command
+
+```bash
+npm install
+```
+
+5. Run the app with command
+
+```bash
+npm start
+```
+
+6. Scan the QR code with Expo Go (Android) or the Camera App (iOS).
+7. The app will start running in your mobile device.

components/checkbox/index.tsx

@@ -0,0 +1,21 @@
+import { Pressable } from 'react-native'
+import React from 'react'
+import { MaterialCommunityIcons } from '@expo/vector-icons'
+
+interface CheckboxProps {
+    isChecked: boolean
+    onPressed: () => void
+};
+
+const Checkbox = (props: CheckboxProps) => {
+    const {onPressed, isChecked} = props
+    const checkboxState = isChecked ? 'checkbox-marked-circle-outline' : 'checkbox-blank-circle-outline'
+
+    return (
+        <Pressable onPress={onPressed} style={{marginTop:4}}>
+            <MaterialCommunityIcons name={checkboxState} size={24} color="black" />
+        </Pressable>
+    )
+};
+
+export default Checkbox;

components/todo-item/index.tsx

@@ -0,0 +1,77 @@
+import { View, TextInput } from "react-native";
+import React, { useState, useEffect, useRef } from "react";
+import Checkbox from "../checkbox";
+import styles from "./styles";
+
+interface TodoItemProps {
+  todo: {
+    id: string;
+    content: string;
+    isDone: boolean;
+  };
+  onSubmit: () => void;
+  deleteTodo: () => void;
+  updateContent: (newdata: any, id: string) => void;
+}
+
+const TodoItem = ({
+  todo,
+  onSubmit,
+  deleteTodo,
+  updateContent,
+}: TodoItemProps) => {
+  const [content, setContent] = useState(todo.content);
+  const [isChecked, setIsChecked] = useState(todo.isDone);
+  const inputTodo = useRef(null);
+
+  const onKeyPress = ({ nativeEvent }: any) => {
+    if (nativeEvent.key === "Backspace" && content === "") {
+      deleteTodo();
+    }
+  };
+
+  useEffect(() => {
+    if (inputTodo.current) {
+      inputTodo?.current?.focus();
+    }
+  }, [inputTodo]);
+
+  useEffect(() => {
+    updateContent(
+      {
+        ...todo,
+        content: content,
+        isDone: isChecked,
+      },
+      todo.id
+    );
+  }, [content, isChecked]);
+
+  return (
+    <>
+      <View style={styles.container}>
+        <Checkbox
+          isChecked={isChecked}
+          onPressed={() => {
+            setIsChecked(!isChecked);
+          }}
+        />
+
+        <TextInput
+          multiline
+          style={styles.textContent}
+          ref={inputTodo}
+          value={content}
+          defaultValue={todo.content}
+          onChangeText={(val) => setContent(val)}
+          onSubmitEditing={onSubmit}
+          blurOnSubmit
+          onKeyPress={onKeyPress}
+        />
+      </View>
+      <View style={styles.separator} />
+    </>
+  );
+};
+
+export default TodoItem;

components/todo-item/styles.ts

@@ -0,0 +1,28 @@
+import { StyleSheet } from "react-native";
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    marginVertical: 4,
+  },
+  textContent: {
+    flex: 1,
+    color: "black",
+    fontSize: 16,
+    marginStart: 8,
+    position: "relative",
+    zIndex: 2,
+  },
+  separator: {
+    height: 1,
+    backgroundColor: "darkgrey",
+    marginStart: 32,
+    marginTop: 4,
+    alignSelf: "stretch",
+    position: "relative",
+    zIndex: 1,
+  },
+});
+
+export default styles;

firebase/config.js

@@ -0,0 +1,19 @@
+import firebase from 'firebase/compat/app'
+import 'firebase/compat/auth'
+import 'firebase/compat/firestore'
+
+const firebaseConfig = {
+  apiKey: "AIzaSyAe1Y10Tw1hASkC2yGWZDnXyY-rliIXAKk",
+  authDomain: "rn-challenge-b7649.firebaseapp.com",
+  projectId: "rn-challenge-b7649",
+  storageBucket: "rn-challenge-b7649.appspot.com",
+  messagingSenderId: "391055486470",
+  appId: "1:391055486470:web:c875e13187f9e748d91d87"
+};
+
+if (!firebase.apps.length) {
+    firebase.initializeApp(firebaseConfig)
+}
+
+export { firebase }
+

navigation/index.tsx

@@ -1,20 +1,30 @@
-import { NavigationContainer, DefaultTheme, DarkTheme } from '@react-navigation/native';
-import { createStackNavigator } from '@react-navigation/stack';
-import * as React from 'react';
-import { ColorSchemeName } from 'react-native';
-
-import NotFoundScreen from '../screens/NotFoundScreen';
-import { RootStackParamList } from '../types';
-import BottomTabNavigator from './BottomTabNavigator';
-import LinkingConfiguration from './LinkingConfiguration';
+import {
+  NavigationContainer,
+  DefaultTheme,
+  DarkTheme,
+} from "@react-navigation/native";
+import { createStackNavigator } from "@react-navigation/stack";
+import * as React from "react";
+import { ColorSchemeName } from "react-native";
+import ListScreen from "../screens/ListScreen";
+import NotFoundScreen from "../screens/NotFoundScreen";
+import TodosScreen from "../screens/TodosScreen";
+import AddListScreen from "../screens/AddListScreen";
+import { RootStackParamList } from "../types";
+import LinkingConfiguration from "./LinkingConfiguration";
 
 // If you are not familiar with React Navigation, we recommend going through the
 // "Fundamentals" guide: https://reactnavigation.org/docs/getting-started
-export default function Navigation({ colorScheme }: { colorScheme: ColorSchemeName }) {
+export default function Navigation({
+  colorScheme,
+}: {
+  colorScheme: ColorSchemeName;
+}) {
   return (
     <NavigationContainer
       linking={LinkingConfiguration}
-      theme={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
+      theme={colorScheme === "dark" ? DarkTheme : DefaultTheme}
+    >
       <RootNavigator />
     </NavigationContainer>
   );
@@ -27,8 +37,13 @@ const Stack = createStackNavigator<RootStackParamList>();
 function RootNavigator() {
   return (
     <Stack.Navigator screenOptions={{ headerShown: false }}>
-      <Stack.Screen name="Root" component={BottomTabNavigator} />
-      <Stack.Screen name="NotFound" component={NotFoundScreen} options={{ title: 'Oops!' }} />
+      {/* <Stack.Screen name="Home" component={ListScreen} /> */}
+      <Stack.Screen name="Home" component={TodosScreen} />
+      <Stack.Screen
+        name="NotFound"
+        component={NotFoundScreen}
+        options={{ title: "Oops!" }}
+      />
     </Stack.Navigator>
   );
 }