Use graphql backend (#1014)

* feat: add canteen gql

* feat: add colleagues gql

* feat: add events gql

* feat: add page gql

* feat: add authors gql

* feat: add posts gql

* feat: add search gql

* feat: add post gql

* feat: add archive gql

* feat: add label gql

* feat: add menu gql

* feat: add menu gql

* fix: post fix

* fix: post fix

* fix: take(1)

* feat: add Automatic Persisted Queries

* fix: archive gql

* fix: try fixing posts

* feat: label and author search pagination

* chore: fix gql url

angular.json

@@ -1,5 +1,8 @@
 {
   "$schema": "node_modules/@angular/cli/lib/config/schema.json",
+  "cli": {
+    "analytics": false
+  },
   "version": 1,
   "newProjectRoot": "",
   "projects": {
@@ -91,6 +94,14 @@
                   "with": "apps/frontend/src/environments/environment.hmr.ts"
                 }
               ]
+            },
+            "dev": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
             }
           },
           "outputs": ["{options.outputPath}"]
@@ -107,6 +118,9 @@
             "hmr": {
               "hmr": true,
               "browserTarget": "frontend:build:hmr"
+            },
+            "dev": {
+              "browserTarget": "frontend:build:dev"
             }
           }
         },

apps/frontend/src/app/app.module.ts

@@ -20,6 +20,11 @@ import { ToastComponent } from './components/toast/toast.component'
 import { faFacebookF } from '@fortawesome/free-brands-svg-icons'
 import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component'
 import { LayoutModule } from '@angular/cdk/layout'
+import {APOLLO_OPTIONS} from "apollo-angular";
+import {HttpLink} from "apollo-angular/http";
+import {InMemoryCache} from "@apollo/client/core";
+import {createPersistedQueryLink} from "apollo-angular/persisted-queries";
+import {sha256} from "crypto-hash";
 
 const stateSetter = (reducer: ActionReducer<any>): ActionReducer<any> => {
   return function (state: any, action: any) {
@@ -52,7 +57,23 @@ export const NGRX_STATE = makeStateKey('NGRX_STATE')
     }),
     ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
   ],
-  providers: [],
+  providers: [
+    {
+      provide: APOLLO_OPTIONS,
+      useFactory: (httpLink: HttpLink) => {
+        const link = createPersistedQueryLink({
+          sha256
+        }).concat(
+          httpLink.create({uri: environment.gqlURL}),
+        );
+        return {
+          cache: new InMemoryCache(),
+          link
+        }
+      },
+      deps: [HttpLink]
+    }
+  ],
   bootstrap: [AppComponent],
 })
 export class AppModule {

apps/frontend/src/app/models/Post.ts

@@ -8,7 +8,7 @@ export interface Post {
   date: string
   description?: string
   images?: Image[]
-  index_image: string
+  indexImage: string
   labels?: Label[]
   title: string
   type: string

apps/frontend/src/app/modules/archive/archive.service.ts

@@ -1,23 +1,72 @@
 import { Injectable } from '@angular/core'
-import { HttpClient } from '@angular/common/http'
-import { environment } from '../../../environments/environment'
+import {Apollo, gql} from "apollo-angular";
+import {map, take} from "rxjs/operators";
+import {Observable} from "rxjs";
+import {Post} from "../../models/Post";
+
+const infoQUERY = gql`
+  query {
+    archive {
+      info {
+        count
+        year
+        month
+      }
+    }
+  }
+`
+
+const postsQUERY = gql`
+  query Archive($year: Int!, $month: Int!) {
+    archive {
+      posts(year: $year, month: $month) {
+        id
+        date
+        title
+        description
+      }
+    }
+  }
+`
+
+interface Result {
+  archive: {
+    info: Stats[]
+    posts: Post[]
+  }
+}
+
+export interface Stats { count: number, year: number, month: number}
 
 @Injectable({
   providedIn: 'root',
 })
 export class ArchiveService {
-  getArchives() {
-    return this.http.get(environment.baseURL + '/posts/getCountByMonth')
-  }
+  constructor(private gql: Apollo) {}
 
-  getDetailedArchives({ year, month }: { year: number; month: number }) {
-    return this.http.get(environment.baseURL + '/posts/getPostsByYearMonth', {
-      params: {
-        year: year.toString(10),
-        month: month.toString(10),
-      },
-    })
+  getArchives(): Observable<Stats[]> {
+    return this.gql.watchQuery<Result>({
+      query: infoQUERY
+    }).valueChanges.pipe(
+      map(res => {
+        return res.data.archive.info
+      }),
+      take(1)
+    )
   }
 
-  constructor(private http: HttpClient) {}
+  getDetailedArchives({ year, month }: { year: number; month: number }): Observable<Post[]> {
+    return this.gql.watchQuery<Result>({
+      query: postsQUERY,
+      variables: {
+        year,
+        month,
+      }
+    }).valueChanges.pipe(
+      map(res => {
+        return res.data.archive.posts
+      }),
+      take(1)
+    )
+  }
 }

apps/frontend/src/app/modules/canteen/canteen.module.ts

@@ -2,10 +2,6 @@ import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { RouterModule, Routes } from '@angular/router'
 import { CanteenComponent } from './components/canteen/canteen.component'
-import { StoreModule } from '@ngrx/store'
-import { CANTEEN_FEATURE_KEY, canteenReducer, initialState as canteenInitialState } from './reducer/canteen/canteen.reducer'
-import { EffectsModule } from '@ngrx/effects'
-import { CanteenEffects } from './reducer/canteen/canteen.effects'
 
 const routes: Routes = [
   {
@@ -19,8 +15,6 @@ const routes: Routes = [
   imports: [
     CommonModule,
     RouterModule.forChild(routes),
-    StoreModule.forFeature(CANTEEN_FEATURE_KEY, canteenReducer, { initialState: canteenInitialState }),
-    EffectsModule.forFeature([CanteenEffects]),
   ],
 })
 export class CanteenModule {}

apps/frontend/src/app/modules/canteen/components/canteen/canteen.component.html

@@ -1,10 +1,10 @@
 <h2>Menza étlap</h2>
 <ng-container *ngFor="let week of [0, 1]">
-  <span class="menu-header">{{ week_prefixes[week] }}</span>
-  <div class="day" *ngFor="let day of [1, 2, 3, 4, 5]">
-    <span class="day-name">{{ weekdays[day - 1] }}</span>
-    <ng-container *ngIf="(canteen | async)[week][day] as thisDay">
-      <span class="food" *ngFor="let meal of thisDay.menus">{{ meal.menu }}</span>
-    </ng-container>
-  </div>
+    <span class="menu-header">{{ week_prefixes[week] }}</span>
+    <div class="day" *ngFor="let day of [0,1,2,3,4]">
+        <span class="day-name">{{ weekdays[day] }}</span>
+        <ng-container *ngIf="(canteen | async)?.[week][day] as thisDay">
+            <span class="food" *ngFor="let meal of thisDay.menus">{{ meal.menu }}</span>
+        </ng-container>
+    </div>
 </ng-container>

apps/frontend/src/app/modules/canteen/components/canteen/canteen.component.ts

@@ -1,11 +1,9 @@
 import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core'
-import { CANTEEN_FEATURE_KEY, CanteenState, WeekCanteen } from '../../reducer/canteen/canteen.reducer'
-import { select, Store } from '@ngrx/store'
-import { LoadCanteen } from '../../reducer/canteen/canteen.actions'
-import { map } from 'rxjs/operators'
 import { Observable } from 'rxjs'
 import { StructuredDataService } from '../../../../services/structured-data.service'
 import { TitleService } from '../../../../services/title.service'
+import {CanteenDay} from "../../models/cateen";
+import {CanteenService} from "../../services/canteen.service";
 
 @Component({
   selector: 'verseghy-canteen',
@@ -14,7 +12,7 @@ import { TitleService } from '../../../../services/title.service'
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CanteenComponent implements OnInit, OnDestroy {
-  canteen: Observable<WeekCanteen[]>
+  canteen: Observable<[CanteenDay[], CanteenDay[]]>
 
   weekdays = ['Hétfő', 'Kedd', 'Szerda', 'Csütörtök', 'Péntek', 'Szombat', 'Vasárnap']
   week_prefixes = ['Heti menü', 'Jövő heti menü']
@@ -25,20 +23,14 @@ export class CanteenComponent implements OnInit, OnDestroy {
   ])
 
   constructor(
-    private store: Store<CanteenState>,
     private structuredDataService: StructuredDataService,
-    private titleService: TitleService
+    private titleService: TitleService,
+    private canteenService: CanteenService,
   ) {}
 
   ngOnInit() {
     this.titleService.setTitle('Menza')
-    this.store.dispatch(new LoadCanteen())
-    this.canteen = this.store.pipe(
-      select((state) => state[CANTEEN_FEATURE_KEY]),
-      map((state: CanteenState) => {
-        return [state.thisWeek, state.nextWeek]
-      })
-    )
+    this.canteen = this.canteenService.getCanteen()
   }
 
   ngOnDestroy() {

apps/frontend/src/app/modules/canteen/models/cateen.ts

@@ -0,0 +1,11 @@
+export interface CanteenDay {
+    id: number
+    menus: [Menu, Menu, Menu?]
+    date: string
+}
+
+export interface Menu {
+    id: number
+    menu: string
+    type: number
+}