Social.js

import { useState } from 'react';
import { Text, View, StyleSheet, TextInput, Button, Keyboard, ScrollView, Alert } from 'react-native';
import * as SQLite from 'expo-sqlite';

export default function App() {
  const myDB = SQLite.openDatabase('myreviews.db');
  const [name, setName] = useState('');
  const [review, setReview] = useState('');
  const [rating, setRating] = useState('');
  const [recordset, setRecordset] = useState([]);

  const insertReview = async () => {
    console.log('Insert review button pressed');

    if (!name.trim() || !review.trim() || !rating.trim()) {
      Alert.alert('Error', 'Please fill in all fields');
      return;
    }

    if (isNaN(rating) || rating < 0 || rating > 5) {
      Alert.alert('Error', 'Rating should be a number between 0 and 5');
      return;
    }

    try {
      await new Promise((resolve, reject) => {
        myDB.transaction((tx) => {
          tx.executeSql(
            'CREATE TABLE IF NOT EXISTS products (p_name TEXT, p_review TEXT, p_rating INTEGER);',
            [],
            () => {},
            (_, error) => reject(error)
          );

          tx.executeSql(
            'INSERT INTO products (p_name, p_review, p_rating) VALUES (?, ?, ?)',
            [name, review, rating],
            (_, { rowsAffected }) => {
              if (rowsAffected > 0) {
                console.log('Data successfully inserted');
                setName('');
                setReview('');
                setRating('');
                fetchReviews(); // Call fetchReviews here
                resolve();
              } else {
                reject('Failed to insert data');
              }
            },
            (_, error) => reject(error)
          );
        });
      });

      Keyboard.dismiss();
    } catch (error) {
      console.error('Error inserting review:', error);
    }
  };

  const fetchReviews = () => {
    myDB.transaction((tx) => {
      tx.executeSql(
        'SELECT p_name, p_review, p_rating FROM products ORDER BY rowid DESC',
        [],
        (_, { rows: { _array } }) => {
          setRecordset(_array);
        },
        (_, error) => {
          console.error('Error fetching reviews:', error);
        }
      );
    });
  };

  const deleteAllReviews = () => {
    console.log('Delete all reviews button pressed');

    myDB.transaction((tx) => {
      tx.executeSql(
        'DELETE FROM products',
        [],
        (_, { rowsAffected }) => {
          if (rowsAffected > 0) {
            console.log('All reviews successfully deleted');
            setRecordset([]);
          } else {
            console.log('No reviews found to delete');
          }
        }
      );
    });
  };

  return (
    <View style={styles.container}>
      <View style={styles.inputContainer}>
        <Text>Name:</Text>
        <TextInput
          style={styles.input}
          value={name}
          onChangeText={(text) => setName(text)}
        />
      </View>
      <View style={styles.inputContainer}>
        <Text>Review:</Text>
        <TextInput
          style={styles.input}
          value={review}
          onChangeText={(text) => setReview(text)}
        />
      </View>
      <View style={styles.inputContainer}>
        <Text>Rating:</Text>
        <TextInput
          style={styles.input}
          value={rating}
          onChangeText={(text) => setRating(text)}
          keyboardType="numeric"
        />
      </View>
      <View style={styles.buttonContainer}>
        <Button title="Submit Review" onPress={insertReview} />
        <Button title="Delete All" onPress={deleteAllReviews} />
      </View>
      <ScrollView style={styles.scrollView}>
        {recordset.map((item, index) => (
          <View key={index} style={styles.reviewItem}>
            <Text>Name: {item.p_name}</Text>
            <Text>Review: {item.p_review}</Text>
            <Text>Rating: {item.p_rating}</Text>
          </View>
        ))}
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  inputContainer: {
    marginBottom: 10,
  },
  input: {
    borderWidth: 1,
    borderColor: 'gray',
    borderRadius: 5,
    padding: 8,
  },
  buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: 10,
    marginBottom: 20,
  },
  scrollView: {
    flex: 1,
    marginTop: 10,
  },
  reviewItem: {
    marginBottom: 20,
    padding: 10,
    borderWidth: 1,
    borderColor: 'lightgray',
    borderRadius: 5,
  },
});