Interface de gestion des groupes de travail

- Récupération et affichage des groupes existants
- Création d'un nouveau groupe
- Modification d'un groupe existant
- Rejoindre/quitter un groupe de travail

client/src/components/HomePage/Dashboard.tsx

@@ -1,25 +1,20 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { fetchWorkgroups } from '../../store/actions/workgroups';
+import { RootState } from '../../store/reducers/root';
+import { WorkgroupsPanel } from './WorkgroupsPanel';
 
 export function Dashboard() {
   return (
     <div className="columns">
       <div className="column">
-        <div className="box">
-          <div className="level">
-            <div className="level-left">
-              <h3 className="is-size-3 subtitle level-item">Groupes de travail</h3>
-            </div>
-            <div className="level-right">
-              <button className="button is-primary level-item"><i className="fa fa-plus"></i></button>
-            </div>
-          </div>
-        </div>
+        <WorkgroupsPanel />
       </div>
       <div className="column">
         <div className="box">
           <div className="level">
             <div className="level-left">
-              <h3 className="is-size-3 subtitle level-item">D.à.Ds</h3>
+              <h3 className="is-size-3 subtitle level-item">D.A.Ds</h3>
             </div>
             <div className="level-right">
               <button disabled className="button is-primary level-item"><i className="fa fa-plus"></i></button>

client/src/components/HomePage/WorkgroupsPanel.tsx

@@ -0,0 +1,96 @@
+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';
+
+export function WorkgroupsPanel() {
+  const dispatch = useDispatch();
+  const workgroups = useSelector<RootState>(state => state.workgroups.workgroupsById);
+  const currentUserId = useSelector<RootState>(state => state.auth.currentUser.id);
+
+  const filterTabs = [
+    {
+      label: "Mes groupes",
+      filter: workgroups => Object.values(workgroups).filter((wg: Workgroup) => {
+        return  wg.members.some((u: User) => u.id === currentUserId);
+      })
+    },
+    {
+      label: "Ouverts",
+      filter: workgroups => Object.values(workgroups).filter((wg: Workgroup) => !wg.closedAt)
+    },
+    {
+      label: "Clôs",
+      filter: workgroups => Object.values(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) => {
+    return (
+      <Link to={`/workgroups/${wg.id}`} key={`wg-${wg.id}`} className="panel-block">
+        <span className="panel-icon">
+          <i className="fas fa-users" aria-hidden="true"></i>
+        </span>
+        {wg.name}
+      </Link>
+    );
+  })
+
+  return (
+    <nav className="panel is-info">
+      <div className="level panel-heading">
+        <div className="level-left">
+          <p className="level-item">
+          Groupes de travail
+          </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>
+        </div>
+      </div>
+      {/* <div className="panel-block">
+        <p className="control has-icons-left">
+          <input className="input" type="text" placeholder="Filtrer..." />
+          <span className="icon is-left">
+            <i className="fas fa-search" aria-hidden="true"></i>
+          </span>
+        </p>
+      </div> */}
+      <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>
+      {
+        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>
+      }
+    </nav>
+  )
+}