@@ -18,13 +18,22 @@ import { DesignIcon } from "@sistent/sistent";
18
18
import { getFormatDate } from "@sistent/sistent" ;
19
19
import { SectionCard } from "./styledComponents" ;
20
20
import { ProxyUrl } from "../utils/constants" ;
21
+ import { useCallback } from "react" ;
22
+
23
+ export const REFRESH_RECENT_DESIGNS_EVENT = "refreshRecentDesigns" ;
24
+
25
+ // Create a custom event with optional detail payload
26
+ export const refreshRecentDesignsEvent = new CustomEvent (
27
+ REFRESH_RECENT_DESIGNS_EVENT ,
28
+ { } ,
29
+ ) ;
21
30
22
31
export default function RecentDesignsCard ( { isDarkTheme } ) {
23
32
const [ designs , setDesigns ] = useState ( [ ] ) ;
24
- const [ loading , setLoading ] = useState ( false ) ;
33
+ const [ loading , setLoading ] = useState ( true ) ;
25
34
const [ error , setError ] = useState ( null ) ;
26
-
27
- useEffect ( ( ) => {
35
+ const fetchRecentDesigns = useCallback ( ( ) => {
36
+ setLoading ( true ) ;
28
37
fetch ( ProxyUrl + "/api/pattern?page=0&pagesize=10&search=&order=updated_at" ) // Replace with your actual API endpoint
29
38
. then ( async ( res ) => {
30
39
if ( ! res . ok ) {
@@ -44,6 +53,29 @@ export default function RecentDesignsCard({ isDarkTheme }) {
44
53
} ) ;
45
54
} , [ ] ) ;
46
55
56
+ useEffect ( ( ) => {
57
+ fetchRecentDesigns ( ) ;
58
+ } , [ fetchRecentDesigns ] ) ;
59
+
60
+ useEffect ( ( ) => {
61
+ document . addEventListener ( REFRESH_RECENT_DESIGNS_EVENT , fetchRecentDesigns ) ;
62
+
63
+ return ( ) =>
64
+ document . removeEventListener (
65
+ REFRESH_RECENT_DESIGNS_EVENT ,
66
+ fetchRecentDesigns ,
67
+ ) ;
68
+ } , [ fetchRecentDesigns ] ) ;
69
+
70
+ const openDesign = ( design ) => {
71
+ const name = design . name . replace ( " " , "-" ) . toLowerCase ( ) ;
72
+ // const url = `http://localhost:9081/extension/meshmap?mode=design&design=${design.id}`;
73
+ const url = `https://cloud.layer5.io/catalog/content/my-designs/${ name } -${ design . id } ?source=%257B%2522type%2522%253A%2522my-designs%2522%257D` ;
74
+
75
+ window . ddClient . host . openExternal ( url ) ;
76
+ // window.location.href = url;
77
+ } ;
78
+
47
79
return (
48
80
< SectionCard
49
81
isDarkTheme = { isDarkTheme }
@@ -68,9 +100,9 @@ export default function RecentDesignsCard({ isDarkTheme }) {
68
100
key = { design . id }
69
101
secondaryAction = {
70
102
< IconButton
103
+ onClick = { ( ) => openDesign ( design ) }
71
104
edge = "end"
72
105
aria-label = "open"
73
- href = { `/designs/${ design . id } ` }
74
106
>
75
107
< OpenInNewIcon />
76
108
</ IconButton >
0 commit comments