Feat: start working on dragndrop

src/App.tsx

@@ -69,7 +69,7 @@ function App() {
         {images
           .filter(image => image.category === '')
           .map((image, index) => (
-            <TierImage image={image.url} name='test' key={index} />
+            <TierImage image={image} key={index} />
           ))}
       </div>
       <div className='border border-black w-20 text-center cursor-pointer' onClick={clickUpload}>

src/components/Image.tsx

@@ -1,14 +1,23 @@
+import { tierImage } from '../store';
 interface ImageProps {
-  image: string;
+  image: tierImage;
-  name: string;
+  onDragStart?: () => void;
 }
 
-export const TierImage = ({ image, name }: ImageProps) => {
+export const TierImage = ({ image, onDragStart }: ImageProps) => {
   return (
-    <div className='flex flex-wrap justify-center gap-4 mr-1'>
+    <div
+      className='flex flex-wrap justify-center gap-4 mr-1'
+      onDragStart={() => {
+        // e.preventDefault();
+        if (onDragStart) onDragStart();
+      }}
+    >
       <div className={`w-[calc(20rem*.5625)] h-80 relative`}>
-        <img src={image} alt={name} className='h-full w-full object-cover' />
+        <img src={image.url} alt={image.name} className='h-full w-full object-cover' />
-        <div className='w-full bg-slate-500 text-white bg-opacity-70 text-center bottom-0 left-0 absolute'>{name}</div>
+        <div className='w-full bg-slate-500 text-white bg-opacity-70 text-center bottom-0 left-0 absolute'>
+          {image.name}
+        </div>
       </div>
     </div>
   );

src/components/Tier.tsx

@@ -1,4 +1,6 @@
-import { useAppSelector } from '../hooks';
+import { useState } from 'react';
+import { useAppDispatch, useAppSelector } from '../hooks';
+import { changeTierImage, tierImage } from '../store';
 import { TierImage } from './Image';
 
 export interface TierProps {
@@ -10,6 +12,7 @@ export const Tier = ({ color, name, textColor }: TierProps) => {
   let color_code = '';
   let text_color_code = '';
   const tierImages = useAppSelector(state => state.tierImages);
+  const dispatch = useAppDispatch();
   switch (color) {
     case 'green':
       color_code = '#00b894';
@@ -30,9 +33,23 @@ export const Tier = ({ color, name, textColor }: TierProps) => {
     default:
       text_color_code = '#2d3436';
   }
+
+  const [currentDragImage, setCurrentDragImage] = useState<tierImage | null>(null);
+
+  const onDragStart = (image: tierImage) => {
+    setCurrentDragImage(image);
+  };
+
   return (
     <>
-      <div className='w-full min-h-64 bg-[#2d3436] h-auto flex flex-row'>
+      <div
+        className='w-full min-h-64 bg-[#2d3436] h-auto flex flex-row'
+        onDragEnd={() => {
+          // e.preventDefault();
+          if (currentDragImage) dispatch(changeTierImage(currentDragImage));
+          setCurrentDragImage(null);
+        }}
+      >
         <div
           className='w-52 h-80 flex items-center justify-center'
           style={{
@@ -46,7 +63,7 @@ export const Tier = ({ color, name, textColor }: TierProps) => {
           {tierImages
             .filter(image => image.category === name)
             .map((image, index) => (
-              <TierImage image={image.url} name={image.name} key={index} />
+              <TierImage image={image} key={index} onDragStart={() => onDragStart(image)} />
             ))}
         </div>
       </div>

src/store.ts

@@ -1,6 +1,6 @@
 import { configureStore, createSlice, PayloadAction } from '@reduxjs/toolkit';
 
-interface tierImage {
+export interface tierImage {
   name: string;
   url: string;
   category: string;
@@ -16,10 +16,16 @@ const tierImages = createSlice({
     removeTierImage: (state, action: PayloadAction<string>) => {
       return state.filter(image => image.name !== action.payload);
     },
+    changeTierImage: (state, action: PayloadAction<tierImage>) => {
+      return state.map(image => {
+        if (image.name == action.payload.name) return action.payload;
+        return image;
+      });
+    },
   },
 });
 
-export const { addTierImage, removeTierImage } = tierImages.actions;
+export const { addTierImage, removeTierImage, changeTierImage } = tierImages.actions;
 
 const store = configureStore({
   reducer: {