From 1b2fab49aff8bb998178e1d6143ef76a69e531ad Mon Sep 17 00:00:00 2001 From: Corey Peterson Date: Wed, 11 Oct 2023 11:22:00 -0400 Subject: [PATCH 1/2] Converts modal component from class-based to functional --- src/components/modal.jsx | 79 ++++++++++++++++------------------------ 1 file changed, 32 insertions(+), 47 deletions(-) diff --git a/src/components/modal.jsx b/src/components/modal.jsx index a93719b8a..03452be82 100644 --- a/src/components/modal.jsx +++ b/src/components/modal.jsx @@ -1,60 +1,45 @@ -import React from 'react' -import { createPortal } from 'react-dom'; +import React, { useRef, useEffect } from 'react' +import { createPortal } from 'react-dom' + import './modal.scss' -class Modal extends React.Component { - constructor( props ) { - super( props ) - // create an element div for this modal - this.modalRef = React.createRef() - this.element = document.createElement( 'div' ) - this.clickOutsideListener = this.clickOutsideListener.bind(this) +const Modal = (props) => { - // We get hold of the div with the id modal that we have created in index.html - this.modalRoot = document.getElementById( 'modal' ) - } + const innerModalRef = useRef(null) - clickOutsideListener(event){ + const clickOutsideListener = (event) => { // Do nothing if clicking ref's element or descendent elements - if (!this.modalRef.current || this.modalRef.current.contains(event.target)) { - return - } + if (!innerModalRef.current || innerModalRef.current.contains(event.target)) return + if (props.ignoreClose != true) props.onClose() + } - if (this.props.ignoreClose !== true) { - this.props.onClose() - } - }; + useEffect(() => { - componentDidMount() { - this.modalRoot.appendChild( this.element ) - document.addEventListener('mousedown', this.clickOutsideListener) - document.addEventListener('touchstart', this.clickOutsideListener) - } + document.addEventListener('mouseup', clickOutsideListener) + document.addEventListener('touchend', clickOutsideListener) - componentWillUnmount() { - this.modalRoot.removeChild( this.element ) - document.removeEventListener('mousedown', this.clickOutsideListener) - document.removeEventListener('touchstart', this.clickOutsideListener) - } + return () => { + document.removeEventListener('mouseup', clickOutsideListener) + document.removeEventListener('touchend', clickOutsideListener) + } - render() { - const stuff = ( - <> - - -
- X -
- {this.props.children} -
+ },[]) + + const modal = + (<> + +
+ X +
+ {props.children}
- - ) - return createPortal( stuff, this.element ); - } +
+ ) + + return createPortal(modal, document.getElementById('modal')) } export default Modal From 42feccd060b7bb2267e6324a7ed5e5ad98a8ec54 Mon Sep 17 00:00:00 2001 From: Corey Peterson Date: Wed, 11 Oct 2023 14:07:41 -0400 Subject: [PATCH 2/2] Tweaks to alert modal component styling. Replaced invalidLogin handling with invalid login alert modal. --- src/components/invalid-login-modal.jsx | 21 +++++++++++++++++++ src/components/modal.scss | 4 +++- .../my-widgets-collaborate-dialog.jsx | 8 ++++--- src/components/my-widgets-page.jsx | 14 ++++++++----- 4 files changed, 38 insertions(+), 9 deletions(-) create mode 100644 src/components/invalid-login-modal.jsx diff --git a/src/components/invalid-login-modal.jsx b/src/components/invalid-login-modal.jsx new file mode 100644 index 000000000..5a60d7430 --- /dev/null +++ b/src/components/invalid-login-modal.jsx @@ -0,0 +1,21 @@ +import React from 'react' +import Modal from './modal' + +const InvalidLoginModal = ({onClose}) => ( + +
+ + Your Session is No Longer Valid + +

Your session with Materia is considered invalid and you have been logged out. You'll have to log back in to see this content.

+ + + Okay + + +
+ +) + +export default InvalidLoginModal diff --git a/src/components/modal.scss b/src/components/modal.scss index 5be5cd45e..4be1b2faf 100644 --- a/src/components/modal.scss +++ b/src/components/modal.scss @@ -34,6 +34,8 @@ z-index: 1003; width: 540px; min-height: 200px; + + text-align: center; } } .closed { @@ -102,7 +104,7 @@ .alert-title { border-bottom: solid 1px #bebebe; - text-align: left; + text-align: center; position: static; display: block; font-weight: bold; diff --git a/src/components/my-widgets-collaborate-dialog.jsx b/src/components/my-widgets-collaborate-dialog.jsx index 560e63062..aaff665f5 100644 --- a/src/components/my-widgets-collaborate-dialog.jsx +++ b/src/components/my-widgets-collaborate-dialog.jsx @@ -295,9 +295,11 @@ const MyWidgetsCollaborateDialog = ({onClose, inst, myPerms, otherUserPerms, set if (state.shareNotAllowed === true) { noShareWarningRender = ( - Share Not Allowed -

Access must be set to "Guest Mode" to collaborate with students.

- +
+ Share Not Allowed +

Access must be set to "Guest Mode" to collaborate with students.

+ +
) } diff --git a/src/components/my-widgets-page.jsx b/src/components/my-widgets-page.jsx index dd8ee8a20..0f0c08f1e 100644 --- a/src/components/my-widgets-page.jsx +++ b/src/components/my-widgets-page.jsx @@ -5,6 +5,7 @@ import rawPermsToObj from '../util/raw-perms-to-object' import Header from './header' import MyWidgetsSideBar from './my-widgets-side-bar' import MyWidgetSelectedInstance from './my-widgets-selected-instance' +import InvalidLoginModal from './invalid-login-modal' import LoadingIcon from './loading-icon' import useInstanceList from './hooks/useInstanceList' import useCopyWidget from './hooks/useCopyWidget' @@ -68,11 +69,6 @@ const MyWidgetsPage = () => { } }, [validCode]) - // hook associated with the invalidLogin error - useEffect(() => { - if (invalidLogin) window.location.reload(); - }, [invalidLogin]) - // hook to attach the hashchange event listener to the window useEffect(() => { window.addEventListener('hashchange', listenToHashChange) @@ -300,6 +296,13 @@ const MyWidgetsPage = () => { ) } + let invalidLoginRender = null + if (invalidLogin) { + invalidLoginRender = ( + { window.location.href = 'users/logout' }}> + ) + } + /** * If the user is loading, show a loading screen. If the user is fetching, show a loading screen. If * the user has no widgets, show a message. If the user has no selected widget, show a message. If the @@ -383,6 +386,7 @@ const MyWidgetsPage = () => {
{widgetCatalogCalloutRender} + {invalidLoginRender}