Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
11 changed files
with
406 additions
and
294 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,104 @@ | ||
| import React, { ReactElement } from 'react'; | ||
| import { useDispatch, useSelector } from 'react-redux'; | ||
| import Button from '@material-ui/core/Button'; | ||
| import Grid from '@material-ui/core/Grid'; | ||
| import TextField from '@material-ui/core/TextField'; | ||
|
|
||
| import NestedState from './NestedState'; | ||
|
|
||
| import { countAction, HelperState } from '../redux'; | ||
|
|
||
| export interface DemoContainerProps { | ||
| title: string; | ||
| withRedux?: boolean; | ||
| } | ||
|
|
||
| const selectEntireState = (state: HelperState): HelperState => state; | ||
|
|
||
| let totalInstanceCount = 0; | ||
|
|
||
| const DemoContainer: React.FC<DemoContainerProps> = (props: DemoContainerProps): ReactElement => { | ||
| const { title, withRedux } = props; | ||
|
|
||
| // A simple per-Component instance counter | ||
| const myInstanceNumRef = React.useRef(0); | ||
| if (!myInstanceNumRef.current) { | ||
| totalInstanceCount++; | ||
| myInstanceNumRef.current = totalInstanceCount; | ||
| } | ||
| const myInstanceNum = myInstanceNumRef.current; | ||
|
|
||
| const titleWithMyInstanceNum = `${title} (#${myInstanceNum})`; | ||
|
|
||
| const mountTimeString = React.useRef(new Date().toUTCString()).current; | ||
| const renderCount = ++React.useRef(0).current; | ||
|
|
||
| React.useEffect((): (() => void) => { | ||
| console.log(`DemoContainer ${titleWithMyInstanceNum} mounted`); | ||
| return (): void => console.log(`DemoContainer ${titleWithMyInstanceNum} unmounted`); | ||
| }, []); | ||
|
|
||
| React.useEffect(() => { | ||
| console.log(`DemoContainer ${titleWithMyInstanceNum} rendered`); | ||
| }); | ||
|
|
||
| // Our own local state | ||
| const [value1, setValue1] = React.useState(''); | ||
| // Global state, if appropriate | ||
| let reduxContent; | ||
| if (withRedux) { | ||
| const state = useSelector(selectEntireState); | ||
| const dispatch = useDispatch(); | ||
|
|
||
| reduxContent = ( | ||
| <Grid item xs={4}> | ||
| <p>A redux-connected component</p> | ||
| <Button | ||
| variant="contained" | ||
| onClick={(): void => { | ||
| dispatch(countAction()); | ||
| }} | ||
| > | ||
| Dispatch a counter update | ||
| </Button> | ||
| <pre>{JSON.stringify(state, null, 2)}</pre> | ||
| </Grid> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <fieldset> | ||
| <legend>DemoContainer: {titleWithMyInstanceNum}</legend> | ||
| <p> | ||
| Mounted at {mountTimeString}, rendered {renderCount} times. | ||
| </p> | ||
| <Grid container> | ||
| <Grid item xs={4}> | ||
| <p>Controlled input: value is in DemoContainer's state</p> | ||
| <TextField | ||
| label="Component state" | ||
| variant="outlined" | ||
| value={value1} | ||
| onChange={(e): void => { | ||
| setValue1(e.target.value); | ||
| }} | ||
| /> | ||
|
|
||
| <p>Raw input: value is in dom only</p> | ||
| <TextField label="DOM state" variant="outlined" /> | ||
| </Grid> | ||
| <Grid item xs={4}> | ||
| <p>Nested components with their own state</p> | ||
| <NestedState /> | ||
| <NestedState /> | ||
| </Grid> | ||
| {!!withRedux && reduxContent} | ||
| </Grid> | ||
| </fieldset> | ||
| ); | ||
| }; | ||
| DemoContainer.defaultProps = { | ||
| withRedux: false, | ||
| }; | ||
|
|
||
| export default DemoContainer; |
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,19 @@ | ||
| import React, { ReactElement } from 'react'; | ||
| import Button from '@material-ui/core/Button'; | ||
|
|
||
| const NestedState: React.FC = (): ReactElement => { | ||
| const [counterValue, setCounterValue] = React.useState(0); | ||
|
|
||
| return ( | ||
| <Button | ||
| variant="contained" | ||
| onClick={(): void => { | ||
| setCounterValue((value) => value + 1); | ||
| }} | ||
| > | ||
| I've been clicked {counterValue} {counterValue === 1 ? 'time' : 'times'} | ||
| </Button> | ||
| ); | ||
| }; | ||
|
|
||
| export default NestedState; |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,4 @@ | ||
| export { default as SampleForm } from './SampleForm'; | ||
| export * from './SampleForm'; | ||
| export { default as DemoContainer } from './DemoContainer'; | ||
| export * from './DemoContainer'; | ||
| export { default as NestedState } from './NestedState'; | ||
| export * from './NestedState'; |
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 |
|---|---|---|
| @@ -1,4 +1,4 @@ | ||
| export { default as StaticComponentContainer } from './StaticComponentContainer'; | ||
| export * from './StaticComponentContainer'; | ||
| export { default as HibernatingRoute } from './StaticReduxContainer'; | ||
| export { default as StaticReduxContainer } from './StaticReduxContainer'; | ||
| export * from './StaticReduxContainer'; |
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.