Remplacement de Redux/Saga par Apollo

client/src/components/HomePage/Dashboard.tsx

@@ -1,7 +1,4 @@
-import React, { useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { fetchWorkgroups } from '../../store/actions/workgroups';
-import { RootState } from '../../store/reducers/root';
+import React from 'react';
 import { WorkgroupsPanel } from './WorkgroupsPanel';
 
 export function Dashboard() {

client/src/components/HomePage/HomePage.tsx

@@ -1,18 +1,26 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { Page } from '../Page';
-import { useSelector } from 'react-redux';
-import { RootState } from '../../store/reducers/root';
 import { Dashboard } from './Dashboard';
+import { useUserProfileQuery } from '../../gql/queries/profile';
+import { Loader } from '../Loader';
 
 export function HomePage() {
-  const currentUser = useSelector((state: RootState) => state.auth.currentUser);
+  const { data, loading } = useUserProfileQuery();
+
+  if (loading) {
+    return (
+      <Loader />
+    );
+  }
+
+  const { userProfile } = (data || {});
 
   return (
-    <Page title={currentUser ? 'Tableau de bord' : 'Accueil'}>
+    <Page title={userProfile ? 'Tableau de bord' : 'Accueil'}>
       <div className="container is-fluid">
         <section className="section">
           {
-            currentUser ?
+            userProfile ?
             <Dashboard /> :
             <div className="columns">
               <div className="column is-4 is-offset-4">

client/src/components/HomePage/WorkgroupsPanel.tsx

@@ -1,44 +1,49 @@
 import React, { useEffect, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { RootState } from '../../store/reducers/root';
-import { fetchWorkgroups } from '../../store/actions/workgroups';
 import { Workgroup } from '../../types/workgroup';
 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';
 
 export function WorkgroupsPanel() {
-  const dispatch = useDispatch();
-  const workgroups = useSelector<RootState>(state => state.workgroups.workgroupsById);
-  const currentUserId = useSelector<RootState>(state => state.auth.currentUser.id);
+  const workgroupsQuery = useWorkgroupsQuery();
+  const userProfileQuery =  useUserProfileQuery();
+  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 filterTabs = [
     {
       label: "Mes groupes",
-      filter: workgroups => Object.values(workgroups).filter((wg: Workgroup) => {
-        return  wg.members.some((u: User) => u.id === currentUserId);
+      filter: workgroups => workgroups.filter((wg: Workgroup) => {
+        return  wg.members.some((u: User) => u.id === userProfile.id);
       })
     },
     {
       label: "Ouverts",
-      filter: workgroups => Object.values(workgroups).filter((wg: Workgroup) => !wg.closedAt)
+      filter: workgroups => workgroups.filter((wg: Workgroup) => !wg.closedAt)
     },
     {
       label: "Clôs",
-      filter: workgroups => Object.values(workgroups).filter((wg: Workgroup) => !!wg.closedAt)
+      filter: workgroups => workgroups.filter((wg: Workgroup) => !!wg.closedAt)
     }
   ];
 
-  const [ state, setState ] = useState({ selectedTab: 0 });
-
   const selectTab = (tabIndex: number) => {
     setState(state => ({ ...state, selectedTab: tabIndex }));
   }
+  
 
-  useEffect(() => {
-    dispatch(fetchWorkgroups());
-  }, []);
-
-  const workgroupsItems = filterTabs[state.selectedTab].filter(workgroups).map((wg: Workgroup) => {
+  let workgroupsItems = [];
+  
+  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">
@@ -47,7 +52,7 @@ export function WorkgroupsPanel() {
         {wg.name}
       </Link>
     );
-  })
+  });
 
   return (
     <nav className="panel is-info">