Proyectos de Subversion LeadersLinked - SPA

import React from 'react';

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

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

const JoinedGroupsPage = () => {
  const { groups, loading, leaveGroup, viewGroup, searchGroups } = useJoinedGroups();

  return (
    <>
      <PageHeader title='Grupos a los que pertenezco' />
      <SearchBar placeholder='Buscar grupo' color='secondary' onChange={searchGroups} />
      {loading ? (
        <Spinner />
      ) : (
        <Grid
          items={groups}
          emptyMessage='No hay grupos'
          keyExtractor={(group) => group.link_view}
          renderItem={(group) => (
            <JoinedGroupsCard
              group={group}
              onView={() => viewGroup(group.link_view)}
              onLeave={() => leaveGroup(group.link_leave)}
            />
          )}
        />
      )}
    </>
  );
};

export default JoinedGroupsPage;