90 lines
2.7 KiB
TypeScript
90 lines
2.7 KiB
TypeScript
import { DndContext, DragEndEvent } from '@dnd-kit/core';
|
|
import { useRef } from 'react';
|
|
import { useShallow } from 'zustand/shallow';
|
|
import './App.scss';
|
|
import { EditTierModal } from './components/EditTierModal';
|
|
import { TierImage } from './components/Image';
|
|
import { Tier } from './components/Tier';
|
|
import { TierModal } from './components/TierModal';
|
|
import { tierImage } from './dto/tier';
|
|
import useStore from './store';
|
|
|
|
const App = () => {
|
|
const [images, addTierImage, tierLevels, editTierImage] = useStore(
|
|
useShallow(state => [state.images, state.addTierImage, state.tierLevels, state.editTierImage]),
|
|
);
|
|
|
|
const uploadBtn = useRef<HTMLInputElement>(null);
|
|
|
|
const clickUpload = () => {
|
|
if (uploadBtn.current) uploadBtn.current.click();
|
|
};
|
|
|
|
const handleAdd = (images: tierImage[]) => {
|
|
images.forEach(image => {
|
|
addTierImage(image);
|
|
});
|
|
};
|
|
|
|
const handleDragEnd = (event: DragEndEvent) => {
|
|
const { active, over } = event;
|
|
if (active.data.current && over && over.data.current) {
|
|
const image: tierImage = active.data.current.image;
|
|
editTierImage(image, over.data.current.name);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<DndContext onDragEnd={handleDragEnd}>
|
|
<div className='flex flex-col w-full'>
|
|
{tierLevels.map(tier_level => (
|
|
<Tier
|
|
color={tier_level.color}
|
|
textColor={tier_level.textColor}
|
|
name={tier_level.name}
|
|
id={tier_level.id}
|
|
key={tier_level.id ?? tier_level.name}
|
|
/>
|
|
))}
|
|
</div>
|
|
<div className='flex flex-row w-full gap-1 p-5 flex-wrap'>
|
|
{images
|
|
.filter(image => image.category === '')
|
|
.map((image, index) => (
|
|
<TierImage image={image} key={index} />
|
|
))}
|
|
</div>
|
|
<div className='border border-black w-20 text-center cursor-pointer' onClick={clickUpload}>
|
|
<span>Upload</span>
|
|
<input
|
|
type='file'
|
|
name='imageUpload'
|
|
accept='.jpeg'
|
|
ref={uploadBtn}
|
|
multiple
|
|
style={{ display: 'none' }}
|
|
onChange={event => {
|
|
console.log(event.target.files);
|
|
if (event.target.files) {
|
|
const upload_images: tierImage[] = [];
|
|
for (let i = 0; i < event.target.files.length; i++) {
|
|
const url = URL.createObjectURL(event.target.files[i]);
|
|
upload_images.push({
|
|
url: url,
|
|
name: event.target.files[i].name.replace('.jpeg', ''),
|
|
category: '',
|
|
});
|
|
}
|
|
handleAdd(upload_images);
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
<TierModal />
|
|
<EditTierModal />
|
|
</DndContext>
|
|
);
|
|
};
|
|
|
|
export default App;
|