Implement organization switcher and use slug in URL (#59)

* Implement dropdown for organizations switcher

* Add dynamic route for organization id

* Update routes for organization slug

* Use organization slug for adding project

* Refactor to fetch organizations at sidebar component

* Update organization switcher based on searched project

* Refactor types in frontend

---------

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

packages/gql-client/src/client.ts

@@ -50,11 +50,11 @@ export class GQLClient {
     return data;
   }
 
-  async getProjectsInOrganization (organizationId: string) : Promise<GetProjectsInOrganizationResponse> {
+  async getProjectsInOrganization (organizationSlug: string) : Promise<GetProjectsInOrganizationResponse> {
     const { data } = await this.client.query({
       query: getProjectsInOrganization,
       variables: {
-        organizationId
+        organizationSlug
       }
     });
 
@@ -194,10 +194,11 @@ export class GQLClient {
     return data;
   }
 
-  async addProject (data: AddProjectInput): Promise<AddProjectResponse> {
+  async addProject (organizationSlug: string, data: AddProjectInput): Promise<AddProjectResponse> {
     const result = await this.client.mutate({
       mutation: addProject,
       variables: {
+        organizationSlug,
         data
       }
     });

packages/gql-client/src/mutations.ts

@@ -43,8 +43,8 @@ mutation ($deploymentId: String!) {
 `;
 
 export const addProject = gql`
-mutation ($data: AddProjectInput) {
-  addProject(data: $data) {
+mutation ($organizationSlug: String!, $data: AddProjectInput) {
+  addProject(organizationSlug: $organizationSlug, data: $data) {
     id
   }
 }`;

packages/gql-client/src/queries.ts

@@ -65,8 +65,8 @@ query ($projectId: String!) {
 `;
 
 export const getProjectsInOrganization = gql`
-query ($organizationId: String!) {
-  projectsInOrganization(organizationId: $organizationId) {
+query ($organizationSlug: String!) {
+  projectsInOrganization(organizationSlug: $organizationSlug) {
     id
     name
     createdAt
@@ -106,6 +106,7 @@ query {
   organizations {
     id
     name
+    slug
     createdAt
     updatedAt
   }
@@ -191,6 +192,7 @@ query ($searchText: String!) {
     organization {
       id
       name
+      slug
       createdAt
       updatedAt
     }

packages/gql-client/src/types.ts

@@ -109,6 +109,7 @@ export type OrganizationProject = {
 export type Organization = {
   id: string
   name: string
+  slug: string
   projects: OrganizationProject[]
   createdAt: string
   updatedAt: string
@@ -240,7 +241,6 @@ export type DeleteDomainResponse = {
 }
 
 export type AddProjectInput = {
-  organizationId: string;
   name: string;
   repository: string;
   prodBranch: string;