[App]: change loading flow of documents page

epam · Jun 7, 2024 · 16271f8 · 16271f8
1 parent 5385312
commit 16271f8
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 12 deletions.
diff --git a/app/src/common/sidebar/Sidebar.tsx b/app/src/common/sidebar/Sidebar.tsx
@@ -16,11 +16,11 @@ export interface SidebarProps<TItem extends TreeListItem = TreeListItem> {
 }
 
 function getItemParents<TItem extends TreeListItem>(allItems: TItem[], itemId: string): string[] {
-    const { parentId } = allItems.find((i) => i.id === itemId);
+    const item = allItems.find((i) => i.id === itemId);
     const parents = [];
-    if (parentId) {
-        parents.push(parentId);
-        const otherParents = getItemParents(allItems, parentId);
+    if (item?.parentId) {
+        parents.push(item.parentId);
+        const otherParents = getItemParents(allItems, item.parentId);
         parents.push(...otherParents);
     }
     return parents;

diff --git a/app/src/documents/DocumentsPage.tsx b/app/src/documents/DocumentsPage.tsx
@@ -32,13 +32,15 @@ async function loadApiReferenceStructure(): Promise<DocItem[]> {
     }, [root]);
 }
 
-function useItems(selectedId: string): { items: DocItem[], PageComponent: any } {
+function useItems(selectedId: string) {
     const [apiRefItems, setApiRefItems] = useState<DocItem[]>();
+
     useEffect(() => {
         loadApiReferenceStructure().then((res) => {
             setApiRefItems(res);
         });
     }, []);
+
     return useMemo(() => {
         if (apiRefItems) {
             const items = itemsStructure.concat(apiRefItems);
@@ -75,11 +77,6 @@ export function DocumentsPage() {
         return () => codesandboxService.clearFiles();
     }, []);
 
-    if (!itemsInfo?.PageComponent) {
-        return null;
-    }
-    const { items, PageComponent } = itemsInfo;
-
     const onChange = (row: DataRowProps<TreeListItem, string>) => {
         if (row.parentId === 'components') {
             redirectTo({
@@ -93,13 +90,16 @@ export function DocumentsPage() {
             redirectTo({ id: row.id, category: row.parentId });
         }
     };
+
+    const PageComponent = itemsInfo?.PageComponent;
+
     return (
         <Page renderHeader={ () => <AppHeader /> }>
             <FlexRow alignItems="stretch">
                 <Sidebar<DocItem>
                     value={ queryParamId }
                     onValueChange={ onChange }
-                    items={ items }
+                    items={ itemsInfo?.items }
                     getSearchFields={ (i) => [i.name, ...(i.tags || [])] }
                     getItemLink={ (row) =>
                         !row.isFoldable && {
@@ -112,7 +112,7 @@ export function DocumentsPage() {
                             },
                         } }
                 />
-                <PageComponent />
+                { PageComponent && <PageComponent /> }
             </FlexRow>
         </Page>
     );