diff --git a/src/database.js b/src/database.js new file mode 100644 index 0000000..651ec45 --- /dev/null +++ b/src/database.js @@ -0,0 +1,56 @@ +import React from 'react'; + +export class DB { + state = { + db_object: false, // In current implementation, this is an alasql object. + db_name: false, + } + + constructor(obj, name) { + this.state.db_object = obj; + this.state.db_name = name; + } + + query(s) { + return this.state.db_object(s); + } +} + +function fetch_db_from_sqlite(filename) { + return new Promise(function(resolve, reject) { + var initSqlJs = require('sql.js'); + initSqlJs({ locateFile: filename => `/sql.js/dist/${filename}` }) + .then( SQL => { + var asql = require('alasql'); + // Attach to the SQLite database file, + // Create an IndexedDB to migrate it to, named "db", + // Get tables + var query = ""; + query += "ATTACH SQLITE DATABASE db(\"" + filename + "\"); USE db;"; + asql.promise(query) + .then(res => { + var imported_db = new DB(asql, "db"); + resolve(imported_db); + }); + }); + }); +} + +export class FetchSQLiteDB extends React.Component { + state = { + loading: true, + error: false, + done: false, + db: false + }; + + componentDidMount() { + fetch_db_from_sqlite(this.props.sqlite_file) + .then(db => { this.setState({ loading: false, done: true, db: db }); }) + .catch(error => this.setState({ loading: false, done: false, error })); + } + + render() { + return this.props.children(this.state); + } +} diff --git a/src/fetch.js b/src/fetch.js new file mode 100644 index 0000000..23272bd --- /dev/null +++ b/src/fetch.js @@ -0,0 +1,26 @@ +import React from 'react'; + +export class Fetch extends React.Component { + state = { + loading: true, + error: false, + done: false, + data: [], + }; + + componentDidMount() { + fetch(this.props.url) + .then(res => { + if (!res.ok) { + throw new Error(res.status); + } + return res.arrayBuffer(); + }) + .then(data => this.setState({ loading: false, done: true, data })) + .catch(error => this.setState({ loading: false, done: false, error })); + } + + render() { + return this.props.children(this.state); + } +} diff --git a/src/index.js b/src/index.js index a55a90b..2f069d5 100644 --- a/src/index.js +++ b/src/index.js @@ -1,100 +1,46 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import './index.css'; - -var initSqlJs = require('sql.js'); -var alasql = require('alasql'); - -var FetchTypeEnum = { - TO_VARIABLE: 1, - TO_LOCALSTORAGE: 2 -} - -class Fetch extends React.Component { - state = { - loading: true, - error: false, - done: false, - data: [], - }; - - componentDidMount() { - fetch(this.props.url) - .then(res => { - if (!res.ok) { - throw new Error(res.status); - } - return res.arrayBuffer(); - }) - .then(data => this.setState({ loading: false, done: true, data })) - .catch(error => this.setState({ loading: false, done: false, error })); - } - - render() { - console.log(this.state); - return this.props.children(this.state); - } -} - -class FetchSQLiteToIndexedDB extends React.Component { - state = { - loading: true, - error: false, - done: false, - sqlite_path: false, - indexed_db: false - }; - - componentDidMount() { - fetch(this.props.url) - .then(res => { - if (!res.ok) { - throw new Error(res.status); - } - return res.arrayBuffer(); - }) - .then(sqlite_data => this.setState({ loading: true, done: false })) - .catch(error => this.setState({ loading: false, done: false, error })); - } +import { Fetch } from './fetch.js'; +import { FetchSQLiteDB } from './database.js'; - render() { - console.log(this.state); - return this.props.children(this.state); - } -} - -const Loading = ({url}) =>

Loading: {url}

; +import './index.css'; -const Error = ({error}) =>

Oops! Something went wrong: {error.message}

; +const URLLoading = ({url}) =>

Loading: {url}

; +const URLError = ({error}) =>

Failed to load URL resource: {error.message}

; +const URLFinished = ({url, data}) =>

{url} was loaded: {data.byteLength} bytes received.

; -const Finished = ({url, data}) =>

{url} was loaded: {data.byteLength} bytes received.

; +const DBLoading = ({sqlite_file}) =>

Loading: {sqlite_file}

; +const DBError = ({error}) =>

Failed to load database: {error.message}

; +const DBFinished = ({sqlite_file, db}) =>

{sqlite_file} was loaded. Name: { db.state.db_name }. Tables: { JSON.stringify(db.query("SHOW TABLES;")) }

; const TestFetch = ({url}) => ( {({ loading, error, done, data }) => ( <> - { loading && } - { error && } - { done && } + { loading && } + { error && } + { done && } )} ) -// alasql(['ATTACH SQLITE DATABASE testdb("/test.sqlite");\ -// SELECT * FROM images']).then(function(res){ -// console.log("Images:",res.pop()); -// }); - -initSqlJs({ locateFile: filename => `/sql.js/dist/${filename}` }).then( SQL => { - alasql(['ATTACH SQLITE DATABASE test("/test.sqlite");\ - USE test;\ - SELECT * FROM images']).then(function(res){ - console.log("Images:",res.pop()); - }); - } ); +const TestDBFetch = ({sqlite_file}) => ( + + {({ loading, error, done, db }) => ( + <> + { loading && } + { error && } + { done && } + + )} + +) ReactDOM.render( - , + <> + + + , document.getElementById('root') );