Ensure scroll to top on content change

ApollosProject · Jan 26, 2024 · f579560 · f579560
1 parent 5554f0b
commit f579560
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 65 deletions.
diff --git a/packages/web-shared/components/Modal/Modal.js b/packages/web-shared/components/Modal/Modal.js
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { useCurrentChurch } from '../../hooks';
 import { systemPropTypes } from '../../ui-kit/_lib/system';
 import Styled from './Modal.styles';
@@ -33,6 +33,7 @@ const Modal = (props = {}) => {
   const [state, dispatch] = useModal();
   const [searchParams, setSearchParams] = useSearchParams();
   const dispatchBreadcrumb = useBreadcrumbDispatch();
+  const ref = useRef();
 
   useEffect(() => {
     // Watch for changes to the `id` search param
@@ -56,12 +57,19 @@ const Modal = (props = {}) => {
     body.style.overflow = state.isOpen ? 'hidden' : 'auto';
   }, [state.isOpen]);
 
+  // When the content changes, scroll to the top of the page
+  useEffect(() => {
+    if (state.content && ref.current) {
+      ref.current.scrollTo(0, 0);
+    }
+  }, [state.content]);
+
   return (
     <Box>
       <Styled.Modal show={state.isOpen}>
         {state.content ? (
           <>
-            <Styled.ModalContainer>
+            <Styled.ModalContainer ref={ref}>
               <Box
                 width="100%"
                 display="flex"
@@ -82,20 +90,20 @@ const Modal = (props = {}) => {
                 />
               </Box>
               <Box
-                  width={{ _: '100%', sm: '10%' }}
-                  mb={{ _: 'xs', sm: '0' }}
-                  ml={{ _: '0', sm: 'xs' }}
-                  display="flex"
-                  justifyContent="flex-end"
-                  alignItems="center"
-                  position="absolute"
-                  top="xs"
-                  right="xs"
-                >
-                  <Styled.Icon onClick={handleCloseModal} ml={{ _: 'auto', sm: '0' }}>
-                    <X size={16} weight="bold" />
-                  </Styled.Icon>
-                </Box>              
+                width={{ _: '100%', sm: '10%' }}
+                mb={{ _: 'xs', sm: '0' }}
+                ml={{ _: '0', sm: 'xs' }}
+                display="flex"
+                justifyContent="flex-end"
+                alignItems="center"
+                position="absolute"
+                top="xs"
+                right="xs"
+              >
+                <Styled.Icon onClick={handleCloseModal} ml={{ _: 'auto', sm: '0' }}>
+                  <X size={16} weight="bold" />
+                </Styled.Icon>
+              </Box>
               <Box
                 width="100%"
                 display="flex"

diff --git a/packages/web-shared/providers/AppProvider.js b/packages/web-shared/providers/AppProvider.js
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { ApolloProvider } from '@apollo/client';
 

diff --git a/web-embeds/public/index.html b/web-embeds/public/index.html
@@ -1,21 +1,19 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web embed created using The Apollos Project"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="Web embed created using The Apollos Project" />
+  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+  <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -24,30 +22,30 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Apollos Web Embeds</title>
-    <style>
-      body {
-        font-family:
-          "Inter",
-          -apple-system,
-          BlinkMacSystemFont,
-          Segoe UI,
-          Roboto,
-          Oxygen,
-          Ubuntu,
-          Cantarell,
-          Fira Sans,
-          Droid Sans,
-          Helvetica Neue,
-          sans-serif;
-      }
-    </style>
-  </head>
+  <title>Apollos Web Embeds</title>
+  <style>
+    body {
+      font-family:
+        "Inter",
+        -apple-system,
+        BlinkMacSystemFont,
+        Segoe UI,
+        Roboto,
+        Oxygen,
+        Ubuntu,
+        Cantarell,
+        Fira Sans,
+        Droid Sans,
+        Helvetica Neue,
+        sans-serif;
+    }
+  </style>
+</head>
 
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <!-- This is an example of how to use the apollos widgets -->
-    <!-- <div
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <!-- This is an example of how to use the apollos widgets -->
+  <!-- <div
       data-church="cedar_creek"
       data-type="FeatureFeed"
       data-feature-feed="FeatureFeed:5aae43e6-3526-4cd2-8dfe-771d2ce8a333"
@@ -57,15 +55,15 @@
       style="max-width: 1180px; padding: 40px; margin: auto; margin-top: 20px"
     ></div> -->
 
-    <!-- <div
+  <!-- <div
       data-type="FeatureFeed"
       data-church="liquid_church"
       data-feature-feed="FeatureFeed:d292fd8c-5b9f-4cd7-a2fe-9d7d0914c34f"
       data-placeholder="Life Is Hard. How Can We Help?"
       data-modal="true"
       class="apollos-widget"
     ></div> -->
-    <!-- 
+  <!-- 
     <div
       data-church="cedar_creek"
       data-type="Search"
@@ -74,14 +72,9 @@
       class="apollos-widget"
       style="max-width: 1180px; padding: 40px; margin: auto; margin-top: 20px"
     ></div> -->
-    <div
-      data-church="bayside"
-      data-type="Auth"
-      data-modal="true"
-      class="apollos-widget"
-      style="max-width: 1180px; padding: 40px; margin: auto; margin-top: 20px"
-    ></div>
-    <!--
+  <div data-church="liquid_church" data-type="Auth" data-modal="true" class="apollos-widget"
+    style="max-width: 1180px; padding: 40px; margin: auto; margin-top: 20px"></div>
+  <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -91,5 +84,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-  </body>
-</html>
+</body>
+
+</html>