GroupMembers.tsx

import {
  Box,
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  IconButton,
  Tooltip,
  Typography,
} from '@material-ui/core';
import { Group, Member } from '../../../types/graphqlSchema';
import { IListGroupMembers, listGroupMembers } from '../../../graphql/queries/group/listGroupMembers';

import { CardTable } from '../../utils/CardTable';
import CreateIcon from '@material-ui/icons/Create';
import PeopleIcon from '@material-ui/icons/People';
import React from 'react';
import { getMemberStateString } from '../../../utils/getMemberStateString';
import { useQuery } from '@apollo/client';

interface IGroupMembersTable extends Partial<Member> {
  name: string;
  membership: string;
  userId: number;
}

const convertResponseToTable = (rows: Partial<Member>[] | undefined): Partial<IGroupMembersTable>[] => {
  if (!rows) return [];
  return rows.map((o) => ({
    ...o,
    name: `${o.user?.familyName} ${o.user?.givenName}`,
    membership: getMemberStateString({ memberState: o.memberState, groupRole: o.groupRole }),
    userId: Number(o.user?.id),
  }));
};

interface TParams {
  group: Partial<Group> | undefined;
  filterBy: string | null;
}

export const GroupMembers: React.FC<TParams> = ({ group, filterBy }) => {
  const [openDialog, setopenDialog] = React.useState(false);
  const [editedUser, setEditedUser] = React.useState<Partial<Member>>();

  const { loading: membersIsLoading, data: members } = useQuery<IListGroupMembers>(
    listGroupMembers(`user { familyName, givenName, id }, memberState, groupRole`),
    {
      variables: { groupId: Number(group?.id) },
    },
  );

  const handleDialogOpen = (member: Partial<Member>) => {
    console.log(member);
    setEditedUser(member);
    setopenDialog(true);
  };

  const handleDialogClose = () => {
    setopenDialog(false);
  };

  return (
    <div>
      <CardTable<Partial<IGroupMembersTable>>
        columns={[
          {
            title: 'Név',
            field: 'name',
          },
          {
            title: 'Tagság',
            field: 'membership',
            align: 'right',
            customSort: (rowData1, rowData2) => {
              if (!rowData1.membership || !rowData2.membership) {
                return 0;
              }
              const str1 = rowData1.membership;
              const str2 = rowData2.membership;
              if (str1 < str2) return -1;
              if (str1 > str2) return 1;
              return 0;
            },
          },
          {
            align: 'left',
            render: function renderEditIcon(rowData) {
              return (
                <Tooltip title="Szerkesztés" aria-label="group-administration">
                  <IconButton onClick={() => handleDialogOpen(rowData)} color="secondary" style={{ padding: '8px' }}>
                    <CreateIcon />
                  </IconButton>
                </Tooltip>
              );
            },
            width: '8px',
          },
        ]}
        data={convertResponseToTable(members?.group.members)}
        isLoading={membersIsLoading}
        title={
          <Box display="flex" alignItems="center">
            <PeopleIcon />
            <Typography variant="h5" style={{ marginLeft: '0.8rem' }}>
              Tagok
            </Typography>
          </Box>
        }
        options={{
          search: true,
          rowStyle: { fontFamily: 'Roboto' },
          emptyRowsWhenPaging: false,
          searchText: filterBy || '',
        }}
      />
      <Dialog
        open={openDialog}
        onClose={handleDialogClose}
        aria-labelledby="edit-user"
        aria-describedby="modal-to-edit-user"
      >
        <DialogTitle id="edit-user-dialog-title">Felhasználó szerkesztése</DialogTitle>
        <DialogContent>
          <Typography>
            Neve: {editedUser?.user?.familyName} {editedUser?.user?.givenName}
          </Typography>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleDialogClose} color="primary">
            Mentés
          </Button>
          <Button onClick={handleDialogClose} color="primary">
            Mégse
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
};