Merge pull request #249 from bounswe/dev

Dev
bounswe · May 17, 2024 · 7afa85a · 7afa85a
2 parents a6d78b4 + 72157f4
commit 7afa85a
Show file tree

Hide file tree

Showing 16 changed files with 190 additions and 91 deletions.
diff --git a/app/mobile/Playlog/.env b/app/mobile/Playlog/.env
@@ -1 +1 @@
-EXPO_PUBLIC_URL = http://192.168.185.208:8000
+EXPO_PUBLIC_URL = https://playlog.games
diff --git a/app/mobile/Playlog/.env.development b/app/mobile/Playlog/.env.development
@@ -0,0 +1 @@
+EXPO_PUBLIC_URL = https://playlog.games
diff --git a/app/mobile/Playlog/.env.production b/app/mobile/Playlog/.env.production
@@ -1 +1 @@
-EXPO_PUBLIC_URL = http://165.232.73.154:8000
+EXPO_PUBLIC_URL = https://playlog.games
diff --git a/app/mobile/Playlog/app.json b/app/mobile/Playlog/app.json
@@ -21,10 +21,16 @@
       "adaptiveIcon": {
         "foregroundImage": "./assets/adaptive-icon.png",
         "backgroundColor": "#ffffff"
-      }
+      },
+      "package": "com.bounswe.playlog"
     },
     "web": {
       "favicon": "./assets/favicon.png"
+    },
+    "extra": {
+      "eas": {
+        "projectId": "b1b33e74-b547-42d2-9ee5-550b07d6968e"
+      }
     }
   }
 }
diff --git a/app/mobile/Playlog/components/game/Characters.js b/app/mobile/Playlog/components/game/Characters.js
@@ -19,17 +19,17 @@ const Characters = ({game, characters}) => {
 
     return (
         <View>
-            {characters.characters.map((character) => (
+            {characters.map((character) => (
                 <View key={character.id}>
 
                 <View  style={styles.characterContainer}>
                     <Image
-                    source={{ uri: game.banner }} // Replace with your image path
+                    source={{ uri: character.image }} // Replace with your image path
                     style={styles.characterImage}
                     />
                     <View style={styles.characterInfo}>
-                        <Text style={[textStyles.default, styles.characterName]}>{character.name}</Text>
-                        <Text style={[textStyles.default, styles.description]}>{game.shortDescription}</Text>
+                        <Text style={[textStyles.default, styles.characterName]}>{character.characterLabel}</Text>
+                        <Text style={[textStyles.default, styles.description]}>{character.characterDescription}</Text>
                     </View>
                 </View>
                 <View style={{ borderBottomWidth: 1, borderBottomColor: 'grey' }}></View>
@@ -46,6 +46,7 @@ const styles = StyleSheet.create({
         alignItems: 'center',
     },
     description: {
+        maxWidth: '80%',
         color: 'lightgrey',
         fontSize: 13,
         paddingTop: 5,

diff --git a/app/mobile/Playlog/components/game/GameScreenBanner.js b/app/mobile/Playlog/components/game/GameScreenBanner.js
@@ -12,7 +12,7 @@ export default GamePageBanner = ({ game }) => {
                 <View style={styles.gameDetailsContainer}>
                     <Text style={[styles.gameTitle, styles.gameDetailsContainerItem]}>{game.gameLabel}</Text>
                     <Text style={[styles.gameDeveloper, styles.gameDetailsContainerItem]}>{game.publisherLabel}</Text>
-                    <Text style={[styles.gameRelease, styles.gameDetailsContainerItem]}>{game.publication_date.substring(0, 4)}</Text>
+                    <Text style={[styles.gameRelease, styles.gameDetailsContainerItem]}>{game.publication_date?.substring(0, 4)}</Text>
                     <Text style={styles.gameDetailsContainerItem}>{game.genreLabel}</Text>
                 </View>
             </View>

diff --git a/app/mobile/Playlog/components/game/GameScreenComponents.js b/app/mobile/Playlog/components/game/GameScreenComponents.js
@@ -12,48 +12,59 @@ import ReviewGamePopup from "./ReviewGamePopup";
 export default GameScreenComponents = ({ game, characters, popularReviews, recentReviews }) => {
     const [selectedText, setSelectedText] = useState('Game');
     const [modalVisible, setModalVisible] = useState(false);
+    const [isEdit, setIsEdit] = useState(false);
+    const [editingReview, setEditingReview] = useState(null);
 
     const handleTextPress = (text) => {
         setSelectedText(text);
     };
 
     const reviewGame = () => {
+      setIsEdit(false);
         setModalVisible(true);
     }
 
+    const editReview = (review) => {
+      setIsEdit(true);
+      setEditingReview(review);
+      setModalVisible(true);
+    }
+
     return (
         <ScrollView>
             <GameScreenBanner game={game} />
             <Text style={[textStyles.default, styles.description]}>{game.gameDescription}</Text>
             <View style={styles.ratingContainer}>
                 <View style={styles.rating}>
                     {/* <Text style={[textStyles.default, styles.rating]}>{game.averageRating()}</Text> */}
-                    <Text style={[textStyles.default, styles.rating]}>{"change"}</Text>
+                    {/* <Text style={[textStyles.default, styles.rating]}>{"change"}</Text> */}
                     {/* <SmallRatings rating={game.averageRating()} /> */}
                     <SmallRatings rating={4} />
                 </View>
                 <TouchableOpacity style={styles.review} onPress={reviewGame}>
                   <Text style={textStyles.default}>Create Review</Text>
                   {/* <SmallRatings rating={0} /> */}
-                  <ReviewGamePopup game={game} visible={modalVisible} onClose={() => setModalVisible(false)} />
+                  <ReviewGamePopup editingReview={editingReview} game={game} visible={modalVisible} onClose={() => setModalVisible(false)} />
                 </TouchableOpacity>
             </View>
 
             <View style={{ borderBottomWidth: 1, borderBottomColor: 'white' }}></View>
             <ScrollView horizontal contentContainerStyle={{ flexGrow: 1 }}>
                 <View style={{ flexDirection: 'row'}}>
-                    <CategoryTab title="Game" onPress={() => handleTextPress('Game')} isSelected={selectedText === 'Game'} />
+                    {/* <CategoryTab title="Game" onPress={() => handleTextPress('Game')} isSelected={selectedText === 'Game'} /> */}
                     <CategoryTab title="Characters" onPress={() => handleTextPress('Characters')} isSelected={selectedText === 'Characters'} />
                     {/* <CategoryTab title="Credits" onPress={() => handleTextPress('Credits')} isSelected={selectedText === 'Credits'} /> */}
-                    <CategoryTab title="Reviews" onPress={() => handleTextPress('Reviews')} isSelected={selectedText === 'Reviews'} />
+                    {/* <CategoryTab title="PopularReviews" onPress={() => handleTextPress('PopularReviews')} isSelected={selectedText === 'PopularReviews'} /> */}
+                    <CategoryTab title="Reviews" onPress={() => handleTextPress('NewReviews')} isSelected={selectedText === 'NewReviews'} />
                 </View>
             </ScrollView>
             <View style={{ borderTopWidth: 1, borderTopColor: 'white' }}></View>
 
-          {selectedText === 'Game' && <GameTab game={game} />}
+          {/* {selectedText === 'Game' && <GameTab game={game} />} */}
           {selectedText === 'Characters' && <Characters game={game} characters={characters} />}
           {/* {selectedText === 'Credits' && <Credits game={game} />} */}
-          {selectedText === 'Reviews' && <GameReviewListCard game={game} reviews={reviews} />}
+          {/* {selectedText === 'PopularReviews' && <GameReviewListCard game={game} reviews={popularReviews} editReview={editReview} />} */}
+          {selectedText === 'NewReviews' && <GameReviewListCard game={game} reviews={recentReviews} editReview={editReview} />}
         </ScrollView>
     )
 }

diff --git a/app/mobile/Playlog/components/game/ReviewCard.js b/app/mobile/Playlog/components/game/ReviewCard.js
@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { View, Text, Image, StyleSheet, TouchableOpacity } from 'react-native';
 // import heart icon from material icons
 import { MaterialIcons } from '@expo/vector-icons';
 import SmallRatings from '../commons/SmallRatings';
 import { useNavigation } from "@react-navigation/native";
+import { ProfileContext } from '../../context/ProfileProvider';
 
 const exampleReview = {
   game: {
@@ -19,31 +20,53 @@ const exampleReview = {
   likes: 16512,
 };
 
-export default GamePageReviewCard = ({ review = exampleReview }) => {
+export default GamePageReviewCard = ({ review = exampleReview , editReview = null}) => {
   const navigation = useNavigation();
+  const {username} = useContext(ProfileContext);
   const onPress = () => {
-    navigation.navigate('Game', { gameId: review.game.gameId });
+    console.log('review:', review);
+    navigation.navigate('Game', { gameId: review.game_slug });
   };
 
+  const onEdit = () => {
+    editReview(review);
+  }
+
+  const onLike = () => {
+    console.log('Liked:', review);
+  }
+
   return (
     <TouchableOpacity style={styles.card} onPress={onPress}>
       <View style={styles.cardContent}>
         <View style={styles.profileContainer}>
           <MaterialIcons name='person' size={50} color='blue' />
-          <Text style={styles.username}>{review.user.username}</Text>
+          <Text style={styles.username}>{review.user}</Text>
         </View>
         <View style={styles.ratingContainer}>
           <SmallRatings rating={review.rating} />
-          <MaterialIcons name='favorite' size={30} color='red' />
+          <TouchableOpacity onPress={onLike}>
+            <MaterialIcons name='favorite-outline' size={30} color='red' />
+          </TouchableOpacity>
           <Text style={styles.likesCount}>{review.likes} Likes</Text>
         </View>
-        <Text style={styles.reviewText}>{review.text}</Text>
+        <View style={styles.bottom}>
+          <Text style={styles.reviewText}>{review.text}</Text>
+          {username === review.user && <TouchableOpacity onPress={onEdit}> 
+              <MaterialIcons name='edit' size={30} color='blue' /> 
+            </TouchableOpacity>}
+        </View>
       </View>
     </TouchableOpacity>
   );
 };
 
 const styles = StyleSheet.create({
+  bottom:{
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
   card: {
     backgroundColor: '#969696',
     borderRadius: 6,

diff --git a/app/mobile/Playlog/components/game/ReviewGamePopup.js b/app/mobile/Playlog/components/game/ReviewGamePopup.js
@@ -60,43 +60,77 @@ const TextField = ({ text, setText }) => {
     );
 };
 
-export default ReviewGamePopup = ({ game, visible, onClose }) => {
-    const [rating, setRating] = useState(null);
-    const [text, setText] = useState('');
+export default ReviewGamePopup = ({ game, visible, onClose, editingReview = null }) => {
+    const [rating, setRating] = useState(editingReview ? editingReview.rating : null);
+    const [text, setText] = useState(editingReview ? editingReview.text : '');
+    const [editing, setEditing] = useState(editingReview ? true : false);
     const { username } = useContext(ProfileContext);
 
     const submitReview = async () => {
-        try {
-            console.log("game", game);
-            console.log("rating", rating);
-            console.log("text", text);
-            console.log("user", username);
-            console.log(`${process.env.EXPO_PUBLIC_URL}`);
-            const response = await fetch(`${process.env.EXPO_PUBLIC_URL}/create-review`, {
-                method: 'POST',
-
-                body: JSON.stringify({ game: game.game_slug, rating, text, user: username }),
-
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-            });
-            console.log(response);
-            console.log(response.status);
-
-            if (response.status === 201) {
-                alert('Review created successfully')
-            } else {
-                alert('Couldn\'t create review')
-                throw new Error('Couldn\'t create review');
+        if(!editingReview){
+            try {
+                console.log("game", game);
+                console.log("rating", rating);
+                console.log("text", text);
+                console.log("user", username);
+                console.log(`${process.env.EXPO_PUBLIC_URL}`);
+                const response = await fetch(`${process.env.EXPO_PUBLIC_URL}/create-review`, {
+                    method: 'POST',
+
+                    body: JSON.stringify({ game: game.game_slug, rating, text, user: username }),
+
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                });
+                console.log(response);
+                console.log(response.status);
+
+                if (response.status === 201) {
+                    alert('Review created successfully')
+                } else {
+                    alert('Couldn\'t create review')
+                    throw new Error('Couldn\'t create review');
+                }
+            } catch (e) {
+                console.error(e);
+                throw e;
+            }
+            // do check if text is empty or too small
+            onClose();
+        } else {
+            try {
+                console.log("editReviewId", editingReview.id );
+                console.log("editRating", rating);
+                console.log("editText", text);
+                console.log("editUser", username);
+                console.log(`${process.env.EXPO_PUBLIC_URL}`);
+                const response = await fetch(`${process.env.EXPO_PUBLIC_URL}/edit-review`, {
+                    method: 'POST',
+
+                    body: JSON.stringify({ rating, text, review: editingReview.id }),
+
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                });
+                console.log(response);
+                console.log(response.status);
+
+                if (response.status>=200 && response.status<300) {
+                    alert('Review edited successfully')
+                } else {
+                    alert('Couldn\'t edit review')
+                    throw new Error('Couldn\'t edit review');
+                }
+            } catch (e) {
+                console.error(e);
+                throw e;
             }
-        } catch (e) {
-            console.error(e);
-            throw e;
+            // do check if text is empty or too small
+            onClose();
         }
-        // do check if text is empty or too small
-        onClose();
-    };
+    }
 
     return (
         <Modal

diff --git a/app/mobile/Playlog/components/game/Reviews.js b/app/mobile/Playlog/components/game/Reviews.js
@@ -2,12 +2,12 @@ import React, { useEffect } from 'react';
 import { ScrollView, Text, View, StyleSheet } from 'react-native';
 import ReviewCard from './ReviewCard';
 
-export default Reviews = ({ reviews }) => {
+export default Reviews = ({ reviews, editReview }) => {
   return (
     <View style={styles.list}>
         {reviews.reviews.map((review) => (
           <ReviewCard
-            key={review.reviewId} review={review}
+            key={review.reviewId} review={review} editReview={editReview}
           />
         ))}
     </View>

diff --git a/app/mobile/Playlog/components/main/MainPageBanner.js b/app/mobile/Playlog/components/main/MainPageBanner.js
@@ -76,10 +76,10 @@ export default MainPageBanner = ({ game }) => {
     return (
         <TouchableOpacity style={styles.container} onPress={onPress}>
         <Text style={styles.header}>Game of The Day</Text>
-        <Image
+        {/* <Image
             source={{ uri: game.image }} // Replace with your image path
             style={styles.gameBanner}
-        />
+        /> */}
         <View style={styles.bottomContainer}>
             <Image
             source={{ uri: game.image }} // Replace with your image path

diff --git a/app/mobile/Playlog/components/main/MainPageReviewCard.js b/app/mobile/Playlog/components/main/MainPageReviewCard.js
@@ -22,20 +22,21 @@ const exampleReview = {
 export default MainPageReviewCard = ({ review = exampleReview }) => {
   const navigation = useNavigation();
   const onPress = () => {
-    navigation.navigate('Game', { gameId: review.game.gameId });
+    console.log('review:', review);
+    navigation.navigate('Game', { gameId: review.game_slug });
   };
 
   return (
     <TouchableOpacity style={styles.card} onPress={onPress}>
-      <Image source={{ uri: review.game.logo }} style={styles.image} />
+      {/* <Image source={{ uri: review.game.logo }} style={styles.image} /> */}
       <View style={styles.cardContent}>
         <View style={styles.profileContainer}>
           <MaterialIcons name='person' size={50} color='blue' />
-          <Text style={styles.username}>{review.user.username}</Text>
+          <Text style={styles.username}>{review.user}</Text>
         </View>
         <View style={styles.ratingContainer}>
           <SmallRatings rating={review.rating} />
-          <MaterialIcons name='favorite' size={30} color='red' />
+          <MaterialIcons name='favorite-outline' size={30} color='red' />
           <Text style={styles.likesCount}>{review.likes} Likes</Text>
         </View>
         <Text style={styles.reviewText}>{review.text}</Text>