Skip to content

Commit

Permalink
update Field component to control if the topics checkbox is checked o…
Browse files Browse the repository at this point in the history 
…r not when editing a resource b00tc4mp#484
  • Loading branch information
@juditta99
juditta99 committed Jun 23, 2024
1 parent e98a6dc commit 6f48f7f
Show file tree
Hide file tree
Showing 2 changed files with 149 additions and 21 deletions.
27 changes: 25 additions & 2 deletions staff/judy-grayland/project/app/src/components/Field.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { useState } from 'react'

function Field(props) {
if (props.type === 'radio') {
return (
Expand All @@ -9,21 +11,42 @@ function Field(props) {
value={props.value}
checked={props.checked}
onChange={props.onChange}
readOnly={props.readOnly}
></input>
<label htmlFor={props.inputId}>{props.children}</label>
</>
)
}
if (props.type === 'checkbox') {
const [isChecked, setChecked] = useState(
props.checked ? props.checked : false
)
// we use this to control if it's checked or not from the start. It then checks or unchecks itself when we click on it. The ternary is needed to avoid triggering a warning when you create new resources.

function updateList() {
const { value, valuesList, valuesListSetter } = props.updateListReq // we pass the topic, resourceTopic and the setResourceTopic as props

let updatedList = valuesList
if (valuesList.includes(value)) {
updatedList = valuesList.filter((_value) => _value !== value)
} else {
updatedList.push(value)
}
valuesListSetter(updatedList)
}

return (
<>
<input
name={props.name}
type="checkbox"
id={props.inputId}
value={props.value}
checked={props.checked}
onChange={props.onChange}
checked={isChecked} // instead of props.checked we use the useState hook
onChange={
props.onChange ? props.onChange : () => setChecked(!isChecked)
} // if we don't pass an onChange then we set the checked to the opposite of what we had
onClick={props.updateListReq ? () => updateList() : null} // if we do pass it an updatedListReq object (which contains all the info we need to update the resourceTopic array) we tell it to call the function when we click on the checkbox
></input>
<label htmlFor={props.inputId}>{props.children}</label>
</>
Expand Down
143 changes: 124 additions & 19 deletions staff/judy-grayland/project/app/src/pages/EditResource.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,19 +52,19 @@ function EditResource() {
function handleCancel() {
navigate('/resources')
}
// if the list includes the topic, we remove it. If it doesn´t have, it adds it.
function handleTopicChange(topic, topicList) {
console.log('argumentos de la función', topicList, topic)
let updatedTopics = topicList
if (topicList.includes(topic) && topicList.length > 1) {
updatedTopics = topicList.filter((_topic) => _topic !== topic)
} else {
updatedTopics.push(topic)
}
console.log('lista a setear', updatedTopics)
setResourceTopic(updatedTopics)
console.log('resultado de la función', resourceTopic)
}
// // if the list includes the topic, we remove it. If it doesn´t have, it adds it.
// function handleTopicChange(topic, topicList) {
// console.log('argumentos de la función', topicList, topic)
// let updatedTopics = topicList
// if (topicList.includes(topic) && topicList.length > 1) {
// updatedTopics = topicList.filter((_topic) => _topic !== topic)
// } else {
// updatedTopics.push(topic)
// }
// console.log('lista a setear', updatedTopics)
// setResourceTopic(updatedTopics)
// console.log('resultado de la función', resourceTopic)
// }

function handleSubmit(event) {
event.preventDefault()
Expand Down Expand Up @@ -106,33 +106,33 @@ function EditResource() {
<fieldset>
<legend>Elige el tipo de recurso:</legend>
<Field
readOnly
name="resourceType"
type="radio"
inputId="activity-radio"
value="activity"
// resourceType is a variable. Checked is an attribute on an HTML tag that accepts true or false. If it coincides with the string "activity", it evaluates to true and that makes it checked.
checked={resourceType === 'activity'}
// onChange={() => setResourceType('activity')}
>
Actividad
</Field>
<Field
readOnly
name="resourceType"
type="radio"
inputId="book-radio"
value="book"
checked={resourceType === 'book'}
// onChange={() => setResourceType('book')}
>
Libro
</Field>
<Field
readOnly
name="resourceType"
type="radio"
inputId="date-radio"
value="date"
checked={resourceType === 'date'}
// onChange={() => setResourceType('date')}
>
Fecha especial
</Field>
Expand Down Expand Up @@ -170,9 +170,14 @@ function EditResource() {
type="checkbox"
inputId="cultural-diversity-check"
checked={resourceTopic.includes('cultural-diversity')}
onChange={() =>
handleTopicChange('cultural-diversity', resourceTopic)
}
updatedListReq={{
value: 'cultural-diversity',
valuesList: resourceTopic,
valuesListSetter: setResourceTopic,
}}
// onChange={() =>
// handleTopicChange('cultural-diversity', resourceTopic)
// }
>
Diversidad cultural
</Field>
Expand All @@ -181,6 +186,12 @@ function EditResource() {
value="bullying"
type="checkbox"
inputId="bullying-check"
checked={resourceTopic.includes('bullying')}
updatedListReq={{
value: 'bullying',
valuesList: resourceTopic,
valuesListSetter: setResourceTopic,
}}
>
Bullying
</Field>
Expand All @@ -189,6 +200,12 @@ function EditResource() {
value="functional-diversity"
type="checkbox"
inputId="functional-diversity-check"
checked={resourceTopic.includes('functional-diversity')}
updatedListReq={{
value: 'functional-diversity',
valuesList: resourceTopic,
valuesListSetter: setResourceTopic,
}}
>
Diversidad funcional
</Field>
Expand All @@ -197,6 +214,12 @@ function EditResource() {
value="lgbt+"
type="checkbox"
inputId="lgbt+-check"
checked={resourceTopic.includes('lgbt+')}
updatedListReq={{
value: 'lgbt+',
valuesList: resourceTopic,
valuesListSetter: setResourceTopic,
}}
>
LGTB+
</Field>
Expand All @@ -205,6 +228,12 @@ function EditResource() {
value="gender-equality"
type="checkbox"
inputId="gender-equality-check"
checked={resourceTopic.includes('gender-equality')}
updatedListReq={{
value: 'gender-equality',
valuesList: resourceTopic,
valuesListSetter: setResourceTopic,
}}
>
Igualdad de género
</Field>
Expand All @@ -213,6 +242,12 @@ function EditResource() {
value="childrens-rights"
type="checkbox"
inputId="childrens-rights-check"
checked={resourceTopic.includes('childrens-rights')}
updatedListReq={{
value: 'childrens-rights',
valuesList: resourceTopic,
valuesListSetter: setResourceTopic,
}}
>
Derechos de la infancia
</Field>
Expand Down Expand Up @@ -246,6 +281,12 @@ function EditResource() {
value="cultural-diversity"
type="checkbox"
inputId="cultural-diversity-check"
checked={resourceTopic.includes('cultural-diversity')}
updatedListReq={{
value: 'cultural-diversity',
valuesList: resourceTopic,
valuesListSetter: setResourceTopic,
}}
>
Diversidad cultural
</Field>
Expand All @@ -254,6 +295,12 @@ function EditResource() {
value="bullying"
type="checkbox"
inputId="bullying-check"
checked={resourceTopic.includes('bullying')}
updatedListReq={{
value: 'bullying',
valuesList: resourceTopic,
valuesListSetter: setResourceTopic,
}}
>
Bullying
</Field>
Expand All @@ -262,6 +309,12 @@ function EditResource() {
value="functional-diversity"
type="checkbox"
inputId="functional-diversity-check"
checked={resourceTopic.includes('functional-diversity')}
updatedListReq={{
value: 'functional-diversity',
valuesList: resourceTopic,
valuesListSetter: setResourceTopic,
}}
>
Diversidad funcional
</Field>
Expand All @@ -270,6 +323,11 @@ function EditResource() {
value="lgbt+"
type="checkbox"
inputId="lgbt+-check"
updatedListReq={{
value: 'lgbt+',
valuesList: resourceTopic,
valuesListSetter: setResourceTopic,
}}
>
LGTB+
</Field>
Expand All @@ -278,6 +336,12 @@ function EditResource() {
value="gender-equality"
type="checkbox"
inputId="gender-equality-check"
checked={resourceTopic.includes('gender-equality')}
updatedListReq={{
value: 'gender-equality',
valuesList: resourceTopic,
valuesListSetter: setResourceTopic,
}}
>
Igualdad de género
</Field>
Expand All @@ -286,6 +350,12 @@ function EditResource() {
value="childrens-rights"
type="checkbox"
inputId="childrens-rights-check"
checked={resourceTopic.includes('childrens-rights')}
updatedListReq={{
value: 'childrens-rights',
valuesList: resourceTopic,
valuesListSetter: setResourceTopic,
}}
>
Derechos de la infancia
</Field>
Expand Down Expand Up @@ -314,6 +384,12 @@ function EditResource() {
value="cultural-diversity"
type="checkbox"
inputId="cultural-diversity-check"
checked={resourceTopic.includes('cultural-diversity')}
updatedListReq={{
value: 'cultural-diversity',
valuesList: resourceTopic,
valuesListSetter: setResourceTopic,
}}
>
Diversidad cultural
</Field>
Expand All @@ -322,6 +398,12 @@ function EditResource() {
value="bullying"
type="checkbox"
inputId="bullying-check"
checked={resourceTopic.includes('bullying')}
updatedListReq={{
value: 'bullying',
valuesList: resourceTopic,
valuesListSetter: setResourceTopic,
}}
>
Bullying
</Field>
Expand All @@ -330,6 +412,12 @@ function EditResource() {
value="functional-diversity"
type="checkbox"
inputId="functional-diversity-check"
checked={resourceTopic.includes('functional-diversity')}
updatedListReq={{
value: 'functional-diversity',
valuesList: resourceTopic,
valuesListSetter: setResourceTopic,
}}
>
Diversidad funcional
</Field>
Expand All @@ -338,6 +426,11 @@ function EditResource() {
value="lgbt+"
type="checkbox"
inputId="lgbt+-check"
updatedListReq={{
value: 'lgbt+',
valuesList: resourceTopic,
valuesListSetter: setResourceTopic,
}}
>
LGTB+
</Field>
Expand All @@ -346,6 +439,12 @@ function EditResource() {
value="gender-equality"
type="checkbox"
inputId="gender-equality-check"
checked={resourceTopic.includes('gender-equality')}
updatedListReq={{
value: 'gender-equality',
valuesList: resourceTopic,
valuesListSetter: setResourceTopic,
}}
>
Igualdad de género
</Field>
Expand All @@ -354,6 +453,12 @@ function EditResource() {
value="childrens-rights"
type="checkbox"
inputId="childrens-rights-check"
checked={resourceTopic.includes('childrens-rights')}
updatedListReq={{
value: 'childrens-rights',
valuesList: resourceTopic,
valuesListSetter: setResourceTopic,
}}
>
Derechos de la infancia
</Field>
Expand Down

0 comments on commit 6f48f7f

Please sign in to comment.