RN-Challenge Intership_ Irfan Muhammad Guvian

App.tsx

@@ -5,11 +5,11 @@ import { SafeAreaProvider } from 'react-native-safe-area-context';
 import useCachedResources from './hooks/useCachedResources';
 import useColorScheme from './hooks/useColorScheme';
 import Navigation from './navigation';
+import firebase from 'firebase';
 
 export default function App() {
   const isLoadingComplete = useCachedResources();
   const colorScheme = useColorScheme();
-
   if (!isLoadingComplete) {
     return null;
   } else {

README.md

@@ -1,27 +1,33 @@
 # RN-Challenge
+
 WellMart 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
-- 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 team@wellmart.id). This one is really good. Please reach out!
 
 ### 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
@@ -32,6 +38,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 team@wellmart.id
 
 ### 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
@@ -40,12 +47,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
@@ -54,6 +64,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
@@ -63,4 +74,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)
+
+### To run apps , if you have emulator linking to your machine :
+
+`npm run android`
+
+### if you have emulator but it dont link with your vscode :
+
+1. run your expo first:
+   `npm start` or `expo start`
+2. and run your emulator from seperate cmd / terminal
+3. then, type `a` in expo terminal or just simply click `run in android/emulator` in metro web page.
+
+### if you dont have emulator :
+
+1.  run your expo first:
+    `npm start` or `expo start`
+2.  then, install expo app in your android / ios phone,
+3.  if all set, just open expo app in your device and scan QR CODE in Expo / Metro builder web page.

app.json

@@ -25,7 +25,8 @@
       "adaptiveIcon": {
         "foregroundImage": "./assets/images/adaptive-icon.png",
         "backgroundColor": "#FFFFFF"
-      }
+      },
+      "package": "com.watchuwan"
     },
     "web": {
       "favicon": "./assets/images/favicon.png"

components/Activity.tsx

@@ -0,0 +1,195 @@
+import React, { useState } from "react";
+import {
+  View,
+  Text,
+  StyleSheet,
+  Button,
+  Alert,
+  TextInput,
+  Modal,
+  Pressable,
+} from "react-native";
+import { Entypo, AntDesign } from "@expo/vector-icons";
+export function Activity(props: any) {
+  const [modalVisible, setModalVisible] = useState(false);
+  const [textEdit, setTextEdit] = useState("");
+  const handlerEdit = () => {
+    setModalVisible(!modalVisible);
+  };
+
+  if (props.types === "process") {
+    return (
+      <View style={styles.container}>
+        <Modal
+          animationType="slide"
+          transparent={true}
+          visible={modalVisible}
+          onRequestClose={() => {
+            Alert.alert("Modal has been closed.");
+            setModalVisible(!modalVisible);
+          }}
+        >
+          <View style={styles.centeredView}>
+            <View style={styles.modalView}>
+              <Text style={styles.titleHeader}>Update Activity</Text>
+              <TextInput
+                style={styles.input}
+                onChangeText={(text) => props.updateState(text)}
+              />
+              <View style={styles.buttonContainer}>
+                <Pressable
+                  style={[styles.button, styles.buttonClose]}
+                  onPress={() => setModalVisible(!modalVisible)}
+                >
+                  <Text style={styles.textStyle}>Cancel</Text>
+                </Pressable>
+                <Pressable
+                  style={[styles.button, styles.buttonClose]}
+                  onPress={props.updateFunc}
+                >
+                  <Text style={styles.textStyle}>Update</Text>
+                </Pressable>
+              </View>
+            </View>
+          </View>
+        </Modal>
+
+        <Text style={styles.titleActivity}>{props.children}</Text>
+        <View style={styles.icons}>
+          <AntDesign
+            name="checkcircle"
+            size={24}
+            color="#fff"
+            onPress={props.checkFunc}
+          />
+          <AntDesign
+            name="edit"
+            size={24}
+            color="#fff"
+            onPress={() => handlerEdit()}
+          />
+          <Entypo
+            name="circle-with-cross"
+            size={24}
+            color="#fff"
+            onPress={props.deleteFunc}
+          />
+        </View>
+      </View>
+    );
+  } else {
+    return (
+      <View style={styles.container2}>
+        <Text
+          style={{
+            flex: 1,
+            marginLeft: 30,
+            fontSize: 20,
+            fontWeight: "bold",
+            flexGrow: 2.5,
+            color: "#fff",
+          }}
+        >
+          {props.children}
+        </Text>
+        <View style={styles.icons}>
+          <AntDesign name="checkcircle" size={24} color="#fff" />
+        </View>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    flexWrap: "wrap",
+    alignContent: "center",
+    backgroundColor: "#cf1f2d",
+    height: 80,
+    marginBottom: 5,
+  },
+  titleHeader: {
+    fontSize: 20,
+    marginBottom: 10,
+    fontWeight: "bold",
+    textAlign: "center",
+  },
+  input: {
+    width: "80%",
+    borderWidth: 2,
+    borderRadius: 14,
+    paddingLeft: 20,
+    marginBottom: 10,
+    borderColor: "black",
+  },
+  container2: {
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    alignContent: "center",
+    backgroundColor: "green",
+    height: 80,
+    marginBottom: 5,
+  },
+  icons: {
+    flex: 2,
+    justifyContent: "space-evenly",
+    alignItems: "center",
+    flexDirection: "row",
+  },
+  titleActivity: {
+    flex: 1,
+    marginLeft: 30,
+    fontSize: 20,
+    fontWeight: "bold",
+    flexGrow: 2.5,
+    color: "#fff",
+  },
+  centeredView: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    marginTop: 22,
+  },
+  modalView: {
+    width: "80%",
+    margin: 20,
+    backgroundColor: "white",
+    borderRadius: 20,
+    padding: 35,
+    alignItems: "center",
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+  button: {
+    borderRadius: 20,
+    padding: 10,
+    elevation: 5,
+  },
+  buttonClose: {
+    backgroundColor: "#2196F3",
+  },
+  modalText: {
+    marginBottom: 15,
+    textAlign: "center",
+  },
+  textStyle: {
+    color: "white",
+    fontWeight: "bold",
+    textAlign: "center",
+  },
+  buttonContainer: {
+    width: "100%",
+    flexDirection: "row",
+    justifyContent: "space-around",
+  },
+});

components/EditScreenInfo.tsx

@@ -14,7 +14,7 @@ export default function EditScreenInfo({ path }: { path: string }) {
           style={styles.getStartedText}
           lightColor="rgba(0,0,0,0.8)"
           darkColor="rgba(255,255,255,0.8)">
-          Open up the code for this screen:
+          Open up the code for thasdjasodl
         </Text>
 
         <View

components/Filter.tsx

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { ScrollView } from "react-native";
+import { Activity } from "./Activity";
+import Utils from "../constants/Utils";
+export default function Filter(props: any) {
+  if (props.filter.isDone) {
+    return (
+      <ScrollView>
+        {props.data.map((item: any) => {
+          if (props.list[item].isDone) {
+            return (
+              <Activity key={item} types="success">
+                {props.list[item].activity}
+              </Activity>
+            );
+          }
+        })}
+      </ScrollView>
+    );
+  } else {
+    return (
+      <ScrollView>
+        {props.data.map((item: any) => {
+          if (!props.list[item].isDone) {
+            return (
+              <Activity
+                key={item}
+                checkFunc={() => Utils.UpdateCheckItems(item, props.list)}
+                types="process"
+                updateState={props.setUpdateActivity}
+                updateFunc={() =>
+                  Utils.UpdateItems(item, props.list, props.updateActivity)
+                }
+                deleteFunc={() => Utils.DeleteItems(item, props.list)}
+              >
+                {props.list[item].activity}
+              </Activity>
+            );
+          }
+        })}
+      </ScrollView>
+    );
+  }
+}