minor changes in UI & uploading the APK that connects to remote host

koduyorum/.gitignore

@@ -181,7 +181,6 @@ local.properties
 captures/
 .externalNativeBuild/
 .cxx/
-*.apk
 output.json
 
 # IntelliJ

koduyorum/src/PostDetail.tsx

@@ -1,14 +1,19 @@
 import React, { useState, useEffect } from 'react';
 import { View, Text, StyleSheet, ScrollView, TouchableOpacity, TextInput, Alert } from 'react-native';
+import { Picker } from '@react-native-picker/picker';
+import SyntaxHighlighter from 'react-native-syntax-highlighter';
+import { atomOneDark } from 'react-native-syntax-highlighter';
 
 const PostDetail = ({ route }) => {
     const { post, user_id, username } = route.params;
 
-    const [comments, setComments] = useState([]);  // Start with an empty comments array
+    const [comments, setComments] = useState([]);
     const [newComment, setNewComment] = useState('');
-    const [codeOutput, setCodeOutput] = useState('');  // To store the code execution output
+    const [codeSnippet, setCodeSnippet] = useState('');
+    const [availableLanguages, setAvailableLanguages] = useState([]);
+    const [selectedLanguage, setSelectedLanguage] = useState('');
+    const [codeOutput, setCodeOutput] = useState('');
 
-    // Fetch comments when the component mounts
     useEffect(() => {
         const fetchComments = async () => {
             try {
@@ -28,23 +33,38 @@ const PostDetail = ({ route }) => {
         fetchComments();
     }, [post.id]);
 
-    // Function to handle adding a new comment
+
+    useEffect(() => {
+        const fetchLanguages = async () => {
+            try {
+                const response = await fetch('localhost/get_api_languages/');
+                const data = await response.json();
+                const languageNames = Object.keys(data.languages);
+                setAvailableLanguages(languageNames);
+            } catch (error) {
+                Alert.alert('Error', 'Failed to load languages.');
+            }
+        };
+
+        fetchLanguages();
+    }, []);
+
     const handleAddComment = async () => {
-        if (newComment.trim() === '') {
-            Alert.alert('Comment cannot be empty');
+        if (newComment.trim() === '' || selectedLanguage === '') {
+            Alert.alert('Comment, language, and code snippet cannot be empty');
             return;
         }
 
         const newCommentObj = {
-            question_id: post.id,  // The ID of the question the comment is associated with
-            details: newComment,  // The comment text
-            language: post.programmingLanguage,  // Programming language of the post
-            user_id: user_id,  // The logged-in user's ID
+            question_id: post.id,
+            details: newComment,
+            code_snippet: codeSnippet,  // Include code snippet in the request
+            language: selectedLanguage,
+            user_id: user_id,
         };
 
         try {
-            // Send the comment to the backend
-            const response = await fetch('http://10.0.2.2:8000/create_comment/', {
+            const response = await fetch('https://clownfish-app-brdp5.ondigitalocean.app/create_comment/', {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
@@ -55,9 +75,9 @@ const PostDetail = ({ route }) => {
             const data = await response.json();
 
             if (response.status === 201) {
-                // If the comment is successfully added, update the comments state
-                setComments([...comments, { comment_id: data.comment_id, details: newComment, user: username }]);
-                setNewComment('');  // Clear the comment input
+                setComments([...comments, { comment_id: data.comment_id, details: newComment, code_snippet: codeSnippet, user: username }]);
+                setNewComment('');
+                setCodeSnippet('');  // Clear code snippet input
             } else {
                 Alert.alert('Error', data.error || 'Failed to add comment');
             }
@@ -88,6 +108,15 @@ const PostDetail = ({ route }) => {
             <View key={index} style={styles.comment}>
                 <Text style={styles.commentUser}>{comment.user}:</Text>
                 <Text style={styles.commentText}>{comment.details}</Text>
+
+                {comment.code_snippet ? (
+                    <SyntaxHighlighter
+                        language={selectedLanguage || 'javascript'}
+                        style={atomOneDark}
+                    >
+                        {comment.code_snippet}
+                    </SyntaxHighlighter>
+                ) : null}
             </View>
         ));
     };
@@ -99,7 +128,9 @@ const PostDetail = ({ route }) => {
 
             <View style={styles.codeContainer}>
                 <Text style={styles.codeTitle}>Code Snippet:</Text>
-                <Text>{post.codeSnippet}</Text>
+                <SyntaxHighlighter language={post.programmingLanguage} style={atomOneDark}>
+                    {post.codeSnippet}
+                </SyntaxHighlighter>
             </View>
 
             {/* Run Code Button */}
@@ -120,12 +151,35 @@ const PostDetail = ({ route }) => {
                 {renderComments()}
             </View>
 
+            {/* Language Picker */}
+            <Picker
+                selectedValue={selectedLanguage}
+                onValueChange={(itemValue) => setSelectedLanguage(itemValue)}
+                style={styles.picker}
+            >
+                <Picker.Item label="Select a language" value="" />
+                {availableLanguages.map((language, index) => (
+                    <Picker.Item key={index} label={language} value={language} />
+                ))}
+            </Picker>
+
+            {/* Input for comment details */}
             <TextInput
                 style={styles.input}
                 placeholder="Add a comment..."
                 value={newComment}
                 onChangeText={setNewComment}
             />
+
+            {/* Input for code snippet */}
+            <TextInput
+                style={styles.codeInput}
+                placeholder="Add a code snippet..."
+                value={codeSnippet}
+                onChangeText={setCodeSnippet}
+                multiline={true}
+            />
+
             <TouchableOpacity style={styles.addButton} onPress={handleAddComment}>
                 <Text style={styles.addButtonText}>Submit Comment</Text>
             </TouchableOpacity>
@@ -138,6 +192,15 @@ const styles = StyleSheet.create({
         padding: 20,
         backgroundColor: '#F5F5F5',
     },
+    codeInput: {
+        borderWidth: 1,
+        borderColor: '#ccc',
+        borderRadius: 5,
+        padding: 10,
+        marginVertical: 10,
+        backgroundColor: '#fff',
+        fontFamily: 'monospace',
+    },
     title: {
         fontSize: 22,
         fontWeight: 'bold',
@@ -231,6 +294,11 @@ const styles = StyleSheet.create({
         fontWeight: 'bold',
         fontSize: 16,
     },
+    picker: {
+        marginVertical: 20,
+        height: 50,
+        width: '100%',
+    },
 });
 
 export default PostDetail;

koduyorum/src/QuestionList.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { View, TextInput, Button, FlatList, StyleSheet, Text, TouchableOpacity } from 'react-native';
 import QuestionCard from './QuestionCard';
-import { useNavigation, useRoute } from '@react-navigation/native';
+import { useNavigation, useRoute, useFocusEffect } from '@react-navigation/native'; // Import useFocusEffect
 
 const QuestionList = () => {
     const navigation = useNavigation();
@@ -24,9 +24,12 @@ const QuestionList = () => {
         }
     };
 
-    useEffect(() => {
-        fetchQuestions();
-    }, []);
+    // Fetch questions when the screen comes into focus
+    useFocusEffect(
+        React.useCallback(() => {
+            fetchQuestions();
+        }, [])
+    );
 
     // Function to handle search
     const handleSearch = async () => {