daddy/client/src/components/HomePage/WorkgroupsPanel.tsx

import React, { useEffect, useState } from 'react';
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 { WithLoader } from '../WithLoader';

export function WorkgroupsPanel() {
  const workgroupsQuery = useWorkgroupsQuery();
  const userProfileQuery =  useUserProfileQuery();
  const [ state, setState ] = useState({ selectedTab: 0 });

  const isLoading = userProfileQuery.loading || workgroupsQuery.loading;
  const { userProfile } = (userProfileQuery.data || {});
  const { workgroups } = (workgroupsQuery.data || {});

  const filterTabs = [
    {
      label: "Mes groupes en cours",
      filter: workgroups => workgroups.filter((wg: Workgroup) => {
        return  wg.closedAt === null && wg.members.some((u: User) => u.id === (userProfile ? userProfile.id : ''));
      })
    },
    {
      label: "Ouverts",
      filter: workgroups => workgroups.filter((wg: Workgroup) => !wg.closedAt)
    },
    {
      label: "Clos",
      filter: workgroups => workgroups.filter((wg: Workgroup) => !!wg.closedAt)
    }
  ];

  const selectTab = (tabIndex: number) => {
    setState(state => ({ ...state, selectedTab: tabIndex }));
  };
  
  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">
          <i className="fas fa-users" aria-hidden="true"></i>
        </span>
        {wg.name}
      </Link>
    );
  });

  return (
    <nav className="panel is-info">
      <div className="level panel-heading mb-0">
        <div className="level-left">
          <p className="level-item">
          Groupes de travail
          </p>
        </div>
        <div className="level-right">
          <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">
        <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> */}
      <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>
        {
          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>
  )
}