Merge pull request #2292 from Plant-for-the-Planet-org/develop

Release Facelift WebApp

Author: mariahosfeld

.eslintrc.js

@@ -4,7 +4,13 @@ module.exports = {
     browser: true,
     es2020: true,
   },
-  extends: ['eslint:recommended', 'plugin:@typescript-eslint/eslint-recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react/recommended', 'plugin:storybook/recommended'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/eslint-recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react/recommended',
+    'plugin:storybook/recommended',
+  ],
   parser: '@typescript-eslint/parser',
   parserOptions: {
     ecmaFeatures: {
@@ -47,6 +53,7 @@ module.exports = {
     'import/extensions': 'off',
     'import/no-unresolved': 'off',
     'react/jsx-no-literals': 'off',
+    '@typescript-eslint/consistent-type-imports': 'warn',
     '@typescript-eslint/ban-types': 'off',
     '@typescript-eslint/no-empty-interface': 'off',
     '@typescript-eslint/no-empty-function': 'off',

package-lock.json

@@ -24,7 +24,7 @@
     "prepare": "node ./husky-prepare.js"
   },
   "validate-branch-name": {
-    "pattern": "^(main|develop){1}$|^(feature|hotfix)/[a-z0-9-_]+$",
+    "pattern": "^(main|develop){1}$|^(feature|hotfix|projects-redesign)/[a-z0-9-_]+$",
     "errorMsg": "Invalid branch name. \n 1.Branch names can contain lowercase characters, numbers, hyphen and underscore. \n 2.Except for 'main' and 'develop', branch names must begin with 'feature/' or 'hotfix/' "
   },
   "engines": {
@@ -133,6 +133,7 @@
     "styled-jsx": "^5.0.0",
     "supercluster": "^8.0.1",
     "superjson": "^1.12.3",
+    "swiper": "^11.1.14",
     "uuid": "^8.3.2",
     "vizzuality-components": "^3.0.3",
     "xlsx": "^0.18.5",

package.json

@@ -3,13 +3,15 @@ import { CacheProvider, EmotionCache } from '@emotion/react';
 import createEmotionCache from '../src/createEmotionCache';
 import 'mapbox-gl/dist/mapbox-gl.css';
 import 'mapbox-gl-compare/dist/mapbox-gl-compare.css';
-import React from 'react';
+import React, { ReactElement, ReactNode, useMemo } from 'react';
 import TagManager from 'react-gtm-module';
 import Router from 'next/router';
-import App, { AppProps, AppContext, AppInitialProps } from 'next/app';
+import App, { AppContext, AppInitialProps, AppProps } from 'next/app';
 import { Auth0Provider } from '@auth0/auth0-react';
+// NOTE - needs to be removed when old projects code is removed
 import '../src/features/projects/styles/MapPopup.scss';
 import '../src/theme/global.scss';
+// NOTE - needs to be removed when old projects code is removed
 import './../src/features/projects/styles/Projects.scss';
 import './../src/features/common/Layout/Navbar/Navbar.scss';
 import ThemeProvider from '../src/theme/themeContext';
@@ -32,6 +34,7 @@ import QueryParamsProvider from '../src/features/common/Layout/QueryParamsContex
 import { PlanetCashProvider } from '../src/features/common/Layout/PlanetCashContext';
 import { PayoutsProvider } from '../src/features/common/Layout/PayoutsContext';
 import { trpc } from '../src/utils/trpc';
+// NOTE - needs to be removed when old projects code is removed
 import MapHolder from '../src/features/projects/components/maps/MapHolder';
 import { TenantProvider } from '../src/features/common/Layout/TenantContext';
 import { CurrencyProvider } from '../src/features/common/Layout/CurrencyContext';
@@ -41,9 +44,9 @@ import {
   getTenantSlug,
 } from '../src/utils/multiTenancy/helpers';
 import { Tenant } from '@planet-sdk/common/build/types/tenant';
-import { NextIntlClientProvider } from 'next-intl';
-
-type AppOwnProps = { tenantConfig: Tenant };
+import { AbstractIntlMessages, NextIntlClientProvider } from 'next-intl';
+import { NextPage } from 'next';
+import { SetState } from '../src/features/common/types/common';
 
 const VideoContainer = dynamic(
   () => import('../src/features/common/LandingVideo'),
@@ -107,15 +110,40 @@ const onRedirectCallback = (appState: any) => {
 // Client-side cache, shared for the whole session of the user in the browser.
 const clientSideEmotionCache = createEmotionCache();
 
-export interface MyAppProps extends AppProps {
+export type NextPageWithLayout<P = PageComponentProps, IP = P> = NextPage<
+  P,
+  IP
+> & {
+  getLayout?: (
+    page: ReactElement,
+    pageComponentProps: PageComponentProps
+  ) => ReactNode;
+};
+
+type AppPropsWithLayout = Omit<AppProps, 'pageProps'> & {
+  Component: NextPageWithLayout;
   emotionCache?: EmotionCache;
-}
+  pageProps: PageProps;
+};
+
+export type PageProps = {
+  tenantConfig: Tenant;
+  messages?: AbstractIntlMessages;
+  [key: string]: any;
+};
+
+export type PageComponentProps = {
+  pageProps: PageProps;
+  currencyCode: string;
+  setCurrencyCode: SetState<string>;
+  isMobile: boolean;
+};
 
 const PlanetWeb = ({
   Component,
   pageProps,
   emotionCache = clientSideEmotionCache,
-}: MyAppProps & AppOwnProps) => {
+}: AppPropsWithLayout) => {
   const router = useRouter();
   const [isMap, setIsMap] = React.useState(false);
   const [currencyCode, setCurrencyCode] = React.useState('');
@@ -140,14 +168,7 @@ const PlanetWeb = ({
   }, []);
 
   React.useEffect(() => {
-    if (
-      router.pathname === '/' ||
-      router.pathname === '/[p]' ||
-      router.pathname === '/[p]/[id]' ||
-      router.pathname === '/sites/[slug]/[locale]' ||
-      router.pathname === '/sites/[slug]/[locale]/[p]' ||
-      router.pathname === '/sites/[slug]/[locale]/[p]/[id]'
-    ) {
+    if (router.pathname.includes('projects-archive')) {
       setIsMap(true);
     } else {
       setIsMap(false);
@@ -164,10 +185,16 @@ const PlanetWeb = ({
     setBrowserCompatible(browserNotCompatible());
   }, []);
 
-  const ProjectProps = {
+  const isMobile = useMemo(() => {
+    if (typeof window === 'undefined') return false;
+    return window.innerWidth < 481;
+  }, [typeof window !== 'undefined' && window.innerWidth]);
+
+  const pageComponentProps = {
     pageProps,
     currencyCode,
     setCurrencyCode,
+    isMobile,
   };
 
   const [showVideo, setshowVideo] = React.useState(true);
@@ -180,11 +207,7 @@ const PlanetWeb = ({
   const [localShowVideo, setLocalShowVideo] = React.useState(false);
 
   React.useEffect(() => {
-    if (
-      router.pathname === '/' ||
-      router.pathname === '/sites/[slug]' ||
-      router.pathname === '/sites/[slug]/[locale]'
-    ) {
+    if (router.pathname.endsWith('projects-archive')) {
       if (typeof window !== 'undefined') {
         if (localStorage.getItem('showVideo')) {
           if (localStorage.getItem('showVideo') === 'true') {
@@ -206,6 +229,12 @@ const PlanetWeb = ({
     setshowVideo(localShowVideo);
   }, [localShowVideo]);
 
+  const getLayout = Component.getLayout ?? ((page) => page);
+  const pageContent = getLayout(
+    <Component {...pageComponentProps} />,
+    pageComponentProps
+  );
+
   if (browserCompatible) {
     return <BrowserNotSupported />;
   } else {
@@ -273,7 +302,7 @@ const PlanetWeb = ({
                                               setshowVideo={setshowVideo}
                                             />
                                           ) : null}
-                                          <Component {...ProjectProps} />
+                                          {pageContent}
                                         </AnalyticsProvider>
                                       </BulkCodeProvider>
                                     </ProjectPropsProvider>
@@ -300,7 +329,7 @@ const PlanetWeb = ({
 
 PlanetWeb.getInitialProps = async (
   context: AppContext
-): Promise<AppOwnProps & AppInitialProps> => {
+): Promise<AppInitialProps & { pageProps: PageProps }> => {
   const ctx = await App.getInitialProps(context);
 
   const _tenantSlug = await getTenantSlug(
@@ -311,12 +340,13 @@ PlanetWeb.getInitialProps = async (
 
   const tenantConfig = await getTenantConfig(tenantSlug);
 
-  const pageProps = {
-    ...ctx.pageProps,
-    tenantConfig,
+  return {
+    ...ctx,
+    pageProps: {
+      ...ctx.pageProps,
+      tenantConfig,
+    },
   };
-
-  return { ...ctx, pageProps } as AppOwnProps & AppInitialProps;
 };
 
 export default trpc.withTRPC(PlanetWeb);

pages/_app.tsx

@@ -25,12 +25,20 @@ class MyDocument extends Document {
     return (
       <Html lang="en">
         <Head>
-          <link rel="dns-prefetch" href="https://www.plant-for-the-planet.org/" />
+          <link
+            rel="dns-prefetch"
+            href="https://www.plant-for-the-planet.org/"
+          />
           <link
             rel="preconnect"
             href="https://fonts.googleapis.com/"
             crossOrigin="true"
           />
+          <link
+            rel="preload"
+            as="image"
+            href="/assets/images/project-contribution-default-landscape.png"
+          />
           {/* Commented code below to avoid inserting emotion css <style> tags above global/module scss */}
           {/* <meta name="emotion-insertion-point" content="" /> */}
           {this.props.styles}