├── src ├── screens │ ├── PageCollect │ │ ├── collections.js │ │ └── formCollect.js │ ├── collection.js │ ├── Home.js │ ├── Today.js │ └── Homework.js ├── icon │ ├── laptop.png │ ├── society.png │ ├── collection.png │ └── information.png ├── config │ └── api.js └── data │ ├── Today.js │ └── Homework.js ├── assets ├── icon.png ├── favicon.png ├── splash.png └── adaptive-icon.png ├── babel.config.js ├── .expo-shared └── assets.json ├── .gitignore ├── app.json ├── package.json ├── App.js └── container.js /src/screens/PageCollect/collections.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/screens/PageCollect/formCollect.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kevinputra01/Frontend-RN/HEAD/assets/icon.png -------------------------------------------------------------------------------- /assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kevinputra01/Frontend-RN/HEAD/assets/favicon.png -------------------------------------------------------------------------------- /assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kevinputra01/Frontend-RN/HEAD/assets/splash.png -------------------------------------------------------------------------------- /src/icon/laptop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kevinputra01/Frontend-RN/HEAD/src/icon/laptop.png -------------------------------------------------------------------------------- /src/icon/society.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kevinputra01/Frontend-RN/HEAD/src/icon/society.png -------------------------------------------------------------------------------- /assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kevinputra01/Frontend-RN/HEAD/assets/adaptive-icon.png -------------------------------------------------------------------------------- /src/icon/collection.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kevinputra01/Frontend-RN/HEAD/src/icon/collection.png -------------------------------------------------------------------------------- /src/icon/information.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kevinputra01/Frontend-RN/HEAD/src/icon/information.png -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /src/config/api.js: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | 3 | export const API = axios.create({ 4 | baseURL: "http://localhost:5000/api/v1/", 5 | }); -------------------------------------------------------------------------------- /.expo-shared/assets.json: -------------------------------------------------------------------------------- 1 | { 2 | "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true, 3 | "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true 4 | } 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .expo/ 3 | dist/ 4 | npm-debug.* 5 | *.jks 6 | *.p8 7 | *.p12 8 | *.key 9 | *.mobileprovision 10 | *.orig.* 11 | web-build/ 12 | 13 | # macOS 14 | .DS_Store 15 | -------------------------------------------------------------------------------- /src/data/Today.js: -------------------------------------------------------------------------------- 1 | export const DataToday = [ 2 | { 3 | id: 1, 4 | name: "Sarapan", 5 | time: "07:00", 6 | status: false 7 | }, 8 | { 9 | id: 2, 10 | name: "Jogging", 11 | time: "07.30", 12 | status: false 13 | }, 14 | { 15 | id: 3, 16 | name: "Makan", 17 | time: "12:00", 18 | status: false 19 | }, 20 | ] -------------------------------------------------------------------------------- /src/data/Homework.js: -------------------------------------------------------------------------------- 1 | export const DataHomework = [ 2 | { 3 | id: 1, 4 | name: "Integration", 5 | date: "07:00", 6 | status: false 7 | }, 8 | { 9 | id: 2, 10 | name: "Jogging", 11 | date: "07.30", 12 | status: false 13 | }, 14 | { 15 | id: 3, 16 | name: "CRUD", 17 | date: "12:00", 18 | status: false 19 | }, 20 | ] -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "my-project", 4 | "slug": "my-project", 5 | "version": "1.0.0", 6 | "orientation": "portrait", 7 | "icon": "./assets/icon.png", 8 | "splash": { 9 | "image": "./assets/splash.png", 10 | "resizeMode": "contain", 11 | "backgroundColor": "#ffffff" 12 | }, 13 | "updates": { 14 | "fallbackToCacheTimeout": 0 15 | }, 16 | "assetBundlePatterns": [ 17 | "**/*" 18 | ], 19 | "ios": { 20 | "supportsTablet": true 21 | }, 22 | "android": { 23 | "adaptiveIcon": { 24 | "foregroundImage": "./assets/adaptive-icon.png", 25 | "backgroundColor": "#FFFFFF" 26 | } 27 | }, 28 | "web": { 29 | "favicon": "./assets/favicon.png" 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "node_modules/expo/AppEntry.js", 3 | "scripts": { 4 | "start": "expo start", 5 | "android": "expo start --android", 6 | "ios": "expo start --ios", 7 | "web": "expo start --web", 8 | "eject": "expo eject" 9 | }, 10 | "dependencies": { 11 | "@expo-google-fonts/balsamiq-sans": "^0.2.0", 12 | "@react-navigation/native": "^6.0.6", 13 | "@react-navigation/stack": "^6.0.11", 14 | "axios": "^0.24.0", 15 | "expo": "~44.0.0", 16 | "expo-app-loading": "~1.3.0", 17 | "expo-status-bar": "~1.2.0", 18 | "native-base": "^3.3.1", 19 | "react": "17.0.1", 20 | "react-dom": "17.0.1", 21 | "react-native": "0.64.3", 22 | "react-native-date-picker": "^4.1.3", 23 | "react-native-gesture-handler": "~2.1.0", 24 | "react-native-screens": "~3.10.1", 25 | "react-native-svg": "12.1.0", 26 | "react-native-web": "0.17.1" 27 | }, 28 | "devDependencies": { 29 | "@babel/core": "^7.12.9" 30 | }, 31 | "private": true 32 | } 33 | -------------------------------------------------------------------------------- /App.js: -------------------------------------------------------------------------------- 1 | import { StatusBar } from "expo-status-bar"; 2 | 3 | import { NativeBaseProvider, extendTheme } from 'native-base' 4 | 5 | import AppLoading from "expo-app-loading" 6 | 7 | import { 8 | useFonts, 9 | BalsamiqSans_400Regular, 10 | BalsamiqSans_400Regular_Italic 11 | } from '@expo-google-fonts/balsamiq-sans' 12 | import Container from "./container"; 13 | 14 | export default function App() { 15 | 16 | let [fontsLoaded] = useFonts({ 17 | BalsamiqSans_400Regular, 18 | BalsamiqSans_400Regular_Italic 19 | }) 20 | 21 | const fontConfig = { 22 | BalsamiqSans: { 23 | 400: { 24 | normal: "BalsamiqSans_400Regular", 25 | italic: "BalsamiqSans_400Regular_Italic", 26 | } 27 | } 28 | } 29 | 30 | const costumeColor = { 31 | primary: { 32 | 300: "#67e8f9", 33 | 600: "#0891b2", 34 | 900: "#164e63", 35 | } 36 | } 37 | 38 | const theme = extendTheme({ 39 | colors: costumeColor, 40 | fontConfig, 41 | fonts: { 42 | heading: "BalsamiqSans", 43 | body: "BalsamiqSans", 44 | mono: "BalsamiqSans" 45 | }, 46 | config: { initialColorMode: "dark" } 47 | }) 48 | 49 | return ( 50 | 51 | 52 | 53 | ); 54 | } -------------------------------------------------------------------------------- /src/screens/collection.js: -------------------------------------------------------------------------------- 1 | import { Box, Heading, Text, VStack, HStack, Pressable } from 'native-base' 2 | import { StyleSheet } from "react-native"; 3 | import { StatusBar } from "expo-status-bar"; 4 | import { AntDesign } from '@expo/vector-icons'; 5 | 6 | export default function Collection() { 7 | return ( 8 | 12 | 13 | Collections 14 | 15 | 16 | Pets 17 | 18 | 19 | Game 20 | 21 | 22 | 23 | 24 | Add New Collection 25 | 26 | 27 | 28 | 29 | ) 30 | } 31 | 32 | const style = StyleSheet.create({ 33 | card: { 34 | width: "100%", 35 | height: 80, 36 | borderRadius: 10, 37 | padding: 10, 38 | justifyContent: "center", 39 | alignItems: "center", 40 | marginBottom: 20, 41 | backgroundColor: "blue" 42 | } 43 | }) -------------------------------------------------------------------------------- /container.js: -------------------------------------------------------------------------------- 1 | import { NavigationContainer } from '@react-navigation/native' 2 | import { createStackNavigator } from '@react-navigation/stack' 3 | 4 | import { useTheme } from 'native-base' 5 | 6 | const Stack = createStackNavigator() 7 | 8 | import Home from './src/screens/Home' 9 | import Today from './src/screens/Today' 10 | import Homework from './src/screens/Homework' 11 | import Collection from './src/screens/collection' 12 | 13 | export default function Container(){ 14 | 15 | const theme = useTheme() 16 | 17 | return ( 18 | 19 | 27 | 31 | 35 | 39 | 43 | 44 | 45 | ) 46 | } -------------------------------------------------------------------------------- /src/screens/Home.js: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { Text, Box, Pressable, HStack, Image } from "native-base"; 3 | import { StyleSheet } from "react-native"; 4 | import { StatusBar } from "expo-status-bar"; 5 | 6 | export default function Home({ navigation }) { 7 | return ( 8 | 13 | 14 | 19 | TODO APP 20 | 21 | 22 | navigation.navigate("Activity")} style={style.buttonLong1}> 23 | Activity 24 | Today Activity 25 | 26 | navigation.navigate("Homework")} style={style.buttonShort1}> 27 | Homework 28 | Homework 29 | 30 | 31 | 32 | 33 | About us 34 | About Us 35 | 36 | navigation.navigate("Collection")} style={style.buttonLong2}> 37 | Collections 38 | Collections 39 | 40 | 41 | 42 | ); 43 | } 44 | 45 | const style = StyleSheet.create({ 46 | buttonLong1: { 47 | justifyContent: "center", 48 | alignItems: "center", 49 | width: 130, 50 | height: 200, 51 | borderRadius: 10, 52 | backgroundColor: "hotpink", 53 | }, 54 | buttonLong2: { 55 | justifyContent: "center", 56 | alignItems: "center", 57 | width: 130, 58 | height: 200, 59 | borderRadius: 10, 60 | backgroundColor: "skyblue", 61 | marginTop: -70 62 | }, 63 | buttonShort1: { 64 | justifyContent: "center", 65 | alignItems: "center", 66 | width: 130, 67 | height: 130, 68 | borderRadius: 10, 69 | backgroundColor: "orange" 70 | }, 71 | buttonShort2: { 72 | justifyContent: "center", 73 | alignItems: "center", 74 | width: 130, 75 | height: 130, 76 | borderRadius: 10, 77 | backgroundColor: "lightsteelblue" 78 | }, 79 | image: { 80 | width: 50, 81 | height: 50, 82 | marginBottom: 5 83 | } 84 | }) -------------------------------------------------------------------------------- /src/screens/Today.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import { Box, Heading, Text, VStack, Checkbox, HStack, Input, FlatList, IconButton, Icon, FormControl } from 'native-base' 3 | import { Feather } from "@expo/vector-icons" 4 | import { StyleSheet } from "react-native"; 5 | import { StatusBar } from "expo-status-bar"; 6 | import { AntDesign } from '@expo/vector-icons'; 7 | import { API } from "../config/api"; 8 | 9 | export default function Today() { 10 | const [form, setForm] = useState({ 11 | name: "", 12 | time: "", 13 | status: 0, 14 | }); 15 | 16 | const handleSubmit = async () => { 17 | try { 18 | const config = { 19 | headers: { 20 | "Content-type": "application/json", 21 | }, 22 | }; 23 | const body = JSON.stringify(form); 24 | const response = await API.post("/add-today", body, config); 25 | getAllToday(); 26 | } catch (error) { 27 | console.log(error); 28 | } 29 | }; 30 | 31 | const [activity, setActivity] = useState([]); 32 | const getAllToday = async () => { 33 | try { 34 | const response = await API.get('/today'); 35 | setActivity(response.data.data) 36 | } catch (error) { 37 | console.log(error); 38 | } 39 | }; 40 | useEffect(() => { 41 | getAllToday(); 42 | }, []); 43 | 44 | const deleteToday = async (id) => { 45 | try { 46 | await API.delete(`/today/${id}`); 47 | getAllToday(); 48 | } catch (error) { 49 | console.log(error); 50 | } 51 | }; 52 | 53 | const handleStatus = async (id) => { 54 | try { 55 | const config = { 56 | headers: { 57 | "Content-type": "application/json", 58 | }, 59 | }; 60 | 61 | let body; 62 | activity.map((li) => { 63 | if (li.id == id) { 64 | if (Boolean(li.status)) { 65 | body = JSON.stringify({ status: false }); 66 | } else { 67 | body = JSON.stringify({ status: true }); 68 | } 69 | } 70 | }); 71 | const response = await API.patch(`/today/${id}`, body, config); 72 | // console.log(response.data.data); 73 | getAllToday(); 74 | } catch (error) { 75 | console.log(error); 76 | } 77 | }; 78 | 79 | return ( 80 | 84 | 85 | Today Activity 86 | 87 | 88 | 89 | setForm({ ...form, name })} value={form.name} placeholder="Name Activity" /> 90 | setForm({ ...form, time })} value={form.time} placeholder="Time (hh:mm)" /> 91 | 92 | 97 | } 98 | onPress={() => handleSubmit()} 99 | /> 100 | 101 | 102 | 103 | ( 106 | 107 | 108 | handleStatus(item.id)} /> 109 | 110 | {item.name} 111 | {item.time} 112 | 113 | deleteToday(item.id)} name="minus" size={24} color="black" /> 114 | 115 | 116 | )} 117 | keyExtractor={(item) => item.id.toString()} 118 | /> 119 | 120 | 121 | ) 122 | } 123 | 124 | const style = StyleSheet.create({ 125 | card: { 126 | width: "100%", 127 | height: 80, 128 | borderRadius: 10, 129 | padding: 10, 130 | justifyContent: "center", 131 | marginBottom: 20 132 | } 133 | }) -------------------------------------------------------------------------------- /src/screens/Homework.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import { Box, Heading, Text, VStack, Checkbox, HStack, Input, FlatList, IconButton, Icon, FormControl } from 'native-base' 3 | import { Feather } from "@expo/vector-icons" 4 | import { StyleSheet } from "react-native"; 5 | import { StatusBar } from "expo-status-bar"; 6 | import { AntDesign } from '@expo/vector-icons'; 7 | import { API } from "../config/api"; 8 | 9 | export default function Homework() { 10 | const [form, setForm] = useState({ 11 | name: "", 12 | date: "", 13 | status: 0, 14 | }); 15 | 16 | const handleSubmit = async () => { 17 | try { 18 | const config = { 19 | headers: { 20 | "Content-type": "application/json", 21 | }, 22 | }; 23 | const body = JSON.stringify(form); 24 | const response = await API.post("/add-homework", body, config); 25 | getAllHomework(); 26 | } catch (error) { 27 | console.log(error); 28 | } 29 | }; 30 | 31 | const [homework, setHomework] = useState([]); 32 | const getAllHomework = async () => { 33 | try { 34 | const response = await API.get('/homework'); 35 | setHomework(response.data.data) 36 | } catch (error) { 37 | console.log(error); 38 | } 39 | }; 40 | useEffect(() => { 41 | getAllHomework(); 42 | }, []); 43 | 44 | const deleteHomework = async (id) => { 45 | try { 46 | await API.delete(`/homework/${id}`); 47 | getAllHomework(); 48 | } catch (error) { 49 | console.log(error); 50 | } 51 | }; 52 | 53 | const handleStatus = async (id) => { 54 | try { 55 | const config = { 56 | headers: { 57 | "Content-type": "application/json", 58 | }, 59 | }; 60 | 61 | let body; 62 | homework.map((li) => { 63 | if (li.id == id) { 64 | if (Boolean(li.status)) { 65 | body = JSON.stringify({ status: false }); 66 | } else { 67 | body = JSON.stringify({ status: true }); 68 | } 69 | } 70 | }); 71 | const response = await API.patch(`/homework/${id}`, body, config); 72 | // console.log(response.data.data); 73 | getAllHomework(); 74 | } catch (error) { 75 | console.log(error); 76 | } 77 | }; 78 | 79 | return ( 80 | 84 | 85 | Homework 86 | 87 | 88 | 89 | setForm({ ...form, name })} value={form.name} placeholder="Name Homework" /> 90 | setForm({ ...form, date })} value={form.date} placeholder="Date (20 june 2021)" /> 91 | 92 | 97 | } 98 | onPress={() => handleSubmit()} 99 | /> 100 | 101 | 102 | 103 | ( 106 | 107 | 108 | handleStatus(item.id)} /> 109 | 110 | {item.name} 111 | Deadline in {item.date} 112 | 113 | deleteHomework(item.id)} name="minus" size={24} color="black" /> 114 | 115 | 116 | )} 117 | keyExtractor={(item) => item.id.toString()} 118 | /> 119 | 120 | 121 | ) 122 | } 123 | 124 | const style = StyleSheet.create({ 125 | card: { 126 | width: "100%", 127 | height: 80, 128 | borderRadius: 10, 129 | padding: 10, 130 | justifyContent: "center", 131 | marginBottom: 20 132 | } 133 | }) --------------------------------------------------------------------------------