Skip to content

Commit

Permalink
adding requerimtes of the form to the code
Browse files Browse the repository at this point in the history
  • Loading branch information
@aatmanvaidya
aatmanvaidya committed Oct 2, 2023
1 parent b9192bd commit 9eee2fe
Show file tree
Hide file tree
Showing 3 changed files with 177 additions and 35 deletions.
33 changes: 20 additions & 13 deletions browser-extension/plugin/src/ui-components/pages/Slur.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,19 +133,26 @@ export function Slur() {
<strong>Appropriated:</strong>{' '}
{slur.appropriated ? 'Yes' : 'No'}
</Text>
<Text>
<strong>
If, Appropriated, Is it by Community or
Others?:
</strong>{' '}
{slur.appropriationContext
? 'Community'
: 'Others'}
</Text>
<Text>
<strong>What Makes it Problematic?:</strong>{' '}
{slur.labelMeaning}
</Text>
{slur.appropriationContext && (
<Text>
<strong>
If, Appropriated, Is it by Community
or Others?:
</strong>{' '}
{slur.appropriationContext ===
'Community'
? 'Community'
: 'Others'}
</Text>
)}
{slur.labelMeaning && (
<Text>
<strong>
What Makes it Problematic?:
</strong>{' '}
{slur.labelMeaning}
</Text>
)}
<Text>
<strong>Categories:</strong>
<ul>
Expand Down
88 changes: 78 additions & 10 deletions browser-extension/plugin/src/ui-components/pages/SlurCreate.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ export function SlurCreate() {
labelMeaning: ''
};
const [formData, setFormData] = useState(initialFormData);
const [showWarning, setShowWarning] = useState(false);

const navigate = useNavigate();
const handleGoBack = () => {
Expand Down Expand Up @@ -72,8 +73,21 @@ export function SlurCreate() {
console.error('Error creating slur:', error);
}
};
const handleCategoryChange = ({ value }) => {
if (value.length === 0) {
setShowWarning(true);
return;
}
if (value.length <= 4) {
setShowWarning(false);
setFormData({ ...formData, categories: value });
} else {
setShowWarning(true);
}
};
const handleReset = () => {
setFormData(initialFormData);
setShowWarning(false);
};

return (
Expand All @@ -91,7 +105,18 @@ export function SlurCreate() {
handleSubmit(value);
}}
>
<FormField name="label" label="Label" required>
<FormField
name="label"
label={
<div>
Label{' '}
<Text size="xsmall" color="status-critical">
*
</Text>
</div>
}
required
>
<TextInput
id="slur-form-label"
name="label"
Expand All @@ -104,7 +129,14 @@ export function SlurCreate() {

<FormField
name="level_of_severity"
label="Level of Severity"
label={
<div>
Level of Severity{' '}
<Text size="xsmall" color="status-critical">
*
</Text>
</div>
}
required
>
<RadioButtonGroup
Expand All @@ -121,7 +153,18 @@ export function SlurCreate() {
/>
</FormField>

<FormField name="casual" label="Casual" required={false}>
<FormField
name="casual"
label={
<div>
Casual{' '}
<Text size="xsmall" color="status-critical">
*
</Text>
</div>
}
required={false}
>
<RadioButtonGroup
id="slur-form-casual"
name="casual"
Expand All @@ -139,7 +182,14 @@ export function SlurCreate() {

<FormField
name="appropriated"
label="Appropriated"
label={
<div>
Appropriated{' '}
<Text size="xsmall" color="status-critical">
*
</Text>
</div>
}
required={false}
>
<RadioButtonGroup
Expand All @@ -160,7 +210,7 @@ export function SlurCreate() {
<FormField
name="appropriationContext"
label="If, Appropriated, Is it by Community or Others?"
required={false}
// required={false}
>
<RadioButtonGroup
id="slur-form-appropriationContext"
Expand All @@ -185,7 +235,7 @@ export function SlurCreate() {
<FormField
name="labelMeaning"
label="What Makes it Problematic?"
required
// required
>
<TextArea
id="slur-form-label-meaning"
Expand All @@ -203,27 +253,45 @@ export function SlurCreate() {
<FormField
id="slur-form-categories"
name="categories"
label="Categories"
label={
<div>
Categories{' '}
<Text size="xsmall" color="status-critical">
*
</Text>
</div>
}
help={
<>
<Text size="small" color="#808080">
Select at least one and atmost four categories
</Text>
</>
}
required
>
<Select
id="slur-form-categories-select"
name="categories"
options={categoryOptions}
value={formData.categories}
onChange={({ value }) =>
setFormData({ ...formData, categories: value })
}
onChange={handleCategoryChange}
multiple
/>
</FormField>
{showWarning && (
<Box pad="small" background="status-warning" margin="small">
Please select at least one and at most four categories.
</Box>
)}

<Box direction="row" gap="medium">
<Button
type="submit"
primary
label="Submit"
id="slur-form-submit-button"
disabled={showWarning}
/>
<Button type="reset" label="Reset" onClick={handleReset} />
</Box>
Expand Down
91 changes: 79 additions & 12 deletions browser-extension/plugin/src/ui-components/pages/SlurEdit.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ import {
Select,
TextArea,
TextInput,
Anchor
Anchor,
Text
} from 'grommet';
import { useNavigate, useParams } from 'react-router-dom';
import Api from './Api';
Expand Down Expand Up @@ -47,6 +48,7 @@ export function SlurEdit() {
labelMeaning: ''
});
const [, setSlurData] = useState(null);
const [showWarning, setShowWarning] = useState(false);

useEffect(() => {
async function fetchSlurData() {
Expand Down Expand Up @@ -77,7 +79,18 @@ export function SlurEdit() {

fetchSlurData();
}, [user.accessToken, id]);

const handleCategoryChange = ({ value }) => {
if (value.length === 0) {
setShowWarning(true);
return;
}
if (value.length <= 4) {
setShowWarning(false);
setFormData({ ...formData, categories: value });
} else {
setShowWarning(true);
}
};
const handleGoBack = () => {
navigate('/slur');
};
Expand Down Expand Up @@ -110,7 +123,18 @@ export function SlurEdit() {
onChange={(nextValue) => setFormData(nextValue)}
onSubmit={() => handleSubmit()}
>
<FormField name="label" label="Label" required>
<FormField
name="label"
label={
<div>
Label{' '}
<Text size="xsmall" color="status-critical">
*
</Text>
</div>
}
required
>
<TextInput
id="slur-form-label"
name="label"
Expand All @@ -123,7 +147,14 @@ export function SlurEdit() {

<FormField
name="level_of_severity"
label="Level of Severity"
label={
<div>
Level of Severity{' '}
<Text size="xsmall" color="status-critical">
*
</Text>
</div>
}
required
>
<RadioButtonGroup
Expand All @@ -140,7 +171,18 @@ export function SlurEdit() {
/>
</FormField>

<FormField name="casual" label="Casual" required={false}>
<FormField
name="casual"
label={
<div>
Casual{' '}
<Text size="xsmall" color="status-critical">
*
</Text>
</div>
}
required={false}
>
<RadioButtonGroup
id="slur-form-casual"
name="casual"
Expand All @@ -158,7 +200,14 @@ export function SlurEdit() {

<FormField
name="appropriated"
label="Appropriated"
label={
<div>
Appropriated{' '}
<Text size="xsmall" color="status-critical">
*
</Text>
</div>
}
required={false}
>
<RadioButtonGroup
Expand All @@ -179,7 +228,7 @@ export function SlurEdit() {
<FormField
name="appropriationContext"
label="If, Appropriated, Is it by Community or Others?"
required={false}
// required={false}
>
<RadioButtonGroup
id="slur-form-appropriationContext"
Expand All @@ -204,7 +253,7 @@ export function SlurEdit() {
<FormField
name="labelMeaning"
label="What Makes it Problematic?"
required
// required
>
<TextArea
id="slur-form-label-meaning"
Expand All @@ -222,27 +271,45 @@ export function SlurEdit() {
<FormField
id="slur-form-categories"
name="categories"
label="Categories"
label={
<div>
Categories{' '}
<Text size="xsmall" color="status-critical">
*
</Text>
</div>
}
help={
<>
<Text size="small" color="#808080">
Select at least one and atmost four categories
</Text>
</>
}
required
>
<Select
id="slur-form-categories-select"
name="categories"
options={categoryOptions}
value={formData.categories}
onChange={({ value }) =>
setFormData({ ...formData, categories: value })
}
onChange={handleCategoryChange}
multiple
/>
</FormField>
{showWarning && (
<Box pad="small" background="status-warning" margin="small">
Please select at least one and at most four categories.
</Box>
)}

<Box direction="row" gap="medium">
<Button
type="submit"
primary
label="Save"
id="slur-form-save-button"
disabled={showWarning}
/>
</Box>
</Form>
Expand Down

0 comments on commit 9eee2fe

Please sign in to comment.