Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fixed State Persistance of Quality Checklist #5637

Merged
merged 1 commit into from
Feb 16, 2024
Merged

Fixed State Persistance of Quality Checklist #5637

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
54 changes: 37 additions & 17 deletions app/assets/javascripts/components/common/final_article_checklist.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,36 @@ import React, { useState } from 'react';
import useOutsideClick from '../../hooks/useOutsideClick';

const FinalArticleChecklist = () => {
const checklistItems = [
{ key: '1', label: "The title is short and simple. It doesn't look like an essay, or ask a question." },
{ key: '2', label: 'The first sentence is direct and useful; it clearly defines the subject, with the topic of the article in bold.' },
{ key: '3', label: 'The lead section is a clear summary, not an introduction or argument. A reader could stop at the end of the lead and have a good overview of the most important aspects of the topic.' },
{ key: '4', label: "It doesn't contain excessive quotations, or copy any sources (even if you've given them credit)." },
{ key: '5', label: "The writing is clear to a non-expert; you've explained acronyms and jargon in simple English the first time you use them." },
{ key: '6', label: 'It lets readers decide for themselves, without any persuasive language that aims to sway a reader to a conclusion.' },
{ key: '7', label: "You've proof-read it all the way through. Grammar and spelling are correct, sentences are complete sentences, and there is no first-person (“I/we”) or second-person (“you”) writing." },
{ key: '8', label: 'The formatting is consistent with the rest of Wikipedia, without too many headings. Bulleted lists are used sparingly or not at all.' },
{ key: '9', label: "Every claim is cited to a reliable source — like a textbook or academic journal — and it doesn't cite any blog posts." },
{ key: '10', label: 'The text includes links to other Wikipedia articles the first time each relevant topic is mentioned.' },
{ key: '11', label: 'At least one related Wikipedia article links back to this one.' },
{ key: '12', label: "You've thanked people who helped you. Check your User Talk page, and the Talk page of your article. If anyone offered help or feedback, say thanks!" },
];

const [isVisible, setIsVisible] = useState(false);
const [checkboxStates, setCheckboxStates] = useState(
Object.fromEntries(
checklistItems.map(item => [item.key, false])
)
);

const show = () => {
setIsVisible(true);
};
const show = () => setIsVisible(true);
const hide = () => setIsVisible(false);

const hide = () => {
setIsVisible(false);
const toggleCheckbox = (checkboxName) => {
setCheckboxStates(prevState => ({
...prevState,
[checkboxName]: !prevState[checkboxName],
}));
};

const ref = useOutsideClick(hide);
Expand All @@ -32,18 +54,16 @@ const FinalArticleChecklist = () => {
As you polish up your completed article, review each of these items and fix any problems you find.
</p>
<dl>
<dd><input type="checkbox" /> The title is short and simple. It doesn’t look like an essay, or ask a question.</dd>
<dd><input type="checkbox" /> The first sentence is direct and useful; it clearly defines the subject, with the topic of the article in bold.</dd>
<dd><input type="checkbox" /> The lead section is a clear summary, not an introduction or argument. A reader could stop at the end of the lead and have a good overview of the most important aspects of the topic.</dd>
<dd><input type="checkbox" /> It doesn’t contain excessive quotations, or copy any sources (even if you’ve given them credit).</dd>
<dd><input type="checkbox" /> The writing is clear to a non-expert; you’ve explained acronyms and jargon in simple English the first time you use them.</dd>
<dd><input type="checkbox" /> It lets readers decide for themselves, without any persuasive language that aims to sway a reader to a conclusion.</dd>
<dd><input type="checkbox" /> You&apos;ve proof-read it all the way through. Grammar and spelling are correct, sentences are complete sentences, and there is no first-person (“I/we”) or second-person (“you”) writing.</dd>
<dd><input type="checkbox" /> The formatting is consistent with the rest of Wikipedia, without too many headings. Bulleted lists are used sparingly or not at all.</dd>
<dd><input type="checkbox" /> Every claim is cited to a reliable source — like a textbook or academic journal — and it doesn&apos;t cite any blog posts.</dd>
<dd><input type="checkbox" /> The text includes links to other Wikipedia articles the first time each relevant topic is mentioned.</dd>
<dd><input type="checkbox" /> At least one related Wikipedia article links back to this one.</dd>
<dd><input type="checkbox" /> You&apos;ve thanked people who helped you. Check your User Talk page, and the Talk page of your article. If anyone offered help or feedback, say thanks!</dd>
{checklistItems.map(item => (
<dd key={item.key}>
<input
type="checkbox"
checked={checkboxStates[item.key]}
onChange={() => toggleCheckbox(item.key)}
/>
{item.label}
</dd>
))}
</dl>
{button}
</div>
Expand Down