Skip to content

Commit 3c19f7c

Browse files
committed
add refresh desing support
Signed-off-by: aabidsofi19 <mailtoaabid01@gmail.com>
1 parent 46bd2cd commit 3c19f7c

File tree

2 files changed

+40
-5
lines changed

2 files changed

+40
-5
lines changed

ui/src/components/ExtensionComponent/AuthedDashboard.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ import KanvasHorizontalLight from "../../img/SVGs/KanvasHorizontalLight";
3333

3434
import { randomApplicationNameGenerator } from "../../utils";
3535
import { getBase64EncodedFile, getUnit8ArrayDecodedFile } from "../utils/file";
36-
import RecentDesignsCard from "./RecentDesigns";
36+
import RecentDesignsCard, { refreshRecentDesignsEvent } from "./RecentDesigns";
3737

3838
const proxyUrl = "http://127.0.0.1:7877";
3939

@@ -127,6 +127,9 @@ const ImportDesignSection = ({ isDarkTheme }) => {
127127
});
128128

129129
if (!res.ok) throw new Error("Upload failed");
130+
// refresh recent designs
131+
document.dispatchEvent(refreshRecentDesignsEvent);
132+
130133
window.ddClient.desktopUI.toast.success(`Design uploaded as: ${name}`);
131134
} catch (err) {
132135
console.error("Import error:", err);

ui/src/components/ExtensionComponent/RecentDesigns.js

Lines changed: 36 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,22 @@ import { DesignIcon } from "@sistent/sistent";
1818
import { getFormatDate } from "@sistent/sistent";
1919
import { SectionCard } from "./styledComponents";
2020
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+
);
2130

2231
export default function RecentDesignsCard({ isDarkTheme }) {
2332
const [designs, setDesigns] = useState([]);
24-
const [loading, setLoading] = useState(false);
33+
const [loading, setLoading] = useState(true);
2534
const [error, setError] = useState(null);
26-
27-
useEffect(() => {
35+
const fetchRecentDesigns = useCallback(() => {
36+
setLoading(true);
2837
fetch(ProxyUrl + "/api/pattern?page=0&pagesize=10&search=&order=updated_at") // Replace with your actual API endpoint
2938
.then(async (res) => {
3039
if (!res.ok) {
@@ -44,6 +53,29 @@ export default function RecentDesignsCard({ isDarkTheme }) {
4453
});
4554
}, []);
4655

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+
4779
return (
4880
<SectionCard
4981
isDarkTheme={isDarkTheme}
@@ -68,9 +100,9 @@ export default function RecentDesignsCard({ isDarkTheme }) {
68100
key={design.id}
69101
secondaryAction={
70102
<IconButton
103+
onClick={() => openDesign(design)}
71104
edge="end"
72105
aria-label="open"
73-
href={`/designs/${design.id}`}
74106
>
75107
<OpenInNewIcon />
76108
</IconButton>

0 commit comments

Comments
 (0)