Merge pull request #278 from GBSL-Informatik:regression-page-index-loading-behavior

regression(page-index): fix loading clashes of 'replace' and 'add-if-missing' load configs

Author: lebalz

packages/tdev/page-read-check/model/index.ts

@@ -4,7 +4,7 @@ import { iTaskableDocument } from '@tdev-models/iTaskableDocument';
 import { Document as DocumentProps, TypeDataMapping, Factory } from '@tdev-api/document';
 import DocumentStore from '@tdev-stores/DocumentStore';
 import { ModelMeta } from './ModelMeta';
-import { mdiBookCheck, mdiBookCheckOutline, mdiBookEducation, mdiBookOpenVariantOutline } from '@mdi/js';
+import { mdiBookCheck, mdiBookEducation, mdiBookOpenVariantOutline } from '@mdi/js';
 import { fSeconds, fSecondsLong } from '../helpers/time';
 
 export const createModel: Factory = (data, store) => {

src/components/EditingOverview/index.tsx

@@ -5,7 +5,7 @@ import styles from './styles.module.scss';
 import { observer } from 'mobx-react-lite';
 import { useStore } from '@tdev-hooks/useStore';
 import Button from '@tdev-components/shared/Button';
-import { mdiAccountAlert, mdiAccountSyncOutline, mdiCheckboxMultipleMarkedCircle } from '@mdi/js';
+import { mdiAccountSyncOutline, mdiCheckboxMultipleMarkedCircle } from '@mdi/js';
 import { StateType } from '@tdev-api/document';
 import Icon from '@mdi/react';
 import Popup from 'reactjs-popup';
@@ -62,10 +62,11 @@ const EditingOverview = observer(() => {
     if (!isBrowser || !currentUser || !currentPage) {
         return null;
     }
-    const taskStates = currentPage.taskableDocuments.filter((ts) => RWAccess.has(ts.root?.permission)) || [];
-    if (taskStates.length === 0) {
+    const taskableDocumentsCount = currentPage.taskableDocumentRootIds.length;
+    if (taskableDocumentsCount === 0) {
         return null;
     }
+    const taskStates = currentPage.taskableDocuments.filter((ts) => RWAccess.has(ts.root?.permission)) || [];
     const someChecked = taskStates.some((d) => d.isDone);
     const allChecked = someChecked && taskStates.every((d) => d.isDone);
     return (

src/hooks/useDocumentRoot.ts

@@ -46,6 +46,14 @@ export const useDocumentRoot = <Type extends DocumentType>(
             () => documentRootStore.find(id),
             (docRoot) => {
                 if (docRoot) {
+                    if (docRoot.isLoadable && !docRoot.isLoaded) {
+                        documentRootStore.loadInNextBatch(
+                            id!,
+                            meta,
+                            { skipCreate: !!skipCreate, documentType: loadOnlyType, documentRoot: 'replace' },
+                            access
+                        );
+                    }
                     return;
                 }
                 if (addDummyToStore) {

src/hooks/useFirstMainDocument.ts

@@ -25,7 +25,7 @@ export const useFirstMainDocument = <Type extends DocumentType>(
     loadOnlyType?: DocumentType
 ) => {
     const defaultDocId = useDummyId(documentRootId);
-    const documentRoot = useDocumentRoot(documentRootId, meta, true, access, undefined, loadOnlyType);
+    const documentRoot = useDocumentRoot(documentRootId, meta, true, access, false, loadOnlyType);
     const userStore = useStore('userStore');
     const documentStore = useStore('documentStore');
     const [dummyDocument] = React.useState(

src/models/Page.ts

@@ -209,7 +209,9 @@ export default class Page {
 
     @computed
     get stepsOnPage(): number {
-        return this.taskableDocuments.length;
+        // use the id's, otherwise not yet created documents would not be counted,
+        // which leads to wrong progress values until all documents are loaded
+        return this.taskableDocumentRootIds.length;
     }
 
     @computed

src/stores/DocumentRootStore.ts

@@ -146,7 +146,13 @@ export class DocumentRootStore extends iStore {
         accessConfig?: Partial<Config>
     ) {
         if (this.queued.has(id)) {
-            return;
+            const currentConfig = this.queued.get(id);
+            const needsReplacement =
+                loadConfig?.documentRoot === 'replace' && currentConfig?.load.documentRoot !== 'replace';
+            if (!needsReplacement) {
+                // already queued with same or higher loadConfig - do nothing
+                return;
+            }
         }
         this.queued.set(id, {
             meta: meta,

src/stores/PageStore.ts

@@ -22,10 +22,14 @@ export const SidebarVersions = (
 ).versions.map((version) => {
     const versionPath = ensureTrailingSlash(version.path);
     const slashCount = version.path.split('/').length + 1;
-    const rdocs = version.docs.filter(
-        (doc) =>
+    const rdocs = version.docs.filter((doc) => {
+        if (version.mainDocId === 'index' && doc.id === version.mainDocId) {
+            return true;
+        }
+        return (
             doc.path.startsWith(version.path) && doc.path.replace(/\/$/, '').split('/').length === slashCount
-    );
+        );
+    });
     return {
         name: version.name,
         rootPaths: rdocs.map((doc) => ensureTrailingSlash(doc.path)),
@@ -136,14 +140,15 @@ export class PageStore extends iStore {
 
     @action
     setCurrentPath(path: string | undefined) {
-        if (path === this.currentPath) {
+        const normalizedPath = path?.replace(BasePathRegex, '/');
+        if (normalizedPath === this.currentPath) {
             return;
         }
-        if (!path) {
+        if (!normalizedPath) {
             this.currentPath = undefined;
             return;
         }
-        this.currentPath = path.replace(BasePathRegex, '/');
+        this.currentPath = normalizedPath;
         if (this.isPageIndexLoaded) {
             this.loadTaskableDocuments(this.currentStudentGroupName);
         }