Issue 1616/user home page

next.config.js

@@ -58,22 +58,6 @@ module.exports = {
         destination: '/legacy?path=/campaign/action%3A:eventId&orgId=:orgId',
         permanent: false,
       },
-      // all paths with /o redirected to Gen2
-      {
-        source: '/o/:path*',
-        destination: 'https://zetk.in/o/:path*',
-        permanent: false,
-      },
-      {
-        source: '/organize/:orgId/campaigns/:path*',
-        destination: '/organize/:orgId/projects/:path*',
-        permanent: false,
-      },
-      {
-        source: '/organize/:orgId/people/views/:path*',
-        destination: '/organize/:orgId/people/lists/:path*',
-        permanent: false,
-      }
     ];
   },
 };

src/features/events/components/EventSignUpCard.tsx

@@ -0,0 +1,64 @@
+import { FC } from 'react';
+import {
+  Button,
+  Card,
+  CardActions,
+  CardContent,
+  CardMedia,
+  Typography,
+  useTheme,
+} from '@mui/material';
+
+import { ZetkinEvent } from 'utils/types/zetkin';
+
+type EventSignUpCardProps = {
+  event: ZetkinEvent;
+};
+
+const EventSignUpCard: FC<EventSignUpCardProps> = ({ event }) => {
+  const theme = useTheme();
+  // TODO: Instead of always using the en-US .toLocaleString, update to match the user settings.
+  const startTime = new Date(event.start_time).toLocaleString('sv-SE', {
+    hour: 'numeric',
+    minute: 'numeric',
+  });
+
+  return (
+    <Card sx={{ marginTop: '2rem' }}>
+      <CardMedia
+        alt={event.title || undefined}
+        component="img"
+        height="140"
+        image="https://zetkin.org/assets/img/hero.jpg"
+      />
+      <CardContent>
+        <Typography component="div" gutterBottom variant="h5">
+          {event.title}
+        </Typography>
+        <Typography
+          component="p"
+          gutterBottom
+          sx={{ color: theme.palette.secondary.main, fontSize: '.7rem' }}
+        >
+          {startTime} - {event.location?.title}
+        </Typography>
+        <Typography color={theme.palette.secondary.main} variant="body2">
+          {event.info_text}
+        </Typography>
+      </CardContent>
+      <CardActions sx={{ justifyContent: 'space-between' }}>
+        <Button
+          href={`/o/${event.organization.id}/projects/${event.id}`}
+          size="small"
+        >
+          Read more
+        </Button>
+        <Button size="small" variant="contained">
+          Count me in!
+        </Button>
+      </CardActions>
+    </Card>
+  );
+};
+
+export default EventSignUpCard;

src/features/events/components/EventSignUpList.tsx

@@ -0,0 +1,21 @@
+import { Box } from '@mui/material';
+import { FC } from 'react';
+
+import EventSignUpCard from './EventSignUpCard';
+import { ZetkinEvent } from 'utils/types/zetkin';
+
+type EventSignUpListProps = {
+  events: ZetkinEvent[];
+};
+
+const EventSignUpList: FC<EventSignUpListProps> = ({ events }) => {
+  return (
+    <Box>
+      {events.map((event) => {
+        return <EventSignUpCard key={event.id} event={event} />;
+      })}
+    </Box>
+  );
+};
+
+export default EventSignUpList;

src/features/user/hooks/useCurrentUserCallAssigments.tsx

@@ -0,0 +1,25 @@
+import { CallAssignmentData } from '../../callAssignments/apiTypes';
+import { IFuture } from 'core/caching/futures';
+import { loadListIfNecessary } from 'core/caching/cacheUtils';
+import {
+  callAssignmentsLoad,
+  callAssignmentsLoaded,
+} from '../../callAssignments/store';
+import { useApiClient, useAppDispatch, useAppSelector } from 'core/hooks';
+
+export default function useCurrentUserCallAssignments(): IFuture<
+  CallAssignmentData[]
+> {
+  const apiClient = useApiClient();
+  const dispatch = useAppDispatch();
+  const assignmentList = useAppSelector(
+    (state) => state.callAssignments.assignmentList
+  );
+
+  return loadListIfNecessary(assignmentList, dispatch, {
+    actionOnLoad: () => callAssignmentsLoad(),
+    actionOnSuccess: (data) => callAssignmentsLoaded(data),
+    loader: () =>
+      apiClient.get<CallAssignmentData[]>(`/api/users/me/call_assignments`),
+  });
+}

src/features/user/hooks/useCurrentUserEvents.tsx

@@ -0,0 +1,19 @@
+import { IFuture } from 'core/caching/futures';
+import { loadListIfNecessary } from 'core/caching/cacheUtils';
+import { ZetkinEvent } from 'utils/types/zetkin';
+import { eventsLoad, eventsLoaded } from '../../events/store';
+import { useApiClient, useAppDispatch, useAppSelector } from 'core/hooks';
+
+export default function useCurrentUserEvents(): IFuture<ZetkinEvent[]> {
+  const apiClient = useApiClient();
+  const dispatch = useAppDispatch();
+  const events = useAppSelector((state) => state.events.eventList);
+
+  const eventFuture = loadListIfNecessary(events, dispatch, {
+    actionOnLoad: () => eventsLoad(),
+    actionOnSuccess: (events) => eventsLoaded(events),
+    loader: () => apiClient.get<ZetkinEvent[]>(`/api/users/me/actions`),
+  });
+
+  return eventFuture;
+}

src/pages/my/home/CallAssignmentList.tsx

@@ -0,0 +1,46 @@
+import { Box } from '@mui/system';
+import { FC } from 'react';
+import { scaffold } from 'utils/next';
+import { ZetkinCallAssignment } from 'utils/types/zetkin';
+import { DataGrid, GridColDef } from '@mui/x-data-grid';
+
+const scaffoldOptions = {
+  allowNonOfficials: true,
+  authLevelRequired: 1,
+};
+
+const columns: GridColDef[] = [
+  {
+    disableColumnMenu: true,
+    field: 'title',
+    flex: 1,
+    headerName: 'Title',
+  },
+];
+
+export const getServerSideProps = scaffold(async () => {
+  return {
+    props: {},
+  };
+}, scaffoldOptions);
+
+type PageProps = { callAssignments: ZetkinCallAssignment[] };
+
+const Page: FC<PageProps> = ({ callAssignments }) => {
+  return (
+    <Box>
+      <DataGrid
+        columns={columns}
+        disableRowSelectionOnClick
+        initialState={{
+          pagination: { paginationModel: { pageSize: 5 } },
+        }}
+        pageSizeOptions={[10]}
+        pagination
+        rows={callAssignments}
+      />
+    </Box>
+  );
+};
+
+export default Page;

src/pages/my/home/CallAssignments.tsx

@@ -0,0 +1,52 @@
+import { Box } from '@mui/system';
+import CallAssignmentList from './CallAssignmentList';
+import { FC } from 'react';
+import { HeadsetMic } from '@mui/icons-material';
+import { scaffold } from 'utils/next';
+import useCurrentUserCallAssignments from 'features/user/hooks/useCurrentUserCallAssigments';
+import ZUIFuture from 'zui/ZUIFuture';
+
+const scaffoldOptions = {
+  allowNonOfficials: true,
+  authLevelRequired: 1,
+};
+
+export const getServerSideProps = scaffold(async () => {
+  return {
+    props: {},
+  };
+}, scaffoldOptions);
+
+type PageProps = void;
+
+const Page: FC<PageProps> = () => {
+  const callAssignments = useCurrentUserCallAssignments();
+  return (
+    <Box>
+      <Box
+        sx={{
+          alignItems: 'center',
+          display: 'flex',
+          gap: '5px',
+          pl: '0',
+          pt: '1em',
+        }}
+      >
+        <HeadsetMic />
+        <h2
+          style={{
+            marginBottom: 0,
+            marginTop: 0,
+          }}
+        >
+          Call Assignments
+        </h2>
+      </Box>
+      <ZUIFuture future={callAssignments}>
+        {(data) => <CallAssignmentList callAssignments={data} />}
+      </ZUIFuture>
+    </Box>
+  );
+};
+
+export default Page;

src/pages/my/home/EventsFilterList.tsx

@@ -0,0 +1,59 @@
+import Box from '@mui/material/Box';
+import { Button } from '@mui/material';
+import EventSignUpList from 'features/events/components/EventSignUpList';
+import { scaffold } from 'utils/next';
+import { ZetkinEvent } from 'utils/types/zetkin';
+import { FC, useEffect, useState } from 'react';
+
+const scaffoldOptions = {
+  allowNonOfficials: true,
+  authLevelRequired: 1,
+};
+
+export const getServerSideProps = scaffold(async () => {
+  return {
+    props: {},
+  };
+}, scaffoldOptions);
+
+type PageProps = { events: ZetkinEvent[] };
+
+const pageSize = 5;
+const Page: FC<PageProps> = ({ events }) => {
+  const [page, setPage] = useState(0);
+  const [eventsView, setEventsView] = useState<ZetkinEvent[]>([]);
+  const length = events.length;
+  useEffect(() => {
+    setEventsView(events.slice(page * pageSize, (page + 1) * pageSize));
+  }, [events, page]);
+
+  function changePage(incr: number) {
+    setPage((prev) => prev + incr);
+  }
+  const pagesAmount =
+    Math.floor(length / pageSize) + (length % pageSize != 0 ? 1 : 0);
+
+  return (
+    <Box>
+      {length >= pageSize && (
+        <Box sx={{ alignItems: 'baseline', display: 'flex', margin: 0 }}>
+          <Button disabled={page === 0} onClick={() => changePage(-1)}>
+            Prev
+          </Button>
+          <p>
+            Page {page + 1} of {pagesAmount}
+          </p>
+          <Button
+            disabled={page >= pagesAmount - 1}
+            onClick={() => changePage(1)}
+          >
+            Next
+          </Button>
+        </Box>
+      )}
+      <EventSignUpList events={eventsView} />
+    </Box>
+  );
+};
+
+export default Page;

src/pages/my/home/EventsPage.tsx

@@ -0,0 +1,36 @@
+import { Box } from '@mui/system';
+import { FC } from 'react';
+import { scaffold } from 'utils/next';
+
+const scaffoldOptions = {
+  allowNonOfficials: true,
+  authLevelRequired: 1,
+};
+
+export const getServerSideProps = scaffold(async () => {
+  return {
+    props: {},
+  };
+}, scaffoldOptions);
+
+type PageProps = void;
+
+const Page: FC<PageProps> = () => {
+  return (
+    <Box
+      id="events"
+      sx={{
+        pl: '1em',
+        pr: '1em',
+      }}
+    >
+      <p>Sign up for more events here.</p>
+      <p>
+        TODO: Add events here, and a button for filtering between event type and
+        project, (and organization?)
+      </p>
+    </Box>
+  );
+};
+
+export default Page;