org components use org name

Author: DaveDarsa

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 renamed to 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.js

@@ -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/Groups.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/Organization.js

@@ -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/Organization.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/Project.js renamed to src/components/Breadcrumbs/Organizations/Project.tsx

@@ -2,16 +2,23 @@ import React from 'react';
 
 import Breadcrumb from 'components/Breadcrumbs/Breadcrumb';
 
-const getLinkData = (userSlug, organizationSlug, organizationName) => ({
+const getLinkData = (userSlug: string, organizationSlug: string, organizationId: number) => ({
   urlObject: {
     pathname: '/organizations/user',
-    query: { userSlug, organizationSlug, organizationName },
+    query: { userSlug, organizationSlug, organizationId },
   },
-  asPath: `/organizations/${organizationName}/users/${userSlug}`,
+  asPath: `/organizations/${organizationSlug}/users/${userSlug}`,
 });
 
-const UserBreadcrumb = ({ userSlug, organizationSlug, organizationName, loading }) => {
-  const linkData = getLinkData(userSlug, organizationSlug, organizationName);
+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} />;
 };