Feat: redux for images in tier list

src/App.tsx

@@ -1,7 +1,9 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef } from 'react';
 import './App.css';
 import { TierImage } from './components/Image';
 import { Tier, TierProps } from './components/Tier';
+import { useAppDispatch, useAppSelector } from './hooks';
+import { addTierImage } from './store';
 
 const default_tier_levels: TierProps[] = [
   {
@@ -21,17 +23,36 @@ const default_tier_levels: TierProps[] = [
   },
 ];
 
+interface tierImage {
+  name: string;
+  url: string;
+  category: string;
+}
+
 function App() {
-  const [images, setImages] = useState<string[]>([]);
+  const images = useAppSelector(state => state.tierImages);
+  const dispatch = useAppDispatch();
   useEffect(() => {
     console.log(images);
   }, [images]);
+
   const uploadBtn = useRef<HTMLInputElement>(null);
 
   const clickUpload = () => {
     if (uploadBtn.current) uploadBtn.current.click();
   };
 
+  const getRandomCategoryName = () => {
+    const categoryNames = default_tier_levels.flatMap(category => category.name);
+    return categoryNames[Math.floor(Math.random() * categoryNames.length)];
+  };
+
+  const handleAdd = (images: tierImage[]) => {
+    images.forEach(image => {
+      dispatch(addTierImage(image));
+    });
+  };
+
   return (
     <>
       <div className='flex flex-col w-full'>
@@ -45,9 +66,11 @@ function App() {
         ))}
       </div>
       <div className='flex flex-row w-full'>
-        {images.map((image, index) => (
-          <TierImage image={image} name='test' key={index} />
-        ))}
+        {images
+          .filter(image => image.category === '')
+          .map((image, index) => (
+            <TierImage image={image.url} name='test' key={index} />
+          ))}
       </div>
       <div className='border border-black w-20 text-center cursor-pointer' onClick={clickUpload}>
         <span>Upload</span>
@@ -60,12 +83,16 @@ function App() {
           onChange={event => {
             console.log(event.target.files);
             if (event.target.files) {
-              const upload_images: string[] = [];
+              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);
+                upload_images.push({
+                  url: url,
+                  name: event.target.files[i].name.replace('.jpeg', ''),
+                  category: getRandomCategoryName(),
+                });
               }
-              setImages(prev => [...prev, ...upload_images]);
+              handleAdd(upload_images);
             }
           }}
         />