chore: logs and make sure state defaults to closed modal

ApollosProject · Dec 4, 2024 · faf3603 · faf3603
1 parent e0730c7
commit faf3603
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git a/packages/web-shared/components/Modal/Modal.js b/packages/web-shared/components/Modal/Modal.js
@@ -27,10 +27,14 @@ function ChurchLogo(props) {
 const Modal = (props = {}) => {
   const [state, dispatch] = useModal();
 
+  console.log('Modal props: ', props);
+
   const ref = useRef();
   const imageRef = useRef();
   const { id, navigate } = useNavigation();
 
+  console.log('Navigation ID: ', id);
+
   useEffect(() => {
     // Watch for changes to the `id` search param
     if (id) {
@@ -70,7 +74,7 @@ const Modal = (props = {}) => {
 
   return (
     <Box>
-      <Styled.Modal className="apollos-modal" show={state.isOpen}>
+      <Styled.Modal className="apollos-modal" show={state.isOpen ?? false}>
         {state.content ? (
           <>
             <Styled.ModalContainer ref={ref} role="dialog" tabIndex={-1} aria-dialog={true}>

diff --git a/packages/web-shared/components/Modal/Modal.styles.js b/packages/web-shared/components/Modal/Modal.styles.js
@@ -38,8 +38,8 @@ const Modal = withTheme(styled.div`
   justify-content: center;
   align-items: center;
   z-index: 9999;
-  animation: ${(props) => (props.show ? slideIn : slideOut)} 0.3s ease-in-out;
-  transform: translateY(${(props) => (props.show ? '0' : '100%')});
+  animation: ${(props) => (props?.show ? slideIn : slideOut)} 0.3s ease-in-out;
+  transform: translateY(${(props) => (props?.show ? '0' : '100%')});
   ${system};
 `);