form-craft-package 1.7.12-dev.0 → 1.7.12-dev.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "form-craft-package",
-  "version": "1.7.12-dev.0",
+  "version": "1.7.12-dev.1",
   "main": "index.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

package/src/components/common/custom-hooks/use-cache-form-layout-config.hook.ts

@@ -5,6 +5,7 @@ import { IFormConfigDetails, IFormSchema } from '../../../types'
 import client from '../../../api/client'
 import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'
 import { persistQueryClient } from '@tanstack/react-query-persist-client'
+import { UserAuth } from '../../../api/user'
 
 export interface UseCacheFormLayoutConfig {
   cachedConfig?: IFormConfigDetails & IFormSchema & { formId?: number }
@@ -13,8 +14,9 @@ export interface UseCacheFormLayoutConfig {
   applyUpdate: () => void
 }
 
-export function useCacheFormLayoutConfig(formId?: number): UseCacheFormLayoutConfig {
+export function useCacheFormLayoutConfig(formId?: number, formKey?: string): UseCacheFormLayoutConfig {
   const queryClient = useQueryClient()
+  const isPublic = !UserAuth.hasRefreshToken()
 
   const [currentSchema, setCurrentSchema] = useState<IFormConfigDetails & IFormSchema>()
   const [pendingSchema, setPendingSchema] = useState<IFormConfigDetails & IFormSchema>()
@@ -32,9 +34,9 @@ export function useCacheFormLayoutConfig(formId?: number): UseCacheFormLayoutCon
     isSuccess,
   } = useQuery<(IFormConfigDetails & IFormSchema) | undefined, Error>({
     queryKey,
-    queryFn: () => fetchLayoutConfig(formId),
+    queryFn: () => fetchLayoutConfig(isPublic, formId, formKey),
     gcTime: Infinity,
-    enabled: !!formId,
+    enabled: isPublic ? !!formKey : !!formId,
     placeholderData: keepPreviousData,
   })
 
@@ -45,10 +47,11 @@ export function useCacheFormLayoutConfig(formId?: number): UseCacheFormLayoutCon
     persistQueryClient({
       queryClient,
       persister: localStoragePersistor,
-      // maxAge: 1000 * 60 * 60 * 24, // 24h
+      maxAge: 1000 * 60 * 60 * 32, // 32h
       dehydrateOptions: {
         shouldDehydrateQuery: (query) => {
           const [key, id] = query.queryKey
+
           if (key === 'layoutConfig' && id === String(formId)) return false
 
           return true
@@ -91,17 +94,22 @@ export function useCacheFormLayoutConfig(formId?: number): UseCacheFormLayoutCon
 
   return {
     cachedConfig: currentSchema?.id !== formId ? pendingSchema : currentSchema,
-    isConfigLoading: !!formId ? isLoading && !currentSchema : false,
+    isConfigLoading: (isPublic ? !!formKey : !!formId) ? isLoading && !currentSchema : false,
     isUpdateFound: Boolean(pendingSchema),
     applyUpdate,
   }
 }
 
-async function fetchLayoutConfig(formId?: number): Promise<(IFormConfigDetails & IFormSchema) | undefined> {
-  if (!formId) return undefined
+async function fetchLayoutConfig(
+  isPublic: boolean,
+  formId?: number,
+  formKey?: string,
+): Promise<(IFormConfigDetails & IFormSchema) | undefined> {
+  if (isPublic ? !formKey : !formId) return undefined
 
   try {
-    const res = await client.get<{ data: string }>(`/api/form/${formId}`)
+    const endpoint = isPublic ? `/api/site/${formKey}` : `/api/form/${formId}`
+    const res = await client.get<{ data: string }>(endpoint)
     if (res.status === 200) {
       const { data: jsonData, ...restResData } = res.data
       return { ...restResData, ...JSON.parse(jsonData) } as IFormConfigDetails & IFormSchema

package/src/components/form/1-list/table.tsx

@@ -101,7 +101,7 @@ export default function FormDataListTableComponent({
   )
 
   // if (loading) return
-  if (loading && loadingBlock) return loadingBlock
+  if ((loading || parentLoadings.initial) && loadingBlock) return loadingBlock
 
   return (
     <>

package/src/components/form/2-details/index.tsx

@@ -11,6 +11,8 @@ import { useBreadcrumb } from '../../common/custom-hooks/use-breadcrumb.hook'
 import NotFound from '../../common/not-found'
 import { useManyToManyConnector } from '../../common/custom-hooks/use-many-to-many-connector.hook'
 import { PageViewTypEnum, DeviceBreakpointEnum, FormPreservedItemKeys, LOCAL_STORAGE_KEYS_ENUM } from '../../../enums'
+import { UserAuth } from '../../../api/user'
+import { useCacheFormLayoutConfig } from '../../common/custom-hooks/use-cache-form-layout-config.hook'
 import {
   fromMongoDbExtendedJSON,
   getPickerFieldsWithOriginalTz,
@@ -18,8 +20,6 @@ import {
   isValidMongoDbId,
   queryParamsToObject,
 } from '../../../functions/forms'
-import { UserAuth } from '../../../api/user'
-import { useCacheFormLayoutConfig } from '../../common/custom-hooks/use-cache-form-layout-config.hook'
 
 export default function FormDataDetailsComponent({
   isPublic,
@@ -42,7 +42,7 @@ export default function FormDataDetailsComponent({
 
   const currentBreakpoint = useGetCurrentBreakpoint()
 
-  const { cachedConfig, isConfigLoading } = useCacheFormLayoutConfig(formId)
+  const { cachedConfig, isConfigLoading } = useCacheFormLayoutConfig(formId, formKey)
 
   useEffect(() => {
     // for public forms, setting the details form into localStorage, so that buttons work correctly