mardi 25 mai 2021

How to make a list attached to Data Base in React

I'm preparing a small project for university and I need help The project is an app for Corona accessible high school students. As part of the app, I have the option to be a "teacher user" and I need to enter grades for students. This is where the problem comes in. I want when I go to the "Enter Grades" page, I get a list of all the names of the students(currently checking it on teachers) that appear in the data base, and when I click on one of them I can change their grade.

I can get the list of all users in Checkbox but I can't manage to make Checkbox display them as checked or unchecked. (I working with FireBase) ** I already did tests with console log to check values and everything look fine

class EnterGrades extends React.Component {
state= {
    students: null,
    isLoaded: false,
    checked: false
}

getStudentsOnQeueu = async () => {
    let students = await this.studentsRef.orderByChild("fullname")
    return students
  }
componentDidMount(){
    console.log('mounted')
    db.collection('Teacher').get().then( snapshot =>{
        const students = []
        snapshot.forEach( doc =>{
            KEY = Object.keys(doc.data());
            console.log("KEYS is :"+KEY);
            KEY.forEach( (key_id) => {
                if(key_id=='fullname'){
                    const data = doc.data()
                    console.log(data)
                    students.push(data)
                    console.log('name is:'+doc.data().fullname)
                }
                else{

                }
            })
        })
        this.setState({ students: students})
        this.setState({isLoaded:true})
        getStudentsOnQeueu();
    })
    .catch( error => Alert.alert('Error',error))
}
renderStudentList(){
    if(this.state.isLoaded!=false)
    return this.state.students.map((item,key)=> {
        return(
            <TouchableOpacity style= key={key} onPress={()=> {this.value=!this.value}}>
                <CheckBox value={false}/>
                <Text style=>{item.fullname}</Text>
            </TouchableOpacity>
        )
    })
}

onChecked(id){
    const data = this.state.students
    const index = data.findIndex(x => x.id === id);
    console.log('id is '+ id)
    console.log('index is '+index)
    const isInList = false;
    const checked = []
    if(checked.length > 0){
        console.log('checked length wasnt 0')
        for(let i=0;i<checked.length;i++){
            if(checked[i]==data[index])
                isInList = true;
        }
        if(isInList== false)
            checked.push(data[index]);
    }
    else{
        console.log('checked length was 0')
        console.log('data is' + data[index])
        checked.push(data[index]);
    }
    this.setState({ checked: checked})
    
}

render(){
    if(this.state.isLoaded!=false){
    return (
        <View style={styles.InputContainer}>
            <Text>Enter Grades</Text>
            <FlatList 
            data = {this.state.students}
            renderItem ={({item}) =>
            <Text>
                {`Student name: ${item.fullname}\n`}
                {`Email is: ${item.email}`}
            </Text>
            }
            />
            <RadioForm
                radio_props={this.dataList}
                
                onPress={(value) => {this.setState({value:value})}}
            />
        {this.renderStudentList()}
        <Button
                title="Update Students "
                onPress={() => {
                {this.getSelectedStudents}}
                }
            />
        </View>
    )
    }
}

each teacher has uid,email,checked(false/true) etc.




Aucun commentaire:

Enregistrer un commentaire