akanjs 3.0.0-alpha.86 → 3.0.0-alpha.88

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akanjs",
-  "version": "3.0.0-alpha.86",
+  "version": "3.0.0-alpha.88",
   "sourceType": "module",
   "type": "module",
   "publishConfig": {

package/store/action.ts

@@ -516,12 +516,11 @@ export const makeActions = (refName: string, slice: { [key: string]: SerializedS
     queryArgsOfModel: `queryArgsOf${className}`,
     sortOfModel: `sortOf${className}`,
   };
-  const staleAtOfOtherSlices = (createdSliceName: string) => {
+
+  const staleAtOfSlices = () => {
     const staleAt = new Date();
     return Object.fromEntries(
-      slices
-        .filter(({ sliceName }) => sliceName !== createdSliceName)
-        .map(({ sliceName }) => [sliceName.replace(names.model, names.modelStaleAt), staleAt]),
+      slices.map(({ sliceName }) => [sliceName.replace(names.model, names.modelStaleAt), staleAt]),
     );
   };
   const baseAction = {
@@ -562,7 +561,7 @@ export const makeActions = (refName: string, slice: { [key: string]: SerializedS
         [namesOfSlice.modelInsight]: newModelInsight,
         [names.modelViewAt]: new Date(),
         [names.modelModal]: modal ?? null,
-        ...staleAtOfOtherSlices(sliceName),
+        ...staleAtOfSlices(),
         ...(typeof path === "string" && path ? { [path]: model } : {}),
       });
       await onSuccess?.(model);
@@ -593,6 +592,7 @@ export const makeActions = (refName: string, slice: { [key: string]: SerializedS
           : {}),
         [names.modelForm]: immerify(modelRef, defaultModel),
         [names.modelModal]: modal ?? null,
+        ...staleAtOfSlices(),
         ...(typeof path === "string" && path ? { [path]: updatedModel } : {}),
       });
       const updatedLightModel = new cnst.light().set(updatedModel) as unknown as Light;
@@ -645,7 +645,7 @@ export const makeActions = (refName: string, slice: { [key: string]: SerializedS
         [namesOfSlice.modelInsight]: newModelInsight,
         [names.modelViewAt]: new Date(),
         [names.modelModal]: modal ?? null,
-        ...staleAtOfOtherSlices(sliceName),
+        ...staleAtOfSlices(),
         ...(typeof path === "string" && path ? { [path]: model } : {}),
       });
       await onSuccess?.(model);
@@ -669,6 +669,7 @@ export const makeActions = (refName: string, slice: { [key: string]: SerializedS
           ? { [names.model]: updatedModel, [names.modelLoading]: false, [names.modelViewAt]: new Date() }
           : {}),
         [names.modelModal]: modal ?? null,
+        ...staleAtOfSlices(),
         ...(typeof path === "string" && path ? { [path]: updatedModel } : {}),
       });
       const updatedLightModel = new cnst.light().set(updatedModel) as unknown as Light;
@@ -729,6 +730,7 @@ export const makeActions = (refName: string, slice: { [key: string]: SerializedS
           });
         }
       });
+      this.set(staleAtOfSlices());
     },
     [names.checkModelSubmitable]: function (this: SetGet, disabled?: boolean) {
       const currentState = this.get() as { [key: string]: any };
@@ -806,6 +808,7 @@ export const makeActions = (refName: string, slice: { [key: string]: SerializedS
       this.set({
         [names.model]: id === model?.id ? updatedModel : model,
         [names.modelLoading]: false,
+        ...staleAtOfSlices(),
       });
       const updatedLightModel = new cnst.light().set(updatedModel) as unknown as Light;
       slices.forEach(({ sliceName }) => {
@@ -863,6 +866,7 @@ export const makeActions = (refName: string, slice: { [key: string]: SerializedS
         });
         this.set({ [namesOfSlice.modelList]: modelList.save() });
       });
+      this.set(staleAtOfSlices());
     },
     [names.resetModel]: function (this: SetGet, model?: Full) {
       const currentState = this.get() as { [key: string]: any };

package/ui/Load/Units.tsx

@@ -65,7 +65,7 @@ function Render<RefName extends string, Light extends { id: string }>({
   pagination,
   staleTime,
 }: RenderProps<RefName, Light>) {
-  const loaded = useRef(false);
+  const loadedQueryArgs = useRef<object[] | null>(null);
   const storeUse = st.use as { [key: string]: () => unknown };
   const storeDo = st.do as unknown as { [key: string]: (...args: any[]) => Promise<void> };
   const storeGet = st.get as unknown as <T>() => { [key: string]: T };
@@ -114,23 +114,26 @@ function Render<RefName extends string, Light extends { id: string }>({
   const initModelObjInsight = (init as DynamicRecord)[names.modelObjInsight] as BaseInsight | null;
   const initLimitOfModel = (init as DynamicRecord)[names.limitOfModel] as number;
   const initPageOfModel = (init as DynamicRecord)[names.pageOfModel] as number;
+  const initSignature = JSON.stringify(initQueryArgs);
 
   const useCache =
     !modelListLoading &&
     isQueryEqual(storeGet<object[]>()[namesOfSlice.queryArgsOfModel], initQueryArgs) &&
     storeGet<Date>()[namesOfSlice.modelInitAt].getTime() >= initModelInitAt.getTime();
-  if (useCache) loaded.current = true;
+  if (useCache) loadedQueryArgs.current = initQueryArgs;
+
+  const loaded = !!loadedQueryArgs.current && isQueryEqual(loadedQueryArgs.current, initQueryArgs);
 
   const modelInitList = useMemo<DataList<Light>>(() => {
-    if (loaded.current) return modelList;
+    if (loaded) return modelList;
     const initModelObjList = (init as DynamicRecord)[names.modelObjList] as Light[];
     return new DataList<Light>(
       withSharedInstances(() => initModelObjList.map((model) => new cnst.light().set(model) as unknown as Light)),
     );
-  }, []);
+  }, [initSignature]);
 
   useEffect(() => {
-    if (loaded.current) return;
+    if (loaded) return;
     const modelObjInsight = (init as DynamicRecord)[names.modelObjInsight] as BaseInsight | null;
     
     const insight = new cnst.insight().set(
@@ -153,8 +156,8 @@ function Render<RefName extends string, Light extends { id: string }>({
       [namesOfSlice.queryArgsOfModel]: initQueryArgsOfModel,
       [namesOfSlice.sortOfModel]: initSortOfModel,
     });
-    loaded.current = true;
-  }, []);
+    loadedQueryArgs.current = initQueryArgs;
+  }, [initSignature]);
 
   useEffect(() => {
     const modelStaleAt = storeGet<Date>()[namesOfSlice.modelStaleAt];
@@ -162,15 +165,15 @@ function Render<RefName extends string, Light extends { id: string }>({
     if (storeGet<Date>()[namesOfSlice.modelInitAt].getTime() >= staleThreshold) return;
     if (storeGet<boolean>()[namesOfSlice.modelListLoading]) return;
     void storeDo[namesOfSlice.refreshModel]({ invalidate: true });
-  }, []);
+  }, [initSignature]);
 
   const modelInsight = storeUse[namesOfSlice.modelInsight]() as BaseInsight;
   const limitOfModel = storeUse[namesOfSlice.limitOfModel]() as number;
   const pageOfModel = storeUse[namesOfSlice.pageOfModel]() as number;
-  const insight = loaded.current ? modelInsight : initModelObjInsight;
-  const limit = loaded.current ? limitOfModel : initLimitOfModel;
-  const page = loaded.current ? pageOfModel : initPageOfModel;
-  const total = insight?.count ?? (loaded.current ? modelList : modelInitList).length;
+  const insight = loaded ? modelInsight : initModelObjInsight;
+  const limit = loaded ? limitOfModel : initLimitOfModel;
+  const page = loaded ? pageOfModel : initPageOfModel;
+  const total = insight?.count ?? (loaded ? modelList : modelInitList).length;
   const moreProps = {
     total,
     currentPage: page,
@@ -197,7 +200,7 @@ function Render<RefName extends string, Light extends { id: string }>({
     onSelect: (page) => moreProps.onPageSelect(page, { scrollToTop: false }),
   });
 
-  const modelDataList = !loaded.current ? modelInitList.filter(filter).sort(sort) : modelList.filter(filter).sort(sort);
+  const modelDataList = !loaded ? modelInitList.filter(filter).sort(sort) : modelList.filter(filter).sort(sort);
   const scopePath = useScreenScope({
     id: sliceName,
     kind: refName,
@@ -207,7 +210,7 @@ function Render<RefName extends string, Light extends { id: string }>({
         return { id: item.id, ...(label ? { label } : {}) };
       }),
   });
-  const showLoading = loaded.current && modelListLoading;
+  const showLoading = loaded && modelListLoading;
   if (renderList)
     return (
       <>
@@ -342,7 +345,7 @@ interface MoreWrapperProps {
   moreProps: MoreProps;
 }
 const MoreWrapper = ({ children, pagination, moreProps }: MoreWrapperProps) => {
-  return pagination ? <More {...moreProps}>{children}</More> : <>{children}</>;
+  return pagination ? <More {...moreProps}>{children}</More> : children;
 };
 
 interface ContainerWrapperProps {

package/ui/Load/View.tsx

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "akanjs/client";
+import { capitalize } from "akanjs/common";
 import { ConstantRegistry, labelOf } from "akanjs/constant";
 import type { ClientView, ServerView } from "akanjs/fetch";
 import { st } from "akanjs/store";
@@ -40,6 +41,7 @@ function Render<T extends string, Full extends { id: string }>({
 }: RenderProps<T, Full>) {
   const loadedId = useRef<string | null>(null);
   const storeUse = st.use as { [key: string]: () => unknown };
+  const storeDo = st.do as unknown as { [key: string]: (...args: any[]) => Promise<void> };
   const storeGet = st.get as unknown as <T>() => { [key: string]: T };
   const { refName } = view;
   const model = storeUse[refName]() as Full | null;
@@ -72,6 +74,14 @@ function Render<T extends string, Full extends { id: string }>({
     loadedId.current = modelObj.id;
   }, [modelViewAt, modelObj.id]);
 
+  useEffect(() => {
+
+    const modelStaleAt = storeGet<Date | undefined>()[`${refName}StaleAt`];
+    if (!modelStaleAt || storeGet<Date>()[`${refName}ViewAt`].getTime() >= modelStaleAt.getTime()) return;
+    if (storeGet<string | boolean>()[`${refName}Loading`]) return;
+    void storeDo[`view${capitalize(refName)}`](modelObj.id);
+  }, [modelViewAt, modelObj.id]);
+
   const renderModel = loadedId.current === modelObj.id ? model : modelInit;
   const scopePath = useScreenScope({
     id: `${refName}-view`,