Components

Components are reused throughout the app can be found in /src/components

Some shared components e.g. /src/components/navbar.js are passed the locale prop in order to display the correct language content, other components are named according to the language they relate to e.g. /src/components/cat-list-en.js

When data is needed from the GraphQL in these components then a static query can be used:

/src/templates/cat-list-en.js

const CatListWrapper = () => (
  <StaticQuery
    query={graphql`
      query {
        allStrapiCategory(
          sort: { fields: index }
          filter: { locale: { eq: "en" } }
        ) {
          nodes {
            slug
            name
            id
            locale
            colour
            subcategory {
              name
            }

            image {
              id
              url
              localFile {
                childImageSharp {
                  gatsbyImageData(
                    layout: FULL_WIDTH
                    placeholder: NONE
                    formats: AUTO
                  )
                }
              }
            }
          }
        }
      }
    `}
    render={(data) => <CatList categories={data.allStrapiCategory.nodes} />}
  />
);

This data is passed to a component wrapper that is then imported into the page component.

/src/templates/cat-list-en.js

const CatList = ({ categories }) => {

  const classes = useStyles();

  const catItems = categories.map((cat) => {
    return (
      <div key={cat.id} style={{ paddingBottom: "1em" }}>
        <Link to={"/en/" + cat.slug} style={{ textDecoration: "none" }}>
          <Card className={classes.card}>
            <div
              className={classes.cardActionBar}
              style={{ background: cat.colour }}
            >
              <Toolbar>
                <Typography className={classes.cardTitle}>
                  {cat.name}
                </Typography>
              </Toolbar>
            </div>

            <CardContent>
              {cat.image && cat.image[0] !== null && (
                <GatsbyImage
                  className={classes.cardImgsm}
                  image={getImage(cat.image[0].localFile)}
                  alt={cat.name}
                />
              )}
            </CardContent>
          </Card>
        </Link>
      </div>
    );
  });

  return (
    <CardLayout>
      <div className={classes.slide}>{catItems}</div>
    </CardLayout>
  );
};

This pattern is the same across the other components.