diff --git a/client/src/components/HomePage/WorkgroupsPanel.tsx b/client/src/components/HomePage/WorkgroupsPanel.tsx
index 5e6f48a..6648bc0 100644
--- a/client/src/components/HomePage/WorkgroupsPanel.tsx
+++ b/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
(state => state.workgroups.workgroupsById);
- const currentUserId = useSelector(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 ;
+ }
+
+ 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 (
@@ -47,7 +52,7 @@ export function WorkgroupsPanel() {
{wg.name}
);
- })
+ });
return (