Merge pull request #26 from placeholder-soft/fix/remove-debounce-cache

fix: remove debounce useRef to prevent cache

app/src/modules/character/actions.ts

@@ -44,7 +44,7 @@ export const createCharacterImage = (
   data,
 });
 
-type CreateCharacterImageSuccessBody = { blob: Blob; characterType: string };
+type CreateCharacterImageSuccessBody = { blob: Blob };
 export type CreateCharacterImageSuccessAction = Action & {
   data: CreateCharacterImageSuccessBody;
 };

app/src/modules/character/reducers.ts

@@ -31,8 +31,8 @@ const characterReducer = (state = initialState, action: CharacterAction) => {
       return { ...state, characterType, customCharacterType };
     }
     case CREATE_CHARACTER_IMAGE_SUCCESS: {
-      const { blob, characterType } = action.data;
-      return { ...state, characterImage: blob, characterType };
+      const { blob } = action.data;
+      return { ...state, characterImage: blob };
     }
     default:
       return state;

app/src/modules/character/sagas.ts

@@ -15,6 +15,7 @@ let controller = new AbortController();
 // Sample worker saga
 function* createCharacterImage(action: CreateCharacterImageAction) {
   const { sketchBlob, prompt } = action.data;
+  console.log(prompt);
   const formData = new FormData();
   formData.append("sketch_file", sketchBlob);
   formData.append("prompt", addPrefix(prompt));
@@ -35,9 +36,7 @@ function* createCharacterImage(action: CreateCharacterImageAction) {
         signal: controller.signal,
       },
     );
-    yield put(
-      createCharacterImageSuccess({ blob: data, characterType: prompt }),
-    );
+    yield put(createCharacterImageSuccess({ blob: data }));
   } catch (e) {
     console.error(e);
   }

app/src/pages/canvas/index.tsx

@@ -1,5 +1,5 @@
 /// <reference types="vite-plugin-svgr/client" />
-import { FC, useEffect, useRef, useState } from "react";
+import { FC, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import styled from "styled-components";
@@ -16,7 +16,6 @@ import { Header } from "../../components/Layout/Layout";
 import { Button, DropdownMenu, TextField } from "@radix-ui/themes";
 import { CaretDownIcon } from "@radix-ui/react-icons";
 import { CHARACTER_BASE } from "../../shared/characterTypes";
-import { debounce } from "lodash";
 import Loader from "../../components/Loader";
 
 const PreviewContainer = styled.div`
@@ -151,12 +150,16 @@ const CanvasPage = () => {
     }
   }, [characterType]);
 
-  const renderPreview = useRef(
-    debounce((val) => {
-      setSketchBlob(val);
-      dispatch(createCharacterImage({ sketchBlob: val, prompt }));
-    }, 1000),
-  ).current;
+  // NOTE: useRef cached the updated value so I remove the debounce temporarily
+  const renderPreview = (val) => {
+    setSketchBlob(val);
+    dispatch(
+      createCharacterImage({
+        sketchBlob: val,
+        prompt: characterType === "Custom" ? prompt : characterType,
+      }),
+    );
+  };
 
   useEffect(() => {
     if (sketchBlob) {
@@ -203,7 +206,9 @@ const CanvasPage = () => {
                 <StyledInput
                   placeholder="ENTER Custom CHARACTER"
                   value={prompt}
-                  onChange={(e) => setPrompt(e.target.value)}
+                  onChange={(e) => {
+                    setPrompt(e.target.value);
+                  }}
                 />
               </StyledInputRoot>
             )}