Merge pull request #105 from COS301-SE-2024/dev/front/watchlist

Dev/front/watchlist
COS301-SE-2024 · Jun 20, 2024 · aaccf84 · aaccf84
2 parents 4fb0149 + 07bf9bf
commit aaccf84
Show file tree

Hide file tree

Showing 4 changed files with 363 additions and 29 deletions.
diff --git a/App.js b/App.js
@@ -30,23 +30,20 @@ import TermsOfUse from "./frontend/src/Screens/TermsOfUse";
 import ChangePassword from "./frontend/src/Screens/ChangePassword";
 import MovieDescriptionPage from "./frontend/src/Screens/MovieDescriptionPage"
 import CreatePost from "./frontend/src/Screens/CreatePost";
-
+import CreateWatchlist from "./frontend/src/Screens/CreateWatchlist";
+import AddMovies from "./frontend/src/Screens/AddMovies";
+import WatchlistTab from "./frontend/src/Components/Watchlist";
 
 const Nav = createNativeStackNavigator();
 
 export default function App() {
     const [navigationState, setNavigationState] = useState(null);
 
     return (
-        <NavigationContainer>
-            <Nav.Navigator
-                initialRouteName="LandingPage"
-                screenOptions={({ navigation }) => {
-                    if (!navigationState) {
-                        setNavigationState(navigation);
-                    }
-                    return {};
-                }}>
+        <NavigationContainer ref={nav => {
+            if (nav) setNavigationState(nav)
+        }}>
+            <Nav.Navigator initialRouteName="LandingPage">
 
                 {/* <Nav.Screen name="LandingPage" component={LandingPage} options={{ headerShown: false }} /> */}
                 {/* <Nav.Screen name="SignupPage" component={SignupPage} options={{ headerShown: false }} /> */}
@@ -71,8 +68,9 @@ export default function App() {
                         headerTintColor: 'black',
                     })}
                 />
+
 
-<Nav.Screen
+                <Nav.Screen
                     name="EditProfile"
                     component={EditProfile}
                     options={({ navigation }) => ({
@@ -131,6 +129,26 @@ export default function App() {
                 <Nav.Screen name="UsingMovieHub" component={UsingMovieHub} options={{ title: "Using MovieHub" }} />
                 <Nav.Screen name="FAQs" component={FAQs} />
 
+                <Nav.Screen 
+                    name="CreateWatchlist" 
+                    component={CreateWatchlist} 
+                    options={({ navigation }) => ({
+                        title: "",
+                        headerShadowVisible: false,
+                        headerBackTitleVisible: false,
+                        headerTintColor: 'black',
+                    })} 
+                />
+                 <Nav.Screen 
+                    name="AddMovies" 
+                    component={AddMovies} 
+                    options={({ navigation }) => ({
+                        title: "",
+                        headerShadowVisible: false,
+                        headerBackTitleVisible: false,
+                        headerTintColor: 'black',
+                    })} 
+                />
             </Nav.Navigator>
         </NavigationContainer>
     );

diff --git a/frontend/src/Components/Watchlist.js b/frontend/src/Components/Watchlist.js
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
-import { View, Text, FlatList, ScrollView, TouchableOpacity, StyleSheet, Modal, Image } from "react-native";
+import { View, Text, ScrollView, TouchableOpacity, StyleSheet, Modal, Image } from "react-native";
 import { MaterialIcons } from "@expo/vector-icons";
-import FAIcon from "react-native-vector-icons/FontAwesome";
+import { useNavigation } from '@react-navigation/native'; 
 
 const watchlists = [
     { id: "1", name: "To Be Watched", privacy: "Private", movies: 5, image: require("../../../assets/movie2.jpg") },
@@ -12,6 +12,7 @@ const watchlists = [
 const WatchlistTab = () => {
     const [modalVisible, setModalVisible] = useState(false);
     const [selectedWatchlist, setSelectedWatchlist] = useState(null);
+    const navigation = useNavigation();  // Use the navigation hook
 
     const openOptionsMenu = (watchlist) => {
         setSelectedWatchlist(watchlist);
@@ -23,23 +24,12 @@ const WatchlistTab = () => {
         setSelectedWatchlist(null);
     };
 
-    const renderWatchlistItem = ({ item }) => (
-        <View style={styles.watchlistItem}>
-            <Image source={item.image} style={styles.watchlistImage} />
-            <View style={styles.watchlistInfo}>
-                <Text style={styles.watchlistName}>{item.name}</Text>
-                <Text style={styles.watchlistPrivacy}>{item.privacy}</Text>
-                <Text style={styles.watchlistMovies}>{item.movies} movies</Text>
-            </View>
-            <TouchableOpacity style={styles.moreButton} onPress={() => openOptionsMenu(item)}>
-                <MaterialIcons name="more-vert" size={24} color="black" />
-            </TouchableOpacity>
-        </View>
-    );
-
     return (
         <View style={styles.container}>
-            <TouchableOpacity style={styles.createButton}>
+            <TouchableOpacity
+                style={styles.createButton}
+                onPress={() => navigation.navigate('CreateWatchlist')}  // Navigate to the CreateWatchlist screen
+            >
                 <Text style={styles.createButtonText}>Create new watchlist</Text>
                 <View style={{flex :1}} />
                 <MaterialIcons name="add" size={24} color="black" />
@@ -54,7 +44,7 @@ const WatchlistTab = () => {
                             <Text style={styles.watchlistMovies}>{watchlist.movies} movies</Text>
                         </View>
                         <TouchableOpacity style={styles.moreButton} onPress={() => openOptionsMenu(watchlist)}>
-                            <FAIcon name="angle-right" size={24} color="black" />
+                            <MaterialIcons name="more-vert" size={24} color="black" />
                         </TouchableOpacity>
                     </View>
                 ))}

diff --git a/frontend/src/Screens/AddMovies.js b/frontend/src/Screens/AddMovies.js
@@ -0,0 +1,81 @@
+import React, { useState } from "react";
+import { View, Text, StyleSheet, TouchableOpacity, FlatList } from "react-native";
+
+export default function AddMovies({ navigation }) {
+    // Sample data for movie placeholders 
+    const [movies, setMovies] = useState(new Array(9).fill(false)); 
+
+    const toggleMovieSelection = (index) => {
+        const newMovies = [...movies];
+        newMovies[index] = !newMovies[index];
+        setMovies(newMovies);
+    };
+
+    const renderMovieItem = ({ item, index }) => (
+        <TouchableOpacity style={styles.movieItem} onPress={() => toggleMovieSelection(index)}>
+            {item && <View style={styles.tick} />}
+        </TouchableOpacity>
+    );
+
+    return (
+        <View style={styles.container}>
+            <View style={styles.header}>
+                <Text style={styles.headerTitle}>Add Movies to Watchlist</Text>
+                <TouchableOpacity style={styles.nextButton} onPress={() => navigation.navigate('ProfilePage')}>
+                    <Text style={styles.nextButtonText}>Done</Text>
+                </TouchableOpacity>
+            </View>
+            <FlatList
+                data={movies}
+                renderItem={renderMovieItem}
+                keyExtractor={(item, index) => index.toString()}
+                numColumns={2}
+                contentContainerStyle={styles.grid}
+            />
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: "#fff",
+    },
+    header: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        padding: 16,
+    },
+    backButton: {
+        fontSize: 24,
+        color: "#000",
+    },
+    headerTitle: {
+        fontSize: 18,
+        fontWeight: "bold",
+    },
+    doneText: {
+        fontSize: 16,
+        color: "blue",
+    },
+    grid: {
+        flexGrow: 1,
+        justifyContent: "center",
+        paddingHorizontal: 16,
+    },
+    movieItem: {
+        width: "45%",
+        height: 175,
+        margin: "1.5%",
+        backgroundColor: "#e1e1e1",
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    tick: {
+        width: 30,
+        height: 30,
+        backgroundColor: "black",
+        borderRadius: 15,
+    },
+});