RN-Challange - Achmad Nadhim Chafidz

.expo-shared/README.md

@@ -0,0 +1,11 @@
+> Why do I have a folder named ".expo-shared" in my project?
+
+The ".expo-shared" folder is created when running commands that produce state that is intended to be shared with all developers on the project. For example, "npx expo-optimize".
+
+> What does the "assets.json" file contain?
+
+The "assets.json" file describes the assets that have been optimized through "expo-optimize" and do not need to be processed again.
+
+> Should I commit the ".expo-shared" folder?
+
+Yes, you should share the ".expo-shared" folder with your collaborators.

.expo-shared/assets.json

@@ -1,6 +1 @@
-{
-  "e997a5256149a4b76e6bfd6cbf519c5e5a0f1d278a3d8fa1253022b03c90473b": true,
-  "af683c96e0ffd2cf81287651c9433fa44debc1220ca7cb431fe482747f34a505": true,
-  "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
-  "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
-}
+{}

App.tsx

@@ -1,6 +1,7 @@
 import { StatusBar } from 'expo-status-bar';
-import React from 'react';
+import { StyleSheet } from 'react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { Text, View } from './components/Themed';
 
 import useCachedResources from './hooks/useCachedResources';
 import useColorScheme from './hooks/useColorScheme';
@@ -11,13 +12,29 @@ export default function App() {
   const colorScheme = useColorScheme();
 
   if (!isLoadingComplete) {
-    return null;
-  } else {
     return (
       <SafeAreaProvider>
-        <Navigation colorScheme={colorScheme} />
-        <StatusBar />
+        <View style={Styles.container}>
+          <Text>
+            Splash
+          </Text>
+        </View>
       </SafeAreaProvider>
     );
+  } else {
+    return (
+        <SafeAreaProvider>
+          <Navigation colorScheme={colorScheme} />
+          <StatusBar />
+        </SafeAreaProvider>
+    );
   }
 }
+
+const Styles = StyleSheet.create({
+  container:{
+    flex:1,
+    justifyContent: "center",
+    alignItems: "center"
+  }
+})

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,17 @@ 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. Use Expo to Run the App, you can scan the qr code or use this link exp://exp.host/@nadhimc/RN-Challenge
+   ![alt text](https://github.com/nadhimc/RN-Challenge/blob/main/assets/qrcode.png?raw=true)
+2. You can add, edit, delete task in the app
+3. You can view the task by calendar date
+4. Login and Register with email address to save the task ( i use firebase auth and firestore )
+5. Enjoy the app
+
+# Things that need improve
+
+1. The sync is not perfect, i think it will be a problem if we login in more one devices.
+2. The UI is not really good.
+3. Clean the code, i think my code is not really good
+4. I did not style for the dark mode

app.json

@@ -29,6 +29,8 @@
     },
     "web": {
       "favicon": "./assets/images/favicon.png"
-    }
+    },
+    "description": "",
+    "githubUrl": "https://github.com/nadhimc/RN-Challenge"
   }
 }

components/AddTaskModal.tsx

@@ -0,0 +1,167 @@
+import { FontAwesome } from "@expo/vector-icons";
+import { useEffect, useState } from "react";
+import { Modal, Pressable, TextInput, TouchableOpacity } from "react-native";
+import tailwind from "tailwind-rn";
+import { Text, View } from "./Themed";
+import DateTimePicker from '@react-native-community/datetimepicker';
+import Months from "../constants/Months";
+import RandomString from "../constants/RandomString";
+import addTasks from "../functions/addTasks";
+
+export default function AddTaskModal({defaultdate,updateTrigger}:any){
+
+    const [visible, setVisible] = useState(false)
+    const [datePicker, setDatePicker] = useState<any>("")
+    const month = Months()
+    const [loading, setLoading] = useState(false)
+    const [data, setData] = useState({
+        id: RandomString(5)+Date.now(),
+        title: "",
+        time: defaultdate?defaultdate:Date.now(),
+        finish: false,
+        note:"",
+        created: Date.now()
+    })
+
+    useEffect(() => {
+        setData({
+            id: RandomString(5)+Date.now(),
+            title: "",
+            time: defaultdate?defaultdate:Date.now(),
+            finish: false,
+            note:"",
+            created: Date.now()
+        })
+        updateTrigger()
+    }, [visible])
+
+    const addData = async ()=>{
+        if(!loading){
+            setLoading(true)
+            await addTasks(data)
+            setLoading(false)
+            setVisible(false)
+        }
+    }
+
+    const closeFunc = ()=>{
+        setVisible(false)
+    }
+
+    const datechange = (e: any,s: any)=>{
+        const currentDate = s || new Date(data?.time);
+        let beforeedit = new Date(data.time)
+        let editedtime = new Date(currentDate)
+        if(datePicker.toLowerCase()==="time"){
+            setData((prev:any)=>{
+                return({
+                    ...prev,
+                    time: new Date(
+                        beforeedit.getFullYear(),
+                        beforeedit.getMonth(),
+                        beforeedit.getDate(),
+                        editedtime.getHours(),
+                        editedtime.getMinutes()
+                    ).getTime()
+                })
+            })
+        }else{
+            setData((prev:any)=>{
+                return({
+                    ...prev,
+                    time: new Date(
+                        editedtime.getFullYear(),
+                        editedtime.getMonth(),
+                        editedtime.getDate(),
+                        beforeedit.getHours(),
+                        beforeedit.getMinutes()
+                    ).getTime()
+                })
+            })
+        }
+        setDatePicker("")
+    }
+
+    return(
+        <>
+            <View>
+                {datePicker!=="" && (
+                <DateTimePicker
+                testID="dateTimePicker"
+                value={new Date(data?.time)}
+                mode={datePicker}
+                is24Hour={true}
+                display="default"
+                onChange={datechange}
+                />
+            )}
+                <Modal
+                        animationType="slide"
+                        visible={visible}
+                        transparent={true}
+                        onRequestClose={()=>{closeFunc()}}
+                    >
+                        <Pressable onPress={()=>closeFunc()} style={{backgroundColor:"rgba(0,0,0,.1)",...tailwind("flex-1")}}>
+                        </Pressable>
+                        <View style={{backgroundColor:"rgba(0,0,0,.1)",...tailwind("h-3/5 relative")}}>
+                            <View style={{borderTopLeftRadius:30,borderTopRightRadius:30,borderColor:"rgba(0,0,0,.2)",...tailwind("flex-1 border bg-white p-5")}}>
+                                <View style={tailwind("flex-row justify-between items-center")}>
+                                    <View style={tailwind("flex-1")}>
+                                        <TextInput placeholder="Task" onChangeText={e=>setData((prev:any)=>{return ({...prev,title:e})})} value={data?data["title"]:""} style={tailwind("border-b text-2xl w-full")} />
+                                        <Pressable style={tailwind("mt-1")} onPress={()=>{setDatePicker("date")}}>
+                                            <Text>
+                                            {data?
+                                            `${
+                                            new Date(data?.time).getDate()>9?new Date(data?.time).getDate():"0"+new Date(data?.time).getDate()
+                                            } ${month[new Date(data?.time).getMonth()]} ${new Date(data?.time).getFullYear()}`
+                                            :""}
+                                            </Text>
+                                        </Pressable>
+                                    </View>
+                                    <View style={tailwind("pr-5 pl-2")}>
+                                        <Pressable onPress={()=>{setDatePicker("time")}} style={tailwind("text-base")}>
+                                            <Text>
+                                            {data?
+                                            `${
+                                            new Date(data?data["time"]:"12/12/2000").getHours()>9?new Date(data?data["time"]:"12/12/2000").getHours():"0"+new Date(data?data["time"]:"12/12/2000").getHours()
+                                            }:${new Date(data?data["time"]:"12/12/2000").getMinutes()>9?new Date(data?data["time"]:"12/12/2000").getMinutes():"0"+new Date(data?data["time"]:"12/12/2000").getMinutes()
+                                            }`
+                                            :""}
+                                            </Text>
+                                        </Pressable>
+                                    </View>
+                                </View>
+                                <View style={tailwind("mt-5 flex-1")}>
+                                    <TextInput
+                                        placeholder="Note"
+                                        style={tailwind("border px-2 py-0")}
+                                        value={data?.note}
+                                        multiline={true}
+                                        onChangeText={(e:any)=>{
+                                            setData((prev:any)=>{
+                                                return({
+                                                    ...prev,
+                                                    note:e
+                                                })
+                                            })
+                                        }}
+                                    />
+                                </View>
+                                <View style={tailwind("flex-row items-center justify-around")}>
+                                    <TouchableOpacity onPress={()=>{closeFunc()}} style={tailwind("bg-red-400 h-10 w-10 flex items-center justify-center rounded-full")}>
+                                        <FontAwesome size={22} color={"white"} name="times" />
+                                    </TouchableOpacity>
+                                    <TouchableOpacity onPress={()=>addData()} style={tailwind(`bg-blue-400 h-10 w-10 flex items-center justify-center rounded-full ${loading?"opacity-40":""}`)}>
+                                        <FontAwesome size={22} color={"white"} name="check" />
+                                    </TouchableOpacity>
+                                </View>
+                            </View>
+                        </View>
+                    </Modal>
+                </View>  
+            <TouchableOpacity onPress={()=>setVisible(true)} style={tailwind("absolute right-5 bottom-2 z-10")}>
+                <FontAwesome name="plus-square" size={40} color={"green"} />
+            </TouchableOpacity>
+        </>
+    )
+}

components/EditScreenInfo.tsx

@@ -1,5 +1,4 @@
 import * as WebBrowser from 'expo-web-browser';
-import React from 'react';
 import { StyleSheet, TouchableOpacity } from 'react-native';
 
 import Colors from '../constants/Colors';
@@ -50,41 +49,13 @@ function handleHelpPress() {
 }
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-  },
-  developmentModeText: {
-    marginBottom: 20,
-    fontSize: 14,
-    lineHeight: 19,
-    textAlign: 'center',
-  },
-  contentContainer: {
-    paddingTop: 30,
-  },
-  welcomeContainer: {
-    alignItems: 'center',
-    marginTop: 10,
-    marginBottom: 20,
-  },
-  welcomeImage: {
-    width: 100,
-    height: 80,
-    resizeMode: 'contain',
-    marginTop: 3,
-    marginLeft: -10,
-  },
   getStartedContainer: {
     alignItems: 'center',
     marginHorizontal: 50,
   },
   homeScreenFilename: {
     marginVertical: 7,
   },
-  codeHighlightText: {
-    color: 'rgba(96,100,109, 0.8)',
-  },
   codeHighlightContainer: {
     borderRadius: 3,
     paddingHorizontal: 4,

components/StyledText.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 import { Text, TextProps } from './Themed';
 
 export function MonoText(props: TextProps) {