WIP

Author: alexwpengine

examples/angular/template-hierarchy-data-fetching/example-app/src/app/components/blog/blog.component.ts

@@ -1,10 +1,10 @@
 import { Component, OnInit, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import {
-  GraphQLStateService,
-  gql,
+  GraphQLStateService
 } from '../../utils/graphql.service';
 import { Post, PostsResponse  } from '../../interfaces/post.interface';
+import { POSTS_QUERY } from '../../utils/postQuery';
 
 @Component({
   selector: 'app-blog',
@@ -28,66 +28,10 @@ export class BlogComponent implements OnInit {
 
   ngOnInit() {
     this.postsQuery = this.graphqlState.createQuery<PostsResponse>(
-      gql`
-        query GetPosts(
-          $first: Int = 9
-          $after: String
-          $category: String
-          $tag: String
-        ) {
-          posts(
-            first: $first
-            after: $after
-            where: { categoryName: $category, tag: $tag }
-          ) {
-            pageInfo {
-              hasNextPage
-              endCursor
-            }
-            edges {
-              cursor
-              node {
-                id
-                title
-                date
-                excerpt
-                uri
-                slug
-                featuredImage {
-                  node {
-                    sourceUrl
-                    altText
-                  }
-                }
-                categories {
-                  nodes {
-                    name
-                    slug
-                  }
-                }
-                tags {
-                  nodes {
-                    name
-                    slug
-                  }
-                }
-                author {
-                  node {
-                    name
-                    avatar {
-                      url
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      `,
+      POSTS_QUERY,
       { first: 10 },
     );
 
-
     this.postsData = this.postsQuery.data;
     this.loading = this.postsQuery.loading;
     this.error = this.postsQuery.error;
@@ -109,21 +53,17 @@ export class BlogComponent implements OnInit {
       }
     };
 
-    // Update posts when data changes
-    // For now, we'll call this periodically or on data updates
     updatePosts();
   }
 
   loadMorePosts() {
-    // Example of refetching with new variables
     this.postsQuery.setVariables({ first: 20 }).subscribe({
       next: (result: any) => console.log('Loaded more posts:', result),
       error: (err: any) => console.error('Error loading more posts:', err),
     });
   }
 
   refreshPosts() {
-    // Example of refetching with same variables
     this.postsQuery.refetch().subscribe({
       next: (result: any) => console.log('Refreshed posts:', result),
       error: (err: any) => console.error('Error refreshing posts:', err),

examples/angular/template-hierarchy-data-fetching/example-app/src/app/components/header/header.component.ts

@@ -138,35 +138,6 @@ export class HeaderComponent implements OnInit {
         },
       });
   }
-  // Convert flat list of menu items to hierarchical structure
-
-   
-  // private flatListToHierarchical(items: MenuItem[]): MenuItem[] {
-  //   const map = new Map<string, MenuItem>();
-  //   const roots: MenuItem[] = [];
-
-  //   // First pass: create map of all items
-  //   items.forEach((item) => {
-  //     map.set(item.id, { ...item, children: [] });
-  //   });
-
-  //   // Second pass: build hierarchy
-  //   items.forEach((item) => {
-  //     const mappedItem = map.get(item.id)!;
-
-  //     if (item.parentId && map.has(item.parentId)) {
-  //       const parent = map.get(item.parentId)!;
-  //       if (!parent.children) {
-  //         parent.children = [];
-  //       }
-  //       parent.children.push(mappedItem);
-  //     } else {
-  //       roots.push(mappedItem);
-  //     }
-  //   });
-
-  //   return roots;
-  // }
   private flatListToHierarchical(items: MenuItem[]): MenuItem[] {
     return flatListToHierarchical(items, {
       idKey: 'id',
@@ -192,11 +163,9 @@ export class HeaderComponent implements OnInit {
 
   onMenuItemClick(item: MenuItem) {
     if (item.uri) {
-      // Handle external links
       if (item.target === '_blank' || item.uri.startsWith('http')) {
         window.open(item.uri, item.target || '_self');
       } else {
-        // Navigate internally
         this.router.navigate([item.uri]);
       }
     }

examples/angular/template-hierarchy-data-fetching/example-app/src/app/components/wp-templates/front-page/front-page.component.html

@@ -4,14 +4,6 @@
       <app-loading text="Loading site..."></app-loading>
     </ng-container>
 
-    <!-- Error state for settings -->
-    <div *ngIf="settingsError() && !settingsLoading()">
-      <h1>My WordPress Site</h1>
-      <p>Welcome to my site</p>
-      <small>Error loading site data: {{ settingsError()?.message }}</small>
-    </div>
-
-    <!-- Success state for settings -->
     <div *ngIf="!settingsLoading() && !settingsError()">
       <h1>{{ siteInfo().title }}</h1>
       <p>{{ siteInfo().description }}</p>
@@ -22,7 +14,6 @@ <h1>{{ siteInfo().title }}</h1>
     <section id="recent-posts">
       <h2>Recent Posts</h2>
 
-      <!-- Error state for blog posts -->
       <div *ngIf="blogError() && !blogLoading()">
         <p>Failed to load posts</p>
         <p>{{ blogError()?.message }}</p>
@@ -31,23 +22,20 @@ <h2>Recent Posts</h2>
         </button>
       </div>
 
-      <!-- Loading state for blog posts -->
       <ng-container *ngIf="blogLoading() && !blogError()">
         <app-loading text="Loading recent posts..."></app-loading>
       </ng-container>
 
-      <!-- Empty state -->
       <ng-container
-        *ngIf="!blogLoading() && !blogError() && posts().length === 0"
+        *ngIf="!blogLoading() && !blogError() && blogPosts().length === 0"
       >
-        <app-empty-state></app-empty-state>
+        <app-empty-state text="No recent posts available"></app-empty-state>
       </ng-container>
 
-      <!-- Posts listing -->
       <ng-container
-        *ngIf="!blogLoading() && !blogError() && posts().length > 0"
+        *ngIf="!blogLoading() && !blogError() && blogPosts().length > 0"
       >
-        <app-post-listing [posts]="posts()" [loading]="false" [cols]="4">
+        <app-post-listing [posts]="blogPosts()" [loading]="false" [cols]="4">
         </app-post-listing>
       </ng-container>
     </section>