Modals in Gatsby

module.exports = {
  siteMetadata: {
    title: "Alice X. Zhang",
  },
  plugins: [
    "@affectionatedoor/gatsby-theme-ui",
    {
      resolve: `gatsby-source-instagram`,
      options: {
        username: `alicexz`,
      },
    },
  ],
};Copy

exports.createPages = async ({ graphql, actions: { createPage } }) => {
  const result = await graphql(`
    query {
      allInstaNode {
        nodes {
          id
        }
      }
    }
  `);

  if (result.errors) {
    console.log(result.errors);
    return;
  }

  const postTemplate = require.resolve(
    "./src/templates/InstaModalPost/index.jsx"
  );
  result.data.allInstaNode.nodes.forEach((post) => {
    createPage({
      path: post.id,
      component: postTemplate,
      context: {
        id: post.id,
      },
    });
  });
};Copy

/** @jsx jsx */
import { useState } from "react";
import PropTypes from "prop-types";
import { jsx, Styled } from "theme-ui";
import { graphql, navigate, PageRenderer } from "gatsby";
import Img from "gatsby-image";
import Modal from "react-modal";
import Link from "@affectionatedoor/gatsby-theme-ui/src/components/Link";

import { Times, Heart, Comment } from "../../components/Icons";

import "./style.css";

Modal.setAppElement(`#___gatsby`);

const modalStyles = {
  overlay: {
    backgroundColor: "rgba(0, 0, 0, 0.58)",
  },
  content: {
    position: "relative",
    top: "auto",
    left: "auto",
    right: "auto",
    bottom: "auto",
    maxWidth: "960px",
    margin: "32px auto",
    padding: 0,
    border: 0,
  },
};

const InstaPostTemplate = ({
  data: {
    instaNode: {
      caption,
      comments,
      id,
      likes,
      localFile: {
        childImageSharp: { fluid },
      },
    },
  },
}) => {
  
  const [modalOpen, setModalOpen] = useState(true);
  const modalCloseTimeout = 300;
  const closeModal = () => {
    setModalOpen(false);
    setTimeout(() => navigate(`/`), modalCloseTimeout);
  };
  return (
    <div>
      <PageRenderer key={"/"} location={{ pathname: "/" }} />
      <Modal
        isOpen={modalOpen}
        onRequestClose={closeModal}
        style={modalStyles}
        contentLabel="Modal"
        closeTimeoutMS={modalCloseTimeout}
      >
        <Styled.root>
          <div
            sx={{
              bg: "background",
              display: "flex",
              flexDirection: "column",
              position: "relative",
            }}
          >
            <Link
              to="/"
              aria-label="close modal"
              sx={{
                width: "50px",
                height: "50px",
                position: "absolute",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                m: 3,
                right: 0,
                top: 0,
                zIndex: 1,
                color: "white",
                borderRadius: "50%",
                ":hover": {
                  color: "white",
                  bg: "#fbf9f926",
                },
              }}
              onClick={(e) => {
                e.preventDefault();
                closeModal();
              }}
            >
              <Times sx={{ fontSize: 4 }} />
            </Link>
            <Img title={id} fluid={fluid} />
            <div sx={{ mt: 3, px: [3, 4] }}>
              <small sx={{ mr: 3 }}>
                <Heart sx={{ color: "secondary", fontSize: 3 }} />{" "}
                {likes}
              </small>
              <small sx={{ mr: 3 }}>
                <Comment sx={{ color: "secondary", fontSize: 3 }} />{" "}
                {comments}
              </small>
            </div>
            <p sx={{ my: 4, px: [3, 4] }}>{caption}</p>
          </div>
        </Styled.root>
      </Modal>
    </div>
  );
};

InstaPostTemplate.propTypes = {
  data: PropTypes.shape({
    instaNode: PropTypes.shape({
      caption: PropTypes.string.isRequired,
      comments: PropTypes.number.isRequired,
      id: PropTypes.string.isRequired,
      likes: PropTypes.number.isRequired,
      localFile: PropTypes.shape({
        childImageSharp: PropTypes.shape({
          fluid: PropTypes.object.isRequired,
        }).isRequired,
      }).isRequired,
    }).isRequired,
  }).isRequired,
};

export default InstaPostTemplate;

export const query = graphql`
  query InstaPostModal($id: String) {
    instaNode(id: { eq: $id }) {
      likes
      id
      localFile {
        childImageSharp {
          fluid(maxWidth: 1200) {
            ...GatsbyImageSharpFluid
          }
        }
      }
      comments
      caption
    }
  }
`;Copy

/* react-modal transitions */
.ReactModal__Overlay {
  overflow: auto;
  opacity: 0;
  transform: translateY(-10%);
  transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), transform
      0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.ReactModal__Overlay--after-open {
  opacity: 1;
  transform: translateY(0);
}

.ReactModal__Overlay--before-close {
  opacity: 0;
  transform: translateY(-10%);
}Copy

import "@fortawesome/fontawesome-svg-core/styles.css";

// This only works if in the modal page you add a
// Link to the homepage.
export const onPrefetchPathname = ({ loadPage }) => {
  if (window.indexPageData === undefined) {
    loadPage("/").then((result) => {
      window.indexPageData = result;
      
      
      
      if (window.setIndexPageData) window.setIndexPageData();
    });
  }
};

// https://github.com/gatsbyjs/gatsby/issues/7454#issuecomment-425403812
export const shouldUpdateScroll = ({
  routerProps: { location },
  getSavedScrollPosition,
}) => {
  return getSavedScrollPosition(location);
};Copy

import { useState, useEffect } from "react";

// skipping imports and modal styles...

const InstaPostTemplate = (
  {
    // skipping props..
  }
) => {
  
  const building = typeof window === "undefined";
  const [indexPageData, setIndexPageData] = useState(
    !building && window.indexPageData
  );
  useEffect(() => {
    window.setIndexPageData = () => {
      setIndexPageData(window.indexPageData);
    };
  }, []);

  // Modal stuff.
  const [modalOpen, setModalOpen] = useState(true);
  const modalCloseTimeout = 300;
  const closeModal = () => {
    setModalOpen(false);
    setTimeout(() => navigate(`/`), modalCloseTimeout);
  };
  return (
    <div>
      <PageRenderer
        key={"/"}
        location={{ pathname: "/" }}
        pageResources={indexPageData}
        path="/"
      />
      {/* skipping... */}
    </div>
  );
};Copy