Getting ContentItem Data to ContentDetailComponent via Slug;

Author: jsfrocha

src/app/app-routing.module.ts

@@ -6,11 +6,14 @@ import {BlogComponent} from './screens/blog/blog.component';
 import {FaqsComponent} from './screens/faqs/faqs.component';
 import {AboutComponent} from './screens/about/about.component';
 import {PrivacyComponent} from './screens/privacy/privacy.component';
+import {ContentDetailComponent} from './screens/content-detail/content-detail.component';
+import {ContentItemResolver} from './shared/resolvers/content-item.resolver';
 
 
 const routes: Routes = [
   { path: '', component: HomeComponent },
   { path: 'conteudo', component: ContentComponent },
+  { path: 'conteudo/:slug', component: ContentDetailComponent, resolve: { queryResult: ContentItemResolver } },
   { path: 'blog', component: BlogComponent },
   { path: 'faqs', component: FaqsComponent },
   { path: 'sobre', component: AboutComponent },

src/app/app.module.ts

@@ -17,6 +17,7 @@ import {NgxSkeletonLoaderModule} from 'ngx-skeleton-loader';
 import {PrivacyComponent} from './screens/privacy/privacy.component';
 import {ReactiveFormsModule} from '@angular/forms';
 import {AppService} from './app.service';
+import {ContentDetailComponent} from './screens/content-detail/content-detail.component';
 
 @NgModule({
   declarations: [
@@ -26,7 +27,8 @@ import {AppService} from './app.service';
     BlogComponent,
     FaqsComponent,
     AboutComponent,
-    PrivacyComponent
+    PrivacyComponent,
+    ContentDetailComponent
   ],
   imports: [
     BrowserModule,

src/app/screens/content-detail/content-detail.component.html

@@ -0,0 +1 @@
+<p>content-detail works!</p>

src/app/screens/content-detail/content-detail.component.scss

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContentDetailComponent } from './content-detail.component';
+
+describe('ContentDetailComponent', () => {
+  let component: ContentDetailComponent;
+  let fixture: ComponentFixture<ContentDetailComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ContentDetailComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ContentDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/screens/content-detail/content-detail.component.spec.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+import {IContentItem} from '../../interfaces/content-item.interface';
+
+@Component({
+  selector: 't4e-content-detail',
+  templateUrl: './content-detail.component.html',
+  styleUrls: ['./content-detail.component.scss']
+})
+export class ContentDetailComponent implements OnInit {
+
+  contentItem: IContentItem
+  loading: boolean;
+
+  constructor(
+    private route: ActivatedRoute
+  ) { }
+
+  ngOnInit(): void {
+    this.route.data.subscribe(({queryResult}) => {
+      this.loading = queryResult.data.loading;
+      this.contentItem = queryResult.data.contentItem;
+    })
+  }
+
+}

src/app/screens/content-detail/content-detail.component.ts

@@ -56,6 +56,7 @@
     <t4e-content-card
       *ngFor="let contentItem of contentItems"
       [contentItem]="contentItem"
+      [routerLink]="['/conteudo/' + contentItem.slug]"
     ></t4e-content-card>
   </section>
 

src/app/screens/content/content.component.html

@@ -1,47 +1,12 @@
 import {Component, OnInit} from '@angular/core';
-import gql from 'graphql-tag';
 import {AppService} from '../../app.service';
 import {BehaviorSubject, combineLatest, Observable} from 'rxjs';
 import {map} from 'rxjs/operators';
 import {IFilters} from '../../shared/components/filters/interfaces/filters.interface';
 import {Apollo, QueryRef} from 'apollo-angular';
 import {IContentItem} from '../../interfaces/content-item.interface';
 import {ActivatedRoute} from '@angular/router';
-
-const GET_CONTENT_ITEMS = gql`
-  query GetContentItems(
-    $stakeholderIds: [String],
-    $providerIds: [String],
-    $tagIds: [String],
-    $limit: Float,
-    $startAt: Float
-  ) {
-    contentItems(
-      stakeholderIds: $stakeholderIds,
-      providerIds: $providerIds,
-      tagIds: $tagIds,
-      limit: $limit,
-      startAt: $startAt,
-      onlyPublished: true
-    ) {
-      type,
-      title,
-      slug,
-      order,
-      videoTime,
-      imageUrl,
-      createdAt,
-      updatedAt,
-      stakeholder {
-        code
-      }
-      provider {
-        code
-      }
-    }
-
-  }
-`;
+import {ContentItemsService} from '../../shared/services/content-items.service';
 
 @Component({
   selector: 't4e-content',
@@ -69,7 +34,8 @@ export class ContentComponent implements OnInit {
   constructor(
     private appService: AppService,
     private apollo: Apollo,
-    private activatedRoute: ActivatedRoute
+    private activatedRoute: ActivatedRoute,
+    private contentItemsService: ContentItemsService
   ) { }
 
   ngOnInit(): void {
@@ -79,9 +45,7 @@ export class ContentComponent implements OnInit {
     this.stakeholderFields$ = this.appService.getStakeholderFilterFields();
     this.tagFields$ = this.appService.getTagFilterFields();
 
-    this.contentItemsQueryRef = this.apollo.watchQuery({
-      query: GET_CONTENT_ITEMS
-    })
+    this.contentItemsQueryRef = this.contentItemsService.getContentItems();
 
     this.contentItemsQueryRef.valueChanges.subscribe(({data, loading, errors}) => {
       if (!loading) {

src/app/screens/content/content.component.ts

@@ -0,0 +1,27 @@
+import {Injectable} from '@angular/core';
+import {ContentItemsService} from '../services/content-items.service';
+import {ActivatedRouteSnapshot, Resolve, RouterStateSnapshot} from '@angular/router';
+import {IContentItem} from '../../interfaces/content-item.interface';
+import {Observable} from 'rxjs';
+import {map} from 'rxjs/operators';
+
+@Injectable({ providedIn: 'root'})
+export class ContentItemResolver implements Resolve<IContentItem>{
+  constructor(private service: ContentItemsService) {}
+
+  resolve(
+    route: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot
+  ): Observable<any> | Promise<any> | any {
+    return this.service.getContentItem(route.paramMap.get('slug'))
+        .pipe(
+          map(({data, loading, errors}) => {
+            return {
+              data,
+              loading,
+              errors
+            }
+          })
+        );
+  }
+}

src/app/shared/resolvers/content-item.resolver.ts

@@ -0,0 +1,99 @@
+import {Injectable} from '@angular/core';
+import gql from 'graphql-tag';
+import {Apollo, QueryRef} from 'apollo-angular';
+import {Observable} from 'rxjs';
+import {ApolloQueryResult} from 'apollo-client';
+import {IContentItem} from '../../interfaces/content-item.interface';
+
+const GET_CONTENT_ITEMS = gql`
+  query GetContentItems(
+    $stakeholderIds: [String],
+    $providerIds: [String],
+    $tagIds: [String],
+    $limit: Float,
+    $startAt: Float
+  ) {
+    contentItems(
+      stakeholderIds: $stakeholderIds,
+      providerIds: $providerIds,
+      tagIds: $tagIds,
+      limit: $limit,
+      startAt: $startAt,
+      onlyPublished: true
+    ) {
+      type,
+      title,
+      slug,
+      order,
+      videoTime,
+      imageUrl,
+      createdAt,
+      updatedAt,
+      stakeholder {
+        code
+      }
+      provider {
+        code
+      }
+    }
+
+  }
+`;
+
+const GET_CONTENT_ITEM = gql`
+  query GetContentItem($slug: String) {
+    contentItem(slug: $slug) {
+      id,
+      type,
+      order,
+      videoUrl,
+      videoTime,
+      imageUrl,
+      title,
+      text,
+      createdAt,
+      updatedAt,
+      slug,
+      published,
+      stakeholder {
+        id,
+        title,
+        code,
+        order
+      }
+      provider {
+        id,
+        title,
+        code,
+        order
+      }
+      tags {
+        id,
+        title,
+        code,
+        order
+      }
+    }
+  }
+`;
+
+@Injectable()
+export class ContentItemsService {
+  constructor(private apollo: Apollo) {}
+
+  getContentItems(): QueryRef<any> {
+    return this.apollo.watchQuery({
+      query: GET_CONTENT_ITEMS
+    })
+  }
+
+  getContentItem(slug: string): Observable<ApolloQueryResult<IContentItem>> {
+    return this.apollo.query({
+      query: GET_CONTENT_ITEM,
+      variables: {
+        slug
+      }
+    })
+  }
+
+}

src/app/shared/services/content-items.service.ts

@@ -10,6 +10,7 @@ import { FiltersComponent } from './components/filters/filters.component';
 import {ReactiveFormsModule} from '@angular/forms';
 import { ContentCardComponent } from './components/content-card/content-card.component';
 import { FilterDrawerComponent } from './components/filter-drawer/filter-drawer.component';
+import {ContentItemsService} from './services/content-items.service';
 
 const SHARED_COMPONENTS = [
   NavbarComponent,
@@ -19,12 +20,19 @@ const SHARED_COMPONENTS = [
   FiltersComponent,
   ContentCardComponent,
   FilterDrawerComponent,
+];
+
+const SHARED_SERVICES = [
+  ContentItemsService
 ]
 
 @NgModule({
   declarations: [
     ...SHARED_COMPONENTS
   ],
+  providers: [
+    ...SHARED_SERVICES
+  ],
   imports: [
     CommonModule,
     RouterModule,