From 16cbcde00590dd4e44a7d3560885a178e937d653 Mon Sep 17 00:00:00 2001 From: Piyush Chauhan <42397980+pyshx@users.noreply.github.com> Date: Wed, 1 Nov 2023 14:33:24 +0530 Subject: [PATCH] chore(web): fix local name is random when added through asset (#779) --- web/src/beta/components/fields/URLField/index.tsx | 6 +++--- .../features/Editor/DataSourceManager/Common/index.tsx | 8 ++++++-- .../Editor/DataSourceManager/DelimitedText/index.tsx | 8 ++++++-- web/src/beta/features/Editor/DataSourceManager/utils.tsx | 5 +++-- web/src/beta/features/Modals/AssetModal/index.tsx | 4 ++-- 5 files changed, 20 insertions(+), 11 deletions(-) diff --git a/web/src/beta/components/fields/URLField/index.tsx b/web/src/beta/components/fields/URLField/index.tsx index 0b6b4b58c5..060a3fffaa 100644 --- a/web/src/beta/components/fields/URLField/index.tsx +++ b/web/src/beta/components/fields/URLField/index.tsx @@ -19,7 +19,7 @@ export type Props = { fileType?: "asset" | "URL" | "layerStyle"; entityType?: "image" | "file" | "layerStyle"; sceneId?: string; - onChange?: (value: string | undefined) => void; + onChange?: (value: string | undefined, name: string | undefined) => void; }; const URLField: React.FC = ({ @@ -38,7 +38,7 @@ const URLField: React.FC = ({ const [currentValue, setCurrentValue] = useState(value); const handleChange = useCallback( - (inputValue?: string) => { + (inputValue?: string, name?: string) => { if (!inputValue) return; if ( @@ -54,7 +54,7 @@ const URLField: React.FC = ({ } setCurrentValue(inputValue); - onChange?.(inputValue); + onChange?.(inputValue, name); }, [fileType, onChange, setNotification, t], ); diff --git a/web/src/beta/features/Editor/DataSourceManager/Common/index.tsx b/web/src/beta/features/Editor/DataSourceManager/Common/index.tsx index f16bb953e4..d3664e2ced 100644 --- a/web/src/beta/features/Editor/DataSourceManager/Common/index.tsx +++ b/web/src/beta/features/Editor/DataSourceManager/Common/index.tsx @@ -42,6 +42,7 @@ const Asset: React.FC = ({ sceneId, onSubmit, onClose }) => { const [sourceType, setSourceType] = useState("local"); const [fileFormat, setFileFormat] = useState("GeoJSON"); const [value, setValue] = useState(""); + const [layerName, setLayerName] = useState(""); const [prioritizePerformance, setPrioritizePerformance] = useState(false); const DataSourceOptions: DataSourceOptType = useMemo( () => [ @@ -70,7 +71,7 @@ const Asset: React.FC = ({ sceneId, onSubmit, onClose }) => { onSubmit({ layerType: "simple", sceneId, - title: generateTitle(value), + title: generateTitle(value, layerName), visible: true, config: { data: { @@ -88,7 +89,10 @@ const Asset: React.FC = ({ sceneId, onSubmit, onClose }) => { onClose(); }; - const handleOnChange = useCallback((value?: string) => setValue(value || ""), []); + const handleOnChange = useCallback((value?: string, name?: string) => { + setValue(value || ""); + setLayerName(name || ""); + }, []); return ( diff --git a/web/src/beta/features/Editor/DataSourceManager/DelimitedText/index.tsx b/web/src/beta/features/Editor/DataSourceManager/DelimitedText/index.tsx index 7a5a81c801..cb35e141f0 100644 --- a/web/src/beta/features/Editor/DataSourceManager/DelimitedText/index.tsx +++ b/web/src/beta/features/Editor/DataSourceManager/DelimitedText/index.tsx @@ -22,6 +22,7 @@ const DelimitedText: React.FC = ({ sceneId, onSubmit, onClose }) => { const [sourceType, setSourceType] = useState("local"); const [value, setValue] = useState(""); + const [layerName, setLayerName] = useState(""); const [lat, setLat] = useState(""); const [long, setLong] = useState(""); @@ -37,7 +38,7 @@ const DelimitedText: React.FC = ({ sceneId, onSubmit, onClose }) => { onSubmit({ layerType: "simple", sceneId, - title: generateTitle(value), + title: generateTitle(value, layerName), visible: true, config: { data: { @@ -53,7 +54,10 @@ const DelimitedText: React.FC = ({ sceneId, onSubmit, onClose }) => { onClose(); }; - const handleOnChange = useCallback((value?: string) => setValue(value || ""), []); + const handleOnChange = useCallback((value?: string, name?: string) => { + setValue(value || ""); + setLayerName(name || ""); + }, []); return ( diff --git a/web/src/beta/features/Editor/DataSourceManager/utils.tsx b/web/src/beta/features/Editor/DataSourceManager/utils.tsx index 69aed9c2c2..64936c8371 100644 --- a/web/src/beta/features/Editor/DataSourceManager/utils.tsx +++ b/web/src/beta/features/Editor/DataSourceManager/utils.tsx @@ -114,8 +114,9 @@ export const AddLayerWrapper = styled.div` justify-content: flex-start; `; -export const generateTitle = (url?: string): string => { - if (url && url.trim() !== "") { +export const generateTitle = (url: string, layerName?: string): string => { + if (layerName && layerName.trim() !== "") return layerName; + if (url.trim() !== "") { try { const urlObject = new URL(url); const pathParts = urlObject.pathname.split("/"); diff --git a/web/src/beta/features/Modals/AssetModal/index.tsx b/web/src/beta/features/Modals/AssetModal/index.tsx index dc51bc5cc9..8dd0faee57 100644 --- a/web/src/beta/features/Modals/AssetModal/index.tsx +++ b/web/src/beta/features/Modals/AssetModal/index.tsx @@ -28,7 +28,7 @@ export type Props = { className?: string; assetType?: "file" | "image"; open?: boolean; - onSelect?: (value: string) => void; + onSelect?: (value: string, name: string) => void; currentWorkspace?: Workspace; currentValue?: string; onModalClose: () => void; @@ -89,7 +89,7 @@ const ChooseAssetModal: React.FC = ({ const handleSelectButtonClick = useCallback(() => { if (selectedAssets && selectedAssets.length > 0) { - onSelect?.(selectedAssets[0].url); + onSelect?.(selectedAssets[0].url, selectedAssets[0].name); onClose?.(); } else { setNotification({