import React, { useContext, useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { useQueryWithStore } from 'react-admin';
import SchemaAnalyzerContext from './SchemaAnalyzerContext';

const ResourcesIntrospecter = ({
  component: Component,
  schemaAnalyzer,
  includeDeprecated,
  resource,
  resources,
  loading,
  error,
  ...rest
}) => {
  if (loading) {
    return null;
  }

  if (error) {
    if ('production' === process.env.NODE_ENV) {
      console.error(error);
    }

    throw new Error('API schema is not readable');
  }

  if (resources == null) {
    return null;
  }

  const schema = resources.find((r) => r.name === resource);

  if (
    !schema ||
    !schema.fields ||
    !schema.readableFields ||
    !schema.writableFields
  ) {
    if ('production' === process.env.NODE_ENV) {
      console.error(`Resource ${resource} not present inside API description`);
    }

    throw new Error(`Resource ${resource} not present inside API description`);
  }

  const fields = includeDeprecated
    ? schema.fields
    : schema.fields.filter(({ deprecated }) => !deprecated);
  const readableFields = includeDeprecated
    ? schema.readableFields
    : schema.readableFields.filter(({ deprecated }) => !deprecated);
  const writableFields = includeDeprecated
    ? schema.writableFields
    : schema.writableFields.filter(({ deprecated }) => !deprecated);

  return (
    <Component
      schemaAnalyzer={schemaAnalyzer}
      resource={resource}
      schema={schema}
      fields={fields}
      readableFields={readableFields}
      writableFields={writableFields}
      {...rest}
    />
  );
};

const Introspecter = ({
  component,
  includeDeprecated = false,
  resource,
  ...rest
}) => {
  const schemaAnalyzer = useContext(SchemaAnalyzerContext);
  const [resources, setResources] = useState();

  const { data, loading, error } = useQueryWithStore(
    {
      type: 'introspect',
    },
    { action: 'INTROSPECT' },
    (state) =>
      state.introspect['introspect']
        ? state.introspect['introspect'].data
        : undefined,
  );

  useEffect(() => {
    if (data) {
      setResources(data.resources);
    }
  }, [data]);

  return (
    <ResourcesIntrospecter
      component={component}
      schemaAnalyzer={schemaAnalyzer}
      includeDeprecated={includeDeprecated}
      resource={resource}
      resources={resources}
      loading={loading}
      error={error}
      {...rest}
    />
  );
};

Introspecter.propTypes = {
  component: PropTypes.elementType.isRequired,
  resource: PropTypes.string.isRequired,
  includeDeprecated: PropTypes.bool,
};

export default Introspecter;

@@ -105,30 +105,71 @@
 rt %7B use
-QueryWithS
+DataProvider %7D from 'react-admin';%0Aimport %7B useSelec
 tor
-e
  %7D from 
@@ -167,37 +167,37 @@
 r %7D from 'react-
-admin
+redux
 ';%0Aimport Schema
@@ -1840,17 +1840,18 @@
   const 
-%5B
+%7B 
 resource
@@ -1855,166 +1855,25 @@
 rces
-, setResources%5D = useState();%0A%0A  const %7B data, loading, error %7D = useQueryWithStore(%0A    %7B%0A      type: 'introspect',%0A    %7D,%0A    %7B action: 'INTROSPECT' %7D,%0A    
+ %7D = useSelector(
 (sta
@@ -1879,18 +1879,16 @@
 ate) =%3E%0A
-  
     stat
@@ -1913,24 +1913,16 @@
 ospect'%5D
-%0A       
  ? state
@@ -1955,113 +1955,404 @@
 data
-%0A        : undefined,%0A  );%0A%0A  useEffect(() =%3E %7B%0A    if (data) %7B%0A      setResources(data.resources
+ : %7B%7D,%0A  );%0A  const %5Bloading, setLoading%5D = useState(true);%0A  const %5Berror, setError%5D = useState(null);%0A  const dataProvider = useDataProvider();%0A%0A  useEffect(() =%3E %7B%0A    if (resources) %7B%0A      setLoading(false);%0A      return;%0A    %7D%0A%0A    dataProvider%0A      .introspect(resource, %7B%7D, %7B action: 'INTROSPECT' %7D)%0A      .catch((error) =%3E %7B%0A        setError(error);%0A        setLoading(false
 );%0A    
+ 
-%7D
+ %7D);
 %0A  %7D
@@ -2358,16 +2358,45 @@
 %7D, %5Bdata
+Provider, resource, resources
 %5D);%0A%0A  r

Fix optimistic introspect calls (#301)