├── .editorconfig
├── .eslintrc.cjs
├── .github
├── ISSUE_TEMPLATE
│ ├── bug.yml
│ └── config.yml
├── PULL_REQUEST_TEMPLATE
├── dependabot.yml
└── workflows
│ ├── auto-merge.yml
│ ├── codeql.yml
│ ├── deploy.yml
│ ├── idle.yml
│ └── welcome-bot.yml
├── .gitignore
├── .nvmrc
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── REVIEWING.md
├── index.html
├── package.json
├── public
└── vite.svg
├── src
├── App.jsx
├── components
│ ├── FilterButton.jsx
│ ├── Form.jsx
│ └── Todo.jsx
├── index.css
└── main.jsx
├── vite.config.js
└── yarn.lock
/.editorconfig:
--------------------------------------------------------------------------------
1 | # EditorConfig is awesome: https://EditorConfig.org
2 |
3 | # top-most EditorConfig file
4 | root = true
5 |
6 | [*]
7 | indent_style = space
8 | indent_size = 2
9 | end_of_line = lf
10 | charset = utf-8
11 | trim_trailing_whitespace = true
12 | insert_final_newline = true
13 |
14 | [*.md]
15 | trim_trailing_whitespace = false
16 |
--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: { browser: true, es2020: true },
4 | extends: [
5 | 'eslint:recommended',
6 | 'plugin:react/recommended',
7 | 'plugin:react/jsx-runtime',
8 | 'plugin:react-hooks/recommended',
9 | ],
10 | ignorePatterns: ['dist', '.eslintrc.cjs'],
11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
12 | settings: { react: { version: '18.2' } },
13 | plugins: ['react-refresh'],
14 | rules: {
15 | "react/jsx-first-prop-new-line": [1, "multiline"],
16 | 'react/prop-types': 'off',
17 | 'react-refresh/only-export-components': [
18 | 'warn',
19 | { allowConstantExport: true },
20 | ],
21 | },
22 | }
23 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug.yml:
--------------------------------------------------------------------------------
1 | name: "Bug report"
2 | description: Report an unexpected problem or unintended behavior.
3 | labels: ["needs triage"]
4 | body:
5 | - type: markdown
6 | attributes:
7 | value: |
8 | ### Before you start
9 |
10 | **Want to fix the problem yourself?** This project is open source and we welcome fixes and improvements from the community!
11 |
12 | ↩ Check the project [CONTRIBUTING.md](../blob/main/CONTRIBUTING.md) guide to see how to get started.
13 |
14 | ---
15 | - type: textarea
16 | id: problem
17 | attributes:
18 | label: What information was incorrect, unhelpful, or incomplete?
19 | validations:
20 | required: true
21 | - type: textarea
22 | id: expected
23 | attributes:
24 | label: What did you expect to see?
25 | validations:
26 | required: true
27 | - type: textarea
28 | id: references
29 | attributes:
30 | label: Do you have any supporting links, references, or citations?
31 | description: Link to information that helps us confirm your issue.
32 | - type: textarea
33 | id: more-info
34 | attributes:
35 | label: Do you have anything more you want to share?
36 | description: For example, steps to reproduce a bug, screenshots, screen recordings, or sample code
37 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/config.yml:
--------------------------------------------------------------------------------
1 | blank_issues_enabled: true
2 | contact_links:
3 | - name: MDN GitHub Discussions
4 | url: https://github.com/orgs/mdn/discussions
5 | about: Does the issue involve a lot of pages, or are you not sure how it can be split into actionable tasks? Consider starting a discussion first.
6 | - name: MDN Web Docs on Discourse
7 | url: https://discourse.mozilla.org/c/mdn/learn/250
8 | about: Need help with assessments on MDN Web Docs? We have a support community for this purpose on Discourse.
9 | - name: Help with code
10 | url: https://stackoverflow.com/
11 | about: If you are stuck and need help with code, StackOverflow is a great resource.
12 |
--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE:
--------------------------------------------------------------------------------
1 |
2 |
3 | ### Description
4 |
5 |
6 |
7 | ### Motivation
8 |
9 |
10 |
11 | ### Additional details
12 |
13 |
14 |
15 | ### Related issues and pull requests
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/.github/dependabot.yml:
--------------------------------------------------------------------------------
1 | version: 2
2 |
3 | updates:
4 | - package-ecosystem: npm
5 | directory: "/"
6 | schedule:
7 | interval: daily
8 | open-pull-requests-limit: 3
9 |
10 | - package-ecosystem: "github-actions"
11 | directory: "/"
12 | schedule:
13 | interval: "daily"
14 |
--------------------------------------------------------------------------------
/.github/workflows/auto-merge.yml:
--------------------------------------------------------------------------------
1 | name: auto-merge
2 |
3 | on:
4 | pull_request_target:
5 |
6 | jobs:
7 | auto-merge:
8 | uses: mdn/workflows/.github/workflows/auto-merge.yml@main
9 | with:
10 | target-repo: 'mdn/todo-react'
11 | secrets:
12 | GH_TOKEN: ${{ secrets.AUTOMERGE_TOKEN }}
13 |
--------------------------------------------------------------------------------
/.github/workflows/codeql.yml:
--------------------------------------------------------------------------------
1 | name: "CodeQL"
2 |
3 | on:
4 | push:
5 | branches: ["main"]
6 | paths-ignore:
7 | - "**.md"
8 | pull_request:
9 | # The branches below must be a subset of the branches above
10 | branches: ["main"]
11 | paths-ignore:
12 | - "**.md"
13 |
14 | jobs:
15 | analyze:
16 | name: Analyze
17 | runs-on: ubuntu-latest
18 | permissions:
19 | actions: read
20 | contents: read
21 | security-events: write
22 |
23 | strategy:
24 | matrix:
25 | language: ["javascript"]
26 |
27 | steps:
28 | - name: Checkout repository
29 | uses: actions/checkout@v4
30 |
31 | # Initializes the CodeQL tools for scanning.
32 | - name: Initialize CodeQL
33 | uses: github/codeql-action/init@v3
34 | with:
35 | languages: ${{ matrix.language }}
36 |
37 | - name: Perform CodeQL Analysis
38 | uses: github/codeql-action/analyze@v3
39 | with:
40 | category: "/language:${{matrix.language}}"
41 |
--------------------------------------------------------------------------------
/.github/workflows/deploy.yml:
--------------------------------------------------------------------------------
1 | name: Build and deploy to GH Pages
2 |
3 | on:
4 | # Runs on pushes targeting the default branch
5 | push:
6 | branches: ["main"]
7 |
8 | # Allows you to run this workflow manually from the Actions tab
9 | workflow_dispatch:
10 |
11 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
12 | permissions:
13 | contents: read
14 | pages: write
15 | id-token: write
16 |
17 | # Allow one concurrent deployment
18 | concurrency:
19 | group: "pages"
20 | cancel-in-progress: true
21 |
22 | jobs:
23 | build:
24 | runs-on: ubuntu-latest
25 | environment:
26 | name: github-pages
27 | url: ${{ steps.deployment.outputs.page_url }}
28 | steps:
29 | - name: Checkout
30 | uses: actions/checkout@v4
31 | - name: Build
32 | uses: actions/setup-node@v4
33 | with:
34 | node-version-file: ".nvmrc"
35 | - name: Run install
36 | uses: borales/actions-yarn@v5
37 | with:
38 | cmd: install
39 | - name: Build production bundle
40 | uses: borales/actions-yarn@v5
41 | with:
42 | cmd: build
43 |
44 | - name: Setup pages
45 | uses: actions/configure-pages@v5
46 | - name: Upload build artifacts
47 | uses: actions/upload-pages-artifact@v3
48 | with:
49 | # Upload dist directory
50 | path: "dist"
51 | - name: Deploy to GitHub Pages
52 | id: deployment
53 | uses: actions/deploy-pages@v4
54 |
--------------------------------------------------------------------------------
/.github/workflows/idle.yml:
--------------------------------------------------------------------------------
1 | name: "Label idle issues"
2 |
3 | on:
4 | schedule:
5 | - cron: "0 8 * * *"
6 |
7 | jobs:
8 | mark-as-idle:
9 | uses: mdn/workflows/.github/workflows/idle.yml@main
10 | with:
11 | target-repo: "mdn/todo-react"
12 |
--------------------------------------------------------------------------------
/.github/workflows/welcome-bot.yml:
--------------------------------------------------------------------------------
1 | name: "AlloAllo"
2 |
3 | on:
4 | issues:
5 | types:
6 | - opened
7 | pull_request_target:
8 | branches:
9 | - main
10 | types:
11 | - opened
12 | - closed
13 |
14 | jobs:
15 | allo-allo:
16 | uses: mdn/workflows/.github/workflows/allo-allo.yml@main
17 | with:
18 | target-repo: "mdn/todo-react"
19 | issue-welcome: |
20 | It looks like this is your first issue. Welcome! 👋
21 | One of the project maintainers will be with you as soon as possible. We
22 | appreciate your patience. To safeguard the health of the project, please
23 | take a moment to read our [code of conduct](../blob/main/CODE_OF_CONDUCT.md).
24 | pr-welcome: |
25 | It looks like this is your first pull request. 🎉
26 | Thank you for your contribution! One of the project maintainers will triage
27 | and assign the pull request for review. We appreciate your patience. To
28 | safeguard the health of the project, please take a moment to read our
29 | [code of conduct](../blob/main/CODE_OF_CONDUCT.md).
30 | pr-merged: |
31 | Congratulations on your first merged pull request. 🎉 Thank you for your contribution!
32 | Did you know we have a [project board](https://github.com/orgs/mdn/projects/25) with high-impact contribution opportunities?
33 | We look forward to your next contribution.
34 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/.nvmrc:
--------------------------------------------------------------------------------
1 | v22
2 |
--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | # Community participation guidelines
2 |
3 | This repository is governed by Mozilla's code of conduct and etiquette guidelines.
4 | For more details, please read the [Mozilla Community Participation Guidelines](https://www.mozilla.org/about/governance/policies/participation/).
5 |
6 | ## Reporting violations
7 |
8 | For more information on how to report violations of the Community Participation Guidelines, please read our [How to Report](https://www.mozilla.org/about/governance/policies/participation/reporting/) page.
9 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contribution guide
2 |
3 | 
4 |
5 | - [Ways to contribute](#ways-to-contribute)
6 | - [Finding an issue](#finding-an-issue)
7 | - [Asking for help](#asking-for-help)
8 | - [Pull request process](#pull-request-process)
9 | - [Setting up the development environment](#setting-up-the-development-environment)
10 | - [Forking and cloning the project](#forking-and-cloning-the-project)
11 | - [Prerequisites](#prerequisites)
12 | - [Signing commits](#signing-commits)
13 |
14 | Welcome 👋 Thank you for your interest in contributing to MDN Web Docs. We are happy to have you join us! 💖
15 |
16 | As you get started, you are in the best position to give us feedback on project areas we might have forgotten about or assumed to work well.
17 | These include, but are not limited to:
18 |
19 | - Problems found while setting up a new developer environment
20 | - Gaps in our documentation
21 | - Bugs in our automation scripts
22 |
23 | If anything doesn't make sense or work as expected, please open an issue and let us know!
24 |
25 | ## Setting up the development environment
26 |
27 | This project requires [Node.js](https://nodejs.org/en/) to be installed on your local machine.
28 | Additionally, you should have git and GitHub access.
29 |
30 | ### Forking and cloning the project
31 |
32 | The first step in setting up your development environment is to [fork the repository](https://docs.github.com/en/get-started/quickstart/fork-a-repo) and [clone](https://docs.github.com/en/get-started/quickstart/fork-a-repo#cloning-your-forked-repository) the repository to your local machine.
33 |
34 | ### Prerequisites
35 |
36 | To get started, make sure you have the following:
37 |
38 | - [NVM](https://github.com/nvm-sh/nvm) or [NVM for Windows](https://github.com/coreybutler/nvm-windows)
39 | - [Nodejs](https://nodejs.org/en/) (Latest stable release or up to two versions back)
40 | - [Yarn](https://yarnpkg.com/getting-started/install)
41 |
42 | ### Building the project
43 |
44 | Once you have the above installed and have the repository cloned, it is time to install the project dependencies.
45 |
46 | In the project directory, you can run the following command which runs the app in the development mode.
47 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
48 | The page will reload if you make edits.
49 | You will also see any lint errors in the console.
50 |
51 | ```bash
52 | yarn start
53 | ```
54 |
55 | Launches the test runner in the interactive watch mode.
56 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
57 |
58 | ```bash
59 | yarn test
60 | ```
61 |
62 | The following command builds the app for production to the `build` folder.
63 | It correctly bundles React in production mode and optimizes the build for the best performance.
64 |
65 | ```bash
66 | yarn build
67 | ```
68 |
69 | The build is minified and the filenames include the hashes.
70 | Your app is ready to be deployed!
71 |
72 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
73 |
74 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
75 |
76 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
77 |
78 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
79 |
80 | ```bash
81 | yarn eject
82 | ```
83 |
84 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
85 |
86 | ## Ways to contribute
87 |
88 | We welcome many different types of contributions including:
89 |
90 | - New features and content suggestions.
91 | - Identifying and filing issues.
92 | - Providing feedback on existing issues.
93 | - Engaging with the community and answering questions.
94 | - Contributing documentation or code.
95 | - Promoting the project in personal circles and social media.
96 |
97 | ## Finding an issue
98 |
99 | We have issues labeled `good first issue` for new contributors and `help wanted` suitable for any contributor.
100 | Good first issues have extra information to help you make your first contribution a success.
101 | Help wanted issues are ideal when you feel a bit more comfortable with the project details.
102 |
103 | Sometimes there won't be any issues with these labels, but there is likely still something for you to work on.
104 | If you want to contribute but don't know where to start or can't find a suitable issue, speak to us on [Matrix](https://matrix.to/#/#mdn:mozilla.org), and we will be happy to help.
105 |
106 | Once you find an issue you'd like to work on, please post a comment saying you want to work on it.
107 | Something like "I want to work on this" is fine.
108 | Also, mention the community team using the `@mdn/mdn-community-engagement` handle to ensure someone will get back to you.
109 |
110 | ## Asking for help
111 |
112 | The best way to reach us with a question when contributing is to use the following channels in the following order of precedence:
113 |
114 | - [Start a discussion](https://github.com/orgs/mdn/discussions)
115 | - Ask your question or highlight your discussion on [Matrix](https://matrix.to/#/#mdn:mozilla.org).
116 | - File an issue and tag the community team using the `@mdn/mdn-community-engagement` handle.
117 |
118 | ## Pull request process
119 |
120 | The MDN Web Docs project has a well-defined pull request process which is documented in the [Pull request guidelines](https://developer.mozilla.org/en-US/docs/MDN/Community/Pull_requests).
121 | Make sure you read and understand this process before you start working on a pull request.
122 |
123 | ## Signing commits
124 |
125 | We require all commits to be signed to verify the author's identity.
126 | GitHub has a detailed guide on [setting up signed commits](https://docs.github.com/en/authentication/managing-commit-signature-verification/signing-commits).
127 | If you get stuck, please [ask for help](#asking-for-help).
128 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Mozilla Public License Version 2.0
2 | ==================================
3 |
4 | 1. Definitions
5 | --------------
6 |
7 | 1.1. "Contributor"
8 | means each individual or legal entity that creates, contributes to
9 | the creation of, or owns Covered Software.
10 |
11 | 1.2. "Contributor Version"
12 | means the combination of the Contributions of others (if any) used
13 | by a Contributor and that particular Contributor's Contribution.
14 |
15 | 1.3. "Contribution"
16 | means Covered Software of a particular Contributor.
17 |
18 | 1.4. "Covered Software"
19 | means Source Code Form to which the initial Contributor has attached
20 | the notice in Exhibit A, the Executable Form of such Source Code
21 | Form, and Modifications of such Source Code Form, in each case
22 | including portions thereof.
23 |
24 | 1.5. "Incompatible With Secondary Licenses"
25 | means
26 |
27 | (a) that the initial Contributor has attached the notice described
28 | in Exhibit B to the Covered Software; or
29 |
30 | (b) that the Covered Software was made available under the terms of
31 | version 1.1 or earlier of the License, but not also under the
32 | terms of a Secondary License.
33 |
34 | 1.6. "Executable Form"
35 | means any form of the work other than Source Code Form.
36 |
37 | 1.7. "Larger Work"
38 | means a work that combines Covered Software with other material, in
39 | a separate file or files, that is not Covered Software.
40 |
41 | 1.8. "License"
42 | means this document.
43 |
44 | 1.9. "Licensable"
45 | means having the right to grant, to the maximum extent possible,
46 | whether at the time of the initial grant or subsequently, any and
47 | all of the rights conveyed by this License.
48 |
49 | 1.10. "Modifications"
50 | means any of the following:
51 |
52 | (a) any file in Source Code Form that results from an addition to,
53 | deletion from, or modification of the contents of Covered
54 | Software; or
55 |
56 | (b) any new file in Source Code Form that contains any Covered
57 | Software.
58 |
59 | 1.11. "Patent Claims" of a Contributor
60 | means any patent claim(s), including without limitation, method,
61 | process, and apparatus claims, in any patent Licensable by such
62 | Contributor that would be infringed, but for the grant of the
63 | License, by the making, using, selling, offering for sale, having
64 | made, import, or transfer of either its Contributions or its
65 | Contributor Version.
66 |
67 | 1.12. "Secondary License"
68 | means either the GNU General Public License, Version 2.0, the GNU
69 | Lesser General Public License, Version 2.1, the GNU Affero General
70 | Public License, Version 3.0, or any later versions of those
71 | licenses.
72 |
73 | 1.13. "Source Code Form"
74 | means the form of the work preferred for making modifications.
75 |
76 | 1.14. "You" (or "Your")
77 | means an individual or a legal entity exercising rights under this
78 | License. For legal entities, "You" includes any entity that
79 | controls, is controlled by, or is under common control with You. For
80 | purposes of this definition, "control" means (a) the power, direct
81 | or indirect, to cause the direction or management of such entity,
82 | whether by contract or otherwise, or (b) ownership of more than
83 | fifty percent (50%) of the outstanding shares or beneficial
84 | ownership of such entity.
85 |
86 | 2. License Grants and Conditions
87 | --------------------------------
88 |
89 | 2.1. Grants
90 |
91 | Each Contributor hereby grants You a world-wide, royalty-free,
92 | non-exclusive license:
93 |
94 | (a) under intellectual property rights (other than patent or trademark)
95 | Licensable by such Contributor to use, reproduce, make available,
96 | modify, display, perform, distribute, and otherwise exploit its
97 | Contributions, either on an unmodified basis, with Modifications, or
98 | as part of a Larger Work; and
99 |
100 | (b) under Patent Claims of such Contributor to make, use, sell, offer
101 | for sale, have made, import, and otherwise transfer either its
102 | Contributions or its Contributor Version.
103 |
104 | 2.2. Effective Date
105 |
106 | The licenses granted in Section 2.1 with respect to any Contribution
107 | become effective for each Contribution on the date the Contributor first
108 | distributes such Contribution.
109 |
110 | 2.3. Limitations on Grant Scope
111 |
112 | The licenses granted in this Section 2 are the only rights granted under
113 | this License. No additional rights or licenses will be implied from the
114 | distribution or licensing of Covered Software under this License.
115 | Notwithstanding Section 2.1(b) above, no patent license is granted by a
116 | Contributor:
117 |
118 | (a) for any code that a Contributor has removed from Covered Software;
119 | or
120 |
121 | (b) for infringements caused by: (i) Your and any other third party's
122 | modifications of Covered Software, or (ii) the combination of its
123 | Contributions with other software (except as part of its Contributor
124 | Version); or
125 |
126 | (c) under Patent Claims infringed by Covered Software in the absence of
127 | its Contributions.
128 |
129 | This License does not grant any rights in the trademarks, service marks,
130 | or logos of any Contributor (except as may be necessary to comply with
131 | the notice requirements in Section 3.4).
132 |
133 | 2.4. Subsequent Licenses
134 |
135 | No Contributor makes additional grants as a result of Your choice to
136 | distribute the Covered Software under a subsequent version of this
137 | License (see Section 10.2) or under the terms of a Secondary License (if
138 | permitted under the terms of Section 3.3).
139 |
140 | 2.5. Representation
141 |
142 | Each Contributor represents that the Contributor believes its
143 | Contributions are its original creation(s) or it has sufficient rights
144 | to grant the rights to its Contributions conveyed by this License.
145 |
146 | 2.6. Fair Use
147 |
148 | This License is not intended to limit any rights You have under
149 | applicable copyright doctrines of fair use, fair dealing, or other
150 | equivalents.
151 |
152 | 2.7. Conditions
153 |
154 | Sections 3.1, 3.2, 3.3, and 3.4 are conditions of the licenses granted
155 | in Section 2.1.
156 |
157 | 3. Responsibilities
158 | -------------------
159 |
160 | 3.1. Distribution of Source Form
161 |
162 | All distribution of Covered Software in Source Code Form, including any
163 | Modifications that You create or to which You contribute, must be under
164 | the terms of this License. You must inform recipients that the Source
165 | Code Form of the Covered Software is governed by the terms of this
166 | License, and how they can obtain a copy of this License. You may not
167 | attempt to alter or restrict the recipients' rights in the Source Code
168 | Form.
169 |
170 | 3.2. Distribution of Executable Form
171 |
172 | If You distribute Covered Software in Executable Form then:
173 |
174 | (a) such Covered Software must also be made available in Source Code
175 | Form, as described in Section 3.1, and You must inform recipients of
176 | the Executable Form how they can obtain a copy of such Source Code
177 | Form by reasonable means in a timely manner, at a charge no more
178 | than the cost of distribution to the recipient; and
179 |
180 | (b) You may distribute such Executable Form under the terms of this
181 | License, or sublicense it under different terms, provided that the
182 | license for the Executable Form does not attempt to limit or alter
183 | the recipients' rights in the Source Code Form under this License.
184 |
185 | 3.3. Distribution of a Larger Work
186 |
187 | You may create and distribute a Larger Work under terms of Your choice,
188 | provided that You also comply with the requirements of this License for
189 | the Covered Software. If the Larger Work is a combination of Covered
190 | Software with a work governed by one or more Secondary Licenses, and the
191 | Covered Software is not Incompatible With Secondary Licenses, this
192 | License permits You to additionally distribute such Covered Software
193 | under the terms of such Secondary License(s), so that the recipient of
194 | the Larger Work may, at their option, further distribute the Covered
195 | Software under the terms of either this License or such Secondary
196 | License(s).
197 |
198 | 3.4. Notices
199 |
200 | You may not remove or alter the substance of any license notices
201 | (including copyright notices, patent notices, disclaimers of warranty,
202 | or limitations of liability) contained within the Source Code Form of
203 | the Covered Software, except that You may alter any license notices to
204 | the extent required to remedy known factual inaccuracies.
205 |
206 | 3.5. Application of Additional Terms
207 |
208 | You may choose to offer, and to charge a fee for, warranty, support,
209 | indemnity or liability obligations to one or more recipients of Covered
210 | Software. However, You may do so only on Your own behalf, and not on
211 | behalf of any Contributor. You must make it absolutely clear that any
212 | such warranty, support, indemnity, or liability obligation is offered by
213 | You alone, and You hereby agree to indemnify every Contributor for any
214 | liability incurred by such Contributor as a result of warranty, support,
215 | indemnity or liability terms You offer. You may include additional
216 | disclaimers of warranty and limitations of liability specific to any
217 | jurisdiction.
218 |
219 | 4. Inability to Comply Due to Statute or Regulation
220 | ---------------------------------------------------
221 |
222 | If it is impossible for You to comply with any of the terms of this
223 | License with respect to some or all of the Covered Software due to
224 | statute, judicial order, or regulation then You must: (a) comply with
225 | the terms of this License to the maximum extent possible; and (b)
226 | describe the limitations and the code they affect. Such description must
227 | be placed in a text file included with all distributions of the Covered
228 | Software under this License. Except to the extent prohibited by statute
229 | or regulation, such description must be sufficiently detailed for a
230 | recipient of ordinary skill to be able to understand it.
231 |
232 | 5. Termination
233 | --------------
234 |
235 | 5.1. The rights granted under this License will terminate automatically
236 | if You fail to comply with any of its terms. However, if You become
237 | compliant, then the rights granted under this License from a particular
238 | Contributor are reinstated (a) provisionally, unless and until such
239 | Contributor explicitly and finally terminates Your grants, and (b) on an
240 | ongoing basis, if such Contributor fails to notify You of the
241 | non-compliance by some reasonable means prior to 60 days after You have
242 | come back into compliance. Moreover, Your grants from a particular
243 | Contributor are reinstated on an ongoing basis if such Contributor
244 | notifies You of the non-compliance by some reasonable means, this is the
245 | first time You have received notice of non-compliance with this License
246 | from such Contributor, and You become compliant prior to 30 days after
247 | Your receipt of the notice.
248 |
249 | 5.2. If You initiate litigation against any entity by asserting a patent
250 | infringement claim (excluding declaratory judgment actions,
251 | counter-claims, and cross-claims) alleging that a Contributor Version
252 | directly or indirectly infringes any patent, then the rights granted to
253 | You by any and all Contributors for the Covered Software under Section
254 | 2.1 of this License shall terminate.
255 |
256 | 5.3. In the event of termination under Sections 5.1 or 5.2 above, all
257 | end user license agreements (excluding distributors and resellers) which
258 | have been validly granted by You or Your distributors under this License
259 | prior to termination shall survive termination.
260 |
261 | ************************************************************************
262 | * *
263 | * 6. Disclaimer of Warranty *
264 | * ------------------------- *
265 | * *
266 | * Covered Software is provided under this License on an "as is" *
267 | * basis, without warranty of any kind, either expressed, implied, or *
268 | * statutory, including, without limitation, warranties that the *
269 | * Covered Software is free of defects, merchantable, fit for a *
270 | * particular purpose or non-infringing. The entire risk as to the *
271 | * quality and performance of the Covered Software is with You. *
272 | * Should any Covered Software prove defective in any respect, You *
273 | * (not any Contributor) assume the cost of any necessary servicing, *
274 | * repair, or correction. This disclaimer of warranty constitutes an *
275 | * essential part of this License. No use of any Covered Software is *
276 | * authorized under this License except under this disclaimer. *
277 | * *
278 | ************************************************************************
279 |
280 | ************************************************************************
281 | * *
282 | * 7. Limitation of Liability *
283 | * -------------------------- *
284 | * *
285 | * Under no circumstances and under no legal theory, whether tort *
286 | * (including negligence), contract, or otherwise, shall any *
287 | * Contributor, or anyone who distributes Covered Software as *
288 | * permitted above, be liable to You for any direct, indirect, *
289 | * special, incidental, or consequential damages of any character *
290 | * including, without limitation, damages for lost profits, loss of *
291 | * goodwill, work stoppage, computer failure or malfunction, or any *
292 | * and all other commercial damages or losses, even if such party *
293 | * shall have been informed of the possibility of such damages. This *
294 | * limitation of liability shall not apply to liability for death or *
295 | * personal injury resulting from such party's negligence to the *
296 | * extent applicable law prohibits such limitation. Some *
297 | * jurisdictions do not allow the exclusion or limitation of *
298 | * incidental or consequential damages, so this exclusion and *
299 | * limitation may not apply to You. *
300 | * *
301 | ************************************************************************
302 |
303 | 8. Litigation
304 | -------------
305 |
306 | Any litigation relating to this License may be brought only in the
307 | courts of a jurisdiction where the defendant maintains its principal
308 | place of business and such litigation shall be governed by laws of that
309 | jurisdiction, without reference to its conflict-of-law provisions.
310 | Nothing in this Section shall prevent a party's ability to bring
311 | cross-claims or counter-claims.
312 |
313 | 9. Miscellaneous
314 | ----------------
315 |
316 | This License represents the complete agreement concerning the subject
317 | matter hereof. If any provision of this License is held to be
318 | unenforceable, such provision shall be reformed only to the extent
319 | necessary to make it enforceable. Any law or regulation which provides
320 | that the language of a contract shall be construed against the drafter
321 | shall not be used to construe this License against a Contributor.
322 |
323 | 10. Versions of the License
324 | ---------------------------
325 |
326 | 10.1. New Versions
327 |
328 | Mozilla Foundation is the license steward. Except as provided in Section
329 | 10.3, no one other than the license steward has the right to modify or
330 | publish new versions of this License. Each version will be given a
331 | distinguishing version number.
332 |
333 | 10.2. Effect of New Versions
334 |
335 | You may distribute the Covered Software under the terms of the version
336 | of the License under which You originally received the Covered Software,
337 | or under the terms of any subsequent version published by the license
338 | steward.
339 |
340 | 10.3. Modified Versions
341 |
342 | If you create software not governed by this License, and you want to
343 | create a new license for such software, you may create and use a
344 | modified version of this License if you rename the license and remove
345 | any references to the name of the license steward (except to note that
346 | such modified license differs from this License).
347 |
348 | 10.4. Distributing Source Code Form that is Incompatible With Secondary
349 | Licenses
350 |
351 | If You choose to distribute Source Code Form that is Incompatible With
352 | Secondary Licenses under the terms of this version of the License, the
353 | notice described in Exhibit B of this License must be attached.
354 |
355 | Exhibit A - Source Code Form License Notice
356 | -------------------------------------------
357 |
358 | This Source Code Form is subject to the terms of the Mozilla Public
359 | License, v. 2.0. If a copy of the MPL was not distributed with this
360 | file, You can obtain one at http://mozilla.org/MPL/2.0/.
361 |
362 | If it is not possible or desirable to put the notice in a particular
363 | file, then You may include the notice in a location (such as a LICENSE
364 | file in a relevant directory) where a recipient would be likely to look
365 | for such a notice.
366 |
367 | You may add additional accurate notices of copyright ownership.
368 |
369 | Exhibit B - "Incompatible With Secondary Licenses" Notice
370 | ---------------------------------------------------------
371 |
372 | This Source Code Form is "Incompatible With Secondary Licenses", as
373 | defined by the Mozilla Public License, v. 2.0.
374 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # todo-react
2 |
3 | Sample todo app built with the React/ReactDOM framework. For the accompanying documentation, see
4 | [Understanding client-side JavaScript frameworks
5 | : React tutorials](https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks#React_tutorials).
6 |
7 | For the live version, see https://mdn.github.io/todo-react/.
8 |
9 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
10 |
11 | ## Getting started
12 |
13 | To get this app running locally, you'll need to have [Node.js](https://nodejs.org/en/) and [Yarn](https://yarnpkg.com/getting-started/install) installed on your machine.
14 | In the project directory, you can run:
15 |
16 | ```bash
17 | yarn && yarn start
18 | ```
19 |
20 | More information about the available commands can be found in the [Contributing](CONTRIBUTING.md) guide.
21 |
22 | ## Learn More
23 |
24 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
25 |
26 | The following sections are recommended:
27 |
28 | - [Code Splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
29 | - [Analyzing the Bundle Size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
30 | - [Making a Progressive Web App](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
31 | - [Advanced Configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
32 | - [Deployment](https://facebook.github.io/create-react-app/docs/deployment)
33 | - [npm run build fails to minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
34 |
35 | To learn React, check out the [React documentation](https://reactjs.org/).
36 |
37 | ## Contributing
38 |
39 | Our project welcomes contributions from any member of our community.
40 | To get started contributing, please see our [Contributor Guide](CONTRIBUTING.md).
41 |
42 | By participating in and contributing to our projects and discussions, you acknowledge that you have read and agree to our [Code of Conduct](CODE_OF_CONDUCT.md).
43 |
44 | ## License
45 |
46 | This project is licensed under the [LICENSE](LICENSE).
47 |
--------------------------------------------------------------------------------
/REVIEWING.md:
--------------------------------------------------------------------------------
1 | # Reviewing guide
2 |
3 | ## Values and guidelines
4 |
5 | All reviewers must abide by the [Code of Conduct](CODE_OF_CONDUCT.md); they are also protected by the Code of Conduct.
6 | A reviewer should not tolerate poor behavior and is encouraged to [report any behavior](CODE_OF_CONDUCT.md#Reporting_violations) that violates the Code of Conduct.
7 |
8 | Everyone participating must follow our [Community Participation Guidelines](CODE_OF_CONDUCT.md#Community_Participation_Guidelines)
9 |
10 | ## Review process
11 |
12 | The MDN Web Docs team has a well-defined review process that must be followed by reviewers in all repositories under the GitHub MDN organization.
13 | This process is described in detail on the [Pull request guidelines](https://developer.mozilla.org/en-US/docs/MDN/Community/Pull_requests) page.
14 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | TodoMatic
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "moz-todo-react",
3 | "version": "0.3.0",
4 | "private": true,
5 | "homepage": "https://mdn.github.io/todo-react/",
6 | "type": "module",
7 | "scripts": {
8 | "dev": "vite --port 3000 --open",
9 | "build": "vite build",
10 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
11 | "preview": "vite preview"
12 | },
13 | "dependencies": {
14 | "nanoid": "^5.1.5",
15 | "react": "^18.2.0",
16 | "react-dom": "^18.2.0"
17 | },
18 | "devDependencies": {
19 | "@types/react": "^18.2.79",
20 | "@types/react-dom": "^18.2.25",
21 | "@vitejs/plugin-react": "^4.3.4",
22 | "eslint": "^8.57.1",
23 | "eslint-plugin-react": "^7.37.2",
24 | "eslint-plugin-react-hooks": "^4.6.2",
25 | "eslint-plugin-react-refresh": "^0.4.16",
26 | "vite": "^5.4.11"
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
1 | import { useState, useRef, useEffect } from "react";
2 | import Form from "./components/Form";
3 | import FilterButton from "./components/FilterButton";
4 | import Todo from "./components/Todo";
5 | import { nanoid } from "nanoid";
6 |
7 | function usePrevious(value) {
8 | const ref = useRef(null);
9 | useEffect(() => {
10 | ref.current = value;
11 | });
12 | return ref.current;
13 | }
14 |
15 | const FILTER_MAP = {
16 | All: () => true,
17 | Active: (task) => !task.completed,
18 | Completed: (task) => task.completed,
19 | };
20 |
21 | const FILTER_NAMES = Object.keys(FILTER_MAP);
22 |
23 | function App(props) {
24 | const [tasks, setTasks] = useState(props.tasks);
25 | const [filter, setFilter] = useState("All");
26 |
27 | function toggleTaskCompleted(id) {
28 | const updatedTasks = tasks.map((task) => {
29 | // if this task has the same ID as the edited task
30 | if (id === task.id) {
31 | // use object spread to make a new obkect
32 | // whose `completed` prop has been inverted
33 | return { ...task, completed: !task.completed };
34 | }
35 | return task;
36 | });
37 | setTasks(updatedTasks);
38 | }
39 |
40 | function deleteTask(id) {
41 | const remainingTasks = tasks.filter((task) => id !== task.id);
42 | setTasks(remainingTasks);
43 | }
44 |
45 | function editTask(id, newName) {
46 | const editedTaskList = tasks.map((task) => {
47 | // if this task has the same ID as the edited task
48 | if (id === task.id) {
49 | // Copy the task and update its name
50 | return { ...task, name: newName };
51 | }
52 | // Return the original task if it's not the edited task
53 | return task;
54 | });
55 | setTasks(editedTaskList);
56 | }
57 |
58 | const taskList = tasks
59 | ?.filter(FILTER_MAP[filter])
60 | .map((task) => (
61 |
70 | ));
71 |
72 | const filterList = FILTER_NAMES.map((name) => (
73 |
79 | ));
80 |
81 | function addTask(name) {
82 | const newTask = { id: "todo-" + nanoid(), name: name, completed: false };
83 | setTasks([...tasks, newTask]);
84 | }
85 |
86 | const tasksNoun = taskList.length !== 1 ? "tasks" : "task";
87 | const headingText = `${taskList.length} ${tasksNoun} remaining`;
88 |
89 | const listHeadingRef = useRef(null);
90 | const prevTaskLength = usePrevious(tasks.length);
91 |
92 | useEffect(() => {
93 | if (tasks.length < prevTaskLength) {
94 | listHeadingRef.current.focus();
95 | }
96 | }, [tasks.length, prevTaskLength]);
97 |
98 | return (
99 |
100 |
TodoMatic
101 |
102 |
{filterList}
103 |
104 | {headingText}
105 |
106 |
111 | {taskList}
112 |
113 |
114 | );
115 | }
116 |
117 | export default App;
118 |
--------------------------------------------------------------------------------
/src/components/FilterButton.jsx:
--------------------------------------------------------------------------------
1 | function FilterButton(props) {
2 | return (
3 |
13 | );
14 | }
15 |
16 | export default FilterButton;
17 |
--------------------------------------------------------------------------------
/src/components/Form.jsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 |
3 | function Form(props) {
4 | const [name, setName] = useState('');
5 |
6 | // NOTE: As written, this function has a bug: it doesn't prevent the user
7 | // from submitting an empty form. This is left as an exercise for developers
8 | // working through MDN's React tutorial.
9 | function handleSubmit(event) {
10 | event.preventDefault();
11 | props.addTask(name);
12 | setName("");
13 | }
14 |
15 | function handleChange(event) {
16 | setName(event.target.value);
17 | }
18 |
19 | return (
20 |
40 | );
41 | }
42 |
43 | export default Form;
44 |
--------------------------------------------------------------------------------
/src/components/Todo.jsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef, useState } from "react";
2 |
3 | function usePrevious(value) {
4 | const ref = useRef(null);
5 | useEffect(() => {
6 | ref.current = value;
7 | });
8 | return ref.current;
9 | }
10 |
11 | function Todo(props) {
12 | const [isEditing, setEditing] = useState(false);
13 | const [newName, setNewName] = useState("");
14 |
15 | const editFieldRef = useRef(null);
16 | const editButtonRef = useRef(null);
17 |
18 | const wasEditing = usePrevious(isEditing);
19 |
20 | function handleChange(event) {
21 | setNewName(event.target.value);
22 | }
23 |
24 | // NOTE: As written, this function has a bug: it doesn't prevent the user
25 | // from submitting an empty form. This is left as an exercise for developers
26 | // working through MDN's React tutorial.
27 | function handleSubmit(event) {
28 | event.preventDefault();
29 | props.editTask(props.id, newName);
30 | setNewName("");
31 | setEditing(false);
32 | }
33 |
34 | const editingTemplate = (
35 |
63 | );
64 |
65 | const viewTemplate = (
66 |