react-sqlite-hook

React Hook for @capacitor-community/sqlite plugin

react-sqlite-hook

REFACTOR

A React Hook to help Capacitor developpers to use @capacitor-community/sqlite plugin in React or Ionic/React applications

Maintainers

Maintainer	GitHub	Social
Quéau Jean Pierre	jepiqueau

Installation

npm install --save @capacitor-community/sqlite@refactor
npm install --save-dev react-sqlite-hook@refactor

Applications demonstrating the use of the plugin and the react hook

• [react-sqlite-app-starter] (https://github.com/jepiqueau/react-sqlite-app-starter/tree/refactor)

Usage

• in the project app.tsx file import the sqlite hook

import { useSQLite } from 'react-sqlite-hook/dist';

...

export let sqlite: any;

const App: React.FC = () => {
  // to use the hook as a singleton 
  const {echo, getPlatform, createConnection, closeConnection,
         retrieveConnection, retrieveAllConnections, closeAllConnections,
         addUpgradeStatement, requestPermissions, 
         isAvailable} = useSQLite();
  sqlite = {echo: echo, getPlatform: getPlatform,
            createConnection: createConnection,
            closeConnection: closeConnection,
            retrieveConnection: retrieveConnection,
            retrieveAllConnections: retrieveAllConnections,
            closeAllConnections: closeAllConnections,
            addUpgradeStatement: addUpgradeStatement,
            requestPermissions: requestPermissions,
            isAvailable:isAvailable};

...
  return (
    ...
  )
};
export default App;

• in a project component

...
import { sqlite } from '../App';
import { SQLiteDBConnection, Result } from 'react-sqlite-hook/dist';

const NoEncryption: React.FC = () => {
   const [log, setLog] = useState<string[]>([]);

   useEffect( () => {
       const testDatabaseNoEncryption = async (): Promise<Boolean>  => {
           setLog((log) => log.concat("* Starting testDatabaseNoEncryption *\n"));
   
           // test the plugin with echo
           let res: any = await sqlite.echo("Hello from echo");
           if(res.value !== "Hello from echo") return false;
           setLog((log) => log.concat("> Echo successful\n"));
           // create a connection for testNew
           res = await sqlite.createConnection("testNew");
           if(res == null ) return false;
           if((Object.keys(res)).includes("result") && !res.result) return false;
           setLog((log) => log.concat("> createConnection " +
                                       " 'testNew' successful\n"));
           let db: SQLiteDBConnection = res; 
         
           // open testNew
           res = await db.open();
           if(!res.result) return false;
           setLog((log) => log.concat("> open 'testNew' successful\n"));

           // Drop tables if exists
           res = await db.execute(dropTablesTablesNoEncryption);
           if(res.changes.changes !== 0 &&
                        res.changes.changes !== 1) return false;
           setLog((log) => log.concat(" Execute1 successful\n"));
           
           // Create tables
           res = await db.execute(createTablesNoEncryption);
           if(res.changes.changes !== 0 &&
               res.changes.changes !== 1) return false;
           setLog((log) => log.concat(" Execute2 successful\n"));

           // Insert two users with execute method
           res = await db.execute(importTwoUsers);
           if(res.changes.changes !== 2) return false;
           setLog((log) => log.concat(" Execute3 successful\n"));

           // Select all Users
           res = await db.query("SELECT * FROM users");
           if(res.values.length !== 2 ||
           res.values[0].name !== "Whiteley" ||
                       res.values[1].name !== "Jones") return false;
           setLog((log) => log.concat(" Select1 successful\n"));

           // add one user with statement and values              
           let sqlcmd = "INSERT INTO users (name,email,age) VALUES (?,?,?)";
           let values: Array<any>  = ["Simpson","Simpson@example.com",69];
           res = await db.run(sqlcmd,values);
           if(res.changes.changes !== 1 ||
                           res.changes.lastId !== 3) return false;
           setLog((log) => log.concat(" Run1 successful\n"));

           // add one user with statement              
           sqlcmd = `INSERT INTO users (name,email,age) VALUES `+
                           `("Brown","Brown@example.com",15)`;
           res = await db.run(sqlcmd);
           if(res.changes.changes !== 1 ||
                       res.changes.lastId !== 4) return false;
           setLog((log) => log.concat(" Run2 successful\n"));

           // Select all Users
           res = await db.query("SELECT * FROM users");
           if(res.values.length !== 4) return false;
           setLog((log) => log.concat(" Select2 successful\n"));

           // Select Users with age > 35
           sqlcmd = "SELECT name,email,age FROM users WHERE age > ?";
           values = ["35"];
           res = await db.query(sqlcmd,values);
           if(res.values.length !== 2) return false;
           setLog((log) => log
                   .concat(" Select with filter on age successful\n"));          
           // Close Connection NoEncryption        
           res = await sqlite.closeConnection("NoEncryption"); 
           if(!res.result) {
               return false; 
           }
   
         return true;
       }
       if(sqlite.isAvailable) {
           testDatabaseNoEncryption().then(res => {
               if(res) {    
                   setLog((log) => log
                       .concat("\n* The set of tests was successful *\n"));
               } else {
                   setLog((log) => log
                       .concat("\n* The set of tests failed *\n"));
               }
           });
       } else {
           sqlite.getPlatform().then((ret: { platform: string; })  =>  {
               setLog((log) => log.concat("\n* Not available for " + 
                                   ret.platform + " platform *\n"));
           });         
       }
        
     }, []);   
   
     
 return (
       <IonCard className="container-noencryption">
           <IonCardContent>
               <pre>
                   <p>{log}</p>
               </pre>
           </IonCardContent>
       </IonCard>
 );
};

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Jean Pierre Quéau 💻

This project follows the all-contributors specification. Contributions of any kind welcome!