Proyectos de Subversion LeadersLinked - SPA

import React from 'react';

import { useMyGroups } from '@groups/hooks';

import { Grid, PageHeader, SearchBar, Spinner } from '@shared/components';
import { MyGroupsCard } from '@groups/components';

export default function MyGroupsPage() {
  const { groups, loading, addGroup, editGroup, deleteGroup, viewGroup, searchGroups } =
    useMyGroups();

  return (
    <>
      <PageHeader title='Mis grupos' labelAdd='Crear grupo' onAdd={addGroup} />
      <SearchBar placeholder='Buscar grupo' color='secondary' onChange={searchGroups} />
      {loading ? (
        <Spinner />
      ) : (
        <Grid
          items={groups}
          emptyMessage='No hay grupos'
          keyExtractor={(group) => group.link_view}
          renderItem={(group) => (
            <MyGroupsCard
              group={group}
              onView={() => viewGroup(group.link_view)}
              onEdit={() => editGroup(group.link_edit)}
              onDelete={() => deleteGroup(group.link_delete)}
            />
          )}
        />
      )}
    </>
  );
}