Hi, I’m having trouble solving this error:
Here is my code:
import React, { useState, useEffect, useCallback } from 'react';
import Toggle from '@atlaskit/toggle';
import DynamicTable from '@atlaskit/dynamic-table';
import Modal, {
ModalBody,
ModalFooter,
ModalHeader,
ModalTitle,
ModalTransition,
} from '@atlaskit/modal-dialog';
import { invoke } from '@forge/bridge';
import Button from '@atlaskit/button';
function App() {
const [isFixedSize, setIsFixedSize] = useState(false);
const [levelsData, setLevelsData] = useState([]);
const [isOpen, setIsOpen] = useState(false);
const createHead = (isFixedSize) => {
return {
cells: [
{
key: 'levelName',
content: 'Level name',
isSortable: true,
width: isFixedSize ? 150 : 'auto',
},
{
key: 'color',
content: 'Color',
isSortable: true,
width: isFixedSize ? 120 : 'auto',
},
{
key: 'backgroundColor',
content: 'Background Color',
isSortable: true,
width: isFixedSize ? 120 : 'auto',
},
{
key: 'description',
content: 'Description',
isSortable: true,
width: isFixedSize ? 120 : 'auto',
},
],
};
};
const onToggleFixedChange = () => {
setIsFixedSize(!isFixedSize);
};
const onSort = (sortedItems, sortKey, sortOrder) => {
const sortedRows = [...levelsData].sort((a, b) => {
const aValue = a.cells.find((cell) => cell.key === sortKey)?.content || '';
const bValue = b.cells.find((cell) => cell.key === sortKey)?.content || '';
return sortOrder === 'ASC' ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue);
});
setLevelsData(sortedRows);
};
const closeModal = useCallback(() => setIsOpen(false), []);
const openModal = useCallback(() => setIsOpen(true), []);
return (
<div>
<Button appearance="primary" onClick={openModal}>
Open modal
</Button>
<ModalTransition>
{isOpen && (
<Modal onClose={closeModal}>
<ModalHeader>
<ModalTitle appearance="danger">
You’re about to delete this page
</ModalTitle>
</ModalHeader>
<ModalBody>
<p>
Before you delete it permanently, there’s some things you should
know:
</p>
<ul>
<li>4 pages have links to this page that will break</li>
<li>2 child pages will be left behind in the page tree</li>
</ul>
</ModalBody>
<ModalFooter>
<Button appearance="subtle">Cancel</Button>
<Button appearance="danger" onClick={closeModal} autoFocus>
Delete
</Button>
</ModalFooter>
</Modal>
)}
</ModalTransition>
<div>
<Toggle
label="Fixed size"
onChange={onToggleFixedChange}
isChecked={isFixedSize}
/>
Fixed size
</div>
<DynamicTable
caption="List of Levels"
head={createHead(isFixedSize)}
rows={levelsData.map(level => ({
key: level.key,
cells: [
{ key: 'levelName', content: level.name },
{ key: 'color', content: level.color },
{ key: 'backgroundColor', content: level.backgroundColor },
{ key: 'description', content: level.description },
],
}))}
rowsPerPage={5}
defaultPage={1}
isRankable
onRankStart={(params) => console.log('onRankStart', params)}
onRankEnd={(params) => console.log('onRankEnd', params)}
onSort={onSort}
onSetPage={() => console.log('onSetPage')}
/>
</div>
);
}
export default App;