Library created for our team
Installation
yarn add backend-hook or npm install backend-hook --save
USAGE
In App.js which is the entrying point for the app
import React from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import { AppProvider } from "backend-hook";
function App() {
const options = {
name: "tellit",
services: {
//payment: "http://localhost:8083",
app: "http://localhost:8083",
uploadUrl: "",
},
};
const firebaseConfig = {
apiKey: "AIzaSyC_U0YcUQcj_GvcNW4yDT4kH5UGJ7v25Oc",
authDomain: "test-57e4e.firebaseapp.com",
databaseURL: "https://test-57e4e.firebaseio.com",
projectId: "test-57e4e",
storageBucket: "test-57e4e.appspot.com",
messagingSenderId: "827256107469",
appId: "1:827256107469:web:56a78296977e9347d21484",
measurementId: "G-HV6FNMSPZY",
};
return (
<AppProvider options={options} firebaseConfig={firebaseConfig}>
<BrowserRouter>
<Switch>
<Route path="/home" exact component={HomePage}></Route>
</Switch>
</BrowserRouter>
</AppProvider>
);
}
export default App;
Input Field Specification
For error messages on input if input name is email to get the error you must get error this way
props.error is an object with array errors message.
Form
import React from 'react';
import {useForm} from 'backend-hook'
const ADD = ``;
const UDATE = ``;
function form(props) {
const {handleInput, onSubmit, setInput, getInput, data, errors, setValidation, reset} = useForm()
const send = data => {
}
//reset() to reset form
React.useEffect(()=> {
setValidation({name: {
required: 'required message',
email: 'required email',
minLength: '4|error message',
maxLength: '4|Error Message',
password: 'field|error message'
}})
props.location.state?setInput(props.location.state, ['rest', 'description']):''
}, [])
return (<React.Fragment>
<input type="text" onChange={handleInput} value={getInput('rest')} name="rest" error={errors}>
<button onClick={onSubmit(send)}>send</button>
</React.Fragment>)
}
Fetch
import React from "react";
import { useFetch } from "backend-hook";
function fetch(props) {
const { runFetch, data, error, success } = useFetch({
onSuccess: (res) => {
//statement
},
onError: (err) => {
//statement
},
cache: "cache_key",
persist: "true/false", //to save the data to localstorage
query: "mutation or query",
fetchMode: "once/always", //default is always
});
React.useEffect(() => {
runFetch({
service: "auth",
uri: "/login",
data: { name: "israel" },
method: "GET",
});
}, []);
}
useGraphql Mutation is for making alteration in database like delete, update, and insert
import React from "react";
import { useGraphql } from "backend-hook";
const INSERT = ``;
function mutation(props) {
const { runGraphql, data, loading, error, refetch } = useGraphql({
query: INSERT,
onSuccess: (res) => {},
onError: (err) => {},
cache: "cache_key",
persist: "boolean", //save cache to localstorage
});
React.useEffect(() => {
runGraphql({ objects: data });
});
}
GLOBAL STATE MANAGEMENT
import React from "react";
import { setCache, setTempCache } from "backend-hook";
function state(props) {
setCache({ league: "football" });
setCache({ match: "fulltime" });
//props.cache to access all cach value
}
Login
import { useLogin } from "backend-hook";
function LoginPage() {
const { runLogin, isLoggedIn, runUpdateLogin } = useLogin({
onUpdateSuccess: (res) => {},
onUpdateError: (res) => {},
});
runLogin({ user_id, role, features, token }); // to set data for login;
isLoggedIn(); //check if the is logged in.
showLoginDialog(); //It return true when user have not login and show dialog box with cache property anonymousDialog
runUpdateLogin();
}
Logout
import { useLogout } from "backend-hook";
function LoginPage() {
const { runLogout } = useLogout({
onSuccess: (res) => {},
onError: (err) => {},
});
}
Upload
Upload component
import { useUpload } from "backend-hook";
function UploadPage() {
const { progress, loading, runUpload, success, error } = useUpload({
onSuccess: (res) => {},
onError: (err) => {},
});
const handleUpload = (event) => {
runUpload({ file: event.target.files[0], resize });
};
return <input type="file" onChange={handleUpload} />;
}
resize: { width: int, height: int, fit: cover, contain, fill, inside or outside (default: cover), }
Pagination
import React from "react";
import { usePagination } from "backend-hook";
function Page(props) {
const { runPagination } = usePagination();
runPagination({
total: data.total.aggregate.count /*total number of rows*/ร,
currentPage: page,
perPage,
});
}
Subscription
import React from "react";
import { useSubscription } from "backend-hook";
function Page(props) {
const { runSubscription, webSocket, onMessage(data), onError(data), onConnected(), onConnectionStatus() } = useSubscription({option, url});
runSubscription({
query, id, operationName
});
//operationName optional
//url: ws://graphql url
}
Social Authentication
import { useSocialAuth } from "backend-hook";
function Page(props) {
const { runFacebook, runGoogle } = useSocialAuth({ scope: [] });
const facebook = async () => {
try {
let facebookRes = await runFacebook();
} catch (e) {}
};
}
In index.html add the following files
<!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-app.js"></script>
<!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-analytics.js"></script>
<!-- Add Firebase products that you want to use -->
<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-firestore.js"></script>
Finally add firebase config to the app.js
Global Variables
import { Store, Sort, SortDesc } from "backend-hook";
function Page(props) {
Store(key).set(data); //set set
Store(key).get(); //get data
Store(key).init({unique: 'column', upsert: ['column', 'column']) //
Store(key).insert(data) //data can be array or object
Store(key).upsert(data) //data can be array or object
Store(key).update(condition, data) //condition is object and data is object
Store(key).delete(condition) //condition can be object or array
Store(key).select(condition) //condition is object and optional
Sort(data, key) //data is data to sort and key is sortBy in asending order
SortDesc(data, key) //data is data to sort and key is sortBy in desending order
//example
Store("collect")
.init({ unique: "id", upsert: ["id"] })
.insert([
{ id: 1, name: "israel" },
{ id: 2, name: "israel" },
{ id: 1, name: "ifeoluwa" },
])
.upsert({ id: 1, name: "israel" })
.update({ name: "israel" }, { name: "abiodun" })
.remove([{ id: 1 }])
.select();
}