import {createSanityClient, SanityClientAPI}  from "@konsus/sanity"

const client: SanityClientAPI  = createSanityClient({
    projectId: "k0dlbavy",
    dataset: "production",
    useCdn: !sanityPreview,
    withCredentials: sanityPreview,
})

import {SanityReducer} from  "@konsus/sanity";
{
    ...,
    sanity: SanityReducer
}

import { createSanityQuery } from "@konsus/sanity";
import Product from "../api/Product";

interface Product{
  key: string;
  name: string;
  shortName?: string;
  iconImage: any;
  category: string;
  premium: boolean;
  rate: number;
  propertyRules?: Array<ProductPropertyRule>;
  defaultDeadlineSelector: OWDeadlineSelector;
  typicalTimeUsage: string;
}

export default createSanityQuery<{ category: string }, Array<Product>(`
*[_type == 'service' && category == $category] | order(order) {
    rate,
    defaultDeadlineSelector,
    premium,
    propertyRules,
    iconImage,
    category,
    shortName,
    name,
    description,
    typicalTimeUsage,
    "key": key.current
}`);

import {fetchSanityQuery, getSanityQueryResult} from "@konsus/sanity";

const mapStateToProps = (state, props) => {
  const OWState = props.selectors.owSelector(state);
  const sanityState = props.selectors.getSanityState(state);
  return {
    ...,
    # Access the result from Redux
    optionsResult: getSanityQueryResult(OWAllServicesByCategoryQuery, {category: OWState.category.key}, sanityState),
  };
};

const mapDispatchToProps = (dispatch, props) => {
  return {
    ...,
    # Checks the redux state for the query, and if not found, fetching Sanity
    fetchOptions: (category:string) => fetchSanityQuery(OWAllServicesByCategoryQuery, {category}, {sanityClient: props.sanityClient, getState: props.getSanityState}),
  };
}

import {SanityResultFromQuery} from "@konsus/sanity"
interface ComponentProps{
    optionResults: SanityResultFromQuery<typeof OWAllServicesByCategoryQuery>;
}

class Component extends React.Component<ComponentProps, any>{
    render(){
        console.log(optionResults)
        return <div>
            Status: {optionResults.status)<br/>
            Body: {JSON.stringify(optionResults.body))<br/>
        </div>
    }
}

{
    status: [SanityResultStatus.NONE, SanityResultStatus.FETCHING, SanityResultStatus.SUCCESS],
    body: [{
        {id: 344, code: "new-presentation-design", ...},
        {id: 344, code: "improve-presentation", ...},
    }]
}