├── .expo-shared
    └── assets.json
├── .gitignore
├── App.js
├── app.json
├── assets
    ├── favicon.png
    ├── icon.png
    └── splash.png
├── babel.config.js
├── package-lock.json
├── package.json
├── src
    ├── CreateNoteComponent.js
    ├── LoginScreenComponent.js
    ├── NotesScreenComponent.js
    └── SingleNoteSummaryComponent.js
└── yarn.lock


/.expo-shared/assets.json:
--------------------------------------------------------------------------------
1 | {
2 |   "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
3 |   "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
4 | }
5 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules/**/*
 2 | .expo/*
 3 | npm-debug.*
 4 | *.jks
 5 | *.p8
 6 | *.p12
 7 | *.key
 8 | *.mobileprovision
 9 | *.orig.*
10 | web-build/
11 | 
12 | # macOS
13 | .DS_Store
14 | 


--------------------------------------------------------------------------------
/App.js:
--------------------------------------------------------------------------------
 1 | import { StatusBar } from 'expo-status-bar';
 2 | import React, { useState } from 'react';
 3 | import { StyleSheet, Text, View } from 'react-native';
 4 | import NotesScreenComponent from './src/NotesScreenComponent';
 5 | import firebase from 'firebase';
 6 | import LoginScreenComponent from './src/LoginScreenComponent';
 7 | 
 8 | export default function App() {
 9 |   const [userLoggedIn, setUserLoggedIn] = useState(false)
10 |   
11 |   if(firebase.apps.length === 0){
12 |     var firebaseConfig = {
13 |       apiKey: "AIzaSyBkAskm-vbTlinLz742uDzLA7bAczCMPes",
14 |       authDomain: "rn-masterclass-d5.firebaseapp.com",
15 |       databaseURL: "https://rn-masterclass-d5.firebaseio.com",
16 |       projectId: "rn-masterclass-d5",
17 |       storageBucket: "rn-masterclass-d5.appspot.com",
18 |       messagingSenderId: "986531550204",
19 |       appId: "1:986531550204:web:24c9dfb7410fda01471879"
20 |     };
21 |     // Initialize Firebase
22 |     firebase.initializeApp(firebaseConfig);
23 |   }
24 | 
25 |   firebase.auth().onAuthStateChanged((user) => {
26 |     if(user === null) {
27 |       setUserLoggedIn(false)
28 |     } else {
29 |       setUserLoggedIn(true)
30 |     }
31 |   })
32 | 
33 |   if(userLoggedIn) {
34 |     return (
35 |       <View style={styles.container}>
36 |         <NotesScreenComponent/>
37 |       </View>
38 |     );
39 |   } else {
40 |     return (
41 |       <View style={styles.container}>
42 |         <LoginScreenComponent/>
43 |       </View>
44 |     );
45 |   }
46 | 
47 | 
48 |   return (
49 |     <View style={styles.container}>
50 |       {/* <NotesScreenComponent/> */}
51 |       <LoginScreenComponent/>
52 |     </View>
53 |   );
54 | }
55 | 
56 | const styles = StyleSheet.create({
57 |   container: {
58 |     flex: 1,
59 |     backgroundColor: '#fff',
60 |     alignItems: 'center',
61 |     justifyContent: 'center',
62 |   },
63 | });
64 | 


--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "expo": {
 3 |     "name": "todo-react-native",
 4 |     "slug": "todo-react-native",
 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 |     "web": {
23 |       "favicon": "./assets/favicon.png"
24 |     }
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/assets/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/scaleracademy/todo-react-native/1f6374925739e897c8416db977f9fed4a61315b3/assets/favicon.png


--------------------------------------------------------------------------------
/assets/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/scaleracademy/todo-react-native/1f6374925739e897c8416db977f9fed4a61315b3/assets/icon.png


--------------------------------------------------------------------------------
/assets/splash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/scaleracademy/todo-react-native/1f6374925739e897c8416db977f9fed4a61315b3/assets/splash.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = function(api) {
2 |   api.cache(true);
3 |   return {
4 |     presets: ['babel-preset-expo'],
5 |   };
6 | };
7 | 


--------------------------------------------------------------------------------
/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 |     "@react-native-community/masked-view": "0.1.10",
12 |     "@react-navigation/native": "^5.7.2",
13 |     "expo": "~38.0.8",
14 |     "expo-status-bar": "^1.0.2",
15 |     "firebase": "^7.17.1",
16 |     "lodash": "^4.17.19",
17 |     "react": "~16.11.0",
18 |     "react-dom": "~16.11.0",
19 |     "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
20 |     "react-native-gesture-handler": "~1.6.0",
21 |     "react-native-reanimated": "~1.9.0",
22 |     "react-native-safe-area-context": "~3.0.7",
23 |     "react-native-screens": "~2.9.0",
24 |     "react-native-web": "~0.11.7"
25 |   },
26 |   "devDependencies": {
27 |     "@babel/core": "^7.8.6",
28 |     "babel-preset-expo": "~8.1.0"
29 |   },
30 |   "private": true
31 | }
32 | 


--------------------------------------------------------------------------------
/src/CreateNoteComponent.js:
--------------------------------------------------------------------------------
 1 | import React, {useState} from 'react';
 2 | import {StyleSheet, TextInput, Button, View} from 'react-native'
 3 | import firebase from 'firebase';
 4 | 
 5 | const CreateNoteComponent = (props) => {
 6 |     console.log(props)
 7 |     const [newNoteText, setNewNoteText] = useState('')
 8 | 
 9 |     return <View>
10 |         <TextInput 
11 |         style={styles.textInputStyles}
12 |         autoCorrect={false}
13 |         autoCapitalize="none"
14 |         multiline={true}
15 |         value={newNoteText}
16 |         onChangeText={(currentText) => {
17 |                 setNewNoteText(currentText)
18 |         
19 |         }
20 |         }
21 |         />
22 |         <Button 
23 |             title={"Create Note"}
24 |             onPress={() => {
25 |                 // Store the text on firebase as well
26 |                 // /users/{id}/
27 |                 if(newNoteText !== '') {
28 |                     const loggedInUserId = firebase.auth().currentUser.uid
29 |                     const pathForData = `/users/${loggedInUserId}/`
30 |     
31 |                     firebase.database()
32 |                         .ref(pathForData)
33 |                         .push({
34 |                             'date': new Date().toDateString(),
35 |                             'text': newNoteText
36 |                         })
37 |                     setNewNoteText('')
38 |                 }
39 | 
40 |             }}
41 |         />
42 |     </View>
43 |     
44 | }
45 | 
46 | const styles = StyleSheet.create({
47 |     textInputStyles: {
48 |         borderWidth: 5,
49 |         width: 320,
50 |         height: 140,
51 |         borderRadius: 10,
52 |         padding: 15,
53 |         fontSize: 30
54 |     }
55 | });
56 | 
57 | export default CreateNoteComponent;


--------------------------------------------------------------------------------
/src/LoginScreenComponent.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | import {StyleSheet, View, Text, TextInput, Button} from 'react-native';
 3 | import firebase from 'firebase';
 4 | 
 5 | const LoginScreenComponent = () => {
 6 | 
 7 |     const [email, setEmail] = useState("")
 8 |     const [password, setPassword] = useState("")
 9 | 
10 |     return <View>
11 |         <Text> Email: </Text>
12 |         <TextInput 
13 |             style={styles.textInputStyle}
14 |             autoCorrect={false}
15 |             autoCapitalize="none"
16 |             value={email}
17 |             onChangeText={(currentText) => setEmail(currentText) }
18 |         />
19 | 
20 |         <Text> Password </Text>
21 |         <TextInput 
22 |             style={styles.textInputStyle}
23 |             autoCorrect={false}
24 |             autoCapitalize="none"
25 |             secureTextEntry={true}
26 |             value={password}
27 |             onChangeText={(currentText) => setPassword(currentText)}
28 |         />
29 | 
30 |         <View style={styles.buttonStyle}>
31 |         <Button  
32 |             title={"Log In"}
33 |             onPress={() => firebase
34 |                             .auth()
35 |                             .signInWithEmailAndPassword(email, password)
36 |                             .then(() => {})
37 |                             .catch(() => {})
38 |                         }
39 |                             
40 |         />
41 |         </View>
42 |         
43 |         <View style={styles.buttonStyle}>
44 |         <Button  
45 |             title={"Sign Up"}
46 |             onPress={() => {
47 |                     firebase
48 |                         .auth()
49 |                         .createUserWithEmailAndPassword(email, password)
50 |                         .then(() => {
51 |                             setEmail("")
52 |                             setPassword("")
53 |                             console.log("Login Successful")
54 |                         })
55 |                         .catch(() => {
56 |                             console.log("Some error happened")
57 |                         })
58 | 
59 |                 }
60 |             }
61 |         
62 |         />
63 |         </View>
64 |         
65 |     </View>
66 | }
67 | 
68 | const styles = StyleSheet.create({
69 |     textInputStyle: {
70 |         width: 300,
71 |         borderWidth: 5,
72 |         margin: 10,
73 |         padding: 10,
74 |         borderRadius: 3
75 |     },
76 |     buttonStyle: {
77 |         margin: 10
78 |     }
79 | });
80 | 
81 | 
82 | export default LoginScreenComponent;


--------------------------------------------------------------------------------
/src/NotesScreenComponent.js:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect } from 'react';
  2 | import  {Text, FlatList, View, StyleSheet, TextInput, Button}  from 'react-native';
  3 | import SingleNoteSummaryComponent from './SingleNoteSummaryComponent';
  4 | import CreateNoteComponent from './CreateNoteComponent';
  5 | import firebase from 'firebase'
  6 | import _ from 'lodash'
  7 | // a react component is nothing but a javascript function
  8 | 
  9 | const NotesScreenComponent = () => {
 10 | 
 11 |     // var data = [
 12 |     //     {"date": "24-10-1998", "text": "I am going to Dubai"},
 13 |     //     {"date": "24-02-2002", "text": "I have to bring vegatbles "},
 14 |     //     {"date": "24-02-2003", "text": "I have to bring vegatbles"},
 15 |     //     {"date": "24-02-2004", "text": "I have to bring vegatbles"},
 16 |     //     {"date": "24-02-2005", "text": "I have to bring vegatbles"},
 17 |     //     {"date": "24-02-2006", "text": "I have to bring vegatbles"},
 18 |     //     {"date": "24-02-2007", "text": "I have to bring vegatbles"}
 19 |     // ]
 20 | 
 21 |     const [data, setData] = useState([]);
 22 |     // to write javascript inside jsx, i need to enclose javascript code in {}
 23 |     // {name: 'abc', 'age': 12} -> {name} -> {name: 'abc'}
 24 |     // item , index
 25 | 
 26 |     // /users/{id}/ 
 27 | 
 28 |     const loggedInUserId = firebase.auth().currentUser.uid
 29 |     
 30 |     useEffect(() => {firebase.database()
 31 |         .ref(`/users/${loggedInUserId}/`)
 32 |         .on('value', (completeNewData) => {
 33 |             console.log(completeNewData)
 34 | 
 35 |             const newDataList = _.map(completeNewData.val(), (value, key) => {
 36 |                 console.log("Value", value)
 37 |                 console.log("Key", key)
 38 |                 return {...value}
 39 |             })
 40 | 
 41 |             console.log(newDataList)
 42 |             setData(newDataList.reverse())
 43 |         }
 44 |     )}, [])
 45 | 
 46 | 
 47 | 
 48 | 
 49 | 
 50 | 
 51 |     const addNewNote = (text) => {
 52 |         if(text.length > 0){
 53 |             setData([{"text": text, "date": new Date()}, ...data])
 54 |         }
 55 |         
 56 | 
 57 |         // A= ['a', 'b', 'c', 'd'] -> ...A -> 'a', 'b', 'c', 'd'
 58 |     }
 59 | 
 60 | 
 61 |     return <View style={styles.viewProperties}>
 62 | 
 63 |         <Button 
 64 |             title={"Log Out"}
 65 |             onPress={() => firebase.auth().signOut()}
 66 |         />
 67 | 
 68 | 
 69 |         <CreateNoteComponent onCreateButtonPress={
 70 |             (text) => addNewNote(text) 
 71 |         }/>
 72 |         
 73 |         <FlatList 
 74 |             showsVerticalScrollIndicator={false}
 75 |             style={styles.listProperties}
 76 |             data={data}
 77 |             keyExtractor={(item, index) => {
 78 |                     return index.toString()
 79 |                 }
 80 |             }
 81 |             numColumns={2}
 82 |             renderItem={({item}) => {
 83 |                 // console.log(index, item)
 84 |                 return <SingleNoteSummaryComponent myNoteDate={item.date} myNoteText={item.text}/>
 85 |             }
 86 |             
 87 |         }   
 88 |         />
 89 |     </View>
 90 | 
 91 | }
 92 | 
 93 | 
 94 | const styles = StyleSheet.create({
 95 |     viewProperties : {
 96 |         marginTop: 50
 97 |     },
 98 |     textProperties: {
 99 |         fontSize: 24
100 |     },
101 |     textViewStyle: {
102 |         margin: 10,
103 |         borderRadius: 10,
104 |         padding: 5,
105 |         alignItems: "center",
106 |         justifyContent: "center"
107 |     }
108 | });
109 | 
110 | const randomBackground = () => {
111 |     var red = Math.floor(Math.random() * 255) // 123
112 |     var green = Math.floor(Math.random() * 255) // 45
113 |     var blue = Math.floor(Math.random() * 255) // 43
114 | 
115 |     // String Interpolation
116 |     // In a string -> isnert a value of some other data type
117 |     // ""  ''  ``
118 | 
119 |     return `rgb(${red}, ${green}, ${blue})` // rgb(123, 45, 43)
120 | }
121 | 
122 | export default NotesScreenComponent;
123 | 
124 | 
125 | // ['rgb(1,2,3)', ]
126 | // Choose random element from list in js
127 | 
128 | // Javascript object JSON - JavaScript Object Notation
129 | 
130 | 
131 | // {
132 | //     'name': 'Naman',
133 | //     'age': 'blah',
134 | //     'hobby': 'meh',
135 | //     'friends': [
136 | //         "A", "B", "C"
137 | //     ],
138 | //     'scbool' : {
139 | //         'name': 'BHS',
140 | //         'location': 'Rajasthan'
141 | //     },
142 | //     'fav_city': 'abc'
143 | 
144 | // }
145 | 
146 | 
147 | 
148 | // If we have to write JS in JSX, we need to surround JS code in {}
149 | 
150 | 
151 | 
152 | 
153 | 
154 | // Object {
155 | //     "-MD_0ehQ55AEBBlQzmRJ": Object {
156 | //       "date": "Fri Jul 31 2020",
157 | //       "text": "yooooo",
158 | //     },
159 | //     "-MD_0sYGRokDygxRNusJ": Object {
160 | //       "date": "Fri Jul 31 2020",
161 | //       "text": "another note",
162 | //     },
163 | //   }
164 | 
165 | // [
166 |     // {
167 |         //       "date": "Fri Jul 31 2020",
168 |         //       "text": "yooooo",
169 |         //     },
170 |         // {
171 |             //       "date": "Fri Jul 31 2020",
172 |             //       "text": "another note",
173 |             //     },
174 | // ]
175 | 
176 | 
177 | 
178 | 
179 | 
180 | 
181 | 
182 | 
183 | 
184 | 
185 | 
186 | 
187 | 


--------------------------------------------------------------------------------
/src/SingleNoteSummaryComponent.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import {View, Text, StyleSheet} from 'react-native';
 3 | 
 4 | 
 5 | const SingleNoteSummaryComponent = (props) => {
 6 |     console.log(props)
 7 |     return <View  backgroundColor={randomBackground()} style={styles.textViewStyle}>
 8 |         <Text> {props.myNoteDate} </Text>
 9 |         <Text style={styles.textProperties}> {props.myNoteText}</Text>
10 |     </View>
11 | }
12 | 
13 | const randomBackground = () => {
14 |     var red = Math.floor(Math.random() * 255) // 123
15 |     var green = Math.floor(Math.random() * 255) // 45
16 |     var blue = Math.floor(Math.random() * 255) // 43
17 | 
18 |     // String Interpolation
19 |     // In a string -> isnert a value of some other data type
20 |     // ""  ''  ``
21 | 
22 |     return `rgb(${red}, ${green}, ${blue})` // rgb(123, 45, 43)
23 | }
24 | 
25 | const styles = StyleSheet.create({
26 |     textProperties: {
27 |         fontSize: 24
28 |     },
29 |     textViewStyle: {
30 |         height: 150,
31 |         width: 150,
32 |         margin: 10,
33 |         borderRadius: 10,
34 |         padding: 5,
35 |         alignItems: "center",
36 |         justifyContent: "center"
37 |     }
38 | });
39 | 
40 | 
41 | export default SingleNoteSummaryComponent;


--------------------------------------------------------------------------------