@@ -4,6 +4,7 @@ import './styles/UserImages.css';
44import '../assets/fonts/PixelifySans/PixelifySans-VariableFont_wght.ttf' ;
55import axios from '../api/axios' ;
66import { renderPixelDataToImage } from '../utils/pixelRenderer' ;
7+ import { Navigate } from 'react-router-dom' ;
78
89// modal component
910import Modal from "../components/Modal" ;
@@ -38,6 +39,7 @@ async function deleteDesign(design_id) {
3839function UserImages ( ) {
3940 const [ designs , setDesigns ] = useState ( [ ] ) ;
4041 const [ selectedDesign , setSelectedDesign ] = useState ( null ) ;
42+ const [ redirectToEdit , setRedirectToEdit ] = useState ( null ) ;
4143 const [ showDeleteModal , setShowDeleteModal ] = useState ( false ) ;
4244 const [ showAlertModal , setShowAlertModal ] = useState ( false ) ;
4345 const [ AlertMessage , setAlertMessage ] = useState ( null ) ;
@@ -75,11 +77,20 @@ function UserImages() {
7577 const handleEdit = ( ) => {
7678 if ( selectedDesign ) {
7779 console . log ( "Edit design" , selectedDesign . design_id ) ;
78- // TODO: Irsa: Go to edit view
79- // Not putting anything here so you can mount the component your way
80+ setRedirectToEdit ( {
81+ design : {
82+ design_id : selectedDesign . design_id ,
83+ title : selectedDesign . title ,
84+ pixel_data : selectedDesign . pixel_data
85+ }
86+ } ) ;
8087 }
8188 } ;
8289
90+ if ( redirectToEdit ) {
91+ return < Navigate to = "/edit" state = { redirectToEdit } replace /> ;
92+ }
93+
8394 const handleDeleteClick = ( ) => {
8495 if ( selectedDesign ) {
8596 setShowDeleteModal ( true ) ;
@@ -230,7 +241,7 @@ function UserImages() {
230241 >
231242 { selectedDesign . is_approved ? (
232243 < >
233- { ! selectedDesign . is_scheduled && (
244+ { ( ! selectedDesign . is_scheduled && ! selectedDesign . is_in_queue ) && (
234245 < button
235246 onClick = { handleQueue }
236247 className = "cursor-pointer w-full border font-bold text-black border-gray-300 bg-yellow-400 py-2 rounded-md text-md font-pixelify hover:bg-black hover:text-yellow-400 hover:shadow-md transition-all duration-200 ease-in-out"
@@ -240,7 +251,7 @@ function UserImages() {
240251 ) }
241252
242253 < div className = "flex flex-col sm:flex-row gap-4" >
243- < button
254+ { ! selectedDesign . is_in_queue && ( < button
244255 onClick = { selectedDesign . is_scheduled ? handleQueue : handleEdit }
245256 className = { `cursor-pointer flex-1 border font-bold text-black border-gray-300 py-2 rounded-md text-md font-pixelify hover:bg-black hover:shadow-md transition-all duration-200 ease-in-out ${
246257 selectedDesign . is_scheduled
@@ -249,7 +260,7 @@ function UserImages() {
249260 } `}
250261 >
251262 { selectedDesign . is_scheduled ? 'Edit Schedule' : 'Edit' }
252- </ button >
263+ </ button > ) }
253264
254265 < button
255266 onClick = { handleDeleteClick }
0 commit comments