GroupsTable.tsx

import { Box, Typography } from '@material-ui/core';
import { IListGroups, listGroups } from '../../graphql/queries/group/listGroups';

import { CardTable } from '../utils/CardTable';
import { Group } from '../../types/graphqlSchema';
import GroupIcon from '@material-ui/icons/Group';
import React from 'react';
import { StyledLink } from '../utils/StyledLink';
import { convertResponseToTable } from '../utils/convertResponseToTable';
import { getMemberStateString } from '../utils/getMemberStateString';
import { useQuery } from '@apollo/client';

export const GroupsTable: React.FC = () => {
  const { loading: groupsIsLoading, data: groups } = useQuery<IListGroups>(listGroups());

  return (
    <CardTable<Partial<Group>>
      columns={[
        { title: 'ID', field: 'id', type: 'numeric', hidden: true },
        {
          title: 'Név',
          field: 'name',
          render: function renderName(rowData) {
            return <StyledLink to={`/group/${rowData.id}/info`}>{rowData.name}</StyledLink>;
          },
        },
        {
          title: 'Tagság',
          field: 'ownMemberShip',
          align: 'right',
          render: function renderMembership(rowData) {
            if (!rowData.ownMemberShip) {
              return '';
            }
            return getMemberStateString(rowData.ownMemberShip);
          },
          customSort: (rowData1, rowData2) => {
            if (!rowData1.ownMemberShip || !rowData2.ownMemberShip) {
              return 0;
            }
            const str1 = getMemberStateString(rowData1.ownMemberShip);
            const str2 = getMemberStateString(rowData2.ownMemberShip);
            if (str1 < str2) return -1;
            if (str1 > str2) return 1;
            return 0;
          },
        },
      ]}
      data={convertResponseToTable(groups?.groups)}
      isLoading={groupsIsLoading}
      title={
        <Box display="flex" alignItems="center">
          <GroupIcon />
          <Typography variant="h5" style={{ marginLeft: '0.8rem' }}>
            Csoportok
          </Typography>
        </Box>
      }
      options={{
        search: true,
        rowStyle: { fontFamily: 'Roboto' },
        emptyRowsWhenPaging: false,
      }}
    />
  );
};