Merge pull request #8 from qoretechnologies/bugfix/wait-for-storage-flag

New init function, wait for storage flag

Author: Foxhoundn

.storybook/preview.tsx

@@ -1,5 +1,5 @@
 import { ReqoreContent, ReqoreLayoutContent, ReqoreUIProvider } from '@qoretechnologies/reqore';
-import { ReqraftProvider } from '../src';
+import { initializeReqraft } from '../src';
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
@@ -39,7 +39,13 @@ export const argTypes = {
 };
 
 export const decorators = [
-  (Story, context) => (
+  (Story, context) => {
+    const Reqraft = initializeReqraft({
+      instance: 'https://hq.qoretechnologies.com:8092/',
+      instanceToken: process.env.REACT_APP_QORUS_TOKEN,
+    });
+
+    return (
     <ReqoreUIProvider
       options={{
         animations: {
@@ -49,17 +55,15 @@ export const decorators = [
         ...context.args?.reqoreOptions,
       }}
     >
-      <ReqraftProvider
+      <Reqraft
         appName='storybook'
-        instanceToken={process.env.REACT_APP_QORUS_TOKEN}
-        instance='https://hq.qoretechnologies.com:8092/'
       >
         <ReqoreLayoutContent style={{ height: '100%' }}>
           <ReqoreContent style={{ padding: '20px', display: 'flex', flexFlow: 'column' }}>
             <Story />
           </ReqoreContent>
         </ReqoreLayoutContent>
-      </ReqraftProvider>
+      </Reqraft>
     </ReqoreUIProvider>
-  ),
+  )},
 ];

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqraft",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "ReQraft is a collection of React components and hooks that are used across Qore Technologies' products made using the ReQore component library from Qore.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

src/contexts/ReqraftContext.tsx

@@ -1,16 +1,9 @@
 import { createContext } from 'use-context-selector';
-import { IReqraftFetchConfig } from '../utils/fetch';
 
 export interface IReqraftContext {
   appName: string;
-  instance?: string;
-  instanceToken: string;
-  instanceUnauthorizedRedirect?: IReqraftFetchConfig['unauthorizedRedirect'];
 }
 
 export const ReqraftContext = createContext<IReqraftContext>({
   appName: '',
-  instance: '',
-  instanceToken: '',
-  instanceUnauthorizedRedirect: undefined,
 });

src/index.tsx

@@ -3,10 +3,11 @@ export {
   IReqraftMenuProps,
   ReqraftMenu,
   TReqraftMenu,
-  TReqraftMenuItem,
+  TReqraftMenuItem
 } from './components/menu/Menu';
 
 export { FormStringField, IStringFormFieldProps } from './components/form/fields/string/String';
 export { IReqraftUseFetch, useFetch } from './hooks/useFetch/useFetch';
-export { ReqraftProvider, ReqraftQueryClient } from './providers/ReqraftProvider';
+export { ReqraftProvider, ReqraftQueryClient, initializeReqraft } from './providers/ReqraftProvider';
 export { query } from './utils/fetch';
+

src/providers/FetchProvider.tsx

@@ -1,35 +1,13 @@
 import { useQueryClient } from '@tanstack/react-query';
-import { useState } from 'react';
-import { useEffectOnce } from 'react-use';
 import { FetchContext, TReqraftContextQueryConfig } from '../contexts/FetchContext';
-import { useReqraftProperty } from '../hooks/useReqraftProperty';
-import { query, setupFetch } from '../utils/fetch';
+import { query } from '../utils/fetch';
 
 export interface IReqraftFetchProviderProps {
   children: React.ReactNode;
 }
 
 export const ReqraftFetchProvider = ({ children }: IReqraftFetchProviderProps) => {
   const queryClient = useQueryClient();
-  const instance = useReqraftProperty('instance');
-  const instanceToken = useReqraftProperty('instanceToken');
-  const instanceUnauthorizedRedirect = useReqraftProperty('instanceUnauthorizedRedirect');
-
-  const [ready, setReady] = useState(false);
-
-  useEffectOnce(() => {
-    setupFetch({
-      instance,
-      instanceToken,
-      unauthorizedRedirect: instanceUnauthorizedRedirect,
-    });
-
-    setReady(true);
-  });
-
-  if (!ready) {
-    return null;
-  }
 
   async function get<T>(config: TReqraftContextQueryConfig) {
     return query<T>({ queryClient, ...config, method: 'GET' });

src/providers/ReqraftProvider.tsx

@@ -1,6 +1,7 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactNode } from 'react';
 import { IReqraftContext, ReqraftContext } from '../contexts/ReqraftContext';
+import { IReqraftFetchConfig, setupFetch } from '../utils/fetch';
 import { ReqraftFetchProvider } from './FetchProvider';
 import { ReqraftStorageProvider } from './StorageProvider';
 
@@ -9,23 +10,41 @@ export const ReqraftQueryClient = new QueryClient();
 export interface IReqraftProviderProps extends IReqraftContext {
   children: ReactNode;
   reactQueryClient?: QueryClient;
+  /*
+  * If true, the component will wait for the storage to be loaded before rendering the children.
+  */
+  waitForStorage?: boolean;
 }
 
+export interface IReqraftOptions {
+  instance?: string;
+  instanceToken: string;
+  instanceUnauthorizedRedirect?: IReqraftFetchConfig['unauthorizedRedirect'];
+}
+
+export const initializeReqraft = (options: IReqraftOptions ) => {
+  setupFetch({
+    instance: options.instance,
+    instanceToken: options.instanceToken,
+    unauthorizedRedirect: options.instanceUnauthorizedRedirect,
+  });
+
+  return ReqraftProvider;
+};
+
 export const ReqraftProvider = ({
   appName,
   children,
-  instance,
-  instanceToken,
-  instanceUnauthorizedRedirect,
   reactQueryClient,
+  waitForStorage = true,
 }: IReqraftProviderProps) => {
   return (
     <ReqraftContext.Provider
-      value={{ appName, instanceToken, instance, instanceUnauthorizedRedirect }}
+      value={{ appName  }}
     >
       <QueryClientProvider client={reactQueryClient || ReqraftQueryClient}>
         <ReqraftFetchProvider>
-          <ReqraftStorageProvider>{children}</ReqraftStorageProvider>
+          <ReqraftStorageProvider waitForStorage={waitForStorage}>{children}</ReqraftStorageProvider>
         </ReqraftFetchProvider>
       </QueryClientProvider>
     </ReqraftContext.Provider>

src/providers/StorageProvider.tsx

@@ -5,12 +5,13 @@ import { ReqraftStorageContext, TReqraftStorage } from '../contexts/StorageConte
 import { useFetch } from '../hooks/useFetch/useFetch';
 import { useReqraftProperty } from '../hooks/useReqraftProperty';
 import { TReqraftStorageValue } from '../hooks/useStorage/useStorage';
+import { IReqraftProviderProps } from './ReqraftProvider';
 
-export interface IReqraftStorageProviderProps {
+export interface IReqraftStorageProviderProps extends Pick<IReqraftProviderProps, 'waitForStorage'> {
   children: ReactNode;
 }
 
-export const ReqraftStorageProvider = ({ children }: IReqraftStorageProviderProps) => {
+export const ReqraftStorageProvider = ({ children, waitForStorage }: IReqraftStorageProviderProps) => {
   const appName = useReqraftProperty('appName');
 
   const { data, loading } = useFetch({
@@ -66,7 +67,7 @@ export const ReqraftStorageProvider = ({ children }: IReqraftStorageProviderProp
     load({ body: { storage_path: _path } });
   };
 
-  if (loading || !storage) {
+  if ((loading || !storage) && waitForStorage) {
     return null;
   }
 

src/utils/fetch.ts

@@ -14,7 +14,7 @@ export interface IReqraftFetchResponse<T> {
   error?: any;
 }
 
-const fetchConfig: IReqraftFetchConfig = {
+export const fetchConfig: IReqraftFetchConfig = {
   instance: window.location.origin + '/',
   instanceToken: '',
   unauthorizedRedirect: (pathname: string) => `/?next=${pathname}`,