-
Notifications
You must be signed in to change notification settings - Fork 165
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Adjust toc and snippet styles * Adjust styles for non-ideal-state * Add error boundary * Add tests for sicp error component * Change redirect to useHistory hook * Tweak math font size * Remove redundant css * Adjust font size of code block * Move error related files into features folder * Fix scrolling issues * Fix scroll bug * Fix formatting * Separate refs from large sections
- Loading branch information
1 parent
3245d0a
commit 434513f
Showing
9 changed files
with
296 additions
and
92 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import { Component, ErrorInfo, ReactNode } from 'react'; | ||
|
|
||
| import getSicpError, { SicpErrorType } from './SicpErrors'; | ||
|
|
||
| type Props = { | ||
| children: ReactNode; | ||
| }; | ||
|
|
||
| type State = { | ||
| hasError: boolean; | ||
| }; | ||
|
|
||
| class SicpErrorBoundary extends Component<Props, State> { | ||
| public state: State = { | ||
| hasError: false | ||
| }; | ||
|
|
||
| public static getDerivedStateFromError(_: Error): State { | ||
| // Update state so the next render will show the fallback UI. | ||
| return { hasError: true }; | ||
| } | ||
|
|
||
| public componentDidCatch(error: Error, errorInfo: ErrorInfo) { | ||
| console.error('Uncaught error:', error, errorInfo); | ||
| } | ||
|
|
||
| public render() { | ||
| if (this.state.hasError) { | ||
| return getSicpError(SicpErrorType.UNEXPECTED_ERROR); | ||
| } | ||
|
|
||
| return this.props.children; | ||
| } | ||
| } | ||
|
|
||
| export default SicpErrorBoundary; |
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,58 @@ | ||
| import { NonIdealState } from '@blueprintjs/core'; | ||
| import { IconNames } from '@blueprintjs/icons'; | ||
|
|
||
| export enum SicpErrorType { | ||
| UNEXPECTED_ERROR, | ||
| PAGE_NOT_FOUND_ERROR, | ||
| PARSING_ERROR | ||
| } | ||
|
|
||
| const unexpectedError = ( | ||
| <div> | ||
| Something unexpected went wrong trying to load this page. Please try refreshing the page. If the | ||
| issue persists, kindly let us know by filing an issue at{' '} | ||
| <a href="https://github.com/source-academy/cadet-frontend"> | ||
| https://github.com/source-academy/cadet-frontend | ||
| </a> | ||
| . | ||
| </div> | ||
| ); | ||
|
|
||
| const pageNotFoundError = ( | ||
| <div> | ||
| We could not find the page you were looking for. Please check the URL again. If you believe the | ||
| URL is correct, kindly let us know by filing an issue at{' '} | ||
| <a href="https://github.com/source-academy/cadet-frontend"> | ||
| https://github.com/source-academy/cadet-frontend | ||
| </a> | ||
| . | ||
| </div> | ||
| ); | ||
|
|
||
| const parsingError = ( | ||
| <div> | ||
| An error occured while loading the page. Kindly let us know by filing an issue at{' '} | ||
| <a href="https://github.com/source-academy/cadet-frontend"> | ||
| https://github.com/source-academy/cadet-frontend | ||
| </a>{' '} | ||
| and we will get it fixed as soon as possible. | ||
| </div> | ||
| ); | ||
|
|
||
| const errorComponent = (description: JSX.Element) => ( | ||
| <NonIdealState title="Something went wrong :(" description={description} icon={IconNames.ERROR} /> | ||
| ); | ||
|
|
||
| const getSicpError = (type: SicpErrorType) => { | ||
| switch (type) { | ||
| case SicpErrorType.PAGE_NOT_FOUND_ERROR: | ||
| return errorComponent(pageNotFoundError); | ||
| case SicpErrorType.PARSING_ERROR: | ||
| return errorComponent(parsingError); | ||
| default: | ||
| // handle unexpected error case | ||
| return errorComponent(unexpectedError); | ||
| } | ||
| }; | ||
|
|
||
| export default getSicpError; |
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,20 @@ | ||
| import { mount } from 'enzyme'; | ||
|
|
||
| import getSicpError, { SicpErrorType } from '../SicpErrors'; | ||
|
|
||
| describe('Sicp errors:', () => { | ||
| test('unexpected error renders correctly', () => { | ||
| const tree = mount(getSicpError(SicpErrorType.UNEXPECTED_ERROR)); | ||
| expect(tree.debug()).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| test('page not found error renders correctly', () => { | ||
| const tree = mount(getSicpError(SicpErrorType.PAGE_NOT_FOUND_ERROR)); | ||
| expect(tree.debug()).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| test('unexpected error renders correctly', () => { | ||
| const tree = mount(getSicpError(SicpErrorType.PARSING_ERROR)); | ||
| expect(tree.debug()).toMatchSnapshot(); | ||
| }); | ||
| }); |
98 changes: 98 additions & 0 deletions
98
src/features/sicp/errors/__tests__/__snapshots__/SicpErrors.tsx.snap
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,98 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`Sicp errors: page not found error renders correctly 1`] = ` | ||
| "<Blueprint3.NonIdealState title=\\"Something went wrong :(\\" description={{...}} icon=\\"error\\"> | ||
| <div className=\\"bp3-non-ideal-state\\"> | ||
| <div className=\\"bp3-non-ideal-state-visual\\"> | ||
| <Blueprint3.Icon icon=\\"error\\" iconSize={60}> | ||
| <span icon=\\"error\\" className=\\"bp3-icon bp3-icon-error\\" title={[undefined]}> | ||
| <svg fill={[undefined]} data-icon=\\"error\\" width={60} height={60} viewBox=\\"0 0 20 20\\"> | ||
| <desc> | ||
| error | ||
| </desc> | ||
| <path d=\\"M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0zm1 16H9v-2h2v2zm0-3H9V4h2v9z\\" fillRule=\\"evenodd\\" /> | ||
| </svg> | ||
| </span> | ||
| </Blueprint3.Icon> | ||
| </div> | ||
| <Component> | ||
| <h4 className=\\"bp3-heading\\"> | ||
| Something went wrong :( | ||
| </h4> | ||
| </Component> | ||
| <div> | ||
| We could not find the page you were looking for. Please check the URL again. If you believe the URL is correct, kindly let us know by filing an issue at | ||
| <a href=\\"https://github.com/source-academy/cadet-frontend\\"> | ||
| https://github.com/source-academy/cadet-frontend | ||
| </a> | ||
| . | ||
| </div> | ||
| </div> | ||
| </Blueprint3.NonIdealState>" | ||
| `; | ||
| exports[`Sicp errors: unexpected error renders correctly 1`] = ` | ||
| "<Blueprint3.NonIdealState title=\\"Something went wrong :(\\" description={{...}} icon=\\"error\\"> | ||
| <div className=\\"bp3-non-ideal-state\\"> | ||
| <div className=\\"bp3-non-ideal-state-visual\\"> | ||
| <Blueprint3.Icon icon=\\"error\\" iconSize={60}> | ||
| <span icon=\\"error\\" className=\\"bp3-icon bp3-icon-error\\" title={[undefined]}> | ||
| <svg fill={[undefined]} data-icon=\\"error\\" width={60} height={60} viewBox=\\"0 0 20 20\\"> | ||
| <desc> | ||
| error | ||
| </desc> | ||
| <path d=\\"M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0zm1 16H9v-2h2v2zm0-3H9V4h2v9z\\" fillRule=\\"evenodd\\" /> | ||
| </svg> | ||
| </span> | ||
| </Blueprint3.Icon> | ||
| </div> | ||
| <Component> | ||
| <h4 className=\\"bp3-heading\\"> | ||
| Something went wrong :( | ||
| </h4> | ||
| </Component> | ||
| <div> | ||
| Something unexpected went wrong trying to load this page. Please try refreshing the page. If the issue persists, kindly let us know by filing an issue at | ||
| <a href=\\"https://github.com/source-academy/cadet-frontend\\"> | ||
| https://github.com/source-academy/cadet-frontend | ||
| </a> | ||
| . | ||
| </div> | ||
| </div> | ||
| </Blueprint3.NonIdealState>" | ||
| `; | ||
| exports[`Sicp errors: unexpected error renders correctly 2`] = ` | ||
| "<Blueprint3.NonIdealState title=\\"Something went wrong :(\\" description={{...}} icon=\\"error\\"> | ||
| <div className=\\"bp3-non-ideal-state\\"> | ||
| <div className=\\"bp3-non-ideal-state-visual\\"> | ||
| <Blueprint3.Icon icon=\\"error\\" iconSize={60}> | ||
| <span icon=\\"error\\" className=\\"bp3-icon bp3-icon-error\\" title={[undefined]}> | ||
| <svg fill={[undefined]} data-icon=\\"error\\" width={60} height={60} viewBox=\\"0 0 20 20\\"> | ||
| <desc> | ||
| error | ||
| </desc> | ||
| <path d=\\"M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0zm1 16H9v-2h2v2zm0-3H9V4h2v9z\\" fillRule=\\"evenodd\\" /> | ||
| </svg> | ||
| </span> | ||
| </Blueprint3.Icon> | ||
| </div> | ||
| <Component> | ||
| <h4 className=\\"bp3-heading\\"> | ||
| Something went wrong :( | ||
| </h4> | ||
| </Component> | ||
| <div> | ||
| An error occured while loading the page. Kindly let us know by filing an issue at | ||
| <a href=\\"https://github.com/source-academy/cadet-frontend\\"> | ||
| https://github.com/source-academy/cadet-frontend | ||
| </a> | ||
| and we will get it fixed as soon as possible. | ||
| </div> | ||
| </div> | ||
| </Blueprint3.NonIdealState>" | ||
| `; |
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
Oops, something went wrong.