import React , { useState } from 'react' ; import faunadb from 'faunadb' ; import { useFaunaClient , useGetAll , useGet , useCreate , useDelete , useUpdate } from 'use-fauna' ; import { DataItem } from '../../src/types/fauna' ; import UseCreateForm from './UseCreateForm' ; import UseDeleteForm from './UseDeleteForm' ; import UseUpdateForm from './UseUpdateForm' ; function Content ( ) { const client = useFaunaClient ( process . env . REACT_APP_FAUNA_KEY as string ) ; const [ getAllInputValue , setGetAllInputValue ] = useState ( 'collections' ) ; const [ collection , setCollection ] = useState ( '' ) ; const [ getAll , data = null , status ] = useGetAll ( client ) ; const [ getFunction , getData , getStatus ] = useGet ( client ) ; const [ getSchema , setGetSchema ] = useState ( 'collection' ) ; const [ getRefId , setGetRefId ] = useState ( '' ) ; const [ useGetRefId , setUseGetRefId ] = useState ( '' ) ; const [ createFunction , createData , createStatus ] = useCreate ( client ) ; const [ deleteFunction , deleteData , deleteStatus ] = useDelete ( client ) ; const [ updateFunction , updateData , updateStatus ] = useUpdate ( client ) ; console . log ( 'updateFunction' , updateFunction ) ; console . log ( 'updateData' , updateData ) ; console . log ( 'updateStatus' , updateStatus ) ; return ( < div > { } < UseUpdateForm updateFunction = { updateFunction } / > { updateData && ( < div > < code > { JSON . stringify ( updateData ) } < /code> < /div>)} < hr / > { } < UseDeleteForm deleteFunction = { deleteFunction } / > { deleteData && ( < div > < code > { JSON . stringify ( deleteData ) } < /code> < /div>)} < hr / > { } < div > < h2 > useGetAll < /h2> < select name = "schema" id = "schema" value = { getAllInputValue } onChange = { e => { setGetAllInputValue ( e . target . value ) ; } } defaultValue = { 0 } > < option value = "collections" > collections < /option> < option value = "databases" > databases < /option> < option value = "documents" > documents < /option> < option value = "functions" > functions < /option> < option value = "indexes" > indexes < /option> < /select> < button onClick = { ( ) => { getAllInputValue === 'documents' ? getAll ( getAllInputValue , collection ) : getAll ( getAllInputValue ) ; } } > GetAll < /button> { getAllInputValue === 'documents' && ( < div > < label htmlFor = "collection" > Collection name < /label> < input id = "collection" value = { collection } onChange = { e => { setCollection ( e . target . value ) ; } } /> < /div>)} { getAllInputValue && data && < div > Showing { getAllInputValue } < /div>} { data && data . map ( ( item ) => { return < p > { `${ item . ref }` } < /p>; } ) } < /div> < hr / > { } < div > < h2 > useGet < /h2> < div > < label htmlFor = "getRef" > { getSchema !== 'document' ? `${ getSchema }` : 'collection' } name < /label> < input id = "getRef" type = "getRef" value = { getRefId } onChange = { e => setGetRefId ( e . target . value ) } / > { getSchema === 'document' && ( < > < label htmlFor = "useGetRefId" > Document RefId < /label> < input id = "useGetRefId" value = { useGetRefId } onChange = { e => setUseGetRefId ( e . target . value ) } / > < />)} < /div> < select name = "getSchema" id = "getSchema" value = { getSchema } onChange = { e => { setGetSchema ( e . target . value ) ; } } defaultValue = { 0 } > < option value = "collection" > collection < /option> < option value = "database" > database < /option> < option value = "document" > document < /option> < option value = "function" > function < / option > < option value = "index" > index < /option> < /select> < button onClick = { e => { e . preventDefault ( ) ; getFunction ( getSchema , getRefId , useGetRefId ) ; } } > Get < /button> { getData && ( < div > < code > { JSON . stringify ( getData ) } < /code> < /div>)} < /div> < hr / > { } < UseCreateForm createFunction = { createFunction } / > { createData && ( < div > < code > { JSON . stringify ( createData ) } < /code> < /div>)} < /div>); } export default Content ;