Merge pull request #43 from MobilityData/feat/23-feeds-ux

feat: UX Improvements + SSG additions

Author: Alessandro100

cypress/e2e/home.cy.ts

@@ -6,7 +6,7 @@ describe('Home page', () => {
   it('should render page header', () => {
     cy.get('[data-testid=websiteTile]')
       .should('exist')
-      .contains('Mobility Database');
+      .contains('MobilityDatabase');
   });
 
   it('should render home page title', () => {

cypress/e2e/signin.cy.ts

@@ -6,7 +6,7 @@ describe('Sign In page', () => {
   it('should render page header', () => {
     cy.get('[data-testid=websiteTile]')
       .should('exist')
-      .contains('Mobility Database');
+      .contains('MobilityDatabase');
   });
 
   it('should render signin', () => {

package.json

@@ -51,6 +51,7 @@
     "redux-persist": "^6.0.0",
     "redux-saga": "^1.2.3",
     "server-only": "^0.0.1",
+    "swr": "^2.4.0",
     "yup": "^1.3.2"
   },
   "scripts": {

src/app/App.tsx

@@ -41,7 +41,7 @@ function App({ locale }: AppProps): React.ReactElement {
   const initialPath = buildPathFromNextRouter(pathname, searchParams, locale);
 
   useEffect(() => {
-    app.auth().onAuthStateChanged((user) => {
+    const unsubscribe = app.auth().onAuthStateChanged((user) => {
       if (user != null) {
         setIsAppReady(true);
       } else {
@@ -50,6 +50,9 @@ function App({ locale }: AppProps): React.ReactElement {
       }
     });
     dispatch(anonymousLogin());
+    return () => {
+      unsubscribe();
+    };
   }, [dispatch]);
 
   return (

src/app/[locale]/about/components/AboutPage.tsx

@@ -2,6 +2,7 @@ import { Container, Typography, Button } from '@mui/material';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import { type ReactElement } from 'react';
 import { getTranslations } from 'next-intl/server';
+import Link from 'next/link';
 
 export default async function AboutPage(): Promise<ReactElement> {
   const t = await getTranslations('about');
@@ -72,15 +73,11 @@ export default async function AboutPage(): Promise<ReactElement> {
             <li>{t('benefits.mirrored')}</li>
             <li>{t('benefits.boundingBoxes')}</li>
             <li>
-              <Button
-                variant='text'
-                className='line-start inline'
-                href='/contribute'
-                rel='noreferrer'
-                target='_blank'
-              >
-                {t('benefits.addFeeds')}
-              </Button>
+              <Link href='/contribute' rel='noreferrer' target='_blank'>
+                <Button variant='text' className='line-start inline'>
+                  {t('benefits.addFeeds')}
+                </Button>
+              </Link>
             </li>
             <li>{t('benefits.openSource')}</li>
           </ul>

src/app/[locale]/components/HomePage.tsx

@@ -10,6 +10,7 @@ import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import SearchBox from './SearchBox';
 import { getTranslations } from 'next-intl/server';
 import '../../styles/TextShimmer.css';
+import Link from 'next/link';
 
 interface ActionBoxProps {
   IconComponent: React.ElementType;
@@ -35,9 +36,11 @@ const ActionBox = ({
     }}
   >
     <IconComponent sx={{ width: '100%', height: iconHeight }} />
-    <Button variant='contained' href={buttonHref} sx={{ m: 2, px: 2 }}>
-      {buttonText}
-    </Button>
+    <Link href={buttonHref}>
+      <Button variant='contained' sx={{ m: 2, px: 2 }}>
+        {buttonText}
+      </Button>
+    </Link>
   </Box>
 );
 

src/app/[locale]/contact-us/page.tsx

@@ -0,0 +1,26 @@
+import { type ReactElement } from 'react';
+import { setRequestLocale } from 'next-intl/server';
+import { type Locale, routing } from '../../../i18n/routing';
+import ContactUs from '../../screens/ContactUs';
+
+export const dynamic = 'force-static';
+
+export function generateStaticParams(): Array<{
+  locale: Locale;
+}> {
+  return routing.locales.map((locale) => ({ locale }));
+}
+
+interface PageProps {
+  params: Promise<{ locale: string }>;
+}
+
+export default async function ContactUsPage({
+  params,
+}: PageProps): Promise<ReactElement> {
+  const { locale } = await params;
+
+  setRequestLocale(locale);
+
+  return <ContactUs />;
+}

src/app/[locale]/contribute-faq/page.tsx

@@ -0,0 +1,26 @@
+import { type ReactElement } from 'react';
+import { setRequestLocale } from 'next-intl/server';
+import { type Locale, routing } from '../../../i18n/routing';
+import FeedSubmissionFAQ from '../../screens/FeedSubmissionFAQ';
+
+export const dynamic = 'force-static';
+
+export function generateStaticParams(): Array<{
+  locale: Locale;
+}> {
+  return routing.locales.map((locale) => ({ locale }));
+}
+
+interface PageProps {
+  params: Promise<{ locale: string }>;
+}
+
+export default async function ContributeFAQPage({
+  params,
+}: PageProps): Promise<ReactElement> {
+  const { locale } = await params;
+
+  setRequestLocale(locale);
+
+  return <FeedSubmissionFAQ />;
+}

src/app/[locale]/faq/page.tsx

@@ -0,0 +1,26 @@
+import { type ReactElement } from 'react';
+import { setRequestLocale } from 'next-intl/server';
+import { type Locale, routing } from '../../../i18n/routing';
+import FAQ from '../../screens/FAQ';
+
+export const dynamic = 'force-static';
+
+export function generateStaticParams(): Array<{
+  locale: Locale;
+}> {
+  return routing.locales.map((locale) => ({ locale }));
+}
+
+interface PageProps {
+  params: Promise<{ locale: string }>;
+}
+
+export default async function FAQPage({
+  params,
+}: PageProps): Promise<ReactElement> {
+  const { locale } = await params;
+
+  setRequestLocale(locale);
+
+  return <FAQ />;
+}

src/app/[locale]/feeds/[feedDataType]/[feedId]/authed/layout.tsx

@@ -1,7 +1,6 @@
 import { type ReactNode } from 'react';
 import { notFound } from 'next/navigation';
 import { headers } from 'next/headers';
-import { fetchCompleteFeedData } from '../lib/feed-data';
 import { AUTHED_PROXY_HEADER } from '../../../../../utils/proxy-helpers';
 
 /**
@@ -12,7 +11,6 @@ export const dynamic = 'force-dynamic';
 
 interface Props {
   children: ReactNode;
-  params: Promise<{ feedDataType: string; feedId: string }>;
 }
 
 /**
@@ -28,23 +26,12 @@ interface Props {
  */
 export default async function AuthedFeedLayout({
   children,
-  params,
 }: Props): Promise<React.ReactElement> {
   // Block direct access - only allow requests that came through the proxy
   const headersList = await headers();
   if (headersList.get(AUTHED_PROXY_HEADER) !== '1') {
     notFound();
   }
 
-  const { feedId, feedDataType } = await params;
-
-  // Fetch complete feed data (cached per-user)
-  // This will be reused by child pages without additional API calls
-  const feedData = await fetchCompleteFeedData(feedDataType, feedId);
-
-  if (feedData == null) {
-    notFound();
-  }
-
   return <>{children}</>;
 }