Merge pull request #2349 from zetkin/release-241112

241112 Release

.storybook/preview.js → .storybook/preview.tsx

@@ -8,7 +8,8 @@ import isoWeek from 'dayjs/plugin/isoWeek';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { Provider as ReduxProvider } from 'react-redux';
 import { ThemeProvider } from '@mui/material';
-import { useRouter } from 'next/router';
+import { FC, PropsWithChildren } from 'react';
+import { StoryFn } from '@storybook/react';
 
 import theme from '../src/theme';
 import '../src/styles.css';
@@ -17,7 +18,7 @@ import createStore from '../src/core/store';
 
 dayjs.extend(isoWeek);
 
-const I18nProvider = (props) => {
+const I18nProvider: FC<PropsWithChildren> = (props) => {
   return (
     <IntlProvider defaultLocale="en" locale="en" messages={{}}>
       <LocalizationProvider dateAdapter={AdapterDayjs}>
@@ -27,7 +28,7 @@ const I18nProvider = (props) => {
   );
 };
 
-async function mockFetch(path, init) {
+async function mockFetch(path: string, init: any) {
   if (path === '/api/orgs/1/people/1' && init === undefined) {
     return new Response(
       JSON.stringify({
@@ -61,15 +62,14 @@ class MockApiClient extends FetchApiClient {
 }
 
 export const decorators = [
-  (Story) => (
+  (Story: StoryFn) => (
     <ThemeProvider theme={theme}>
       <Story />
     </ThemeProvider>
   ),
-  (Story) => {
+  (Story: StoryFn) => {
     const store = createStore();
-    const router = useRouter();
-    const env = new Environment(store, new MockApiClient(), router);
+    const env = new Environment(new MockApiClient());
     return (
       <ReduxProvider store={store}>
         <EnvProvider env={env}>
@@ -78,7 +78,7 @@ export const decorators = [
       </ReduxProvider>
     );
   },
-  (Story) => (
+  (Story: StoryFn) => (
     <I18nProvider>
       <Story />
     </I18nProvider>

src/app/beta/orgs/[orgId]/areas/[areaId]/tags/route.ts

@@ -18,7 +18,7 @@ export async function GET(request: NextRequest, { params }: RouteMeta) {
     {
       orgId: params.orgId,
       request: request,
-      roles: ['admin'],
+      roles: ['admin', 'organizer'],
     },
     async ({ orgId, apiClient }) => {
       await mongoose.connect(process.env.MONGODB_URL || '');

src/app/beta/orgs/[orgId]/canvassassignments/[canvassAssId]/sessions/route.ts

@@ -19,7 +19,7 @@ export async function GET(request: NextRequest, { params }: RouteMeta) {
     {
       orgId: params.orgId,
       request: request,
-      roles: ['admin'],
+      roles: ['admin', 'organizer'],
     },
     async ({ apiClient, orgId }) => {
       await mongoose.connect(process.env.MONGODB_URL || '');

src/app/beta/orgs/[orgId]/canvassassignments/route.ts

@@ -15,7 +15,7 @@ export async function GET(request: NextRequest, { params }: RouteMeta) {
     {
       orgId: params.orgId,
       request: request,
-      roles: ['admin'],
+      roles: ['admin', 'organizer'],
     },
     async ({ orgId }) => {
       await mongoose.connect(process.env.MONGODB_URL || '');

src/app/beta/orgs/[orgId]/places/[placeId]/households/[householdId]/route.ts

@@ -1,8 +1,8 @@
 import mongoose from 'mongoose';
 import { NextRequest, NextResponse } from 'next/server';
 
-import asOrgAuthorized from 'utils/api/asOrgAuthorized';
 import { PlaceModel } from 'features/canvassAssignments/models';
+import asCanvasserAuthorized from 'features/canvassAssignments/utils/asCanvasserAuthorized';
 
 type RouteMeta = {
   params: {
@@ -13,11 +13,10 @@ type RouteMeta = {
 };
 
 export async function PATCH(request: NextRequest, { params }: RouteMeta) {
-  return asOrgAuthorized(
+  return asCanvasserAuthorized(
     {
       orgId: params.orgId,
       request: request,
-      roles: ['admin'],
     },
     async ({ orgId }) => {
       await mongoose.connect(process.env.MONGODB_URL || '');

src/app/beta/orgs/[orgId]/places/[placeId]/households/[householdId]/visits/route.ts

@@ -2,7 +2,7 @@ import mongoose from 'mongoose';
 import { NextRequest, NextResponse } from 'next/server';
 
 import { PlaceModel } from 'features/canvassAssignments/models';
-import asOrgAuthorized from 'utils/api/asOrgAuthorized';
+import asCanvasserAuthorized from 'features/canvassAssignments/utils/asCanvasserAuthorized';
 
 type RouteMeta = {
   params: {
@@ -13,11 +13,10 @@ type RouteMeta = {
 };
 
 export async function POST(request: NextRequest, { params }: RouteMeta) {
-  return asOrgAuthorized(
+  return asCanvasserAuthorized(
     {
       orgId: params.orgId,
       request: request,
-      roles: ['admin'],
     },
     async ({ orgId }) => {
       await mongoose.connect(process.env.MONGODB_URL || '');

src/app/beta/orgs/[orgId]/places/[placeId]/households/route.ts

@@ -2,7 +2,7 @@ import mongoose from 'mongoose';
 import { NextRequest, NextResponse } from 'next/server';
 
 import { PlaceModel } from 'features/canvassAssignments/models';
-import asOrgAuthorized from 'utils/api/asOrgAuthorized';
+import asCanvasserAuthorized from 'features/canvassAssignments/utils/asCanvasserAuthorized';
 
 type RouteMeta = {
   params: {
@@ -12,11 +12,10 @@ type RouteMeta = {
 };
 
 export async function POST(request: NextRequest, { params }: RouteMeta) {
-  return asOrgAuthorized(
+  return asCanvasserAuthorized(
     {
       orgId: params.orgId,
       request: request,
-      roles: ['admin'],
     },
     async ({ orgId }) => {
       await mongoose.connect(process.env.MONGODB_URL || '');

src/app/beta/orgs/[orgId]/places/[placeId]/route.ts

@@ -1,8 +1,8 @@
 import mongoose from 'mongoose';
 import { NextRequest, NextResponse } from 'next/server';
 
-import asOrgAuthorized from 'utils/api/asOrgAuthorized';
 import { PlaceModel } from 'features/canvassAssignments/models';
+import asCanvasserAuthorized from 'features/canvassAssignments/utils/asCanvasserAuthorized';
 
 type RouteMeta = {
   params: {
@@ -12,11 +12,10 @@ type RouteMeta = {
 };
 
 export async function PATCH(request: NextRequest, { params }: RouteMeta) {
-  return asOrgAuthorized(
+  return asCanvasserAuthorized(
     {
       orgId: params.orgId,
       request: request,
-      roles: ['admin'],
     },
     async ({ orgId }) => {
       await mongoose.connect(process.env.MONGODB_URL || '');

src/app/beta/orgs/[orgId]/places/route.ts

@@ -1,9 +1,9 @@
 import { NextRequest, NextResponse } from 'next/server';
 import mongoose from 'mongoose';
 
-import asOrgAuthorized from 'utils/api/asOrgAuthorized';
 import { PlaceModel } from 'features/canvassAssignments/models';
 import { ZetkinPlace } from 'features/canvassAssignments/types';
+import asCanvasserAuthorized from 'features/canvassAssignments/utils/asCanvasserAuthorized';
 
 type RouteMeta = {
   params: {
@@ -12,11 +12,10 @@ type RouteMeta = {
 };
 
 export async function GET(request: NextRequest, { params }: RouteMeta) {
-  return asOrgAuthorized(
+  return asCanvasserAuthorized(
     {
       orgId: params.orgId,
       request: request,
-      roles: ['admin', 'organizer'],
     },
     async ({ orgId }) => {
       await mongoose.connect(process.env.MONGODB_URL || '');
@@ -37,11 +36,10 @@ export async function GET(request: NextRequest, { params }: RouteMeta) {
 }
 
 export async function POST(request: NextRequest, { params }: RouteMeta) {
-  return asOrgAuthorized(
+  return asCanvasserAuthorized(
     {
       orgId: params.orgId,
       request: request,
-      roles: ['admin'],
     },
     async ({ orgId }) => {
       await mongoose.connect(process.env.MONGODB_URL || '');

src/app/my/canvassassignments/[canvassAssId]/page.tsx

@@ -1,14 +1,29 @@
 import 'leaflet/dist/leaflet.css';
+import { headers } from 'next/headers';
+import { redirect } from 'next/navigation';
+
 import MyCanvassAssignmentPage from 'features/canvassAssignments/components/MyCanvassAssignmentPage';
+import BackendApiClient from 'core/api/client/BackendApiClient';
+import { ZetkinOrganization } from 'utils/types/zetkin';
 
 interface PageProps {
   params: {
     canvassAssId: string;
   };
 }
 
-export default function Page({ params }: PageProps) {
+export default async function Page({ params }: PageProps) {
   const { canvassAssId } = params;
+  const headersList = headers();
+  const headersEntries = headersList.entries();
+  const headersObject = Object.fromEntries(headersEntries);
+  const apiClient = new BackendApiClient(headersObject);
+
+  try {
+    await apiClient.get<ZetkinOrganization>(`/api/users/me`);
 
-  return <MyCanvassAssignmentPage canvassAssId={canvassAssId} />;
+    return <MyCanvassAssignmentPage canvassAssId={canvassAssId} />;
+  } catch (err) {
+    return redirect(`/login?redirect=/my/canvassassignments/${canvassAssId}`);
+  }
 }

src/app/my/canvassassignments/page.tsx

@@ -1,5 +1,5 @@
 import { headers } from 'next/headers';
-import { notFound } from 'next/navigation';
+import { redirect } from 'next/navigation';
 
 import BackendApiClient from 'core/api/client/BackendApiClient';
 import MyCanvassAssignmentsPage from 'features/canvassAssignments/components/MyCanvassAssignmentsPage';
@@ -16,6 +16,6 @@ export default async function Page() {
 
     return <MyCanvassAssignmentsPage />;
   } catch (err) {
-    return notFound();
+    return redirect(`/login?redirect=/my/canvassassignments`);
   }
 }

src/core/rpc/index.ts

@@ -3,6 +3,7 @@ import { addBulkOptionsDef } from 'features/surveys/rpc/addBulkOptions';
 import { copyEmailDef } from 'features/emails/rpc/copyEmail';
 import { copyEventsDef } from 'features/events/rpc/copyEvents';
 import { createNewViewRouteDef } from 'features/views/rpc/createNew/server';
+import { copyViewRouteDef } from 'features/views/rpc/copy/server';
 import { deleteEventsDef } from 'features/events/rpc/deleteEvents';
 import { deleteFolderRouteDef } from 'features/views/rpc/deleteFolder';
 import { getEventStatsDef } from 'features/events/rpc/getEventStats';
@@ -25,6 +26,7 @@ export function createRPCRouter() {
 
   rpcRouter.register(deleteFolderRouteDef);
   rpcRouter.register(createNewViewRouteDef);
+  rpcRouter.register(copyViewRouteDef);
   rpcRouter.register(getSurveyStatsDef);
   rpcRouter.register(getTaskStatsRouteDef);
   rpcRouter.register(addBulkOptionsDef);

src/features/callAssignments/components/CallerInstructions.tsx

@@ -1,12 +1,4 @@
-import {
-  Box,
-  Button,
-  Link,
-  Paper,
-  Typography,
-  useMediaQuery,
-  useTheme,
-} from '@mui/material';
+import { Box, Button, Link, Paper, Typography } from '@mui/material';
 import { useContext, useState } from 'react';
 
 import { ZUIConfirmDialogContext } from 'zui/ZUIConfirmDialogProvider';
@@ -27,9 +19,6 @@ const CallerInstructions = ({
   const messages = useMessages(messageIds);
   const { showConfirmDialog } = useContext(ZUIConfirmDialogContext);
 
-  const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
-
   const {
     hasNewText,
     instructions,
@@ -49,14 +38,13 @@ const CallerInstructions = ({
       sx={{
         display: 'flex',
         flexDirection: 'column',
-        maxHeight: isMobile ? '90vh' : 'calc(100vh - 300px)',
-        minHeight: 0,
       }}
     >
       <Box
         sx={{
           display: 'flex',
           flexDirection: 'column',
+          maxHeight: 'calc(max(35ch, 100vh - 300px))',
           minHeight: 0,
           padding: 2,
         }}

src/features/canvassAssignments/components/CanvassAssignmentMapOverlays.tsx

@@ -100,7 +100,7 @@ const CanvassAssignmentMapOverlays: FC<Props> = ({
         )}
         {selectedPlace && expanded && (
           <PlaceDialog
-            canvassAssId={assignment.id}
+            assignment={assignment}
             onClose={() => {
               setExpanded(false);
             }}

src/features/canvassAssignments/components/MyCanvassAssignmentsPage.tsx

@@ -12,26 +12,24 @@ import {
 } from '@mui/material';
 
 import useMyCanvassAssignments from '../hooks/useMyCanvassAssignments';
-import useCanvassAssignment from '../hooks/useCanvassAssignment';
 import useOrganization from 'features/organizations/hooks/useOrganization';
 import ZUIFutures from 'zui/ZUIFutures';
+import { ZetkinCanvassAssignment } from '../types';
 
 const CanvassAssignmentCard: FC<{
-  assignmentId: string;
+  assignment: ZetkinCanvassAssignment;
   orgId: number;
-}> = ({ orgId, assignmentId }) => {
+}> = ({ orgId, assignment }) => {
   const router = useRouter();
-  const assignmentFuture = useCanvassAssignment(orgId, assignmentId);
   const organizationFuture = useOrganization(orgId);
 
   return (
     <ZUIFutures
       futures={{
-        assignment: assignmentFuture,
         organization: organizationFuture,
       }}
     >
-      {({ data: { assignment, organization } }) => (
+      {({ data: { organization } }) => (
         <Card>
           <CardContent>
             <Typography variant="h6">
@@ -65,7 +63,7 @@ const MyCanvassAssignmentsPage: FC = () => {
         return (
           <CanvassAssignmentCard
             key={assignment.id}
-            assignmentId={assignment.id}
+            assignment={assignment}
             orgId={assignment.organization.id}
           />
         );