Récupération automatique du profil au lancement de l'application

client/src/components/HomePage/HomePage.tsx

@@ -14,8 +14,8 @@ export function HomePage() {
             <div className="column is-4 is-offset-4">
               <div className="box">
               { 
-                currentUser && currentUser.full_name ?
-                <p>Bonjour <span className="has-text-weight-bold">{currentUser.full_name}</span> !</p> :
+                currentUser && currentUser.email ?
+                <p>Bonjour <span className="has-text-weight-bold">{currentUser.email}</span> !</p> :
                 <p>Veuillez vous authentifier.</p>
               }
               </div>

client/src/config.ts

@@ -2,6 +2,7 @@ export const Config = {
   loginURL: get<string>("loginURL", "http://localhost:8081/login"),
   logoutURL: get<string>("logoutURL", "http://localhost:8081/logout"),
   graphQLEndpoint: get<string>("graphQLEndpoint", "http://localhost:8081/api/v1/graphql"),
+  subscriptionEndpoint: get<string>("subscriptionEndpoint", "ws://localhost:8081/api/v1/graphql"),
 };
 
 function get<T>(key: string, defaultValue: T):T {

client/src/store/reducers/auth.ts

@@ -39,7 +39,9 @@ function handleFetchProfileSuccess(state: AuthState, { profile }: fetchProfileSu
     ...state,
     isAuthenticated: true,
     currentUser: {
-      ...profile,
+      email: profile.email,
+      connectedAt: profile.connectedAt,
+      createdAt: profile.createdAt,
     }
   };
 };

client/src/store/sagas/init.ts

@@ -1,7 +1,12 @@
 import { all, put } from "redux-saga/effects";
+import { fetchProfile } from "../actions/profile";
 
 export function* initRootSaga() {
   yield all([
-    
+    fetchUserProfileSaga(),
   ]);
+}
+
+export function* fetchUserProfileSaga() {
+  yield put(fetchProfile());
 }

client/src/store/sagas/root.ts

@@ -7,5 +7,6 @@ export function* rootSaga() {
   yield all([
     initRootSaga(),
     failureRootSaga(),
+    usersRootSaga(),
   ]);
 }

client/src/store/sagas/users.ts

@@ -1,4 +1,4 @@
-import { DaddyClient } from "../../util/daddy";
+import { DaddyClient, getClient } from "../../util/daddy";
 import { Config } from "../../config";
 import { all, takeLatest, put, select } from "redux-saga/effects";
 import { FETCH_PROFILE_REQUEST, fetchProfile, FETCH_PROFILE_FAILURE, FETCH_PROFILE_SUCCESS } from "../actions/profile";
@@ -18,12 +18,12 @@ export function* onCurrentUserChangeSaga() {
 }
 
 export function* fetchProfileSaga() {
-  const client = new DaddyClient(Config.graphQLEndpoint);
+  const client = getClient(Config.graphQLEndpoint, Config.subscriptionEndpoint);
   
   let profile: User;
   try {
-    const currentUser: User = yield select((state: RootState) => state.auth.currentUser);
-    profile = yield client.fetchUser(currentUser.email).then(result => result.user);
+    profile = yield client.fetchProfile().then(result => result.userProfile);
+    console.log(profile);
   } catch(err) {
     yield put({ type: FETCH_PROFILE_FAILURE, err });
     return;

client/src/types/user.ts

@@ -1,6 +1,5 @@
 export interface User {
   email: string
-  full_name?: string
-  updated_at?: Date
-  created_at?: Date
+  connectedAt?: Date
+  createdAt?: Date
 }

client/src/util/daddy.ts

@@ -1,5 +1,10 @@
-import { GraphQLClient } from 'graphql-request'
-import { Config } from "../config";
+import ApolloClient from 'apollo-client';
+import { InMemoryCache } from 'apollo-cache-inmemory';
+import { split } from 'apollo-link';
+import { HttpLink } from 'apollo-link-http';
+import { WebSocketLink } from 'apollo-link-ws';
+import { getMainDefinition } from 'apollo-utilities';
+import gql from 'graphql-tag';
 
 export class UnauthorizedError extends Error {
   constructor(...args: any[]) {
@@ -8,30 +13,65 @@ export class UnauthorizedError extends Error {
   }
 }
 
+let client: DaddyClient
+
+export function getClient(graphQLEndpoint: string, subscriptionEndpoint: string): DaddyClient {
+  if (!client) {
+    client = new DaddyClient(graphQLEndpoint, subscriptionEndpoint);
+  }
+
+  return client;
+}
+
 export class DaddyClient {
 
-  gql: GraphQLClient
+  gql: ApolloClient<InMemoryCache>
 
-  constructor(endpoint: string) {
-    this.gql = new GraphQLClient(endpoint, {
-      headers: {
-        mode: 'cors',
+  constructor(graphQLEndpoint: string, subscriptionEndpoint: string) {
+    const wsLink = new WebSocketLink({
+      uri: subscriptionEndpoint,
+      options: {
+        reconnect: true
       }
     });
+    
+    const httpLink = new HttpLink({ 
+      uri: graphQLEndpoint,
+      fetchOptions: {
+        mode: 'cors',
+        credentials: 'include',
+      }
+    });
+    
+    const link = split(
+      ({ query }) => {
+        const definition = getMainDefinition(query);
+        return (
+          definition.kind === 'OperationDefinition' &&
+          definition.operation === 'subscription'
+        );
+      },
+      wsLink,
+      httpLink,
+    );
+    
+    this.gql = new ApolloClient<any>({
+      link: link,
+      cache: new InMemoryCache(),
+    });
   }
 
-  fetchUser(email: string) {
-    return this.gql.rawRequest(`
-      query fetchUser {
-          user(where: {email: {eq: $email}}) {
-          id
-          created_at
-          updated_at
+  fetchProfile() {
+    return this.gql.query({
+      query: gql`
+      query {
+        userProfile {
           email,
-          full_name
+          createdAt,
+          connectedAt
         }
-      }
-    `, { email })
+      }`
+    })
     .then(this.assertAuthorization)
   }