├── .watchmanconfig
├── .DS_Store
├── assets
    ├── icon.png
    ├── MR_logo.png
    └── splash.png
├── babel.config.js
├── .gitignore
├── .expo-shared
    └── assets.json
├── App.js
├── app.json
├── package.json
└── components
    ├── list.js
    ├── auth.js
    ├── edit.js
    └── detail.js


/.watchmanconfig:
--------------------------------------------------------------------------------
1 | {}
2 | 


--------------------------------------------------------------------------------
/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Nogostradamus/course-django-react-mobile/HEAD/.DS_Store


--------------------------------------------------------------------------------
/assets/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Nogostradamus/course-django-react-mobile/HEAD/assets/icon.png


--------------------------------------------------------------------------------
/assets/MR_logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Nogostradamus/course-django-react-mobile/HEAD/assets/MR_logo.png


--------------------------------------------------------------------------------
/assets/splash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Nogostradamus/course-django-react-mobile/HEAD/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 | 


--------------------------------------------------------------------------------
/.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 | web-report/
12 | 


--------------------------------------------------------------------------------
/.expo-shared/assets.json:
--------------------------------------------------------------------------------
1 | {
2 |   "f9155ac790fd02fadcdeca367b02581c04a353aa6d5aa84409a59f6804c87acd": true,
3 |   "89ed26367cdb9b771858e026f2eb95bfdb90e5ae943e716575327ec325f39c44": true
4 | }


--------------------------------------------------------------------------------
/App.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import Auth from './components/auth';
 3 | import MovieList from './components/list';
 4 | import Detail from './components/detail';
 5 | import Edit from './components/edit';
 6 | 
 7 | import { createAppContainer } from 'react-navigation';
 8 | import { createStackNavigator } from 'react-navigation-stack';
 9 | 
10 | const AppNavigator = createStackNavigator({
11 |   Auth: {screen: Auth},
12 |   MovieList: {screen: MovieList},
13 |   Detail: {screen: Detail},
14 |   Edit: {screen: Edit},
15 | })
16 | 
17 | const App = createAppContainer(AppNavigator);
18 | 
19 | export default App;
20 | 


--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "expo": {
 3 |     "name": "Movie Rater",
 4 |     "slug": "MovieRater",
 5 |     "privacy": "public",
 6 |     "sdkVersion": "34.0.0",
 7 |     "platforms": [
 8 |       "ios",
 9 |       "android",
10 |       "web"
11 |     ],
12 |     "version": "1.0.0",
13 |     "orientation": "portrait",
14 |     "icon": "./assets/icon.png",
15 |     "splash": {
16 |       "image": "./assets/splash.png",
17 |       "resizeMode": "contain",
18 |       "backgroundColor": "#ffffff"
19 |     },
20 |     "updates": {
21 |       "fallbackToCacheTimeout": 0
22 |     },
23 |     "assetBundlePatterns": [
24 |       "**/*"
25 |     ],
26 |     "ios": {
27 |       "supportsTablet": true
28 |     }
29 |   }
30 | }


--------------------------------------------------------------------------------
/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 |     "@fortawesome/fontawesome-svg-core": "^1.2.25",
12 |     "@fortawesome/free-solid-svg-icons": "^5.11.2",
13 |     "@fortawesome/react-native-fontawesome": "^0.1.0",
14 |     "expo": "^34.0.1",
15 |     "react": "16.8.3",
16 |     "react-dom": "^16.8.6",
17 |     "react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz",
18 |     "react-native-gesture-handler": "~1.3.0",
19 |     "react-native-svg": "^9.9.4",
20 |     "react-native-web": "^0.11.4",
21 |     "react-navigation": "^4.0.5",
22 |     "react-navigation-stack": "^1.8.0"
23 |   },
24 |   "devDependencies": {
25 |     "babel-preset-expo": "^6.0.0"
26 |   },
27 |   "private": true
28 | }
29 | 


--------------------------------------------------------------------------------
/components/list.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from 'react';
 2 | import { StyleSheet, Text, View, FlatList, Image, TouchableOpacity, Button, AsyncStorage } from 'react-native';
 3 | 
 4 | export default function MovieList(props) {
 5 | 
 6 |   const [ movies, setMovies ] = useState([]);
 7 |   let token = null;
 8 | 
 9 |   const getData = async () => {
10 |     token = await AsyncStorage.getItem('MR_Token');
11 |     if (token) {
12 |       getMovies();
13 |     } else {
14 |       props.navigation.navigate("Auth")
15 |     }
16 |   };
17 |   
18 |   useEffect(() => {
19 |     getData();
20 |   }, []);
21 | 
22 |   const getMovies = () => {
23 |     console.log(token);
24 |     fetch(`http://192.168.1.5:8000/api/movies/`, {
25 |       method: 'GET',
26 |       headers: {
27 |         'Authorization': `Token ${token}`
28 |       }
29 |     })
30 |     .then( res => res.json())
31 |     .then( jsonRes => setMovies(jsonRes))
32 |     .catch( error => console.log(error));
33 |   }
34 | 
35 |   const movieclicked = (movie) => {
36 |     props.navigation.navigate("Detail", {movie: movie, title: movie.title, token: token})
37 |   }
38 | 
39 |   return (
40 |     <View>
41 |       <Image source={require('../assets/MR_logo.png')}
42 |         style={{width: '100%', height: 135, paddingTop: 30}}
43 |         resizeMode="contain"/>
44 | 
45 |       <FlatList 
46 |         data={movies}
47 |         renderItem={({item}) => (
48 |           <TouchableOpacity onPress={() => movieclicked(item)}>
49 |             <View style={styles.item}>
50 |               <Text style={styles.itemText}>{item.title}</Text>
51 |             </View>
52 |           </TouchableOpacity>
53 |         )}
54 |         keyExtractor={(item, index) => index.toString()}
55 |       />
56 |     </View>
57 |   );
58 | }
59 | 
60 | MovieList.navigationOptions = screenProps => ({
61 |   title: "List of movies",
62 |   headerStyle: {
63 |     backgroundColor: 'orange'
64 |   },
65 |   headerTintColor: '#fff',
66 |   headerTitleStyle: {
67 |     fontWeight: 'bold',
68 |     fontSize:24
69 |   },
70 |   headerRight: (
71 |     <Button title="Add New" color="white"
72 |       onPress={() => screenProps.navigation.navigate("Edit", {movie: {title: '', description: ''}})}
73 |     />
74 |   )
75 | })
76 | 
77 | const styles = StyleSheet.create({
78 |   container: {
79 |     flex: 1,
80 |     backgroundColor: '#fff',
81 |     alignItems: 'center',
82 |     justifyContent: 'center',
83 |   },
84 |   item: {
85 |     flex: 1,
86 |     padding: 10,
87 |     height: 50,
88 |     backgroundColor: '#282C35'
89 |   },
90 |   itemText: {
91 |     color: '#fff',
92 |     fontSize: 24
93 |   }
94 | });
95 | 


--------------------------------------------------------------------------------
/components/auth.js:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect } from 'react';
  2 | import { StyleSheet, Text, View, TextInput, Button, AsyncStorage, TouchableOpacity } from 'react-native';
  3 | 
  4 | export default function Auth(props) {
  5 | 
  6 |   const [ username, setUsername] = useState("");
  7 |   const [ password, setPassword] = useState("");
  8 |   const [ regView, setRegView] = useState(false);
  9 | 
 10 |   useEffect(()=> {
 11 |     getData();
 12 |   }, [])
 13 | 
 14 |   const auth = () => {
 15 |     if (regView) {
 16 |       fetch(`http://192.168.1.5:8000/api/users/`, {
 17 |       method: 'POST',
 18 |       headers: {
 19 |         'Content-Type': 'application/json'
 20 |       },
 21 |       body: JSON.stringify({ username, password})
 22 |       })
 23 |       .then( res => res.json())
 24 |       .then( res => {
 25 |         setRegView(false);
 26 |       })
 27 |       .catch( error => console.log(error));
 28 |     } else {
 29 |       fetch(`http://192.168.1.5:8000/auth/`, {
 30 |         method: 'POST',
 31 |         headers: {
 32 |           'Content-Type': 'application/json'
 33 |         },
 34 |         body: JSON.stringify({ username, password})
 35 |         })
 36 |         .then( res => res.json())
 37 |         .then( res => {
 38 |           saveData(res.token);
 39 |           props.navigation.navigate("MovieList");
 40 |         })
 41 |         .catch( error => console.log(error));
 42 |     }
 43 |   };
 44 |   const saveData = async (token) => {
 45 |     await AsyncStorage.setItem('MR_Token', token)
 46 |   }
 47 |   const getData = async () => {
 48 |     const token = await AsyncStorage.getItem('MR_Token');
 49 |     if(token) props.navigation.navigate("MovieList");
 50 |   }
 51 |   const toggleView = () => {
 52 |     setRegView(!regView);
 53 |   }
 54 | 
 55 |   return (
 56 |     <View style={styles.container}>
 57 |       <Text style={styles.label}>Username</Text>
 58 |       <TextInput 
 59 |         style={styles.input}
 60 |         placeholder="Username"
 61 |         onChangeText={text => setUsername(text)}
 62 |         value={username}
 63 |         autoCapitalize={'none'}
 64 |       />
 65 |       <Text style={styles.label}>Password</Text>
 66 |       <TextInput 
 67 |         style={styles.input}
 68 |         placeholder="Password"
 69 |         onChangeText={text => setPassword(text)}
 70 |         value={password}
 71 |         secureTextEntry={true}
 72 |         autoCapitalize={'none'}
 73 |       />
 74 |       <Button onPress={() => auth()} title={regView ? "Register" : "Login"} />
 75 |       <TouchableOpacity onPress={() => toggleView()}>
 76 |         {regView ? <Text style={styles.viewText}>Already have an account? Go back to login.</Text> : 
 77 |         <Text style={styles.viewText}>Don't have an account? Register here.</Text>}
 78 |       </TouchableOpacity>
 79 |     </View>
 80 |   );
 81 | }
 82 | 
 83 | Auth.navigationOptions = screenProps => ({
 84 |   title: "Login",
 85 |   headerStyle: {
 86 |     backgroundColor: 'orange'
 87 |   },
 88 |   headerTintColor: '#fff',
 89 |   headerTitleStyle: {
 90 |     fontWeight: 'bold',
 91 |     fontSize:24
 92 |   }
 93 | })
 94 | 
 95 | const styles = StyleSheet.create({
 96 |   container: {
 97 |     flex: 1,
 98 |     backgroundColor: '#282C35',
 99 |     padding: 10
100 |   },
101 |   label: {
102 |     fontSize: 24,
103 |     color: 'white',
104 |     padding: 10
105 |   },
106 |   input: {
107 |     fontSize: 24,
108 |     backgroundColor: '#fff',
109 |     padding: 10,
110 |     margin: 10
111 |   },
112 |   viewText: {
113 |     color: 'white',
114 |     fontSize: 20,
115 |     paddingTop: 30,
116 |     paddingLeft: 10,
117 |     paddingRight: 10
118 |   }
119 | });
120 | 


--------------------------------------------------------------------------------
/components/edit.js:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect } from 'react';
  2 | import { StyleSheet, Text, View, TextInput, Button } from 'react-native';
  3 | 
  4 | export default function Edit(props) {
  5 | 
  6 |   const movie = props.navigation.getParam('movie', null);
  7 |   const [ title, setTitle] = useState(movie.title);
  8 |   const [ description, setDescription] = useState(movie.description);
  9 | 
 10 |   const saveMovie = () => {
 11 |     if(movie.id){
 12 |       fetch(`http://192.168.1.5:8000/api/movies/${movie.id}/`, {
 13 |       method: 'PUT',
 14 |       headers: {
 15 |         'Authorization': `Token 64c0575cb66424b929998851a8a5bb7b8b233815`,
 16 |         'Content-Type': 'application/json'
 17 |       },
 18 |       body: JSON.stringify({ title: title, description: description})
 19 |       })
 20 |       .then( res => res.json())
 21 |       .then( movie => {
 22 |         props.navigation.navigate("Detail", {movie: movie, title: movie.title})
 23 |       })
 24 |       .catch( error => console.log(error));
 25 |     } else {
 26 |       fetch(`http://192.168.1.5:8000/api/movies/`, {
 27 |       method: 'POST',
 28 |       headers: {
 29 |         'Authorization': `Token 64c0575cb66424b929998851a8a5bb7b8b233815`,
 30 |         'Content-Type': 'application/json'
 31 |       },
 32 |       body: JSON.stringify({ title: title, description: description})
 33 |       })
 34 |       .then( res => res.json())
 35 |       .then( movie => {
 36 |         
 37 |         props.navigation.navigate("MovieList")
 38 |       })
 39 |       .catch( error => console.log(error));
 40 |     }
 41 |     
 42 |   };
 43 | 
 44 |   return (
 45 |     <View style={styles.container}>
 46 |       <Text style={styles.label}>Title</Text>
 47 |       <TextInput 
 48 |         style={styles.input}
 49 |         placeholder="Title"
 50 |         onChangeText={text => setTitle(text)}
 51 |         value={title}
 52 |       />
 53 |       <Text style={styles.label}>Description</Text>
 54 |       <TextInput 
 55 |         style={styles.input}
 56 |         placeholder="Description"
 57 |         onChangeText={text => setDescription(text)}
 58 |         value={description}
 59 |       />
 60 |       <Button onPress={() => saveMovie()} title={movie.id ? "Edit" : "Add"} />
 61 |     </View>
 62 |   );
 63 | }
 64 | 
 65 | Edit.navigationOptions = screenProps => ({
 66 |   title: screenProps.navigation.getParam('title'),
 67 |   headerStyle: {
 68 |     backgroundColor: 'orange'
 69 |   },
 70 |   headerTintColor: '#fff',
 71 |   headerTitleStyle: {
 72 |     fontWeight: 'bold',
 73 |     fontSize:24
 74 |   },
 75 |   headerRight: (
 76 |     <Button title="Remove" color="white"
 77 |       onPress={() => removeClicked(screenProps)}
 78 |     />
 79 |   )
 80 | })
 81 | 
 82 | const removeClicked = (props) => {
 83 |   const movie = props.navigation.getParam("movie")
 84 |   console.log(movie);
 85 |   fetch(`http://192.168.1.5:8000/api/movies/${movie.id}/`, {
 86 |       method: 'DELETE',
 87 |       headers: {
 88 |         'Authorization': `Token 64c0575cb66424b929998851a8a5bb7b8b233815`,
 89 |         'Content-Type': 'application/json'
 90 |       }
 91 |       })
 92 |       .then( res => {
 93 |         props.navigation.navigate("MovieList")
 94 |       })
 95 |       .catch( error => console.log(error));
 96 | }
 97 | 
 98 | const styles = StyleSheet.create({
 99 |   container: {
100 |     flex: 1,
101 |     backgroundColor: '#282C35',
102 |     padding: 10
103 |   },
104 |   label: {
105 |     fontSize: 24,
106 |     color: 'white',
107 |     padding: 10
108 |   },
109 |   input: {
110 |     fontSize: 24,
111 |     backgroundColor: '#fff',
112 |     padding: 10,
113 |     margin: 10
114 |   }
115 | });
116 | 


--------------------------------------------------------------------------------
/components/detail.js:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect } from 'react';
  2 | import { StyleSheet, Text, View, Button, Alert } from 'react-native';
  3 | import { FontAwesomeIcon} from '@fortawesome/react-native-fontawesome';
  4 | import { faStar } from '@fortawesome/free-solid-svg-icons';
  5 | 
  6 | export default function Detail(props) {
  7 | 
  8 |   const movie = props.navigation.getParam('movie', null);
  9 |   const token = props.navigation.getParam('token', '');
 10 |   const [ highlight, setHeighlight] = useState(0); 
 11 | 
 12 |   const rateClicked = () => {
 13 |     if(highlight > 0 && highlight < 6){
 14 |       fetch(`http://192.168.1.5:8000/api/movies/${movie.id}/rate_movie/`, {
 15 |       method: 'POST',
 16 |       headers: {
 17 |         'Authorization': `Token ${token}`,
 18 |         'Content-Type': 'application/json'
 19 |       },
 20 |       body: JSON.stringify({ stars: highlight})
 21 |     })
 22 |     .then( res => res.json())
 23 |     .then( res => {
 24 |       setHeighlight(0);
 25 |       Alert.alert("Rating", res.message);
 26 |     })
 27 |     .catch( error => Alert.alert("Error", error));
 28 |     }
 29 |   }
 30 | 
 31 |   return (
 32 |     <View style={styles.container}>
 33 |       <View style={styles.starContainer}>
 34 |         <FontAwesomeIcon style={movie.avg_rating > 0 ? styles.orange : styles.white} icon={faStar}/>
 35 |         <FontAwesomeIcon style={movie.avg_rating > 1 ? styles.orange : styles.white} icon={faStar}/>
 36 |         <FontAwesomeIcon style={movie.avg_rating > 2 ? styles.orange : styles.white} icon={faStar}/>
 37 |         <FontAwesomeIcon style={movie.avg_rating > 3 ? styles.orange : styles.white} icon={faStar}/>
 38 |         <FontAwesomeIcon style={movie.avg_rating > 4 ? styles.orange : styles.white} icon={faStar}/>
 39 |         <Text style={styles.white}>({movie.no_of_ratings})</Text>
 40 |       </View>
 41 |       <Text style={styles.description}>{movie.description}</Text>
 42 | 
 43 |       <View style={{borderBottomColor: 'white', borderBottomWidth: 2}}/>
 44 |       <Text style={styles.description}>Rate it !!!</Text>
 45 | 
 46 |       <View style={styles.starContainer}>
 47 |         <FontAwesomeIcon style={highlight > 0 ? styles.purple : styles.grey} icon={faStar} size={48} onPress={()=> setHeighlight(1)}/>
 48 |         <FontAwesomeIcon style={highlight > 1 ? styles.purple : styles.grey} icon={faStar} size={48} onPress={()=> setHeighlight(2)}/>
 49 |         <FontAwesomeIcon style={highlight > 2 ? styles.purple : styles.grey} icon={faStar} size={48} onPress={()=> setHeighlight(3)}/>
 50 |         <FontAwesomeIcon style={highlight > 3 ? styles.purple : styles.grey} icon={faStar} size={48} onPress={()=> setHeighlight(4)}/>
 51 |         <FontAwesomeIcon style={highlight > 4 ? styles.purple : styles.grey} icon={faStar} size={48} onPress={()=> setHeighlight(5)}/>
 52 |       </View>
 53 |       <Button title="Rate" onPress={() => rateClicked()}/>
 54 |     </View>
 55 |   );
 56 | }
 57 | 
 58 | Detail.navigationOptions = screenProps => ({
 59 |   title: screenProps.navigation.getParam('title'),
 60 |   headerStyle: {
 61 |     backgroundColor: 'orange'
 62 |   },
 63 |   headerTintColor: '#fff',
 64 |   headerTitleStyle: {
 65 |     fontWeight: 'bold',
 66 |     fontSize:24
 67 |   },
 68 |   headerRight: (
 69 |     <Button title="Edit" color="white"
 70 |       onPress={() => screenProps.navigation.navigate("Edit", {movie: screenProps.navigation.getParam("movie")})}
 71 |     />
 72 |   )
 73 | })
 74 | 
 75 | const styles = StyleSheet.create({
 76 |   container: {
 77 |     flex: 1,
 78 |     backgroundColor: '#282C35',
 79 |     padding: 10
 80 |   },
 81 |   item: {
 82 |     flex: 1,
 83 |     padding: 10,
 84 |     height: 50,
 85 |     backgroundColor: '#282C35'
 86 |   },
 87 |   itemText: {
 88 |     color: '#fff',
 89 |     fontSize: 24
 90 |   },
 91 |   description: {
 92 |     fontSize: 20,
 93 |     color: 'white',
 94 |     padding: 10
 95 |   },
 96 |   starContainer: {
 97 |     alignItems: "center",
 98 |     justifyContent: "center",
 99 |     flexDirection: "row"
100 |   },
101 |   orange: {
102 |     color: 'orange'
103 |   },
104 |   white: {
105 |     color: 'white'
106 |   },
107 |   purple: {
108 |     color: 'purple'
109 |   },
110 |   grey: {
111 |     color: '#ccc'
112 |   }
113 | });
114 | 


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