-
Notifications
You must be signed in to change notification settings - Fork 16
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #627 from dhis2/alpha
feat: add PWA capabilities
- Loading branch information
Showing
58 changed files
with
17,592 additions
and
1,080 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,123 @@ | ||
| import i18n from '@dhis2/d2-i18n' | ||
| import cx from 'classnames' | ||
| import PropTypes from 'prop-types' | ||
| import React, { Component } from 'react' | ||
| import buttonStyles from './styles/Button.style' | ||
| import styles from './styles/ErrorBoundary.style' | ||
|
|
||
| // In order to avoid using @dhis2/ui components in the error boundary - as anything | ||
| // that breaks within it will not be caught properly - we define a component | ||
| // with the same styles as Button | ||
| const UIButton = ({ children, onClick }) => ( | ||
| <> | ||
| <style jsx>{buttonStyles}</style> | ||
| <button onClick={onClick}>{children}</button> | ||
| </> | ||
| ) | ||
|
|
||
| UIButton.propTypes = { | ||
| children: PropTypes.node.isRequired, | ||
| onClick: PropTypes.func.isRequired, | ||
| } | ||
|
|
||
| const translatedErrorHeading = i18n.t( | ||
| 'An error occurred in the DHIS2 application.' | ||
| ) | ||
|
|
||
| export class ErrorBoundary extends Component { | ||
| constructor(props) { | ||
| super(props) | ||
| this.state = { | ||
| error: null, | ||
| errorInfo: null, | ||
| drawerOpen: false, | ||
| } | ||
| this.errorDetailsRef = React.createRef() | ||
| } | ||
|
|
||
| componentDidCatch(error, errorInfo) { | ||
| this.setState({ | ||
| error, | ||
| errorInfo, | ||
| }) | ||
| } | ||
|
|
||
| toggleTechInfoDrawer = () => { | ||
| this.setState({ | ||
| drawerOpen: !this.state.drawerOpen, | ||
| }) | ||
| } | ||
|
|
||
| handleCopyErrorDetails = () => { | ||
| const errorDetails = this.errorDetailsRef.current.textContent | ||
| navigator.clipboard.writeText(errorDetails).then(() => { | ||
| alert(i18n.t('Technical details copied to clipboard')) | ||
| }) | ||
| } | ||
|
|
||
| render() { | ||
| const { children, fullscreen, onRetry } = this.props | ||
| if (this.state.error) { | ||
| return ( | ||
| <div className={cx('mask', { fullscreen })}> | ||
| <style jsx>{styles}</style> | ||
| <div className="container"> | ||
| <h1 className="message"> | ||
| {i18n.t('Something went wrong')} | ||
| </h1> | ||
| {onRetry && ( | ||
| <div className="retry"> | ||
| <UIButton onClick={onRetry}> | ||
| {i18n.t('Try again')} | ||
| </UIButton> | ||
| </div> | ||
| )} | ||
| <button | ||
| className="drawerToggle" | ||
| onClick={this.toggleTechInfoDrawer} | ||
| > | ||
| {this.state.drawerOpen | ||
| ? i18n.t('Hide technical details') | ||
| : i18n.t('Show technical details')} | ||
| </button> | ||
| <div | ||
| className={cx('drawer', { | ||
| hidden: !this.state.drawerOpen, | ||
| })} | ||
| > | ||
| <div className="errorIntro"> | ||
| <p>{translatedErrorHeading}</p> | ||
| <p> | ||
| {i18n.t( | ||
| 'The following information may be requested by technical support.' | ||
| )} | ||
| </p> | ||
| <UIButton onClick={this.handleCopyErrorDetails}> | ||
| {i18n.t( | ||
| 'Copy technical details to clipboard' | ||
| )} | ||
| </UIButton> | ||
| </div> | ||
| <pre | ||
| className="errorDetails" | ||
| ref={this.errorDetailsRef} | ||
| > | ||
| {`${this.state.error}\n`} | ||
| {this.state.error.stack} | ||
| {this.state.errorInfo.componentStack} | ||
| </pre> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| return children | ||
| } | ||
| } | ||
|
|
||
| ErrorBoundary.propTypes = { | ||
| children: PropTypes.node.isRequired, | ||
| fullscreen: PropTypes.bool, | ||
| onRetry: PropTypes.func, | ||
| } |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.