From bc9aa1721aae10c25c393efecac665175bdee7cf Mon Sep 17 00:00:00 2001
From: William Petit <wpetit@cadoles.com>
Date: Wed, 22 Jul 2020 09:18:50 +0200
Subject: [PATCH] Remplacement du Loader par WithLoader

---
 client/src/components/App.tsx                 |  2 +
 client/src/components/HomePage/HomePage.tsx   | 10 +---
 .../components/HomePage/WorkgroupsPanel.tsx   | 58 +++++++++----------
 client/src/components/Loader.tsx              | 14 -----
 .../components/ProfilePage/ProfilePage.tsx    |  9 +--
 client/src/components/WithLoader.tsx          |  7 +--
 .../WorkgroupPage/WorkgroupPage.tsx           | 22 +++++++
 client/src/gql/client.tsx                     |  5 +-
 client/src/gql/queries/profile.tsx            |  2 +-
 9 files changed, 62 insertions(+), 67 deletions(-)
 delete mode 100644 client/src/components/Loader.tsx
 create mode 100644 client/src/components/WorkgroupPage/WorkgroupPage.tsx

diff --git a/client/src/components/App.tsx b/client/src/components/App.tsx
index af9e243..89e3dca 100644
--- a/client/src/components/App.tsx
+++ b/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>
diff --git a/client/src/components/HomePage/HomePage.tsx b/client/src/components/HomePage/HomePage.tsx
index bd01c65..a09d5f7 100644
--- a/client/src/components/HomePage/HomePage.tsx
+++ b/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>
diff --git a/client/src/components/HomePage/WorkgroupsPanel.tsx b/client/src/components/HomePage/WorkgroupsPanel.tsx
index 6648bc0..d98ef75 100644
--- a/client/src/components/HomePage/WorkgroupsPanel.tsx
+++ b/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>
   )
 }
\ No newline at end of file
diff --git a/client/src/components/Loader.tsx b/client/src/components/Loader.tsx
deleted file mode 100644
index 5632248..0000000
--- a/client/src/components/Loader.tsx
+++ /dev/null
@@ -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>
-    )
-  }
-}
\ No newline at end of file
diff --git a/client/src/components/ProfilePage/ProfilePage.tsx b/client/src/components/ProfilePage/ProfilePage.tsx
index 536711e..4e53325 100644
--- a/client/src/components/ProfilePage/ProfilePage.tsx
+++ b/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>
diff --git a/client/src/components/WithLoader.tsx b/client/src/components/WithLoader.tsx
index 33f5441..1a5abf3 100644
--- a/client/src/components/WithLoader.tsx
+++ b/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>
diff --git a/client/src/components/WorkgroupPage/WorkgroupPage.tsx b/client/src/components/WorkgroupPage/WorkgroupPage.tsx
new file mode 100644
index 0000000..14a0011
--- /dev/null
+++ b/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>
+  );
+}
\ No newline at end of file
diff --git a/client/src/gql/client.tsx b/client/src/gql/client.tsx
index bbe3c37..3aff245 100644
--- a/client/src/gql/client.tsx
+++ b/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' })
diff --git a/client/src/gql/queries/profile.tsx b/client/src/gql/queries/profile.tsx
index 128c394..573fc04 100644
--- a/client/src/gql/queries/profile.tsx
+++ b/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);
 }
\ No newline at end of file