rakannimer / react-firebase

🔥Declarative React bindings for Firebase Auth & Realtime Database.

Home Page:https://react-firebase-js.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

No way to update a document within a collection

ryanwtyler opened this issue · comments

I use FirestoreCollection to render a table of data. I want to allow the user to update any of the items within the collection but i have no access to the id of the document. All that FirestoreCollection exposes are the data.

return (
    <FirebaseAuthConsumer>
        {({ isSignedIn, user, providerId }) => {
            if (!isSignedIn)
                return (
                    <>
                        <div>not signed in</div>
                    </>
                )
            return (
                <>
                    <FirestoreCollection
                        path={`users/${user.uid}/workouts`}
                        orderBy={[{ field: 'date', type: 'desc' }]}
                    >
                        {({ value }) => {
                            if (!value) {
                                return (
                                    <>
                                        <div>loading...</div>
                                    </>
                                )
                            }

                            return (
                                <>
                                    <MaterialTable
                                        columns={[
                                            {
                                                title: 'Exercise',
                                                field: 'exercise', // accessor is the "key" in the data

                                                editComponent: (
                                                    tableData
                                                ) => (
                                                    <ComboBox
                                                        style={
                                                            comboBoxStyle
                                                        }
                                                        selectedKey={
                                                            tableData
                                                                .rowData
                                                                .exerciseId
                                                        }
                                                        label="Select Exercise"
                                                        allowFreeform
                                                        autoComplete="on"
                                                        options={items}
                                                        onChange={onChange}
                                                    />
                                                ),
                                            },
                                            {
                                                title: 'Reps',
                                                field: 'reps',
                                                validate: (rowData) =>
                                                    rowData.reps > 0,
                                            },
                                            {
                                                type: 'date',
                                                title: 'Date',
                                                field: 'date',
                                            },
                                            {
                                                title: 'exerciseId',
                                                field: 'exerciseId',
                                                hidden: true,
                                            },
                                           
                                        ]}
                                        editable={{
                                            onRowAdd: (newData) =>
                                                new Promise(
                                                    (resolve, reject) => {
                                                        setTimeout(() => {
                                                            console.log(
                                                                newData
                                                            )
                                                            FirestoreService.addWorkout(
                                                                {
                                                                    exerciseId: selectedKey,
                                                                    exercise: selectedExercise,
                                                                    date: formatDate(
                                                                        newData.date
                                                                    ),
                                                                    reps:
                                                                        newData.reps,
                                                                }
                                                            )
                                                            resolve(1)
                                                        }, 1000)
                                                    }
                                                ),
                                            onRowUpdate: (
                                                newData,
                                                oldData
                                            ) =>
                                                new Promise(
                                                    (resolve, reject) => {
                                                        setTimeout(() => {
                                                            console.log(
                                                                'newupd',
                                                                newData,
                                                                oldData
                                                            )

                                                            FirestoreService.updateWorkout(
                                                                {
                                                                    exerciseId: selectedKey,
                                                                    exercise: selectedExercise,
                                                                    date: formatDate(
                                                                        newData.date
                                                                    ),
                                                                    reps:
                                                                        newData.reps,
                                                                    id:
                                                                       **Here is where I need an ID**
                                                                }
                                                            )
                                                            resolve(1)
                                                        }, 1000)
                                                    }
                                                ),
                                        }}
                                        title="Workout Log"
                                        actions={[
                                            {
                                                icon: 'delete',
                                                tooltip: 'Delete Workout',
                                                onClick: (rowData) => {
                                                    FirestoreService.deleteWorkout(
                                                       
                                                      **_### Here is where I need and ID_**
                                                    )
                                                },
                                            },
                                        ]}
                                        data={value}
                                        options={{
                                            pageSize: 10,
                                            pageSizeOptions: [10, 25, 50],
                                            toolbar: true,
                                            paging: true,
                                            emptyRowsWhenPaging: false,
                                        }}
                                    ></MaterialTable>
                                </>
                            )
                        }}
                    </FirestoreCollection>
                </>
            )
        }}
    </FirebaseAuthConsumer>