.useReturn hook implementation for new frame

example/src/App.tsx

@@ -1,9 +1,8 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import React from 'react'
 import ebconfig from "./ebconfig.json";
-import ebconfig2 from "./ebconfig2";
+// import ebconfig2 from "./ebconfig2";
 import { EasybaseProvider } from 'easybase-react';
-import FrameSyncExample from "./FrameSyncExample";
 import QueryExample from "./QueryExample";
 import FunctionExample from "./CloudFunctionExample";
 import DbExample from "./DbExample";
@@ -15,16 +14,21 @@ import {
   Link
 } from "react-router-dom";
 import ProjectUser from "./ProjectUser";
+import UseReturnExample from './UseReturnExample';
 
 const IntegrationExample = () => (
   <EasybaseProvider ebconfig={ebconfig} options={{ logging: false }}>
-    <FrameSyncExample />
-    <hr className="m-4" />
+    <h2>Visual Query</h2>
     <QueryExample />
     <hr className="m-4" />
+    <h2>Function</h2>
     <FunctionExample />
     <hr className="m-4" />
+    <h2>Db</h2>
     <DbExample />
+    <hr className="m-4" />
+    <h2>Use Return</h2>
+    <UseReturnExample />
   </EasybaseProvider>
 )
 

example/src/DbCardElement.tsx

@@ -0,0 +1,37 @@
+import React, { useRef } from "react";
+import { useEasybase } from "easybase-react";
+
+const CardElement = ({ rating, picture, app_name, hq, latest_release, _key }: any) => {
+
+    const inputEl = useRef<HTMLInputElement>(null);
+
+    const { db } = useEasybase();
+
+    const onRatingChange = (change: number) => {
+        db().set({ 'rating': rating + change }).where({ _key }).all()
+    }
+
+    const onDelete = () => {
+        db().delete().where({ _key }).one();
+    }
+
+    return (
+        <div className="card-root">
+            <div className="card-delete-button" onClick={onDelete}></div>
+            <img src={picture} className="card-image" alt="" />
+            <input ref={inputEl} type='file' hidden accept="image/*,video/*" />
+            <p className="mp-0" style={{ textAlign: 'center' }}>{latest_release ? latest_release.slice(0, 10) : ""}</p>
+            <div className="p-4" style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+                <h5>{app_name}</h5>
+                <em>{hq}</em>
+            </div>
+            <div style={{ display: "flex", alignItems: "center" }}>
+                <button className="btn orange" onClick={_ => onRatingChange(-1)}><span>-</span></button>
+                <p>{rating}</p>
+                <button className="btn orange" onClick={_ => onRatingChange(1)}><span>+</span></button>
+            </div>
+        </div>
+    )
+}
+
+export default CardElement;

example/src/DbExample.tsx

@@ -11,14 +11,12 @@ const DbExample = () => {
 
     const {
         db,
-        dbEventListener,
         fullTableSize,
         tableTypes
     } = useEasybase();
 
     useEffect(() => {
         const mounted = async () => {
-            dbEventListener(console.log);
             setTableLength(await fullTableSize());
         }
         mounted();

example/src/UseReturnExample.tsx

@@ -0,0 +1,76 @@
+import React, { useEffect, useState } from "react";
+import { useEasybase } from 'easybase-react';
+import CardElement from "./DbCardElement";
+
+const UseReturnExample = () => {
+
+    const [tableLength, setTableLength] = useState(0);
+    const [frameLength, setFrameLength] = useState(10);
+    const [frameOffset, setFrameOffset] = useState(0);
+    const [ratingState, setRatingState] = useState(50);
+
+    const {
+        db,
+        useReturn,
+        fullTableSize,
+        e
+    } = useEasybase();
+
+    const { frame, manualFetch, unsubscribe, loading } = useReturn(() => db().return().where(e.lt('rating', ratingState)).limit(frameLength).offset(frameOffset), [ frameLength, frameOffset, ratingState ]);
+
+    useEffect(() => {
+        async function mounted() {
+            setTableLength(await fullTableSize())
+        }
+        mounted();
+    }, [])
+
+
+    const onAddPage = async () => {
+        await db().insert({ rating: 68, "app name": "Inserted App", _position: 0 }).all();
+    }
+
+    const changePage = async (change: number) => {
+        setFrameOffset(prev => Math.abs(prev + change));
+    }
+
+    const getFirstRecord = async () => {
+        console.log(await db().return("app_name").where({ _position: 0 }).one());
+        console.log(await db().return("app_name").where({ _position: 0 }).all());
+        console.log(await db().return().where({ _position: 0 }).one());
+        console.log(await db().return().where({ _position: 0 }).all());
+    }
+
+    return (
+        <div>
+            <div style={{ display: "flex", alignItems: "center" }}>
+                <div className="m-4">
+                    <button className="btn green" onClick={onAddPage}><span>Add<br />Card</span></button>
+                </div>
+                {loading ? <div className="loader"></div> : frame.map((ele, index) => <CardElement {...ele} index={index} key={index} />)}
+            </div>
+            <div className="button-row">
+                <div className="d-flex align-items-center">
+                    <button className="btn green" onClick={() => changePage(-10)}><span>Prev</span></button>
+                    <p className="m-4">{frameOffset} - {frameOffset + Number(frameLength)} of {tableLength}</p>
+                    <button className="btn green" onClick={() => changePage(10)}><span>Next</span></button>
+                </div>
+                <div className="d-flex align-items-center">
+                    <p className="m-4">Edit db limit: </p>
+                    <input type="number" onChange={e => setFrameLength(+e.target.value)} value={frameLength} />
+                    <div className="spacer m-4"></div>
+                    <p className="m-4">Edit Rating filter: </p>
+                    <input type="number" onChange={e => setRatingState(+e.target.value)} value={ratingState} />
+                </div>
+                <div className="d-flex align-items-center">
+                    <button className="btn green m-4" onClick={getFirstRecord}><span>Get 1st Card</span></button>
+                    <div className="spacer m-4"></div>
+                    <button className="btn green m-4" onClick={manualFetch}><span>Manual Fetch</span></button>
+                    <button className="btn green m-4" onClick={unsubscribe}><span>Unsubscribe</span></button>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default UseReturnExample;

example/src/styles.css

@@ -128,4 +128,35 @@
     width: 0.125rem;
     border-radius: 3px;
     background-color: #a7a7a7;
+}
+
+.loader {
+    border: 16px solid #f3f3f3;
+    border-radius: 50%;
+    border-top: 16px solid #3498db;
+    width: 120px;
+    height: 120px;
+    -webkit-animation: spin 2s linear infinite;
+    /* Safari */
+    animation: spin 2s linear infinite;
+}
+
+/* Safari */
+
+@-webkit-keyframes spin {
+    0% {
+        -webkit-transform: rotate(0deg);
+    }
+    100% {
+        -webkit-transform: rotate(360deg);
+    }
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
 }

package.json

@@ -50,7 +50,7 @@
   "dependencies": {
     "@react-native-community/async-storage": "1.12.1",
     "EasyQB": "git+https://github.com/easybase/EasyQB.git",
-    "easybasejs": "^4.1.5",
+    "easybasejs": "^4.2.1",
     "fast-deep-equal": "^3.1.3",
     "object-observer": "^4.0.3",
     "react-native-storage": "^1.0.1"

src/EasybaseContext.tsx

@@ -6,9 +6,11 @@ import {
     UpdateRecordAttachmentOptions,
     FrameConfiguration,
     QueryOptions,
-    ContextValue
+    ContextValue,
+    UseReturnValue
 } from "./types";
 import { SQW } from "EasyQB/types/sq";
+import { NewExpression } from "EasyQB/types/expression";
 
 function Frame(): Record<string, any>[];
 function Frame(index: number): Record<string, any>;
@@ -38,7 +40,9 @@ const c: ContextValue = {
     signUp: async (_: string, _2: string, _3?: Record<string, string>) => ({}) as StatusResponse,
     onSignIn: (_: () => void) => {},
     db: (_?: string) => ({}) as SQW,
-    dbEventListener: (_: () => void) => () => {}
+    dbEventListener: (_: () => void) => () => {},
+    useReturn: (_: () => SQW) => ({}) as UseReturnValue,
+    e: ({}) as NewExpression
 }
 
 export default createContext(c);