App.js

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

export default function App() {
  const myDB = SQLite.openDatabase('myproducts.db');
  const [char, setChar] = useState('');
  const [frequency, setFrequency] = useState('');
  const [records, setRecords] = useState([]);

  useEffect(() => {
    init();
    fetchRecords();
  }, []); //eslint-disable-line

const deleteR = (which) => {
    myDB.transaction((tx) => {
      tx.executeSql(
        'DELETE FROM products WHERE p_id=?',
        [which],
        (_, result) => {
          if (result.rowsAffected > 0) {
            fetchRecords();
            Alert.alert('Success', 'Record deleted from the database.');
          } else {
            Alert.alert('Error', 'Failed to delete record from the database.');
          }
        },
        (_, error) => {
          console.error(error);
          Alert.alert('Error', 'Failed to delete record from the database.');
        }
      );
    });
  };

  const init = () => {
    myDB.transaction((tx) => {
      tx.executeSql(
        'CREATE TABLE IF NOT EXISTS products (p_id INTEGER PRIMARY KEY NOT NULL, p_title TEXT, p_description TEXT, p_inventory INTEGER, p_image TEXT);'
      );
    });
    console.log('Database table created');
  };

  const fetchRecords = () => {
    myDB.transaction((tx) => {
      tx.executeSql(
        'SELECT * FROM products ORDER BY p_id DESC',
        [],
        (_, { rows }) => {
          setRecords(rows._array);
        },
        (_, error) => {
          console.error(error);
        }
      );
    });
  };

  const insert = () => {
  if (!char || !frequency) {
    Alert.alert('Missing Information', 'Please enter both character(s) and frequency.');
    return;
  }

  const parsedFrequency = parseInt(frequency);
  if (isNaN(parsedFrequency)) {
    Alert.alert('Invalid Frequency', 'Please enter a valid integer number for frequency.');
    return;
  }

  const outcome = char.repeat(parsedFrequency); // Compute the outcome

  myDB.transaction((tx) => {
    tx.executeSql(
      'INSERT INTO products (p_title, p_description, p_inventory, p_image) VALUES (?, ?, ?, ?)',
      [char, frequency, outcome, ''] // Insert the outcome instead of parsedFrequency
    );
  });

  Keyboard.dismiss();
  setChar('');
  setFrequency('');
  fetchRecords();

  Alert.alert('Success', 'Record added to the database.');
};

  return (
    <View style={styles.container}>
      <View style={styles.itemlist}>
        <Text style={styles.itemheading}>Character(s):</Text>
        <TextInput
          style={styles.textinput}
          onChangeText={(item) => setChar(item)}
          value={char}
        />
      </View>
      <View style={styles.itemlist}>
        <Text style={styles.itemheading}>Frequency:</Text>
        <TextInput
          style={styles.textinput}
          onChangeText={(item) => setFrequency(item)}
          value={frequency}
          keyboardType="numeric"
        />
      </View>
      <View style={styles.button}>
        <Button title="Add to Database" onPress={insert} />
      </View>

      <ScrollView style={styles.recordsContainer}>
        {records.map((record) => (
          <View key={record.p_id} style={styles.recordItem}>
            <TouchableOpacity onPress={() => deleteR(record.p_id)}>
            <Text>Character(s): {record.p_title}</Text>
            <Text>Frequency: {record.p_description}</Text>
            <Text>Outcome: {record.p_inventory}</Text>
            </TouchableOpacity>
          </View>
        ))}
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 65,
    alignItems: 'center',
    backgroundColor: 'green',
    paddingHorizontal: 20,
  },
  itemlist: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 10,
  },
  itemheading: {
    fontSize: 16,
    fontWeight: 'bold',
    color: 'cyan',
    marginLeft: 10,
    marginBottom: 5,
    width: 150,
    marginTop: 10,
  },
  textinput: {
    flex: 1,
    borderBottomWidth: 2,
    borderBottomColor: 'black',
    marginTop: 10,
  },
  button: {
    width: '100%',
    marginTop: 20,
    backgroundColor: 'purple'
  },
  recordsContainer: {
    flex: 1,
    marginTop: 20,
  },
  recordItem: {
    backgroundColor: '#eee',
    padding: 10,
    marginBottom: 10,
  },
});