Remplacement du Loader par WithLoader

client/src/components/App.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { BrowserRouter, Route, Redirect, Switch } from "react-router-dom";
 import { HomePage } from './HomePage/HomePage';
 import { ProfilePage } from './ProfilePage/ProfilePage';
+import { WorkgroupPage } from './WorkgroupPage/WorkgroupPage';
 
 export class App extends React.Component {
   render() {
@@ -10,6 +11,7 @@ export class App extends React.Component {
         <Switch>
           <Route path="/" exact component={HomePage} />
           <Route path="/profile" exact component={ProfilePage} />
+          <Route path="/workgroups/:id" exact component={WorkgroupPage} />
           <Route component={() => <Redirect to="/" />} />
         </Switch>
       </BrowserRouter>

client/src/components/HomePage/HomePage.tsx

@@ -2,23 +2,18 @@ import React from 'react';
 import { Page } from '../Page';
 import { Dashboard } from './Dashboard';
 import { useUserProfileQuery } from '../../gql/queries/profile';
-import { Loader } from '../Loader';
+import { WithLoader } from '../WithLoader';
 
 export function HomePage() {
   const { data, loading } = useUserProfileQuery();
 
-  if (loading) {
-    return (
-      <Loader />
-    );
-  }
-
   const { userProfile } = (data || {});
 
   return (
     <Page title={userProfile ? 'Tableau de bord' : 'Accueil'}>
       <div className="container is-fluid">
         <section className="section">
+          <WithLoader loading={loading}>
           {
             userProfile ?
             <Dashboard /> :
@@ -30,6 +25,7 @@ export function HomePage() {
               </div>
             </div> 
           }
+          </WithLoader>
         </section>
       </div>
     </Page>

client/src/components/HomePage/WorkgroupsPanel.tsx

@@ -4,7 +4,7 @@ import { User } from '../../types/user';
 import { Link } from 'react-router-dom';
 import { useWorkgroupsQuery } from '../../gql/queries/workgroups';
 import { useUserProfileQuery } from '../../gql/queries/profile';
-import { Loader } from '../Loader';
+import { WithLoader } from '../WithLoader';
 
 export function WorkgroupsPanel() {
   const workgroupsQuery = useWorkgroupsQuery();
@@ -12,18 +12,14 @@ export function WorkgroupsPanel() {
   const [ state, setState ] = useState({ selectedTab: 0 });
 
   const isLoading = userProfileQuery.loading || workgroupsQuery.loading;
-  if (isLoading) {
-    return <Loader />;
-  }
-
-  let { data: { userProfile }} = userProfileQuery;
-  let { data: { workgroups }} = workgroupsQuery;
+  const { userProfile } = (userProfileQuery.data || {});
+  const { workgroups } = (workgroupsQuery.data || {});
 
   const filterTabs = [
     {
       label: "Mes groupes",
       filter: workgroups => workgroups.filter((wg: Workgroup) => {
-        return  wg.members.some((u: User) => u.id === userProfile.id);
+        return  wg.members.some((u: User) => u.id === (userProfile ? userProfile.id : ''));
       })
     },
     {
@@ -43,7 +39,7 @@ export function WorkgroupsPanel() {
 
   let workgroupsItems = [];
   
-  workgroupsItems = filterTabs[state.selectedTab].filter(workgroups).map((wg: Workgroup) => {
+  workgroupsItems = filterTabs[state.selectedTab].filter(workgroups || []).map((wg: Workgroup) => {
     return (
       <Link to={`/workgroups/${wg.id}`} key={`wg-${wg.id}`} className="panel-block">
         <span className="panel-icon">
@@ -63,9 +59,9 @@ export function WorkgroupsPanel() {
           </p>
         </div>
         <div className="level-right">
-          <button className="button level-item is-outlined is-info is-inverted">
-              <i className="icon fa fa-plus"></i>
-          </button>
+          <Link to="/workgroups/new" className="button level-item is-outlined is-info is-inverted">
+            <i className="icon fa fa-plus"></i>
+          </Link>
         </div>
       </div>
       {/* <div className="panel-block">
@@ -76,26 +72,28 @@ export function WorkgroupsPanel() {
           </span>
         </p>
       </div> */}
-      <p className="panel-tabs">
+      <WithLoader loading={isLoading}>
+        <p className="panel-tabs">
+          {
+            filterTabs.map((tab, i) => {
+              return (
+                <a key={`workgroup-tab-${i}`}
+                  onClick={selectTab.bind(null, i)}
+                  className={i === state.selectedTab ? 'is-active' : ''}>
+                  {tab.label}
+                </a>
+              )
+            })
+          }
+        </p>
         {
-          filterTabs.map((tab, i) => {
-            return (
-              <a key={`workgroup-tab-${i}`}
-                onClick={selectTab.bind(null, i)}
-                className={i === state.selectedTab ? 'is-active' : ''}>
-                {tab.label}
-              </a>
-            )
-          })
+          workgroupsItems.length > 0 ?
+          workgroupsItems :
+          <a className="panel-block has-text-centered is-block">
+            <em>Aucun groupe dans cet catégorie pour l'instant.</em>
+          </a>
         }
-      </p>
-      {
-        workgroupsItems.length > 0 ?
-        workgroupsItems :
-        <a className="panel-block has-text-centered is-block">
-          <em>Aucun groupe dans cet catégorie pour l'instant.</em>
-        </a>
-      }
+      </WithLoader>
     </nav>
   )
 }

client/src/components/Loader.tsx

@@ -1,14 +0,0 @@
-import React from 'react';
-
-export class Loader extends React.Component {
-  render() {
-    return (
-      <div className="loader-container">
-        <div className="lds-ripple">
-          <div></div>
-          <div></div>
-        </div>
-      </div>
-    )
-  }
-}

client/src/components/ProfilePage/ProfilePage.tsx

@@ -1,7 +1,6 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { Page } from '../Page';
 import { UserForm } from '../UserForm';
-import { Loader } from '../Loader';
 import { User } from '../../types/user';
 import { useUserProfileQuery } from '../../gql/queries/profile';
 import { useUpdateUserProfileMutation } from '../../gql/mutations/profile';
@@ -27,11 +26,9 @@ export function ProfilePage() {
           <div className="columns">
             <div className="column is-6 is-offset-3">
               <h2 className="is-size-2 subtitle">Mon profil</h2>
-              <WithLoader loading={isLoading}>
+              <WithLoader loading={isLoading || !userProfile}>
               {
-                userProfile ?
-                <UserForm onChange={onUserChange} user={userProfile} /> :
-                <Loader />
+                <UserForm onChange={onUserChange} user={userProfile} />
               }
               </WithLoader>
             </div>

client/src/components/WithLoader.tsx

@@ -9,12 +9,7 @@ export const WithLoader: FunctionComponent<WithLoaderProps> = ({ loading, childr
     <Fragment>
       {
         loading ?
-        <div className="loader-container">
-          <div className="lds-ripple">
-            <div></div>
-            <div></div>
-          </div>
-        </div> :
+        <div>Chargement</div> :
         children
       }
     </Fragment>

client/src/components/WorkgroupPage/WorkgroupPage.tsx

@@ -0,0 +1,22 @@
+import React, { useEffect } from 'react';
+import { Page } from '../Page';
+import { WithLoader } from '../WithLoader';
+
+export function WorkgroupPage() {
+  return (
+    <Page title="Groupe de travail">
+      <div className="container is-fluid">
+        <section className="section">
+          <div className="columns">
+            <div className="column is-6 is-offset-3">
+              <h2 className="is-size-2 subtitle">Groupe de travail</h2>
+              <WithLoader loading={false}>
+              
+              </WithLoader>
+            </div>
+          </div>
+        </section>
+      </div>
+    </Page>
+  );
+}

client/src/gql/client.tsx

@@ -4,12 +4,11 @@ import { WebSocketLink } from "@apollo/client/link/ws";
 import { RetryLink } from "@apollo/client/link/retry";
 import { SubscriptionClient } from "subscriptions-transport-ws";
 
-
 const subscriptionClient = new SubscriptionClient(Config.subscriptionEndpoint, {
-  reconnect: true
+  reconnect: true,
 });
 
-const link = new RetryLink().split(
+const link = new RetryLink({attempts: {max: 2}}).split(
   (operation) => operation.operationName === 'subscription',
   new WebSocketLink(subscriptionClient),
   new HttpLink({ uri: Config.graphQLEndpoint, credentials: 'include' })

client/src/gql/queries/profile.tsx

@@ -12,5 +12,5 @@ query userProfile {
 }`;
 
 export function useUserProfileQuery() {
-  return useQuery(QUERY_USER_PROFILE, { fetchPolicy: "network-only" });
+  return useQuery(QUERY_USER_PROFILE);
 }