Proyectos de Subversion LeadersLinked - SPA

import React from 'react';

import React from 'react';

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

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

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

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

import { MyGroupsCard } from '@groups/components';

import { MyGroupsCard } from '@groups/components';

export default function MyGroupsPage() {

export default function MyGroupsPage() {

  const { groups, loading, addGroup, editGroup, deleteGroup, viewGroup, searchGroups } =

  const { groups, loading, addGroup, editGroup, deleteGroup, viewGroup, searchGroups } =

    useMyGroups();

    useMyGroups();

  return (

  return (

    <>

    <>

      <PageHeader title='Mis grupos' labelAdd='Crear grupo' onAdd={addGroup} />

      <PageHeader title='Mis grupos' labelAdd='Crear grupo' onAdd={addGroup} />

      <SearchBar placeholder='Buscar grupo' color='secondary' onChange={searchGroups} />

      <SearchBar placeholder='Buscar grupo' color='secondary' onChange={searchGroups} />

      {loading ? (

      {loading ? (

        <Spinner />

        <Spinner />

      ) : (

      ) : (

        <Grid

        <Grid

          items={groups}

          items={groups}

          emptyMessage='No hay grupos'

          emptyMessage='No hay grupos'

          keyExtractor={(group) => group.link_view}

          keyExtractor={(group) => group.link_view}

          renderItem={(group) => (

          renderItem={(group) => (

            <MyGroupsCard

            <MyGroupsCard

              group={group}

              group={group}

              onView={() => viewGroup(group.link_view)}

              onView={() => viewGroup(group.link_view)}

              onEdit={() => editGroup(group.link_edit)}

              onEdit={() => editGroup(group.link_edit)}

              onDelete={() => deleteGroup(group.link_delete)}

              onDelete={() => deleteGroup(group.link_delete)}

            />

            />

          )}

          )}

        />

        />

      )}

      )}

    </>

    </>

  );

  );

}

}