using org names in urls

src/components/Breadcrumbs/Breadcrumb.tsx

@@ -11,7 +11,7 @@ interface BreadcrumbProps {
   urlObject: {
     pathname: string;
     query: {
-      [key: string]: string;
+      [key: string]: string | number;
     };
   };
   asPath: string;

src/components/Breadcrumbs/Organizations/Group.js → src/components/Breadcrumbs/Organizations/Group.tsx

@@ -1,18 +1,19 @@
 import React from 'react';
-import { getLinkData } from 'components/link/Organizations/Group';
+
 import Breadcrumb from 'components/Breadcrumbs/Breadcrumb';
+import { getLinkData } from 'components/link/Organizations/Group';
+
+interface Props {
+  groupSlug: string;
+  organizationSlug: string;
+  organizationId: number;
+  loading: boolean;
+}
 
-const GroupBreadcrumb = ({ groupSlug, organizationSlug, organizationName, loading }) => {
-  const linkData = getLinkData(groupSlug, organizationSlug, organizationName);
+const GroupBreadcrumb = ({ groupSlug, organizationSlug, organizationId, loading }: Props) => {
+  const linkData = getLinkData(groupSlug, organizationSlug, organizationId);
 
-  return (
-    <Breadcrumb
-      header="Group"
-      title={groupSlug}
-      loading={loading}
-      {... linkData}
-    />
-  );
+  return <Breadcrumb header="Group" title={groupSlug} loading={loading} {...linkData} />;
 };
 
 export default GroupBreadcrumb;

src/components/Breadcrumbs/Organizations/Groups.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import Breadcrumb from 'components/Breadcrumbs/Breadcrumb';
+import { getLinkData } from 'components/link/Organizations/Groups';
+
+interface Props {
+  organizationSlug: string;
+  organizationId: number;
+}
+
+const GroupsBreadcrumb = ({ organizationSlug, organizationId }: Props) => {
+  const linkData = getLinkData(organizationSlug, organizationId);
+
+  return <Breadcrumb header="Groups" title="Groups" {...linkData} />;
+};
+
+export default GroupsBreadcrumb;

src/components/Breadcrumbs/Organizations/Organization.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import Breadcrumb from 'components/Breadcrumbs/Breadcrumb';
+import { getLinkData } from 'components/link/Organizations/Organization';
+
+interface Props {
+  organizationSlug: string;
+  organizationId: number;
+  loading: boolean;
+}
+
+const OrganizationBreadcrumb = ({ organizationSlug, organizationId, loading }: Props) => {
+  const linkData = getLinkData(organizationSlug, organizationId);
+  return <Breadcrumb header="Organization" title={organizationSlug} loading={loading} {...linkData} />;
+};
+
+export default OrganizationBreadcrumb;

src/components/Breadcrumbs/Organizations/Project.js → src/components/Breadcrumbs/Organizations/Project.tsx

@@ -1,17 +1,18 @@
 import React from 'react';
-import { getLinkData } from 'components/link/Organizations/ProjectGroup';
+
 import Breadcrumb from 'components/Breadcrumbs/Breadcrumb';
+import { getLinkData } from 'components/link/Organizations/ProjectGroup';
+
+interface Props {
+  projectSlug: string;
+  organizationSlug: string;
+  organizationId: number;
+}
 
-const OrgProjectBreadcrumb = ({ projectSlug, organizationSlug, organizationName }) => {
-  const linkData = getLinkData(projectSlug, organizationSlug, organizationName);
+const OrgProjectBreadcrumb = ({ projectSlug, organizationSlug, organizationId }: Props) => {
+  const linkData = getLinkData(projectSlug, organizationSlug, organizationId);
 
-  return (
-    <Breadcrumb
-      header="Project"
-      title={projectSlug}
-      {... linkData}
-    />
-  );
+  return <Breadcrumb header="Project" title={projectSlug} {...linkData} />;
 };
 
 export default OrgProjectBreadcrumb;

src/components/Breadcrumbs/Organizations/Projects.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import Breadcrumb from 'components/Breadcrumbs/Breadcrumb';
+import { getLinkData } from 'components/link/Organizations/Projects';
+
+interface Props {
+  organizationSlug: string;
+  organizationId: number;
+}
+
+const ProjectsBreadcrumb = ({ organizationSlug, organizationId }: Props) => {
+  const linkData = getLinkData(organizationSlug, organizationId);
+
+  return <Breadcrumb header="Projects" title="Projects" {...linkData} />;
+};
+
+export default ProjectsBreadcrumb;

src/components/Breadcrumbs/Organizations/User.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import Breadcrumb from 'components/Breadcrumbs/Breadcrumb';
+
+const getLinkData = (userSlug: string, organizationSlug: string, organizationId: number) => ({
+  urlObject: {
+    pathname: '/organizations/user',
+    query: { userSlug, organizationSlug, organizationId },
+  },
+  asPath: `/organizations/${organizationSlug}/users/${userSlug}`,
+});
+
+interface Props {
+  userSlug: string;
+  organizationSlug: string;
+  organizationId: number;
+  loading: boolean;
+}
+
+const UserBreadcrumb = ({ userSlug, organizationSlug, organizationId, loading }: Props) => {
+  const linkData = getLinkData(userSlug, organizationSlug, organizationId);
+
+  return <Breadcrumb header="User" title={userSlug} loading={loading} {...linkData} />;
+};
+
+export default UserBreadcrumb;

src/components/Organizations/GroupMembers/index.js

@@ -31,10 +31,10 @@ import {
 } from '../SharedStyles';
 import { StyledGroupMembers } from './Styles';
 
-export const getLinkData = (userSlug, organizationSlug, organizationName) => ({
+export const getLinkData = (userSlug, organizationSlug, organizationId) => ({
   urlObject: {
     pathname: '/organizations/user',
-    query: { userSlug, organizationSlug: organizationSlug, organizationName: organizationName },
+    query: { userSlug, organizationSlug, organizationId },
   },
   asPath: `/organizations/${organizationSlug}/users/${userSlug}`,
 });
@@ -138,7 +138,7 @@ const GroupMembers = ({
       width: '30%',
       key: 'email',
       render: ({ user }) => {
-        const linkData = getLinkData(user.email, organizationId, organizationName);
+        const linkData = getLinkData(user.email, organizationName, organizationId);
         return (
           <div className="email">
             <Link href={linkData.urlObject} as={linkData.asPath}>
@@ -160,7 +160,7 @@ const GroupMembers = ({
       width: '15%',
       key: 'actions',
       render: ({ user, role }) => {
-        const linkData = getLinkData(user.email, organizationId, organizationName);
+        const linkData = getLinkData(user.email, organizationName, organizationId);
         return (
           <TableActions>
             <Tooltip overlayClassName="orgTooltip" placement="bottom" title="Edit role">
@@ -233,8 +233,8 @@ const GroupMembers = ({
           <ProjectGroupLink
             className="link"
             projectGroupSlug={project.name}
-            organizationSlug={organizationId}
-            organizationName={organizationName}
+            organizationSlug={organizationName}
+            organizationId={organizationId}
             key={id}
           >
             {name}
@@ -260,8 +260,8 @@ const GroupMembers = ({
                 <ProjectGroupLink
                   className="link"
                   projectGroupSlug={project.name}
-                  organizationSlug={organizationId}
-                  organizationName={organizationName}
+                  organizationSlug={organizationName}
+                  organizationId={organizationId}
                   key={project.id}
                 >
                   <EyeOutlined className="view" />

src/components/Organizations/Groups/index.js

@@ -65,8 +65,8 @@ const Groups = ({ groups = [], organizationId, organizationName, ableToAddGroup,
         return (
           <OrgGroupsLink
             groupSlug={i.name}
-            organizationSlug={organizationId}
-            organizationName={organizationName}
+            organizationSlug={organizationName}
+            organizationId={organizationId}
             key={i.id}
           >
             <span>
@@ -121,8 +121,8 @@ const Groups = ({ groups = [], organizationId, organizationName, ableToAddGroup,
                 <OrgGroupsLink
                   className="link"
                   groupSlug={i.name}
-                  organizationSlug={organizationId}
-                  organizationName={organizationName}
+                  organizationSlug={organizationName}
+                  organizationId={organizationId}
                   key={i.id}
                 >
                   <EditOutlined className="edit" />