My home

.env.development

@@ -1,5 +1,6 @@
 ZETKIN_APP_DOMAIN=http://www.dev.zetkin.org
 ZETKIN_GEN2_ORGANIZE_URL=http://organize.dev.zetkin.org
+ZETKIN_GEN2_CALL_URL=http://call.dev.zetkin.org
 
 ZETKIN_PRIVACY_POLICY_LINK=https://zetkin.org/privacy
 

next.config.js

@@ -13,6 +13,11 @@ module.exports = {
   },
   async redirects() {
     return [
+      {
+        source: '/my',
+        destination: '/my/home',
+        permanent: false,
+      },
       {
         source: '/:prevPath*/calendar/events',
         destination: '/:prevPath*/calendar',

src/app/call/[callAssId]/page.tsx

@@ -0,0 +1,13 @@
+import { redirect } from 'next/navigation';
+
+interface PageProps {
+  params: {
+    callAssId: string;
+  };
+}
+
+export default async function Page({ params }: PageProps) {
+  const callUrl = process.env.ZETKIN_GEN2_CALL_URL;
+  const assignmentUrl = callUrl + '/assignments/' + params.callAssId;
+  redirect(assignmentUrl);
+}

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

@@ -24,6 +24,6 @@ export default async function Page({ params }: PageProps) {
 
     return <MyCanvassAssignmentPage canvassAssId={canvassAssId} />;
   } catch (err) {
-    return redirect(`/login?redirect=/my/canvassassignments/${canvassAssId}`);
+    return redirect(`/login?redirect=/canvass/${canvassAssId}`);
   }
 }

src/app/my/feed/page.tsx

@@ -0,0 +1,8 @@
+import redirectIfLoginNeeded from 'core/utils/redirectIfLoginNeeded';
+import AllEventsPage from 'features/home/pages/AllEventsPage';
+
+export default async function Page() {
+  await redirectIfLoginNeeded();
+
+  return <AllEventsPage />;
+}

src/app/my/home/page.tsx

@@ -0,0 +1,8 @@
+import redirectIfLoginNeeded from 'core/utils/redirectIfLoginNeeded';
+import HomePage from 'features/home/pages/HomePage';
+
+export default async function Page() {
+  await redirectIfLoginNeeded();
+
+  return <HomePage />;
+}

src/app/my/layout.tsx

@@ -0,0 +1,35 @@
+import { FC, ReactNode } from 'react';
+import { Metadata } from 'next';
+import { headers } from 'next/headers';
+
+import HomeLayout from 'features/home/layouts/HomeLayout';
+import HomeThemeProvider from 'features/home/components/HomeThemeProvider';
+import { getBrowserLanguage } from 'utils/locale';
+import getServerMessages from 'core/i18n/server';
+import messageIds from 'features/home/l10n/messageIds';
+
+export async function generateMetadata(): Promise<Metadata> {
+  const lang = getBrowserLanguage(headers().get('accept-language') || '');
+  const messages = await getServerMessages(lang, messageIds);
+
+  return {
+    icons: [{ url: '/logo-zetkin.png' }],
+    title: process.env.HOME_TITLE || messages.title(),
+  };
+}
+
+type Props = {
+  children: ReactNode;
+};
+
+const MyHomeLayout: FC<Props> = ({ children }) => {
+  const homeTitle = process.env.HOME_TITLE;
+
+  return (
+    <HomeThemeProvider>
+      <HomeLayout title={homeTitle}>{children}</HomeLayout>
+    </HomeThemeProvider>
+  );
+};
+
+export default MyHomeLayout;

src/core/Providers.tsx

@@ -15,10 +15,10 @@ import { EventPopperProvider } from 'features/events/components/EventPopper/Even
 import { MessageList } from 'utils/locale';
 import { Store } from './store';
 import { themeWithLocale } from '../theme';
-import { UserContext } from 'utils/hooks/useFocusDate';
 import { ZetkinUser } from 'utils/types/zetkin';
 import { ZUIConfirmDialogProvider } from 'zui/ZUIConfirmDialogProvider';
 import { ZUISnackbarProvider } from 'zui/ZUISnackbarContext';
+import { UserProvider } from './env/UserContext';
 
 type ProviderData = {
   env: Environment;
@@ -63,7 +63,7 @@ const Providers: FC<ProvidersProps> = ({
   return (
     <ReduxProvider store={store}>
       <EnvProvider env={env}>
-        <UserContext.Provider value={user}>
+        <UserProvider user={user}>
           <StyledEngineProvider injectFirst>
             <CacheProvider value={cache}>
               <ThemeProvider theme={themeWithLocale(lang)}>
@@ -87,7 +87,7 @@ const Providers: FC<ProvidersProps> = ({
               </ThemeProvider>
             </CacheProvider>
           </StyledEngineProvider>
-        </UserContext.Provider>
+        </UserProvider>
       </EnvProvider>
     </ReduxProvider>
   );

src/core/env/ClientContext.tsx

@@ -11,6 +11,8 @@ import {
   Theme,
   ThemeProvider,
 } from '@mui/material/styles';
+import { LicenseInfo, LocalizationProvider } from '@mui/x-date-pickers-pro';
+import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
 
 import BrowserApiClient from 'core/api/client/BrowserApiClient';
 import Environment from 'core/env/Environment';
@@ -56,21 +58,28 @@ const ClientContext: FC<ClientContextProps> = ({
   const env = new Environment(apiClient, envVars);
   const cache = createCache({ key: 'css', prepend: true });
 
+  // MUI-X license
+  if (env.vars.MUIX_LICENSE_KEY) {
+    LicenseInfo.setLicenseKey(env.vars.MUIX_LICENSE_KEY);
+  }
+
   return (
     <ReduxProvider store={store}>
       <StyledEngineProvider injectFirst>
         <CacheProvider value={cache}>
           <ThemeProvider theme={themeWithLocale(lang)}>
             <EnvProvider env={env}>
               <UserProvider user={user}>
-                <IntlProvider
-                  defaultLocale="en"
-                  locale={lang}
-                  messages={messages}
-                >
-                  <CssBaseline />
-                  {children}
-                </IntlProvider>
+                <LocalizationProvider dateAdapter={AdapterDayjs}>
+                  <IntlProvider
+                    defaultLocale="en"
+                    locale={lang}
+                    messages={messages}
+                  >
+                    <CssBaseline />
+                    {children}
+                  </IntlProvider>
+                </LocalizationProvider>
               </UserProvider>
             </EnvProvider>
           </ThemeProvider>

src/core/env/Environment.ts

@@ -5,6 +5,7 @@ type EnvVars = {
   MUIX_LICENSE_KEY: string | null;
   ZETKIN_APP_DOMAIN: string | null;
   ZETKIN_GEN2_ORGANIZE_URL?: string | null;
+  ZETKIN_PRIVACY_POLICY_LINK?: string | null;
 };
 
 export default class Environment {
@@ -22,6 +23,7 @@ export default class Environment {
       MUIX_LICENSE_KEY: null,
       ZETKIN_APP_DOMAIN: null,
       ZETKIN_GEN2_ORGANIZE_URL: null,
+      ZETKIN_PRIVACY_POLICY_LINK: null,
     };
   }
 

src/core/hooks/useRemoteList.spec.tsx

@@ -0,0 +1,165 @@
+import { describe, expect, it, jest } from '@jest/globals';
+import { act, render } from '@testing-library/react';
+import { FC, Suspense } from 'react';
+import { Provider as ReduxProvider, useSelector } from 'react-redux';
+import { configureStore } from '@reduxjs/toolkit';
+
+import useRemoteList from './useRemoteList';
+import { RemoteList, remoteList } from 'utils/storeUtils';
+
+type ListObjectForTest = { id: number; name: string };
+type StoreState = {
+  list: RemoteList<ListObjectForTest>;
+};
+
+describe('useRemoteList()', () => {
+  it('triggers a load when the data has not yet been loaded', async () => {
+    const { hooks, promise, render, store } = setupWrapperComponent();
+
+    const { queryByText } = render();
+
+    expect(queryByText('loading')).not.toBeNull();
+
+    await act(async () => {
+      await promise;
+    });
+
+    expect(hooks.loader).toHaveBeenCalled();
+    expect(store.dispatch).toHaveBeenCalledTimes(2);
+    expect(store.dispatch).toHaveBeenNthCalledWith(1, {
+      payload: undefined,
+      type: 'load',
+    });
+    expect(store.dispatch).toHaveBeenNthCalledWith(2, {
+      payload: [{ id: 1, name: 'Clara Zetkin' }],
+      type: 'loaded',
+    });
+
+    expect(queryByText('loading')).toBeNull();
+    expect(queryByText('loaded')).not.toBeNull();
+  });
+
+  it('returns data without load when the data has been loaded recently', async () => {
+    const { hooks, render, store } = setupWrapperComponent({
+      ...remoteList([
+        {
+          id: 1,
+          name: 'Clara Zetkin',
+        },
+      ]),
+      loaded: new Date().toISOString(),
+    });
+
+    const { queryByText } = render();
+
+    expect(store.dispatch).not.toHaveBeenCalled();
+    expect(hooks.loader).not.toHaveBeenCalled();
+    expect(queryByText('loading')).toBeNull();
+    expect(queryByText('loaded')).not.toBeNull();
+
+    const listItem = queryByText('Clara Zetkin');
+    expect(listItem?.tagName).toBe('LI');
+  });
+
+  it('returns stale data while re-loading', async () => {
+    const { hooks, promise, render, store } = setupWrapperComponent({
+      ...remoteList([
+        {
+          id: 1,
+          name: 'Clara Zetkin',
+        },
+      ]),
+      loaded: new Date(1857, 6, 5).toISOString(),
+    });
+
+    const { queryByText } = render();
+
+    expect(queryByText('Clara Zetkin')).not.toBeNull();
+
+    await act(async () => {
+      await promise;
+    });
+
+    expect(hooks.loader).toHaveBeenCalled();
+    expect(store.dispatch).toHaveBeenCalledTimes(2);
+  });
+});
+
+function setupWrapperComponent(initialList?: RemoteList<ListObjectForTest>) {
+  const store = configureStore<StoreState>({
+    preloadedState: {
+      list: initialList || remoteList(),
+    },
+    reducer: (state, action) => {
+      if (action.type == 'load') {
+        return {
+          list: {
+            ...remoteList(),
+            isLoading: true,
+          },
+        };
+      } else if (action.type == 'loaded') {
+        return {
+          list: {
+            ...remoteList(),
+            isLoading: false,
+            loaded: new Date().toISOString(),
+          },
+        };
+      }
+
+      return (
+        state || {
+          list: remoteList(),
+        }
+      );
+    },
+  });
+  jest.spyOn(store, 'dispatch');
+
+  const promise = Promise.resolve([{ id: 1, name: 'Clara Zetkin' }]);
+
+  const hooks = {
+    actionOnLoad: () => ({ payload: undefined, type: 'load' }),
+    actionOnSuccess: (data: ListObjectForTest[]) => ({
+      payload: data,
+      type: 'loaded',
+    }),
+    loader: () => promise,
+  };
+
+  jest.spyOn(hooks, 'loader');
+
+  const Component: FC = () => {
+    const list = useSelector<StoreState, RemoteList<ListObjectForTest>>(
+      (state) => state.list
+    );
+
+    const items = useRemoteList(list, hooks);
+
+    return (
+      <div>
+        <p>loaded</p>
+        <ul>
+          {items.map((item) => (
+            <li key={item.id}>{item.name}</li>
+          ))}
+        </ul>
+      </div>
+    );
+  };
+
+  return {
+    hooks,
+    promise,
+    render: () =>
+      render(
+        <ReduxProvider store={store}>
+          <Suspense fallback={<p>loading</p>}>
+            <Component />
+          </Suspense>
+        </ReduxProvider>
+      ),
+    store,
+  };
+}