Merge pull request #1705 from zetkin/issue-1680/breadcrumbs-on-standa…

…lone-callAssignment Create functions to determine the url of a call assignment or survey.
zetkin · Dec 14, 2023 · 82d2108 · 82d2108
2 parents 319f859 + 5e7e0bd
commit 82d2108
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 32 deletions.
diff --git a/src/features/callAssignments/layout/CallAssignmentLayout.tsx b/src/features/callAssignments/layout/CallAssignmentLayout.tsx
@@ -2,6 +2,7 @@ import { Box, Button, Typography } from '@mui/material';
 import { Headset, People } from '@mui/icons-material';
 
 import CallAssignmentStatusChip from '../components/CallAssignmentStatusChip';
+import getCallAssignmentUrl from '../utils/getCallAssignmentUrl';
 import messageIds from '../l10n/messageIds';
 import TabbedLayout from '../../../utils/layout/TabbedLayout';
 import useCallAssignment from '../hooks/useCallAssignment';
@@ -24,7 +25,7 @@ const CallAssignmentLayout: React.FC<CallAssignmentLayoutProps> = ({
   children,
 }) => {
   const messages = useMessages(messageIds);
-  const { orgId, campId, callAssId } = useNumericRouteParams();
+  const { orgId, callAssId } = useNumericRouteParams();
 
   const {
     data: callAssignment,
@@ -54,7 +55,7 @@ const CallAssignmentLayout: React.FC<CallAssignmentLayoutProps> = ({
           </Button>
         )
       }
-      baseHref={`/organize/${orgId}/projects/${campId}/callassignments/${callAssId}`}
+      baseHref={getCallAssignmentUrl(callAssignment)}
       belowActionButtons={
         <ZUIDateRangePicker
           endDate={callAssignment.end_date || null}

diff --git a/src/features/callAssignments/utils/getCallAssignmentUrl.ts b/src/features/callAssignments/utils/getCallAssignmentUrl.ts
@@ -0,0 +1,13 @@
+import { ZetkinCallAssignment } from 'utils/types/zetkin';
+
+export default function getCallAssignmentUrl(
+  callAssignment: ZetkinCallAssignment | null
+) {
+  if (callAssignment) {
+    return `/organize/${callAssignment.organization.id}/projects/${
+      callAssignment.campaign ? `${callAssignment.campaign.id}` : 'standalone'
+    }/callassignments/${callAssignment.id}`;
+  } else {
+    return '';
+  }
+}
diff --git a/src/features/surveys/layout/SurveyLayout.tsx b/src/features/surveys/layout/SurveyLayout.tsx
@@ -1,4 +1,6 @@
 import { ELEMENT_TYPE } from 'utils/types/zetkin';
+import getSurveyUrl from '../utils/getSurveyUrl';
+import messageIds from '../l10n/messageIds';
 import SurveyStatusChip from '../components/SurveyStatusChip';
 import TabbedLayout from 'utils/layout/TabbedLayout';
 import useSurvey from '../hooks/useSurvey';
@@ -16,24 +18,20 @@ import { ChatBubbleOutline, QuizOutlined } from '@mui/icons-material';
 import { Msg, useMessages } from 'core/i18n';
 import useSurveyState, { SurveyState } from '../hooks/useSurveyState';
 
-import messageIds from '../l10n/messageIds';
-
 interface SurveyLayoutProps {
   children: React.ReactNode;
   orgId: string;
-  campaignId: string;
   surveyId: string;
 }
 
 const SurveyLayout: React.FC<SurveyLayoutProps> = ({
   children,
   orgId,
-  campaignId,
   surveyId,
 }) => {
   const messages = useMessages(messageIds);
   const statsFuture = useSurveyStats(parseInt(orgId), parseInt(surveyId));
-  const dataFuture = useSurvey(parseInt(orgId), parseInt(surveyId));
+  const surveyFuture = useSurvey(parseInt(orgId), parseInt(surveyId));
   const { publish, unpublish, updateSurvey } = useSurveyMutations(
     parseInt(orgId),
     parseInt(surveyId)
@@ -61,14 +59,14 @@ const SurveyLayout: React.FC<SurveyLayoutProps> = ({
           </Button>
         )
       }
-      baseHref={`/organize/${orgId}/projects/${campaignId}/surveys/${surveyId}`}
+      baseHref={getSurveyUrl(surveyFuture.data)}
       belowActionButtons={
         <ZUIDateRangePicker
-          endDate={dataFuture.data?.expires || null}
+          endDate={surveyFuture.data?.expires || null}
           onChange={(startDate, endDate) => {
             updateSurvey({ expires: endDate, published: startDate });
           }}
-          startDate={dataFuture.data?.published || null}
+          startDate={surveyFuture.data?.published || null}
         />
       }
       defaultTab="/"
@@ -137,7 +135,7 @@ const SurveyLayout: React.FC<SurveyLayoutProps> = ({
         },
       ]}
       title={
-        <ZUIFuture future={dataFuture}>
+        <ZUIFuture future={surveyFuture}>
           {(data) => {
             return (
               <ZUIEditTextinPlace

diff --git a/src/features/surveys/utils/getSurveyUrl.ts b/src/features/surveys/utils/getSurveyUrl.ts
@@ -0,0 +1,11 @@
+import { ZetkinSurvey } from 'utils/types/zetkin';
+
+export default function getSurveyUrl(survey: ZetkinSurvey | null) {
+  if (survey) {
+    return `/organize/${survey.organization.id}/projects/${
+      survey.campaign ? `${survey.campaign.id}` : 'standalone'
+    }/surveys/${survey.id}`;
+  } else {
+    return '';
+  }
+}
diff --git a/src/pages/organize/[orgId]/projects/[campId]/surveys/[surveyId]/index.tsx b/src/pages/organize/[orgId]/projects/[campId]/surveys/[surveyId]/index.tsx
@@ -36,7 +36,6 @@ export const getServerSideProps: GetServerSideProps = scaffold(
 
     return {
       props: {
-        campId,
         orgId,
         surveyId,
       },
@@ -115,11 +114,7 @@ const SurveyPage: PageWithLayout<SurveyPageProps> = ({
 
 SurveyPage.getLayout = function getLayout(page, props) {
   return (
-    <SurveyLayout
-      campaignId={props.campId}
-      orgId={props.orgId}
-      surveyId={props.surveyId}
-    >
+    <SurveyLayout orgId={props.orgId} surveyId={props.surveyId}>
       {page}
     </SurveyLayout>
   );

diff --git a/src/pages/organize/[orgId]/projects/[campId]/surveys/[surveyId]/questions.tsx b/src/pages/organize/[orgId]/projects/[campId]/surveys/[surveyId]/questions.tsx
@@ -14,11 +14,10 @@ import ZUIFuture from 'zui/ZUIFuture';
 
 export const getServerSideProps: GetServerSideProps = scaffold(
   async (ctx) => {
-    const { orgId, campId, surveyId } = ctx.params!;
+    const { orgId, surveyId } = ctx.params!;
 
     return {
       props: {
-        campId,
         orgId,
         surveyId,
       },
@@ -31,7 +30,6 @@ export const getServerSideProps: GetServerSideProps = scaffold(
 );
 
 interface QuestionsPageProps {
-  campId: string;
   orgId: string;
   surveyId: string;
 }
@@ -87,11 +85,7 @@ const QuestionsPage: PageWithLayout<QuestionsPageProps> = ({
 
 QuestionsPage.getLayout = function getLayout(page, props) {
   return (
-    <SurveyLayout
-      campaignId={props.campId}
-      orgId={props.orgId}
-      surveyId={props.surveyId}
-    >
+    <SurveyLayout orgId={props.orgId} surveyId={props.surveyId}>
       {page}
     </SurveyLayout>
   );

diff --git a/src/pages/organize/[orgId]/projects/[campId]/surveys/[surveyId]/submissions.tsx b/src/pages/organize/[orgId]/projects/[campId]/surveys/[surveyId]/submissions.tsx
@@ -15,12 +15,11 @@ import ZUIFuture from 'zui/ZUIFuture';
 
 export const getServerSideProps: GetServerSideProps = scaffold(
   async (ctx) => {
-    const { orgId, campId, surveyId } = ctx.params!;
+    const { orgId, surveyId } = ctx.params!;
     const filter = ctx.query.filter ? true : false;
 
     return {
       props: {
-        campId,
         orgId,
         showUnlinkedOnly: filter,
         surveyId,
@@ -105,11 +104,7 @@ const SubmissionsPage: PageWithLayout<SubmissionsPageProps> = ({
 
 SubmissionsPage.getLayout = function getLayout(page, props) {
   return (
-    <SurveyLayout
-      campaignId={props.campId}
-      orgId={props.orgId}
-      surveyId={props.surveyId}
-    >
+    <SurveyLayout orgId={props.orgId} surveyId={props.surveyId}>
       {page}
     </SurveyLayout>
   );