chore(web): fix local name is random when added through asset (#779)

reearth · Nov 1, 2023 · 16cbcde · 16cbcde
1 parent 12eddc8
commit 16cbcde
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 11 deletions.
diff --git 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<Props> = ({
@@ -38,7 +38,7 @@ const URLField: React.FC<Props> = ({
   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<Props> = ({
       }
 
       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
@@ -42,6 +42,7 @@ const Asset: React.FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
   const [sourceType, setSourceType] = useState<SourceType>("local");
   const [fileFormat, setFileFormat] = useState<FileFormatType>("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<DataProps> = ({ 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<DataProps> = ({ sceneId, onSubmit, onClose }) => {
     onClose();
   };
 
-  const handleOnChange = useCallback((value?: string) => setValue(value || ""), []);
+  const handleOnChange = useCallback((value?: string, name?: string) => {
+    setValue(value || "");
+    setLayerName(name || "");
+  }, []);
 
   return (
     <ColJustifyBetween>

diff --git 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<DataProps> = ({ sceneId, onSubmit, onClose }) => {
 
   const [sourceType, setSourceType] = useState<SourceType>("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<DataProps> = ({ 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<DataProps> = ({ sceneId, onSubmit, onClose }) => {
     onClose();
   };
 
-  const handleOnChange = useCallback((value?: string) => setValue(value || ""), []);
+  const handleOnChange = useCallback((value?: string, name?: string) => {
+    setValue(value || "");
+    setLayerName(name || "");
+  }, []);
 
   return (
     <ColJustifyBetween>

diff --git 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
@@ -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<Props> = ({
 
   const handleSelectButtonClick = useCallback(() => {
     if (selectedAssets && selectedAssets.length > 0) {
-      onSelect?.(selectedAssets[0].url);
+      onSelect?.(selectedAssets[0].url, selectedAssets[0].name);
       onClose?.();
     } else {
       setNotification({