{"id":16278689,"url":"https://github.com/pixelass/react-global-state_lights","last_synced_at":"2025-04-08T17:41:50.578Z","repository":{"id":98946568,"uuid":"585845020","full_name":"pixelass/react-global-state_lights","owner":"pixelass","description":null,"archived":false,"fork":false,"pushed_at":"2023-01-06T09:35:35.000Z","size":2693,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-14T13:50:38.615Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pixelass.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-06T08:27:57.000Z","updated_at":"2023-01-06T08:28:18.000Z","dependencies_parsed_at":null,"dependency_job_id":"3052719b-a1d5-4d7e-be2b-0add96d68609","html_url":"https://github.com/pixelass/react-global-state_lights","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelass%2Freact-global-state_lights","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelass%2Freact-global-state_lights/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelass%2Freact-global-state_lights/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelass%2Freact-global-state_lights/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pixelass","download_url":"https://codeload.github.com/pixelass/react-global-state_lights/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247895622,"owners_count":21014342,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-10T18:59:38.711Z","updated_at":"2025-04-08T17:41:50.572Z","avatar_url":"https://github.com/pixelass.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Global State: Lights\n\nIn this challenge you will automate the lights in your house… well, at least in your browser.\n\n## Task\n\n- Start the development server and make yourself familiar with the application.\n- Notice that the lights are working as expected but the count of turned on lights on the home page (`/`) is not and the buttons on the `/actions` page are not working.\n\n### Lifting State Up\n\n- The count of turned on lights on the home page (`/`) is not working because the state is not shared between the components.\n- To make the state of the `Light` components available to the `HomePage` component (`pages/index.js`), you need to lift the state up to the `App` component (`pages/_app.js`).\n- In doing so, you will need to find a new way to represent the state of the lights. You can use an array of objects with a `name`, `isOn` and `id` property.\n- Change `Light` component to receive at least `isOn`, `name`, `onToggle` as props and remove the internal state from the component.\n- Change the `Lights` component to render the lights dynamically based on the array in state (`.map`). You'll need to pass the array down through props.\n- Create a function to toggle the `isOn` property of a light based on its `id` and pass the handler function down to the `Light` components.\n- In the `Lights` component pass down the `onToggle` prop to the `Light` component using an inline function to pass in the `id` of the light:\n\n  ```js\n  onToggle={() =\u003e handleToggle(light.id)}\n  ```\n\n  This of course depends on the name of the handle function you choose.\n\n\u003e 💡 Just pick any `id`s you want for the lights. `\"1\"`, `\"2\"`, `\"3\"`,… is probably the easiest.\n\n\u003e ✨ Your app should now work as it did before, but the state is now shared between the components.\n\n### Counting the Lights\n\n- The count of turned on lights on the home page (`/`) is still not working.\n- Create a value derived from the state and use it to display the count of turned on lights on the home page (`/`).\n\n\u003e 💡 To derive a value from state you do **not** need state or effects.\n\n### Creating the Quick Actions\n\n- The buttons on the `/actions` page are also not yet functional.\n- Create two handler functions to toggle all lights on and off.\n- Pass them down to the `QuickActions` component and use them to toggle all lights on and off.\n- Bonus: Make the `Button`s `disabled` if their action would not do anything:\n  - \"Turn all lights off\" should be disabled if all lights are off\n  - \"Turn all lights on\" should be disabled if all lights are on\n\n### Bonus: Dimming the Background\n\n- The `Layout` component accepts a `isDimmed` prop that can be used to dim the background.\n- Set the `isDimmed` prop to `true` if all lights are turned off. 🌚\n\n## Notes\n\n- You'll have to touch the files inside `components` and `pages`. All the styles are already done, so you can focus on the functional parts.\n\n## Development\n\n### CodeSandbox\n\nSelect the \"Browser\" tab to view this project. If this project contains tests, select the \"Tests\" tab to check your progress.\n\n\u003e 💡 Please note that Next.js support on CodeSandbox is not great.\n\n### Local development\n\nTo run project commands locally, you need to install the dependencies using `npm i` first.\n\nYou can then use the following commands:\n\n- `npm run dev` to start the development server\n- `npm run build` to create a production build\n- `npm run start` to start the production build\n- `npm run test` to run the tests in watch mode (if available)\n\n\u003e 💡 This project requires a bundler. You can use `npm run dev` to start the development server. You can then view the project in the browser at `http://localhost:3000`. The Live Preview Extension for Visual Studio Code will **not** work for this project.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpixelass%2Freact-global-state_lights","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpixelass%2Freact-global-state_lights","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpixelass%2Freact-global-state_lights/lists"}