Merge pull request #31 from lachouettecoop/navigation-scannette

Navigation scannette

.env.dist

@@ -13,6 +13,9 @@ GATSBY_ZULIP_BOT_EMAIL=participation-bot@lachouettecoop.zulipchat.com
 GATSBY_ZULIP_BOT_APIKEY=xxxxx
 GATSBY_ZULIP_URL=https://lachouettecoop.zulipchat.com
 
+# See https://github.com/lachouettecoop/participation/issues/8
+GATSBY_AUTOREDIRECT_DELAY_IN_S=30
+
 # See https://www.gatsbyjs.org/packages/gatsby-source-google-sheets/?=sheet#step-1-set-up-sheetspermissions
 # to retrieve the credentials and configure an access to the Google Sheet.
 # Then converts the JSON below in the corresponding env variable

src/components/BrowseByBarcode.js

@@ -6,17 +6,19 @@ import { FaBarcode, FaArrowCircleRight } from "react-icons/fa";
 import IconButton from "../ui/IconButton";
 import FormGroup from "../ui/FormGroup";
 
-const BrowseByBarcode = () => {
+import "../polyfills/focus-options-polyfill";
+
+const BrowseByBarcode = ({ preventScroll = false, ...props }) => {
   const barcodeElement = useRef(null);
   const handleSubmitBarcode = e => {
     e.preventDefault();
     navigate(`/chouettos/${barcodeElement.current.value}`);
   };
 
-  useEffect(() => barcodeElement.current.focus());
+  useEffect(() => barcodeElement.current.focus({ preventScroll }));
 
   return (
-    <Box>
+    <Box {...props}>
       <Heading>Rechercher un·e Chouettos</Heading>
       <form onSubmit={handleSubmitBarcode}>
         <FormGroup htmlFor="barcode" label="Numéro de carte">

src/polyfills/focus-options-polyfill.js

@@ -0,0 +1,44 @@
+/* eslint-disable */
+// Source: https://github.com/calvellido/focus-options-polyfill/blob/cc11aebb9141a36e7b5fd19e19a65201a63009ae/index.js
+// focus - focusOptions - preventScroll polyfill
+var supportsPreventScrollOption = false;
+try {
+  var focusElem = window.createElement("div");
+  focusElem.addEventListener(
+    "focus",
+    function(event) {
+      event.preventDefault();
+      event.stopPropagation();
+    },
+    true
+  );
+  // document.documentElement.focus(
+  focusElem.focus(
+    Object.defineProperty({}, "preventScroll", {
+      get: function() {
+        supportsPreventScrollOption = true;
+      }
+    })
+  );
+} catch (e) {}
+
+if (
+  HTMLElement.prototype.nativeFocus === undefined &&
+  !supportsPreventScrollOption
+) {
+  HTMLElement.prototype.nativeFocus = HTMLElement.prototype.focus;
+
+  var patchedFocus = function(args) {
+    var actualPosition = window.scrollY;
+    this.nativeFocus();
+    if (args && args.preventScroll) {
+      // Hijacking the event loop order, since the focus() will trigger
+      // internally an scroll that goes to the event loop
+      setTimeout(function() {
+        window.scroll(window.scrollX, actualPosition);
+      }, 0);
+    }
+  };
+
+  HTMLElement.prototype.focus = patchedFocus;
+}

src/templates/chouettos.js

@@ -4,11 +4,14 @@ import { Text, Flex } from "rebass";
 
 import Page404 from "../pages/404";
 import Layout from "../components/layout";
+
 import DernierePiaf from "../components/Indicateurs/DernierePiaf";
 import ProchainePiaf from "../components/Indicateurs/ProchainePiaf";
 import RecapGlobal from "../components/Indicateurs/RecapGlobal";
-import Barcode from "../ui/Barcode";
 import FriseCalendrier from "../components/Indicateurs/FriseCalendrier";
+import BrowseByBarcode from "../components/BrowseByBarcode";
+
+import Barcode from "../ui/Barcode";
 
 export default ({ data }) => {
   if (!data.allChouettos || !data.allGoogleSheetSuiviRow) return <Page404 />;
@@ -62,6 +65,8 @@ export default ({ data }) => {
         width={1}
         py={5}
       />
+
+      <BrowseByBarcode preventScroll mt={5} />
     </Layout>
   );
 };

src/ui/BackHome.js

@@ -0,0 +1,33 @@
+import { navigate } from "gatsby";
+import React, { useEffect, useState } from "react";
+import { FaHome } from "react-icons/fa";
+import IconButton from "./IconButton";
+
+const BackHome = ({ autoRedirect = false }) => {
+  const [redirectInS, setRedirectInS] = useState(
+    process.env.GATSBY_AUTOREDIRECT_DELAY_IN_S || 30
+  );
+
+  useEffect(() => {
+    if (!autoRedirect) {
+      return;
+    }
+    if (redirectInS <= 0) {
+      navigate("/");
+      return;
+    }
+
+    const timerID = setInterval(() => setRedirectInS(v => v - 1), 1000);
+    return function cleanup() {
+      clearInterval(timerID);
+    };
+  }, [redirectInS, autoRedirect]);
+
+  return (
+    <IconButton icon={FaHome} variant="secondary">
+      Retour à l’accueil {autoRedirect && `(${redirectInS})`}
+    </IconButton>
+  );
+};
+
+export default BackHome;

src/ui/PageHead.js

@@ -2,10 +2,9 @@ import React from "react";
 import PropTypes from "prop-types";
 import { Link } from "gatsby";
 import { Heading, Box, Text } from "rebass";
-import Container from "./Container";
-import { FaHome } from "react-icons/fa";
 
-import IconButton from "../ui/IconButton";
+import Container from "./Container";
+import BackHome from "./BackHome";
 import Logo from "../ui/Logo";
 
 import { Match } from "@reach/router";
@@ -30,9 +29,11 @@ const PageHead = ({ title, children }) => (
             <Link to="/">
               <Logo height={"10vh"} />
               <br />
-              <IconButton icon={FaHome} variant="secondary">
-                Retour à l’accueil
-              </IconButton>
+              <Match path="/chouettos/:id">
+                {({ match: isChouettosPage }) => (
+                  <BackHome autoRedirect={isChouettosPage} />
+                )}
+              </Match>
             </Link>
           )
         }