CRUD with a modal for creation or edit process, does it need a route in React?-CodePudding

I have to make a CRUD views for a database table, but I don't see the need of assign a route i.e.: "/table/new" for the create process or "/table/edit" for the update (edit) process, so I ask if I can handle this process with modal windows and their own API call without the need of create a single route for both, is this correct, or what are the pros/cons?

CodePudding user response：

I built single page CRUD app using MUI library. Here's the fragment of return clause of the single dialog handling all CRUD. Back-end is handled by REST API compliant PHP code. No need for fancy routing at this point.

return (
    <Dialog onClose={handleClose} open={mode !== null}>
        <DialogTitle>{mode ? titles[mode] : ''}</DialogTitle>
        <DialogContent>
            {
                mode === 'delete' ?
                    <DialogContentText style={{marginBottom: "1rem"}}>
                        Na pewno chcesz usunąć {localPlant ? `"${localPlant.namePolish} / ${localPlant.nameLatin}"` : ''}?
                    </DialogContentText>
                    :
                    <>
                        <DialogContentText style={{marginBottom: "1rem"}}>
                            Podaj nazwę polską i jej łaciński odpowiednik.
                        </DialogContentText>
                        <TextField
                            autoFocus
                            required
                            size="small"
                            margin="dense"
                            id="namePolish"
                            label="Nazwa polska"
                            value={localPlant ? localPlant.namePolish ?? '' : ''}
                            onChange={(event) => {
                                setLocalPlant({...localPlant, namePolish: event.target.value});
                                setError(false);
                            }}
                        />
                        <TextField
                            style={{marginLeft: "2rem", fontStyle: "italic"}}
                            required
                            size="small"
                            margin="dense"
                            id="nameLatin"
                            label="Nazwa łacińska"
                            value={localPlant ? localPlant.nameLatin ?? '' : ''}
                            onChange={(event) => {setLocalPlant({...localPlant, nameLatin: event.target.value}); setError(false);}}
                        />
                    </>
            }
                <Collapse in={error !== false}>
                <Alert severity="error">{error}</Alert>
            </Collapse>
        </DialogContent>
        <DialogActions>
            <Button onClick={handleClose}>Anuluj</Button>
            {
                !error && (
                    (mode === 'add' ? <Button onClick={handleAddPlant}>Dodaj</Button> : '') ||
                    (mode === 'edit' ? <Button onClick={handleEditPlant}>Zmień</Button> : '') ||
                    (mode === 'delete' ? <Button onClick={handleDeletePlant}>Usuń</Button> : '')
                )
            }
        </DialogActions>
    </Dialog>
);

CodePudding user response：

Yes it is totally fine to do this with modal without using routes for every single action. It is totally up to you for how you want to handle it. At least I don't see any cons in this process.

CodePudding user response：

It depends on UX. Basically if you have only a few field needs to create or update you can continue using Modal. Which will make UX better. Also for full page edit which you are saying that need routes. You can use drawer. Which will use full page and you can maintain data in single page either edit or create.

You can use the same component for creating or editing and passing a props is it editMode or not.