Feat: edit tier level name

src/App.tsx

@@ -2,6 +2,7 @@ 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';
@@ -41,11 +42,12 @@ const App = () => {
             color={tier_level.color}
             textColor={tier_level.textColor}
             name={tier_level.name}
-            key={tier_level.name}
+            id={tier_level.id}
+            key={tier_level.id ?? tier_level.name}
           />
         ))}
       </div>
-      <div className='flex flex-row w-full '>
+      <div className='flex flex-row w-full gap-1 p-5'>
         {images
           .filter(image => image.category === '')
           .map((image, index) => (
@@ -79,6 +81,7 @@ const App = () => {
         />
       </div>
       <TierModal />
+      <EditTierModal />
     </DndContext>
   );
 };

src/components/EditTierModal.tsx

@@ -0,0 +1,52 @@
+import { useEffect, useState } from 'react';
+import { useShallow } from 'zustand/shallow';
+import useStore from '../store';
+
+export const EditTierModal = () => {
+  const [tierLevel, setTierLevel, editTierLevel] = useStore(
+    useShallow(state => [state.editingTierLevel, state.setEditingTierLevel, state.editTierLevelName]),
+  );
+  const [newName, setNewName] = useState('');
+  useEffect(() => {
+    if (tierLevel) setNewName(tierLevel.name);
+  }, [tierLevel]);
+  return (
+    <div
+      className={`top-0 left-0 w-screen h-screen z-50 bg-black bg-opacity-50 ${tierLevel ? 'fixed' : 'hidden'}`}
+      onClick={e => {
+        e.preventDefault();
+        e.stopPropagation();
+        setTierLevel(null);
+      }}
+    >
+      <div
+        className={`absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] flex w-2/5 h-1/4 bg-[#2d3436] ps-8 pe-8 pt-8 pb-8 z-50 rounded-3xl flex-row gap-4 justify-center items-center text-white border-white border-2`}
+        onClick={e => {
+          e.preventDefault();
+          e.stopPropagation();
+        }}
+      >
+        {tierLevel && (
+          <div className='flex flex-col gap-4 justify-start items-center'>
+            <input
+              type='text'
+              defaultValue={tierLevel.name}
+              placeholder='Tier Name'
+              className='text-black'
+              onChange={e => setNewName(e.target.value)}
+            ></input>
+            <button
+              onClick={() => {
+                editTierLevel(tierLevel.id as string, newName);
+                setTierLevel(null);
+              }}
+            >
+              Save
+            </button>
+            <button onClick={() => setTierLevel(null)}>Cancel</button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

src/components/Tier.tsx

@@ -1,4 +1,5 @@
 import EditIcon from '@mui/icons-material/Edit';
+import { useShallow } from 'zustand/shallow';
 import useStore from '../store';
 import { TierImage } from './Image';
 import './Tier.scss';
@@ -9,10 +10,10 @@ export interface TierProps {
   textColor: string;
   id?: string;
 }
-export const Tier = ({ color, name, textColor }: TierProps) => {
+export const Tier = ({ color, name, textColor, id }: TierProps) => {
   let color_code = '';
   let text_color_code = '';
-  const tierImages = useStore(state => state.images);
+  const [tierImages, setEditingTierLevel] = useStore(useShallow(state => [state.images, state.setEditingTierLevel]));
   switch (color) {
     case 'green':
       color_code = '#00b894';
@@ -47,7 +48,12 @@ export const Tier = ({ color, name, textColor }: TierProps) => {
             backgroundColor: color_code,
           }}
         >
-          <button className='absolute right-[5%] top-[5%] opacity-0 transition duration-250 ease-in-out'>
+          <button
+            className='absolute right-[5%] top-[5%] opacity-0 transition duration-250 ease-in-out'
+            onClick={() => {
+              setEditingTierLevel({ name, color, textColor, id });
+            }}
+          >
             <EditIcon />
           </button>
           <p>{name}</p>

src/store.ts

@@ -14,6 +14,8 @@ interface tierStore {
   tierLevels: TierProps[];
   addTierLevel: (name: string, color: string, textColor: string) => void;
   editTierLevelName: (id: string, name: string) => void;
+  editingTierLevel: TierProps | null;
+  setEditingTierLevel: (level: TierProps | null) => void;
 }
 
 const useStore = create(
@@ -43,6 +45,8 @@ const useStore = create(
         set(state => ({ tierLevels: [...state.tierLevels, generateTierLevel(name, color, textColor)] })),
       editTierLevelName: (id: string, name: string) =>
         set(state => ({ tierLevels: state.tierLevels.map(t => (t.id === id ? { ...t, name } : t)) })),
+      editingTierLevel: null,
+      setEditingTierLevel: (level: TierProps | null) => set({ editingTierLevel: level }),
     }),
     { name: 'tierStore' },
   ),