fix(react): remove Component in favor of useInstances

packages/react/src/components/InstanceList/InstanceListDataFetcher.tsx

@@ -1,15 +1,14 @@
 import React from 'react';
 
-import { useInterval } from '../../lib/hooks/useInterval';
 import { useNile } from '../../context';
 import Queries, { useQuery } from '../../lib/queries';
+import { useInstances } from '../../lib/hooks/useInstances';
 
 import InstanceList from './InstanceList';
-import { InstanceListProps, ComponentProps } from './types';
+import { InstanceListProps } from './types';
 
 export type InstanceListDataFetcherProps = InstanceListProps & {
   refreshInterval?: number;
-  Component: ComponentProps;
 };
 
 export default function InstanceListDataFetcher(
@@ -28,7 +27,6 @@ export default function InstanceListDataFetcher(
     processColumns,
     actionButtons,
     refreshInterval,
-    Component = InstanceList,
   } = props;
   const nile = useNile();
   const useQueryHook = customUseQuery ?? useQuery;
@@ -43,21 +41,14 @@ export default function InstanceListDataFetcher(
     () => nile.entities.getEntity({ type: String(entity) })
   );
 
-  const {
-    refetch,
-    data: instances,
-    isFetching: isInstancesFetching,
-  } = useQueryHook(Queries.ListInstances(entity, org), () =>
-    nile.entities.listInstances({
-      type: String(entity),
-      org: String(org),
-    })
+  const { data: instances, isFetching: isInstancesFetching } = useInstances(
+    org,
+    entity,
+    { useQuery: useQueryHook, refreshInterval }
   );
 
-  useInterval(refetch, refreshInterval);
-
   return (
-    <Component
+    <InstanceList
       instances={instances}
       entityData={entityData}
       organization={organization}

packages/react/src/components/InstanceList/README.md

@@ -22,31 +22,8 @@ function App() {
 
 ## Customization
 
-See the [InstanceList storybook](https://react-storybook-ten.vercel.app/?path=/story/InstanceList--default) for samples on customizing `<InstanceList />` to fit your needs.
-
-If you need full control over rendering, you can pass a `Component` prop. `<InstanceList />` will do the data fetching, and pass props back to you.
-
-```typescript
-import { InstanceList, NileProvider, ComponentProps } from '@theniledev/react';
-
-const API_URL = 'http://localhost:8080'; // location of the Nile endpoint
-
-function HandleEverything(props: ComponentProps) {
-  return <>{JSON.stringify(props)}</>;
-}
-
-function App() {
-  return (
-    <NileProvider basePath={API_URL}>
-      <InstanceList
-        entity="myEntity"
-        org="userOrg"
-        Component={HandleEverything}
-      />
-    </NileProvider>
-  );
-}
-```
+See the [InstanceList storybook](https://storybook.thenile.dev/?path=/story/InstanceList--default) for samples on customizing `<InstanceList />` to fit your needs.
+If none of the customizations work for a particular usecase, using the underlying [`useInstances`](../../lib/hooks/useInstances) hook offers maximum flexibility.
 
 ## Theming
 

packages/react/src/components/InstanceList/types.ts

@@ -22,7 +22,3 @@ export interface InstanceListProps {
     organization: Organization;
   }) => React.ReactNode;
 }
-
-export type ComponentProps = React.FunctionComponent<
-  Omit<InstanceListProps, 'entity' | 'org'>
->;

packages/react/src/index.ts

@@ -3,13 +3,16 @@ export { default as SignUpForm } from './components/SignUpForm';
 export { default as InstanceList } from './components/InstanceList';
 export { default as EntityForm } from './components/EntityForm';
 export { NileProvider, useNile } from './context';
+
 export {
   default as Queries,
   useQuery,
   useMutation,
   useQueries,
 } from './lib/queries';
 
+export { useInstances } from './lib/hooks/useInstances';
+
 export { AttributeType, Attribute } from './lib/SimpleForm';
 
 export { MetricsLineChart, useMetrics } from './components/Metrics';

packages/react/src/lib/hooks/useInstances/README.md

@@ -0,0 +1,27 @@
+## useInstances
+
+A hook for wrapping up and automatically refreshing data.
+
+### example
+
+```typescript
+import { useInstances } from '@theniledev/react';
+
+const SomeComponent = () => {
+  // get `myEntity`, refresh every 4s, refetch data when the button is clicked
+  const { refetch, data } = useInstances('myOrg', 'myEntity', {
+    refershInterval: 4000,
+  });
+
+  return (
+    <Button
+      onClick={() => {
+        // do some submit logic
+        refetch();
+      }}
+    >
+      Create new
+    </Button>
+  );
+};
+```

packages/react/src/lib/hooks/useInstances/index.tsx

@@ -0,0 +1,31 @@
+import { useNile } from '../../../context';
+import Queries, { useQuery } from '../../queries';
+import { useInterval } from '../useInterval';
+
+type Props = {
+  useQuery?: typeof useQuery;
+  refreshInterval?: number;
+};
+
+export const useInstances = (
+  orgId: string,
+  entityType: string,
+  props?: Props
+) => {
+  const { useQuery: customUseQuery, refreshInterval } = props ?? {};
+  const nile = useNile();
+  const useQueryHook = customUseQuery ?? useQuery;
+
+  const { refetch, data, isFetching } = useQueryHook(
+    Queries.ListInstances(orgId, entityType),
+    () =>
+      nile.entities.listInstances({
+        type: entityType,
+        org: orgId,
+      })
+  );
+
+  useInterval(refetch, refreshInterval);
+
+  return { data, refetch, isFetching };
+};