More advanced (#19)

examples/games/package.json

@@ -9,37 +9,37 @@
     "lint": "ng lint"
   },
   "dependencies": {
-    "@angular/animations": "6.0.3",
-    "@angular/common": "6.0.3",
-    "@angular/compiler": "6.0.3",
-    "@angular/core": "6.0.3",
-    "@angular/forms": "6.0.3",
-    "@angular/http": "6.0.3",
-    "@angular/platform-browser": "6.0.3",
-    "@angular/platform-browser-dynamic": "6.0.3",
-    "@angular/router": "6.0.3",
-    "@loona/angular": "^1.0.0-alpha.1",
-    "apollo-angular": "1.1.2",
-    "apollo-angular-link-http": "1.1.1",
-    "apollo-cache-inmemory": "1.2.5",
-    "apollo-client": "2.3.5",
+    "@angular/animations": "6.1.4",
+    "@angular/common": "6.1.4",
+    "@angular/compiler": "6.1.4",
+    "@angular/core": "6.1.4",
+    "@angular/forms": "6.1.4",
+    "@angular/http": "6.1.4",
+    "@angular/platform-browser": "6.1.4",
+    "@angular/platform-browser-dynamic": "6.1.4",
+    "@angular/router": "6.1.4",
+    "@loona/angular": "1.0.0-alpha.1",
+    "apollo-angular": "1.2.0",
+    "apollo-angular-link-http": "1.2.0",
+    "apollo-cache-inmemory": "1.2.9",
+    "apollo-client": "2.4.1",
     "apollo-link": "1.2.2",
-    "core-js": "2.5.4",
+    "core-js": "2.5.7",
     "graphql": "0.13.2",
     "graphql-tag": "2.9.2",
-    "rxjs": "6.2.1",
-    "tachyons": "^4.10.0",
+    "rxjs": "6.2.2",
+    "tachyons": "4.11.1",
     "zone.js": "0.8.26"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "0.6.1",
+    "@angular-devkit/build-angular": "0.6.8",
     "@angular/cli": "6.0.1",
-    "@angular/compiler-cli": "6.0.3",
-    "@angular/language-service": "6.0.3",
+    "@angular/compiler-cli": "6.1.4",
+    "@angular/language-service": "6.1.4",
     "@types/node": "8.9.4",
     "codelyzer": "4.2.1",
     "ts-node": "5.0.1",
     "tslint": "5.9.1",
-    "typescript": "2.7.2"
+    "typescript": "2.9.2"
   }
 }

examples/games/src/app/app.module.ts

@@ -21,7 +21,6 @@ import { ErrorComponent } from './shared/error.component';
     ErrorComponent,
   ],
   imports: [BrowserModule, HttpClientModule, AppRoutingModule, GraphQLModule],
-  providers: [],
   bootstrap: [AppComponent],
 })
 export class AppModule {}

examples/games/src/app/games/games.component.ts

@@ -5,6 +5,7 @@ import { pluck, share } from 'rxjs/operators';
 
 import { Game } from './interfaces';
 import { allGamesQuery } from './graphql/all-games.query';
+import { countQuery } from './graphql/count.query';
 
 @Component({
   selector: 'app-games',
@@ -37,12 +38,16 @@ import { allGamesQuery } from './graphql/all-games.query';
           </tr>
         </tbody>
       </table>
+      <div>
+        All games: {{count$ | async}}
+      </div>
     </div>
   </div>
   `,
 })
 export class GamesComponent implements OnInit {
   games$: Observable<Game[]>;
+  count$: Observable<number>;
   loading$: Observable<boolean>;
 
   constructor(private loona: Loona) {}
@@ -56,6 +61,12 @@ export class GamesComponent implements OnInit {
       })
       .valueChanges.pipe(share());
 
+    this.count$ = this.loona
+      .query({
+        query: countQuery,
+      })
+      .valueChanges.pipe(share(), pluck('data', 'count'));
+
     // I used pluck since it's the easiest way extract properties in that case
     this.games$ = games$.pipe(pluck('data', 'allGames'));
     this.loading$ = games$.pipe(pluck('loading'));

examples/games/src/app/games/games.state.ts

@@ -1,9 +1,9 @@
-import { State, Mutation, Action, Update } from '@loona/angular';
-import { of } from 'rxjs';
-import { mapTo, catchError } from 'rxjs/operators';
+import {State, Mutation, Action, Resolve, Context} from '@loona/angular';
+import {of, Observable} from 'rxjs';
+import {mapTo, catchError, map} from 'rxjs/operators';
 
-import { currentGameQuery } from './graphql/current-game.query';
-import { currentGameStatusQuery } from './graphql/current-game-status.query';
+import {currentGameQuery} from './graphql/current-game.query';
+import {currentGameStatusQuery} from './graphql/current-game-status.query';
 import {
   GameCreationSuccess,
   GameCreationFailure,
@@ -35,39 +35,55 @@ const defaultState = {
 export class GamesState {
   // registers and creates a resolver for the mutation
   @Mutation(UpdateName)
-  // wrapper to update a query based on mutation's arguments
-  @Update(currentGameQuery)
-  // state holds the result of currentGameQuery
-  // second params are arguments
-  updateName(state, { team, name }) {
-    // since it uses immer, you can mutate an object directly
-    state.currentGame[`team${team}Name`] = name;
+  updateName({team, name}, ctx: Context) {
+    return ctx.patchQuery(currentGameQuery, data => {
+      // since it uses immer, you can mutate an object directly
+      data.currentGame[`team${team}Name`] = name;
+    });
+  }
+
+  @Resolve('Query.count')
+  count() {
+    return new Observable(observer => {
+      setTimeout(() => {
+        observer.next(10)
+
+        setTimeout(() => {
+          observer.next(20);
+          observer.complete();
+        }, 2000);
+      }, 2000);
+    });
   }
 
   @Mutation(Goal)
-  @Update(currentGameQuery)
-  goal(state, { team }) {
-    state.currentGame[`team${team}Score`] += 1;
+  goal({team}, ctx: Context) {
+    console.log(ctx);
+    return ctx.patchQuery(currentGameQuery, data => {
+      data.currentGame[`team${team}Score`] += 1;
+    });
   }
 
   @Mutation(UpdateGameStatus)
-  @Update(currentGameStatusQuery)
-  updateGameStatus(state, { created, error }) {
-    if (typeof created !== 'undefined') {
-      state.currentGameStatus.created = created;
-    }
+  updateGameStatus({created, error}, ctx: Context) {
+    return ctx.patchQuery(currentGameStatusQuery, data => {
+      if (typeof created !== 'undefined') {
+        data.currentGameStatus.created = created;
+      }
 
-    if (typeof error !== 'undefined') {
-      state.currentGameStatus.error = error;
-    }
+      if (typeof error !== 'undefined') {
+        data.currentGameStatus.error = error;
+      }
+    });
   }
 
   @Mutation(ResetCurrentGame)
-  @Update(currentGameQuery)
-  resetCurrentGame() {
-    return {
-      currentGame: defaultState.currentGame,
-    };
+  resetCurrentGame(args, ctx: Context) {
+    return ctx.writeData({
+      data: {
+        currentGame: defaultState.currentGame,
+      }
+    });
   }
 
   // Action handler - similar to NGRX Effects
@@ -105,7 +121,7 @@ export class GamesState {
 
   // Action handler that returns an action based on the result
   @Action(CreateGame)
-  onCreateGame(_action, action$) {
+  onCreateGame(payload, action$) {
     return action$.pipe(
       mapTo(new GameCreationSuccess()),
       catchError(() => of(new GameCreationFailure())),

examples/games/src/app/games/graphql/count.query.ts

@@ -0,0 +1,7 @@
+import gql from 'graphql-tag';
+
+export const countQuery = gql`
+  query CountGames {
+    count @client
+  }
+`;

examples/todo-angular/.editorconfig

@@ -0,0 +1,13 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

examples/todo-angular/.gitignore

@@ -0,0 +1,39 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+
+# dependencies
+/node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db

examples/todo-angular/README.md

@@ -0,0 +1,27 @@
+# Games
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 6.0.1.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

examples/todo-angular/angular.json

@@ -0,0 +1,98 @@
+{
+  "$schema": "../../node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "todo": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "prefix": "app",
+      "schematics": {
+        "@schematics/angular:component": {
+          "inlineTemplate": true,
+          "inlineStyle": true,
+          "spec": false
+        },
+        "@schematics/angular:class": {
+          "spec": false
+        },
+        "@schematics/angular:directive": {
+          "spec": false
+        },
+        "@schematics/angular:guard": {
+          "spec": false
+        },
+        "@schematics/angular:module": {
+          "spec": false
+        },
+        "@schematics/angular:pipe": {
+          "spec": false
+        },
+        "@schematics/angular:service": {
+          "spec": false
+        }
+      },
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/todo",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [{
+                "replace": "src/environments/environment.ts",
+                "with": "src/environments/environment.prod.ts"
+              }],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "todo:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "todo:build:production"
+            }
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/tsconfig.app.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "todo"
+}