Created
November 17, 2023 17:30
-
-
Save saurookadook/4bf33cac7ede3745ab9282d03bf01ffe to your computer and use it in GitHub Desktop.
[frontend migration blog post] NewClasslikeComponent example - index.no-styled.jsx
This file contains hidden or 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
| import React, { useContext } from 'react'; | |
| import { JustShowTheStuff, ThingsToDoArea } from 'example/components'; | |
| import { collapseStuff, loadStuff } from 'example/store/stuff/actions'; | |
| import { collapseToDoItems, getThingsToDo } from 'example/store/thingsToDo/actions'; | |
| import { StateContext, DispatchContext } from 'example/context'; | |
| import styles from './style.css'; | |
| const NewClasslikeComponent = () => { | |
| const { stuff, thingsToDo, user } = useContext(StateContext); | |
| const dispatch = useContext(DispatchContext); | |
| function handleEscKeyDown(event) { | |
| if (event.keyCode === 27) { | |
| collapseStuff({ dispatch }); | |
| collapseToDoItems({ dispatch }); | |
| } | |
| } | |
| function handleStuffClick(e) { | |
| // do some stuff | |
| } | |
| function handleSubmit(e) { | |
| // do some stuff | |
| } | |
| function handleToDoItemClick(e) { | |
| // do some stuff | |
| } | |
| useEffect(() => { | |
| if (stuff.data == null) { | |
| loadStuff({ dispatch, userHandle: user.handle }) | |
| } | |
| if (thingsToDo.data == null) { | |
| getThingsToDo({ dispatch, userHandle: user.handle }); | |
| } | |
| window.addEventListener('keydown', handleEscKeyDown); | |
| return () => { | |
| window.removeEventListener('keydown', handleEscKeyDown) | |
| } | |
| }, []); | |
| const canRenderStuff = stuff.data != null && typeof stuff.data === "object"; | |
| const canRenderThingsToDo = thingsToDo.data != null && Array.isArray(thingsToDo.data); | |
| return ( | |
| <div id="stretchy-container" className={styles.stretchyLikeSuspenders}> | |
| <h2 className={styles.bolderPlease}>Look at this dashboard!</h2> | |
| {canRenderStuff && ( | |
| <JustShowTheStuff | |
| id="stretchy-stuff" | |
| theStuff={stuff.data} | |
| handleStuffClick={handleStuffClick} | |
| handleSubmit={handleSubmit} | |
| /> | |
| )} | |
| {canRenderThingsToDo && ( | |
| <ThingsToDoArea | |
| id="stretchy-things" | |
| things={thingsToDo.data} | |
| handleToDoItemClick={handleToDoItemClick} | |
| /> | |
| )} | |
| </div> | |
| ); | |
| }; | |
| export default NewClasslikeComponent; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment