How to set data in modal in nextjs - reactjs

Question

I'm having trouble getting the data and displaying it on the modal interface when editing, usually I will use useState to update the data but is there any way I can pass the data through the variable?.thanks for your help !
view
Here is my code:
this is my index,
I'm trying to get the name and tags back and show the edit form
this is my index
import type { NextPage } from 'next'
import { useEffect, useState } from 'react'
import {
Box,
Button,
Grid,
Icon,
IconButton,
Menu,
MenuItem,
Typography,
} from '#mui/material'
import { MainLayout } from 'components/Layout/MainLayout'
import { HideAppBar } from '../AppBar/HideAppBar'
import { TagProps } from './components/Tag'
import { TraitProps } from './components/Trait'
import { TraitsPickerModal } from './components/TraitsPickerModal'
import { CreateTagCategoryModal } from './components/CreateTagCategoryModal'
import { ALL_TAG, TagCategoryList } from './components/AllTag'
import { Trait } from './components/Trait'
import EditOutlinedIcon from '#mui/icons-material/EditOutlined'
import DeleteOutlinedIcon from '#mui/icons-material/DeleteOutlined'
import { useStaticTagsViewModelSWR } from './hooks/useStaticArtViewModelSWR'
import { TagCategoryEditModal } from './components/Modal/TagCategoryEditModal'
import { TagCategoryDeleteModal } from './components/Modal/TagCategoryDeleteModal'
import { BlackButton } from 'components/Elements/Button/BlackButton'
import { MaterialIconFont } from 'assets/Styles/GlobalStyles'
import {
useStaticSWRTagsListViewModel,
StaticSWRTagstListKey,
} from './hooks/useStaticSWRTagsListViewModel'
import { mutate } from 'swr'
import { TagCategoryListData } from './interface'
const CONTENT_PADDING = '16px'
const dummyTagCategoryList = [
{
name: 'testes',
tagList: [
{
name: 'niceTag',
traitList: [
{
category: 'Clothes',
name: 'Polka',
icon: '/images/test/body4.png',
},
{
category: 'Clothes',
name: 'Dress',
icon: '/images/test/body5.png',
},
],
},
{ name: 'badTag', traitList: [] },
],
},
{
name: 'cat2',
tagList: [
{ name: 'tag1', traitList: [] },
{ name: 'tag2', traitList: [] },
],
},
]
type TaggedListType = TraitProps[][][]
type UntaggedListType = Record<string, TraitProps[]>[]
type TagCategoryListKey = keyof TagCategoryList
const Tags: NextPage = () => {
/**
* state
*/
const [tagCategoryList, setTagCategoryList] = useState<TagProps[]>([])
const [createModalOpen, setCreateModalOpen] = useState(false)
const [traitsPickerOpen, setTraitsPickerOpen] = useState(false)
const [categoryIndex, setCategoryIndex] = useState(0)
const [tagIndex, setTagIndex] = useState(0)
const [taggedList, setTaggedList] = useState<TaggedListType>([])
const [unTaggedList, setUntaggedList] = useState<UntaggedListType>([{}])
const [isVisibleUntaggedList, setIsVisibleUntaggedList] = useState<boolean[]>(
[...new Array(tagCategoryList.length)].map((n) => Boolean(n))
)
const [categoryAnchorElList, setCategoryAnchorElList] = useState(
[...new Array(tagCategoryList.length)].map(() => null)
)
const [categoryAnchorEl, setCategoryAnchorEl] = useState<null | HTMLElement>(
null
)
const [tagCategoryListData, setTagCategoryListData] = useState<
TagCategoryListData[]
>([])
const categoryMenuOpen = Boolean(categoryAnchorEl)
const [idItemTag, setIdItemTag] = useState(0)
/**
* Hook
*/
const { viewModel, setViewModel } = useStaticTagsViewModelSWR()
const { viewModelTagCategory, setViewModelTagCategory } =
useStaticSWRTagsListViewModel()
/**
* useEffect
*/
useEffect(() => {
setTagCategoryList(dummyTagCategoryList)
}, [])
useEffect(() => {
mutate(StaticSWRTagstListKey)
}, [])
useEffect(() => {
setTagCategoryListData(viewModelTagCategory)
}, [viewModelTagCategory])
useEffect(() => {
setTaggedList((list) =>
Object.assign(
tagCategoryList.map((category) => {
return category.tagList.reduce((memo, tag) => {
return tag.traitList
? [...memo, tag.traitList.map((trait) => trait)]
: memo
}, [])
}),
list
)
)
setIsVisibleUntaggedList((list) => [...list, false])
}, [tagCategoryList])
useEffect(() => {
const categoryUsedTraitList = taggedList.reduce((memo, list) => {
return [...memo, list.flat(2)]
}, [])
setUntaggedList(
categoryUsedTraitList.map((list) => {
return Object.keys(ALL_TAG).reduce((memo, key: TagCategoryListKey) => {
memo[key] = ALL_TAG[key].filter((trait) => {
return list.every((item) => {
return item.name !== trait.name
})
})
return memo
}, {} as TagCategoryList)
})
)
}, [taggedList])
/**
* Handler
*/
const onClickTrait = (pickedList: TraitProps[]) => {
setTaggedList((list) => {
list[categoryIndex][tagIndex] = pickedList
return JSON.parse(JSON.stringify(list))
})
}
const onClickToggleUntaggedComponentsBtn = (index: number) => {
setIsVisibleUntaggedList((list) => {
list[index] = !list[index]
return [...list]
})
}
const addTagCategory = (tagCategory: TagCategoryListData) => {
setViewModelTagCategory([...viewModelTagCategory, tagCategory])
}
const menuClick = (
event: React.MouseEvent<HTMLElement>,
idItemTag: number
) => {
setIdItemTag(idItemTag)
setCategoryAnchorEl(event.currentTarget)
}
const menuClose = () => {
setCategoryAnchorEl(null)
}
const openTagCategoryEditModal = (idItemTag: number) => {
const item = viewModelTagCategory.find((tagId) => tagId.id === idItemTag)
console.log(item?.name)
const itemTags = item?.tagList.map((tag) => {
return {
id: tag.id,
name: tag.name,
}
})
console.log(itemTags)
setViewModel({ ...viewModel, tagCategoryEditModal: { isOpen: true } })
setCategoryAnchorEl(null)
}
const openTagCategoryDeleteModal = (idItemTag: number) => {
console.log(idItemTag)
setViewModel({ ...viewModel, tagCategoryDeleteModal: { isOpen: true } })
setCategoryAnchorEl(null)
}
return (
<MainLayout>
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
<HideAppBar tabNum={2} />
<MaterialIconFont />
<TagCategoryEditModal />
<TagCategoryDeleteModal />
<Grid
container
sx={{
position: 'relative',
display: 'block',
textAlign: 'left',
padding: CONTENT_PADDING,
}}
>
<Typography
variant="h5"
style={{
textAlign: 'left',
fontWeight: 'bold',
}}
>
Tags
</Typography>
<Box sx={{ display: 'flex' }}></Box>
<Typography
variant="h6"
style={{ color: '#888888', textAlign: 'left' }}
>
Use tags to organize and group your token traits.
</Typography>
<BlackButton
onClick={() => setCreateModalOpen(true)}
sx={{
position: 'absolute',
right: CONTENT_PADDING,
top: CONTENT_PADDING,
paddingRight: '16px',
fontWeight: 'bold',
fontSize: '0.9rem',
}}
>
<Icon sx={{ marginRight: '8px' }}>add</Icon>New Tag Category
</BlackButton>
{viewModelTagCategory && (
<Box>
{viewModelTagCategory.map((tagCategory, i) => (
<Box key={tagCategory.name + i}>
<Box className="category-box" sx={{ marginTop: '16px' }}>
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<Typography
variant="subtitle1"
sx={{ fontWeight: 'bold' }}
>
{tagCategory.name}_{tagCategory.id}
</Typography>
<IconButton
aria-label="more"
id={`tag-category-menu-btn-${tagCategory.id}`}
aria-controls={
categoryMenuOpen
? `tag-category-menu-${tagCategory.id}`
: undefined
}
aria-expanded={categoryMenuOpen ? 'true' : undefined}
aria-haspopup="true"
data-category-num={tagCategory.id}
onClick={(e) => menuClick(e, tagCategory.id)}
>
<Icon>more_vert</Icon>
</IconButton>
<Menu
id={`tag-category-menu-${tagCategory.id}`}
MenuListProps={{
'aria-labelledby': `tag-category-menu-btn-${tagCategory.id}`,
}}
anchorEl={categoryAnchorEl}
open={categoryMenuOpen}
onClose={menuClose}
>
<MenuItem
onClick={() => openTagCategoryEditModal(idItemTag)}
>
<EditOutlinedIcon sx={{ mr: 1 }} />
<Typography>Edit</Typography>
</MenuItem>
<MenuItem
onClick={() => openTagCategoryDeleteModal(idItemTag)}
sx={{ color: 'red' }}
>
<DeleteOutlinedIcon sx={{ mr: 1 }} />
<Typography>Delete</Typography>
</MenuItem>
</Menu>
</Box>
{tagCategory.tagList.length > 0 &&
tagCategory.tagList.map((tag, j) => (
<Box key={j}>
<Box sx={{ display: 'flex', marginTop: '32px' }}>
<Box
sx={{
display: 'flex',
alignItems: 'center',
background: '#283237',
color: '#ffffff',
padding: '0 0 0 12px',
borderRadius: '20px',
fontWeight: 'bold',
marginLeft: '8px',
':first-of-type': {
marginLeft: 0,
},
}}
>
{tag.name}
<IconButton
size="small"
sx={{ color: '#ffffff' }}
>
<Icon fontSize="small">close</Icon>
</IconButton>
</Box>
<Button
sx={{
display: 'flex',
alignItems: 'center',
background: '#ffffff',
color: '#000000',
padding: '0 12px',
borderRadius: '20px',
fontWeight: 'bold',
border: '#aaaaaa 1px solid',
marginLeft: '8px',
textTransform: 'none',
':hover': {
borderColor: '#1976d2',
boxShadow: '0px 0px 0px 1px #1976d2 inset',
},
':only-child': {
marginLeft: 0,
},
}}
onClick={() => {
setCategoryIndex(i)
setTagIndex(j)
setTraitsPickerOpen(true)
}}
>
Add Traits
</Button>
</Box>
{taggedList[i] && (
<Box
sx={{
display: 'flex',
flexWrap: 'wrap',
marginTop: '8px',
width: '1000px',
}}
>
{taggedList[i][j].map((trait, k) => (
<Trait key={k} {...trait} />
))}
</Box>
)}
</Box>
))}
</Box>
<Button
onClick={() => onClickToggleUntaggedComponentsBtn(i)}
sx={{
fontSize: '0.85rem',
marginTop: '40px',
color: '#005eff',
textTransform: 'none',
}}
>
{isVisibleUntaggedList[i] ? 'Hide' : 'Show'} untagged
components
</Button>
{isVisibleUntaggedList[i] && (
<Box sx={{ width: '1000px', maxWidth: '100vw' }}>
{unTaggedList[i] &&
Object.keys(unTaggedList[i]).map((key, k) => (
<Box key={k}>
{unTaggedList[i][key].length > 0 && (
<>
<Box sx={{ fontWeight: 'bold' }}>{key}</Box>
<Box
sx={{
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
}}
>
{unTaggedList[i][key].map((trait, l) => (
<Trait key={`${k}_${l}`} {...trait} />
))}
</Box>
</>
)}
</Box>
))}
</Box>
)}
</Box>
))}
</Box>
)}
<CreateTagCategoryModal
open={createModalOpen}
setOpen={setCreateModalOpen}
onCreate={addTagCategory}
/>
<TraitsPickerModal
title={
tagCategoryList[categoryIndex]
? `${tagCategoryList[categoryIndex].tagList[tagIndex].name} Traits`
: ''
}
open={traitsPickerOpen}
setOpen={setTraitsPickerOpen}
onPick={onClickTrait}
traitList={
taggedList[categoryIndex]
? taggedList[categoryIndex][tagIndex]
: []
}
/>
</Grid>
</Box>
</MainLayout>
)
}
export default Tags
My modalEdit
import * as React from 'react'
import {
Box,
Button,
Modal,
Typography,
IconButton,
TextField,
FormControlLabel,
Switch,
} from '#mui/material'
import { ModalBox } from 'components/Elements/Box/ModalBox'
import { useStaticTagsViewModelSWR } from '../../hooks/useStaticArtViewModelSWR'
import CloseIcon from '#mui/icons-material/Close'
import AddCircleOutlineIcon from '#mui/icons-material/AddCircleOutline'
import DeleteOutlineOutlinedIcon from '#mui/icons-material/DeleteOutlineOutlined'
export const TagCategoryEditModal = () => {
const { viewModel, setViewModel } = useStaticTagsViewModelSWR()
const [includeMetadataFlag, setIncludeMetadataFlag] =
React.useState<boolean>(true)
const modalClose = () => {
setViewModel({ ...viewModel, tagCategoryEditModal: { isOpen: false } })
}
return (
<Modal
open={viewModel.tagCategoryEditModal.isOpen}
onClose={modalClose}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<>
<ModalBox
style={{ display: 'flex', flexDirection: 'column', height: 450 }}
>
<Box
sx={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
mb: 2,
}}
>
<Typography variant="h4" sx={{ fontWeight: 'bold' }} gutterBottom>
Edit Tag Category
</Typography>
<IconButton onClick={modalClose}>
<CloseIcon />
</IconButton>
</Box>
<Box sx={{ mb: 3 }}>
<Typography sx={{ mb: 1 }}>Name</Typography>
<TextField sx={{ width: '100%' }} />
</Box>
<Box sx={{ mb: 3 }}>
<Box
sx={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
}}
>
<Typography>Tags</Typography>
<IconButton>
<AddCircleOutlineIcon />
</IconButton>
</Box>
<Box
sx={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
}}
>
<TextField sx={{ width: '100%', mr: 2 }} />
<IconButton>
<DeleteOutlineOutlinedIcon />
</IconButton>
</Box>
</Box>
<Box sx={{ mb: 2 }}>
<FormControlLabel
sx={{ ml: 0 }}
value="start"
control={
<Switch
color="primary"
checked={includeMetadataFlag}
onChange={() => setIncludeMetadataFlag(!includeMetadataFlag)}
/>
}
label="Include in metadata?"
labelPlacement="start"
/>
</Box>
<Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
<Button
variant="outlined"
sx={{ color: 'black', borderColor: '#d1d8db', marginRight: 1 }}
onClick={modalClose}
>
Cancel
</Button>
<Button variant="contained">Save</Button>
</Box>
</ModalBox>
</>
</Modal>
)
}