Merge branch 'main' into feature/III-6358

.github/CODEOWNERS

@@ -1,7 +1,7 @@
 # CODEOWNERS are automatically assigned as possible reviewers to new PRs.
 
 # Global owners (also need to be duplicated in later rules)
-* @simon-debruijn @brampauwelyn @Anahkiasen
+* @simon-debruijn @brampauwelyn @Anahkiasen @vhande
 
 # Jenkins / deployment owners
 Gemfile* @willaerk @paulherbosch

package.json

@@ -83,7 +83,7 @@
   },
   "devDependencies": {
     "@faker-js/faker": "^8.0.2",
-    "@playwright/test": "^1.31.2",
+    "@playwright/test": "1.31.2",
     "@storybook/addon-a11y": "^6.5.16",
     "@storybook/addon-actions": "^6.5.16",
     "@storybook/addon-essentials": "^6.5.16",

src/hooks/useHandleWindowMessage.js

@@ -13,6 +13,7 @@ const WindowMessageTypes = {
   HTTP_ERROR_CODE: 'HTTP_ERROR_CODE',
   OFFER_MODERATED: 'OFFER_MODERATED',
   OPEN_ANNOUNCEMENT_MODAL: 'OPEN_ANNOUNCEMENT_MODAL',
+  PAGE_HEIGHT: 'PAGE_HEIGHT',
 };
 
 const useHandleWindowMessage = (eventsMap = {}) => {

src/hooks/useLegacyPath.tsx

@@ -0,0 +1,41 @@
+import getConfig from 'next/config';
+import { useRouter } from 'next/router';
+import { useMemo } from 'react';
+
+import { useCookiesWithOptions } from './useCookiesWithOptions';
+
+const useLegacyPath = () => {
+  const { cookies } = useCookiesWithOptions(['token', 'udb-language']);
+  const router = useRouter();
+  const { publicRuntimeConfig } = getConfig();
+  const prefixWhenNotEmpty = (value, prefix) =>
+    value ? `${prefix}${value}` : value;
+
+  const jwt = cookies.token;
+  const lang = cookies['udb-language'];
+
+  const legacyPath = useMemo(() => {
+    const path = new URL(`http://localhost${router.asPath}`).pathname;
+    const { params = [], ...queryWithoutParams } = router.query;
+    const queryString = prefixWhenNotEmpty(
+      new URLSearchParams({
+        ...queryWithoutParams,
+        jwt,
+        lang,
+      }),
+      '?',
+    );
+
+    return `${publicRuntimeConfig.legacyAppUrl}${path}${queryString}`;
+  }, [
+    router.asPath,
+    router.query,
+    jwt,
+    lang,
+    publicRuntimeConfig.legacyAppUrl,
+  ]);
+
+  return legacyPath;
+};
+
+export { useLegacyPath };

src/i18n/de.json

@@ -1056,6 +1056,11 @@
       }
     }
   },
+  "search": {
+    "title": "Suchen",
+    "events_places": "Veranstaltungen und Orte",
+    "organizers": "Organisationen"
+  },
   "selectionTable": {
     "rowsSelectedCount": "{{count}} Reihe ausgewählt",
     "rowsSelectedCount_plural": "{{count}} Reihen ausgewählt"

src/i18n/fr.json

@@ -1056,6 +1056,11 @@
       }
     }
   },
+  "search": {
+    "title": "Chercher",
+    "events_places": "Événements et Lieux",
+    "organizers": "Organisations"
+  },
   "selectionTable": {
     "rowsSelectedCount": "{{count}} ligne sélectionnée",
     "rowsSelectedCount_plural": "{{count}} lignes sélectionnées"

src/i18n/nl.json

@@ -1065,6 +1065,11 @@
       }
     }
   },
+  "search": {
+    "title": "Zoeken",
+    "events_places": "Evenementen en locaties",
+    "organizers": "Organisaties"
+  },
   "selectionTable": {
     "rowsSelectedCount": "{{count}} rij geselecteerd",
     "rowsSelectedCount_plural": "{{count}} rijen geselecteerd"

src/layouts/index.js

@@ -67,20 +67,27 @@ const Layout = ({ children }) => {
   useChangeLanguage();
   useHandleWindowMessage({
     [WindowMessageTypes.URL_CHANGED]: ({ path }) => {
-      const currentPath = window.location.pathname;
-      const url = new URL(
+      const currentUrl = new URL(window.location.href);
+      const nextUrl = new URL(
         `${window.location.protocol}//${window.location.host}${path}`,
       );
-      const query = Object.fromEntries(url.searchParams.entries());
-      const hasPage = url.searchParams.has('page');
+
+      const areUrlsDeepEqual =
+        currentUrl.pathname === nextUrl.pathname &&
+        [...nextUrl.searchParams.entries()]
+          .filter(([key]) => key !== 'jwt' && key !== 'lang')
+          .every(([key, val]) => currentUrl.searchParams.get(key) === val);
+
+      if (areUrlsDeepEqual) {
+        return;
+      }
+
+      const hasPage = nextUrl.searchParams.has('page');
+
       if (hasPage) {
-        window.history.pushState(
-          undefined,
-          '',
-          `${window.location.protocol}//${window.location.host}${path}`,
-        );
+        window.history.pushState(undefined, '', nextUrl.toString());
       } else {
-        router.push({ pathname: url.pathname, query });
+        router.push(`${nextUrl.pathname}${nextUrl.search}`);
       }
     },
     [WindowMessageTypes.HTTP_ERROR_CODE]: ({ code }) => {

src/middleware.api.ts

@@ -45,14 +45,50 @@ export const middleware = async (request: NextRequest) => {
     return NextResponse.redirect(url);
   }
 
-  const isOwnershipPage = request.nextUrl.pathname.endsWith('ownerships');
+  const isOwnershipPage =
+    request.nextUrl.pathname.startsWith('/organizer') &&
+    !request.nextUrl.pathname.endsWith('/ownerships');
 
-  if (isOwnershipPage && !process.env.NEXT_PUBLIC_OWNERSHIP_ENABLED) {
-    const url = new URL('/404', request.url);
-    return NextResponse.redirect(url);
+  if (isOwnershipPage) {
+    const isOwnershipEnabled =
+      process.env.NEXT_PUBLIC_OWNERSHIP_ENABLED === 'true';
+
+    const redirectUrl = new URL(request.nextUrl);
+    // remove the path variables from nextjs routing
+    redirectUrl.searchParams.delete('params');
+
+    if (
+      isOwnershipEnabled &&
+      redirectUrl.searchParams.get('ownership') === 'true'
+    ) {
+      return NextResponse.next();
+    }
+
+    if (
+      isOwnershipEnabled &&
+      redirectUrl.searchParams.get('ownership') !== 'true'
+    ) {
+      redirectUrl.searchParams.set('ownership', 'true');
+      return NextResponse.redirect(redirectUrl);
+    }
+
+    if (!isOwnershipEnabled && redirectUrl.searchParams.has('ownership')) {
+      redirectUrl.searchParams.delete('ownership');
+      return NextResponse.redirect(redirectUrl);
+    }
+
+    return NextResponse.next();
   }
 };
 
 export const config = {
-  matcher: ['/event', '/login', '/organizers/:id/ownerships'],
+  matcher: [
+    '/event',
+    '/login',
+    '/organizers/:id/ownerships',
+    '/organizer/(.*)',
+    '/(.*)/ownerships',
+    '/search(.*)',
+    '/[...params]',
+  ],
 };

src/pages/[...params].page.js

@@ -35,13 +35,6 @@ IFrame.propTypes = {
 
 const Fallback = () => {
   const router = useRouter();
-
-  const {
-    // eslint-disable-next-line no-unused-vars
-    query: { params = [], ...queryWithoutParams },
-    asPath,
-  } = router;
-
   const { publicRuntimeConfig } = getConfig();
 
   // Keep track of which paths were not found. Do not store as a single boolean
@@ -51,37 +44,37 @@ const Fallback = () => {
   const [notFoundPaths, setNotFoundPaths] = useState(['/404']);
   useHandleWindowMessage({
     [WindowMessageTypes.URL_UNKNOWN]: () =>
-      setNotFoundPaths([asPath, ...notFoundPaths]),
+      setNotFoundPaths([router.asPath, ...notFoundPaths]),
   });
 
   const isClientSide = useIsClient();
 
   const { cookies } = useCookiesWithOptions(['token', 'udb-language']);
+  const token = cookies['token'];
+  const language = cookies['udb-language'];
 
   const legacyPath = useMemo(() => {
-    const path = new URL(`http://localhost${asPath}`).pathname;
-    const ownershipPaths =
-      (router.asPath.startsWith('/organizer') &&
-        !router.asPath.endsWith('/ownerships')) ||
-      router.asPath.startsWith('/search');
+    const path = new URL(`http://localhost${router.asPath}`).pathname;
+    const { params = [], ...queryWithoutParams } = router.query;
     const queryString = prefixWhenNotEmpty(
       new URLSearchParams({
         ...queryWithoutParams,
-        jwt: cookies.token,
-        lang: cookies['udb-language'],
-        ...(ownershipPaths &&
-          publicRuntimeConfig.ownershipEnabled === 'true' && {
-            ownership: 'true',
-          }),
+        jwt: token,
+        lang: language,
       }),
       '?',
     );
 
     return `${publicRuntimeConfig.legacyAppUrl}${path}${queryString}`;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [asPath, cookies.token, cookies['udb-language']]);
-
-  if (notFoundPaths.includes(asPath)) {
+  }, [
+    language,
+    publicRuntimeConfig.legacyAppUrl,
+    router.asPath,
+    router.query,
+    token,
+  ]);
+
+  if (notFoundPaths.includes(router.asPath)) {
     return <PageNotFound />;
   }
 

src/pages/organizers/[organizerId]/ownerships/index.page.tsx

@@ -66,6 +66,9 @@ const Ownership = () => {
 
   // @ts-expect-error
   const organizer: Organizer = getOrganizerByIdQuery?.data;
+  const organizerName =
+    organizer?.name?.[i18n.language] ??
+    organizer?.name?.[organizer.mainLanguage];
 
   const getOwnershipRequestsQuery = useGetOwnershipRequestsQuery({
     organizerId,
@@ -139,7 +142,7 @@ const Ownership = () => {
     <Page>
       <Page.Title>
         {t('organizers.ownerships.title', {
-          name: organizer?.name?.[i18n.language],
+          name: organizerName,
         })}
       </Page.Title>
       <Page.Content>
@@ -163,7 +166,7 @@ const Ownership = () => {
                   i18nKey={`${translationsPath}.success`}
                   values={{
                     ownerEmail: selectedRequest?.ownerEmail,
-                    organizerName: organizer?.name?.[i18n.language],
+                    organizerName: organizerName,
                   }}
                 />
               </Alert>
@@ -253,7 +256,7 @@ const Ownership = () => {
                       i18nKey={`${translationsPath}.body`}
                       values={{
                         ownerEmail: selectedRequest?.ownerEmail,
-                        organizerName: organizer?.name?.[i18n.language],
+                        organizerName: organizerName,
                       }}
                     />
                   </Box>