adding canvas size button to sidebar - without fonctionality

src/store/app.slice.ts

@@ -3,10 +3,10 @@ import type { TransformableTextProps } from "@/components/transformable-text";
 import type { PayloadAction } from "@reduxjs/toolkit";
 import type { ChangeEvent } from "react";
 
-import { createSlice } from "@reduxjs/toolkit";
+import { createSlice, current } from "@reduxjs/toolkit";
 import { v1 } from "uuid";
 import type { TextConfig } from "konva/lib/shapes/Text";
-import { RootState } from "./store";
+import type { ImageConfig } from "konva/lib/shapes/Image";
 
 const initialState = {
   selectedItemId: null as string | null,
@@ -22,26 +22,30 @@ const defaultTextConfig = {
   fontFamily: "Roboto",
 };
 
+const defaultImageConfig = {};
+
 export const appSlice = createSlice({
   name: "app",
   initialState,
   reducers: {
+    addText: (state, action: PayloadAction<{ initialValue: string }>) => {
+      const textId = v1();
+      state.texts.push({
+        text: action.payload.initialValue,
+        id: textId,
+        ...defaultTextConfig,
+      });
+
+      console.log(current(state.texts));
+    },
+
     addImage: (state, action: PayloadAction<ChangeEvent<HTMLInputElement>>) => {
       const file = action.payload.target.files?.[0];
       if (!file) return;
       const imageId = v1();
       const imageUrl = URL.createObjectURL(file);
       state.images.push({ imageUrl, id: imageId });
-    },
-
-    addText: (state, action: PayloadAction<{ initialValue: string }>) => {
-      const textId = v1();
-      console.log(state);
-      state.texts.push({
-        text: action.payload.initialValue,
-        id: textId,
-        ...defaultTextConfig,
-      });
+      console.log(current(state.images));
     },
 
     selectItem: (state, action: PayloadAction<string>) => {
@@ -54,7 +58,7 @@ export const appSlice = createSlice({
 
     updateText: (
       state,
-      action: PayloadAction<{ id: string } & Partial<TextConfig>>,
+      action: PayloadAction<{ id: string } & Partial<TransformableTextProps>>,
     ) => {
       const textToUpdateIndex = state.texts.findIndex(
         (t) => t.id === action.payload.id,
@@ -69,11 +73,28 @@ export const appSlice = createSlice({
       };
     },
 
+    updateImage: (
+      state,
+      action: PayloadAction<{ id: string } & Partial<TransformableImageProps>>,
+    ) => {
+      const imageToUpdateIndex = state.images.findIndex(
+        (img) => img.id === action.payload.id,
+      );
+      const imageToUpdate = state.images[imageToUpdateIndex];
+
+      if (!imageToUpdate) return;
+
+      state.images[imageToUpdateIndex] = {
+        ...imageToUpdate,
+        ...action.payload,
+      };
+    },
+
     deleteShape: (state, action: PayloadAction<string>) => {
-      console.log(state.texts);
       return {
         ...state,
         texts: state.texts.filter((shape) => shape.id !== action.payload),
+        images: state.images.filter((shape) => shape.id !== action.payload),
       };
     },
   },
@@ -85,5 +106,6 @@ export const {
   selectItem,
   deselectItem,
   updateText,
+  updateImage,
   deleteShape,
 } = appSlice.actions;