abhi-plugin-gatsby-preview/gatsby-browser.js

A Gatsby plugin shows status of cloud preview

"use strict";

const React = require("react");

const io = require("socket.io-client");

function PreviewProvider({
  children
}) {
  const [showStatusBar, setShowStatus] = React.useState(false);
  const [message, setMessage] = React.useState("");
  React.useEffect(() => {
    const socket = io();
    socket.on("connect", () => {
      console.log("Connected to Gatsby Preview");
    });
    socket.on("status", data => {
      console.log(`Received data for status msg`, data, typeof data);
      let jsonData;

      try {
        jsonData = JSON.parse(data);
      } catch (e) {
        console.error(e);
      }

      console.log(jsonData);
      const event = jsonData && jsonData.event;

      if (event) {
        setShowStatus(true);
      }

      if (event === "SUCCESS") {
        setMessage("You Gatsby Preview is reloading...");
        setTimeout(() => {
          window.location.reload();
        }, 1000);
      } else {
        setMessage("You Gatsby Preview is building, the page will reload when complete...");
      }
    });
    return () => {
      return socket.close();
    };
  });
  return /*#__PURE__*/React.createElement(React.Fragment, null, showStatusBar && /*#__PURE__*/React.createElement("div", {
    style: {
      position: `fixed`,
      width: `100%`,
      top: 0,
      left: 0,
      backgroundColor: `purple`,
      color: `white`,
      textAlign: `center`
    }
  }, message), children);
}

exports.wrapRootElement = ({
  element
}) => {
  return /*#__PURE__*/React.createElement(PreviewProvider, null, element);
};