collection_list.js

import React, { useState, useEffect } from 'react'
import {dbCreateCollection, dbGetCollection} from './database_util'

//General MUI imports
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import CircularProgress from '@mui/material/CircularProgress';
import Backdrop from '@mui/material/Backdrop';
import TextField from '@mui/material/TextField';

//Dialog Imports
import Dialog from '@mui/material/Dialog';
import DialogTitle from '@mui/material/DialogTitle';
import DialogContent from '@mui/material/DialogContent';
import DialogActions from '@mui/material/DialogActions';

//icon
import LayersIcon from '@mui/icons-material/Layers';
import AddIcon from '@mui/icons-material/Add';

//List Imports
import List from '@mui/material/List';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import Divider from '@mui/material/Divider';
import ListItem from '@mui/material/ListItem';

const CollectionList = (props) => {
    const [open, setOpen] = React.useState(false);
    const [newCollectionName, setNewCollectionName] = React.useState("false");

    const handleClose = () => {
        setOpen(false);
    };
    const handleOpen = () => {
        setNewCollectionName("");
        setOpen(true);
    };

    const handleSubmit = async (e) => {
        e.preventDefault();
        let id = await dbCreateCollection(newCollectionName);
        let detailCollection = await dbGetCollection(id);
        console.log("handleSubmit",newCollectionName, id, detailCollection);
        props.onSelectCollection(detailCollection)
        handleClose();
    };

    const handleSelect = async (id) => {
        let detailCollection = await dbGetCollection(id);
        props.onSelectCollection(detailCollection);
    }

    return (
        <Box sx={{
            "boxShadow":3
        }}>
            <List>
                <ListItem disablePadding key={999}>
                    <ListItemButton onClick={handleOpen}>
                        <ListItemIcon>
                            <AddIcon/>
                        </ListItemIcon>
                        <ListItemText primary={"Create New Collection"}/>
                    </ListItemButton>
                </ListItem>
                <Divider />
                {
                    props.collections.map(
                        (c) => (
                            <ListItem disablePadding key={c["collection_id"]}>
                                <ListItemButton onClick={() => handleSelect(c["collection_id"])}>
                                    <ListItemIcon>
                                        <LayersIcon />
                                    </ListItemIcon>
                                    <ListItemText primary={c["collection_name"]}  secondary={c["collection_id"]}/>
                                </ListItemButton>
                            </ListItem>
                        )
                    )
                }
                    
            </List>

            <Dialog
                open={open}
                onClose={handleClose}
                PaperProps={{
                    component:"form",
                    onSubmit: handleSubmit
                    
                }}
            >
                <DialogTitle>Create New Collection</DialogTitle>
                
                <DialogContent>
                    <br/>
                    <TextField label="Collection Name" variant="outlined" required value={newCollectionName} onChange={(e)=> {setNewCollectionName(e.target.value)}}/>
                    <br/>
                </DialogContent>
                <DialogActions>
                    <Button type="submit">Create</Button>
                    <Button onClick={handleClose}>Cancel</Button>
                </DialogActions>
            </Dialog>
        </Box>
    );
}

export default CollectionList;