Handle remove member operation in frontend (#32)

* Add remove member gql client method

* Handle remove member UI operation

* Refactor fetching of project members

* Rename type MemberPermission to ProjectMember

* Add types to gql client response

* Remove circular dependency in gql client types

---------

Co-authored-by: neeraj <neeraj.rtly@gmail.com>

packages/gql-client/src/client.ts

@@ -1,22 +1,37 @@
-import { ApolloClient, InMemoryCache, NormalizedCacheObject } from '@apollo/client';
+import { ApolloClient, DefaultOptions, InMemoryCache, NormalizedCacheObject } from '@apollo/client';
 
-import { getUser, getOrganizations, getDeployments } from './queries';
+import { getUser, getOrganizations, getDeployments, getProjectMembers } from './queries';
+import { GetDeploymentsResponse, GetOrganizationsResponse, GetProjectMembersResponse, GetUserResponse, RemoveMemberResponse } from './types';
+import { removeMember } from './mutations';
 
 export interface GraphQLConfig {
   gqlEndpoint: string;
 }
 
+// TODO: check options
+const defaultOptions: DefaultOptions = {
+  watchQuery: {
+    fetchPolicy: 'no-cache',
+    errorPolicy: 'ignore'
+  },
+  query: {
+    fetchPolicy: 'no-cache',
+    errorPolicy: 'all'
+  }
+};
+
 export class GQLClient {
   private client: ApolloClient<NormalizedCacheObject>;
 
   constructor (config: GraphQLConfig) {
     this.client = new ApolloClient({
       uri: config.gqlEndpoint,
-      cache: new InMemoryCache()
+      cache: new InMemoryCache(),
+      defaultOptions
     });
   }
 
-  async getUser () : Promise<any> {
+  async getUser () : Promise<GetUserResponse> {
     const { data } = await this.client.query({
       query: getUser
     });
@@ -24,7 +39,7 @@ export class GQLClient {
     return data;
   }
 
-  async getOrganizations () : Promise<any> {
+  async getOrganizations () : Promise<GetOrganizationsResponse> {
     const { data } = await this.client.query({
       query: getOrganizations
     });
@@ -32,7 +47,7 @@ export class GQLClient {
     return data;
   }
 
-  async getDeployments (projectId: string) : Promise<any> {
+  async getDeployments (projectId: string) : Promise<GetDeploymentsResponse> {
     const { data } = await this.client.query({
       query: getDeployments,
       variables: {
@@ -42,4 +57,26 @@ export class GQLClient {
 
     return data;
   }
+
+  async removeMember (memberId: string): Promise<RemoveMemberResponse> {
+    const { data } = await this.client.mutate({
+      mutation: removeMember,
+      variables: {
+        memberId
+      }
+    });
+
+    return data;
+  }
+
+  async getProjectMembers (projectId: string) : Promise<GetProjectMembersResponse> {
+    const { data } = await this.client.query({
+      query: getProjectMembers,
+      variables: {
+        projectId
+      }
+    });
+
+    return data;
+  }
 }

packages/gql-client/src/mutations.ts

@@ -0,0 +1,7 @@
+import { gql } from '@apollo/client';
+
+export const removeMember = gql`
+mutation ($memberId: String!) {
+  removeMember(memberId: $memberId)
+}
+`;

packages/gql-client/src/queries.ts

@@ -81,3 +81,19 @@ query ($projectId: String!)  {
   }
 }
 `;
+
+export const getProjectMembers = gql`
+query ($projectId: String!) {
+  projectMembers(projectId: $projectId) {
+    id
+    member {
+      id
+      name
+      email
+    }
+    createdAt
+    updatedAt
+    permissions
+  }
+}
+`;

packages/gql-client/src/types.ts

@@ -0,0 +1,131 @@
+// Note: equivalent to types present in GQL schema
+
+export enum Role {
+  Owner = 'Owner',
+  Maintainer = 'Maintainer',
+  Reader = 'Reader',
+}
+
+export enum Permission {
+  View = 'View',
+  Edit = 'Edit',
+}
+
+export enum Environment {
+  Production = 'Production',
+  Preview = 'Preview',
+  Development = 'Development',
+}
+
+export enum DeploymentStatus {
+  Building = 'Building',
+  Ready = 'Ready',
+  Error = 'Error',
+}
+
+export enum DomainStatus {
+  Live = 'Live',
+  Pending = 'Pending',
+}
+
+export type EnvironmentVariable = {
+  id: string
+  environments: Environment[]
+  key: string
+  value: string
+  createdAt: string
+  updatedAt: string
+}
+
+export type Domain = {
+  id: string
+  branch: string
+  name: string
+  isRedirected: boolean
+  status: DomainStatus
+  createdAt: string
+  updatedAt: string
+}
+
+export type Deployment = {
+  id: string
+  domain: Domain
+  branch: string
+  commitHash: string
+  title: string
+  environment: Environment
+  isCurrent: boolean
+  status: DeploymentStatus
+  createdAt: string
+  updatedAt: string
+}
+
+export type User = {
+  id: string
+  name: string
+  email: string
+  createdAt: string
+  updatedAt: string
+}
+
+export type OrganizationMember = {
+  id: string
+  member: User
+  role: Role
+  createdAt: string
+  updatedAt: string
+}
+
+export type ProjectMember = {
+  id: string
+  member: User
+  permissions: Permission[]
+  createdAt: string
+  updatedAt: string
+}
+
+export type Project = {
+  id: string
+  owner: User
+  deployments: Deployment[]
+  name: string
+  repository: string
+  prodBranch: string
+  description: string
+  template: string
+  framework: string
+  webhooks: string[]
+  members: ProjectMember[]
+  environmentVariables: EnvironmentVariable[]
+  createdAt: string
+  updatedAt: string
+}
+
+export type Organization = {
+  id: string
+  name: string
+  projects: Project[]
+  createdAt: string
+  updatedAt: string
+  members: OrganizationMember[]
+}
+
+export type GetProjectMembersResponse = {
+  projectMembers: ProjectMember[]
+}
+
+export type RemoveMemberResponse = {
+  removeMember: boolean;
+}
+
+export type GetDeploymentsResponse = {
+  deployments: Deployment[]
+}
+
+export type GetOrganizationsResponse = {
+  organizations: Organization[]
+}
+
+export type GetUserResponse = {
+  user: User
+}