Routes privées avec page d'accueil publique

client/src/components/DashboardPage/WorkgroupsPanel.tsx

@@ -0,0 +1,45 @@
+import React, { useEffect, useState } from 'react';
+import { Workgroup, inWorkgroup } from '../../types/workgroup';
+import { User } from '../../types/user';
+import { Link } from 'react-router-dom';
+import { useWorkgroupsQuery, useWorkgroups } from '../../gql/queries/workgroups';
+import { useUserProfileQuery, useUserProfile } from '../../gql/queries/profile';
+import { WithLoader } from '../WithLoader';
+import { ItemPanel, Item } from './ItemPanel';
+
+export function WorkgroupsPanel() {
+  const { workgroups } = useWorkgroups();
+  const  { user } = useUserProfile();
+
+  const tabs = [
+    {
+      label: "Mes groupes en cours",
+      itemFilter: (item: Item) => {
+        const wg = item as Workgroup;
+        return  wg.closedAt === null && inWorkgroup(user, wg);
+      }
+    },
+    {
+      label: "Ouverts",
+      itemFilter: (item: Item) => !(item as Workgroup).closedAt
+    },
+    {
+      label: "Clos",
+      itemFilter: (item: Item) => !!(item as Workgroup).closedAt
+    }
+  ];
+  
+  return (
+    <ItemPanel
+      className='is-info'
+      title="Groupes de travail"
+      newItemUrl="/workgroups/new"
+      items={workgroups}
+      tabs={tabs}
+      itemIconClassName='fas fa-users'
+      itemKey={item => item.id}
+      itemLabel={item => item.name}
+      itemUrl={item => `/workgroups/${item.id}`}
+    />
+  );
+}