Merge pull request #948 from CodeForAfrica/feat/climatemappedafrica_a…

…bout_page

@/climatemappedafrica About Page

apps/climatemappedafrica/.eslintrc.js

@@ -1,4 +1,11 @@
 module.exports = {
   root: true,
   extends: ["eslint-config-commons-ui/next"],
+  settings: {
+    "import/resolver": {
+      webpack: {
+        config: "./eslint.webpack.config.js",
+      },
+    },
+  },
 };

apps/climatemappedafrica/eslint.webpack.config.js

@@ -0,0 +1,26 @@
+const path = require("path");
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.svg$/i,
+        type: "asset",
+        resourceQuery: /url/, // *.svg?url
+      },
+      {
+        test: /\.svg$/i,
+        issuer: /\.[jt]sx?$/,
+        resourceQuery: { not: [/url/] }, // exclude react component if *.svg?url
+        use: ["@svgr/webpack"],
+      },
+    ],
+  },
+  resolve: {
+    alias: {
+      "@/climatemappedafrica": path.resolve(__dirname, "src/"),
+      content: path.resolve(__dirname, "content/"),
+    },
+    extensions: [".js"],
+  },
+};

apps/climatemappedafrica/next.config.js

@@ -32,19 +32,25 @@ module.exports = {
     "@hurumap/next",
   ],
   webpack: (config) => {
+    const fileLoaderRule = config.module.rules.find((rule) =>
+      rule.test?.test?.(".svg"),
+    );
     config.module.rules.push(
       {
+        ...fileLoaderRule,
         test: /\.svg$/i,
-        type: "asset",
         resourceQuery: /url/, // *.svg?url
       },
       {
         test: /\.svg$/i,
-        issuer: /\.[jt]sx?$/,
-        resourceQuery: { not: [/url/] }, // exclude react component if *.svg?url
+        issuer: fileLoaderRule.issuer,
+        resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] }, // exclude if *.svg?url
         use: ["@svgr/webpack"],
       },
     );
+    // Since *.svg files are now handled ☝️, we can safely ignore file loader rule.
+    fileLoaderRule.exclude = /\.svg$/i;
+    config.experiments = { ...config.experiments, topLevelAwait: true }; // eslint-disable-line no-param-reassign
     // eslint-disable-next-line no-param-reassign
     config.resolve.fallback = {
       ...config.resolve.fallback,

apps/climatemappedafrica/package.json

@@ -28,9 +28,9 @@
     "dev": "NODE_OPTIONS='--inspect' TS_NODE_PROJECT=tsconfig.server.json tsx server.ts",
     "lint-check": "TIMING=1 eslint './'",
     "lint": "TIMING=1 eslint --fix './'",
-    "jest": "jest --passWithNoTests",
+    "jest": "jest",
     "playwright": "npx playwright test",
-    "clean": "rm -rf .next .turbo node_modules"
+    "clean": "rm -rf .next .turbo build dist node_modules"
   },
   "dependencies": {
     "@apollo/client": "catalog:",

apps/climatemappedafrica/payload.config.ts

@@ -12,6 +12,7 @@ import { sentry } from "@payloadcms/plugin-sentry";
 import { defaultLocale, locales } from "./src/payload/utils/locales";
 
 import Media from "./src/payload/collections/Media";
+import Members from "./src/payload/collections/Members";
 import Pages from "./src/payload/collections/Pages";
 import Users from "./src/payload/collections/Users";
 
@@ -53,7 +54,17 @@ export default buildConfig({
     url: process.env.MONGO_URL,
     migrationDir: process.env.MIGRATIONS_DIR,
   }),
-  collections: [Media, Pages, Users] as CollectionConfig[],
+  // the order here is the order that appears in the admin dashobard
+  // we wnat publication to be first, then project, and lastly settings
+  collections: [
+    // Publication
+    Media,
+    Pages,
+    // Project
+    Members,
+    // Settings
+    Users,
+  ] as CollectionConfig[],
   globals: [Site] as GlobalConfig[],
   ...(locales?.length
     ? {
@@ -86,7 +97,7 @@ export default buildConfig({
     debug: false, // default
     resources: {
       en: {
-        "codeforafrica.validation": {
+        "climatemappedafrica.validation": {
           uniquePlatforms: "Please select a unique platform",
         },
       },
@@ -97,6 +108,8 @@ export default buildConfig({
       collections: {
         media: {
           adapter,
+          // TODO(kilemensi): Toogle this depending on ENV?
+          disableLocalStorage: false,
           prefix: "media",
         },
       },

apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.js

@@ -0,0 +1,100 @@
+import { Box, Grid, Typography, useMediaQuery } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+import { chunk, uniqueId } from "lodash";
+import PropTypes from "prop-types";
+import React, { useRef } from "react";
+
+import Card from "@/climatemappedafrica/components/Card";
+import Carousel from "@/climatemappedafrica/components/Carousel";
+import Section from "@/climatemappedafrica/components/Section";
+
+// NOTE(kilemensi) useStyles uses import/definition order to determine how
+//                 classes are ordered.
+//                 see: https://material-ui.com/styles/advanced/#makestyles-withstyles-styled
+// eslint-disable-next-line import/order
+import useStyles from "./useStyles";
+
+const responsive = {
+  desktop: {
+    items: 1,
+  },
+  tablet: {
+    items: 1,
+  },
+};
+
+function AboutTeam({ title, members: membersProp, ...props }) {
+  const membersCount = membersProp?.length ?? 0;
+  const classes = useStyles({ ...props, membersCount });
+  const theme = useTheme();
+  const isMdUp = useMediaQuery(theme.breakpoints.up("md"));
+  const ref = useRef();
+
+  if (!membersProp?.length) {
+    return null;
+  }
+  const chunkSize = isMdUp ? 4 : 2;
+  const members = chunk(membersProp, chunkSize);
+  const scrollToTeam = () => {
+    if (ref.current && !isMdUp) {
+      ref.current.scrollIntoView({ behavior: "smooth" });
+    }
+  };
+  return (
+    <Box
+      sx={{
+        bgcolor: "background.paper",
+        py: { xs: 5, md: 10 },
+        px: 0,
+        scrollMarginTop: 40,
+        scrollBehavior: "auto",
+      }}
+      ref={ref}
+    >
+      <Section>
+        {title && (
+          <Typography
+            variant="h4"
+            className={classes.title}
+            sx={{
+              textAlign: "center",
+              paddingBottom: { xs: 5, md: 10 },
+            }}
+          >
+            {title}
+          </Typography>
+        )}
+        <Carousel
+          afterChange={scrollToTeam}
+          responsive={responsive}
+          classes={{ dotList: classes.dotList }}
+        >
+          {members.map((membersChunks) => (
+            <Grid
+              container
+              justifyContent="space-between"
+              key={uniqueId("team-chunk-")}
+            >
+              {membersChunks.map((member) => (
+                <Grid item key={title}>
+                  <Card {...member} mediaProps={{ square: true }} />
+                </Grid>
+              ))}
+            </Grid>
+          ))}
+        </Carousel>
+      </Section>
+    </Box>
+  );
+}
+
+AboutTeam.propTypes = {
+  title: PropTypes.string,
+  members: PropTypes.arrayOf(
+    PropTypes.shape({
+      title: PropTypes.string,
+    }),
+  ),
+};
+
+export default AboutTeam;

apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.snap.js

@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<AboutTeam /> renders unchanged 1`] = `
+<div>
+  <div
+    class="MuiBox-root css-1termwk"
+  >
+    <div
+      class="makeStyles-root-7 makeStyles-root-5 makeStyles-root-3 makeStyles-fixed-4 MuiBox-root css-0"
+    >
+      <h4
+        class="MuiTypography-root MuiTypography-h4 css-kemoay-MuiTypography-root"
+      >
+        About Team
+      </h4>
+      <div
+        class="react-multi-carousel-list  makeStyles-root-8"
+        dir="ltr"
+      >
+        <ul
+          class="react-multi-carousel-track "
+          style="transition: none; overflow: unset; transform: translate3d(0px,0,0);"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;

apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.test.js

@@ -0,0 +1,28 @@
+import { createRender } from "@commons-ui/testing-library";
+import React from "react";
+
+import AboutTeam from ".";
+
+import theme from "@/climatemappedafrica/theme";
+
+// eslint-disable-next-line testing-library/render-result-naming-convention
+const render = createRender({ theme });
+
+const defaultProps = {
+  title: "About Team",
+  members: [
+    {
+      alt: "Name",
+      description: "Name, Country",
+      image: "/media/member.jpg",
+      title: "Name",
+    },
+  ],
+};
+
+describe("<AboutTeam />", () => {
+  it("renders unchanged", () => {
+    const { container } = render(<AboutTeam {...defaultProps} />);
+    expect(container).toMatchSnapshot();
+  });
+});

apps/climatemappedafrica/src/components/AboutTeam/index.js

@@ -0,0 +1,3 @@
+import AboutTeam from "./AboutTeam";
+
+export default AboutTeam;

apps/climatemappedafrica/src/components/AboutTeam/useStyles.js

@@ -0,0 +1,19 @@
+import makeStyles from "@mui/styles/makeStyles";
+
+const useStyles = makeStyles(({ breakpoints, palette }) => ({
+  dotList: ({ membersCount }) => ({
+    display: membersCount > 2 ? "flex" : "none",
+    "& button": {
+      borderColor: "#000",
+      background: palette.background.paper,
+    },
+    "& .react-multi-carousel-dot--active button": {
+      borderColor: "#000",
+    },
+    [breakpoints.up("md")]: {
+      display: membersCount > 4 ? "flex" : "none",
+    },
+  }),
+}));
+
+export default useStyles;

apps/climatemappedafrica/src/components/Card/ActionArea.js

@@ -0,0 +1,52 @@
+import { Link } from "@commons-ui/next";
+import { CardActionArea } from "@mui/material";
+import makeStyles from "@mui/styles/makeStyles";
+import PropTypes from "prop-types";
+import React from "react";
+
+const useStyles = makeStyles(() => ({
+  root: {},
+  focusHighlight: {
+    background: "transparent",
+  },
+  focusVisible: {},
+}));
+
+function ActionArea({ href, children, onClick, ...props }) {
+  const classes = useStyles(props);
+
+  if (!(href || onClick)) {
+    return children;
+  }
+  return (
+    <CardActionArea
+      component={href ? Link : undefined}
+      color="textPrimary"
+      underline="none"
+      {...props}
+      href={href}
+      onClick={onClick}
+      classes={{
+        root: classes.root,
+        focusHighlight: classes.focusHighlight,
+        focusVisible: classes.focusVisible,
+      }}
+    >
+      {children}
+    </CardActionArea>
+  );
+}
+
+ActionArea.propTypes = {
+  children: PropTypes.node,
+  href: PropTypes.string,
+  onClick: PropTypes.func,
+};
+
+ActionArea.defaultProps = {
+  children: undefined,
+  href: undefined,
+  onClick: undefined,
+};
+
+export default ActionArea;