diff --git a/frontend/apps/editor3d/app/src/components/reusable/UploadModal3D/UploadModal3D.tsx b/frontend/apps/editor3d/app/src/components/reusable/UploadModal3D/UploadModal3D.tsx index f2deb77346..c52e57fa14 100644 --- a/frontend/apps/editor3d/app/src/components/reusable/UploadModal3D/UploadModal3D.tsx +++ b/frontend/apps/editor3d/app/src/components/reusable/UploadModal3D/UploadModal3D.tsx @@ -14,12 +14,11 @@ import { CHARACTER_MIXAMO_FILE_TYPE, IMAGEPLANE_FILE_TYPE, } from "~/enums"; -import { assetModalVisible } from "~/pages/PageEnigma/signals"; import { IconDefinition } from "@fortawesome/fontawesome-svg-core"; interface Props { onClose: () => void; - onSuccess: () => void; + onSuccess: (category: FilterEngineCategories) => void; isOpen: boolean; title: string; titleIcon: IconDefinition; @@ -42,16 +41,6 @@ const categoryFileTypes: Partial> = { [FilterEngineCategories.LOCATION]: Object.values(OBJECT_FILE_TYPE), [FilterEngineCategories.CREATURE]: Object.values(OBJECT_FILE_TYPE), }; - -// Map engine categories to asset modal tabs -const categoryToAssetTab: Partial> = { - [FilterEngineCategories.OBJECT]: "objects", - [FilterEngineCategories.CHARACTER]: "character", - [FilterEngineCategories.IMAGE_PLANE]: "image-planes", - [FilterEngineCategories.LOCATION]: "sets", - [FilterEngineCategories.CREATURE]: "creatures", -}; - // Excluded category options for the upload modal const categoryOptions = Object.entries(FilterEngineCategories) .filter( @@ -120,6 +109,14 @@ export function UploadModal3D({ console.log("Initial selected category:", selectedCategory); }, [preselectedCategory, selectedCategory]); + useEffect(() => { + if (uploaderState.status === UploaderStates.success) { + onSuccess(selectedCategory); + onClose(); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [uploaderState.status]); + const UploaderModalContent = () => { switch (uploaderState.status) { case UploaderStates.ready: @@ -166,25 +163,12 @@ export function UploadModal3D({ ); case UploaderStates.success: { - // Store the selected category and tab in sessionStorage - const assetTab = categoryToAssetTab[selectedCategory]; - if (assetTab) { - sessionStorage.setItem("lastUploadedCategory", selectedCategory); - sessionStorage.setItem("lastUploadedTab", assetTab); - // Reopen the asset modal - assetModalVisible.value = true; - } else { - // Clear any existing stored values if we don't have a valid tab - sessionStorage.removeItem("lastUploadedCategory"); - sessionStorage.removeItem("lastUploadedTab"); - } - onSuccess(); - onClose(); return ( { onClose(); + onSuccess(selectedCategory); }} /> ); diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/AssetMenu/AssetModal.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/AssetMenu/AssetModal.tsx index 66fad4d576..e92d9df4a9 100644 --- a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/AssetMenu/AssetModal.tsx +++ b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/AssetMenu/AssetModal.tsx @@ -81,6 +81,21 @@ const AllTabSection = ({ ); +const categoryToTabIdMap: Record = { + [FilterEngineCategories.CHARACTER]: "characters", + [FilterEngineCategories.CREATURE]: "creatures", + [FilterEngineCategories.IMAGE_PLANE]: "image-planes", + [FilterEngineCategories.LOCATION]: "sets", + [FilterEngineCategories.OBJECT]: "objects", + [FilterEngineCategories.SKYBOX]: "skybox", + [FilterEngineCategories.ANIMATION]: "all", + [FilterEngineCategories.AUDIO]: "all", + [FilterEngineCategories.EXPRESSION]: "all", + [FilterEngineCategories.SCENE]: "all", + [FilterEngineCategories.SET_DRESSING]: "all", + [FilterEngineCategories.VIDEO_PLANE]: "all", +}; + export const AssetModal = () => { useSignals(); const [activeLibraryTab, setActiveLibraryTab] = useState("library"); @@ -104,6 +119,10 @@ export const AssetModal = () => { assetModalVisible.value = false; }; + const handleOpen = () => { + assetModalVisible.value = true; + }; + useEffect(() => { if (assetModalVisible.value) { // Check for stored category and tab from upload @@ -119,7 +138,10 @@ export const AssetModal = () => { const timer = setTimeout(() => { searchInputRef.current?.focus(); }, 100); - return () => clearTimeout(timer); + return () => { + clearTimeout(timer); + // Ensure no side effects remain + }; } return undefined; // eslint-disable-next-line react-hooks/exhaustive-deps @@ -406,21 +428,20 @@ export const AssetModal = () => { }; const handleAddAsset = () => { - assetModalVisible.value = false; + handleClose(); setIsUploadModalOpen(true); setSelectedCategory(null); setIsSelectVisible(true); }; const handleAddSpecificAsset = (category: FilterEngineCategories) => { - console.log("Selected category:", category); - assetModalVisible.value = false; + handleClose(); setIsUploadModalOpen(true); setSelectedCategory(category); setIsSelectVisible(false); }; - const handleUploadSuccess = () => { + const handleUploadSuccess = (category: FilterEngineCategories) => { if (reopenAfterDragSignal.value) { // Small delay to allow the modal to close and reopen setTimeout(() => { @@ -429,6 +450,23 @@ export const AssetModal = () => { } else { handleClose(); } + + // Use the provided category to find the AssetTab ID + const lastUploadedTabId = categoryToTabIdMap[category] || "all"; + + // Close the upload modal + setTimeout(() => { + sessionStorage.setItem("lastUploadedTab", lastUploadedTabId); + console.log("AssetModal: lastUploadedTabId set to:", lastUploadedTabId); + setIsUploadModalOpen(false); + handleOpen(); + }, 300); + + fetchUserCharacters(); + fetchUserObjects(); + fetchUserSets(); + fetchUserCreatures(); + fetchUserImagePlanes(); }; const clearSearch = () => setSearchTerm(""); @@ -581,21 +619,22 @@ export const AssetModal = () => { {currentTab.label} - {activeAssetTab !== "skybox" && ( - - )} + {activeAssetTab !== "skybox" && + activeAssetTab !== "all" && ( + + )} )} {renderContent()} @@ -609,7 +648,7 @@ export const AssetModal = () => { onClose={() => { setIsUploadModalOpen(false); }} - onSuccess={handleUploadSuccess} + onSuccess={(category) => handleUploadSuccess(category)} isOpen={isUploadModalOpen} title={`Upload ${selectedCategory ? (selectedCategory.toLowerCase().replace(/_/g, " ") === "location" ? "sets" : selectedCategory.toLowerCase().replace(/_/g, " ")) : "3D Asset"}`} titleIcon={!isSelectVisible ? currentTab.icon : faUpFromLine}