From 2837816ff7bbe858c2acd5a02f4a9affc79b63dc Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Thu, 26 Sep 2024 00:27:39 +0800
Subject: [PATCH] chore: fix component state

---
 server/router/api/v1/memo_service.go          |  5 +--
 .../ActionButton/LocationSelector.tsx         | 36 ++++++++++++++-----
 web/src/components/MemoEditor/index.tsx       | 16 +--------
 3 files changed, 32 insertions(+), 25 deletions(-)

diff --git a/server/router/api/v1/memo_service.go b/server/router/api/v1/memo_service.go
index a0d84388..f9e5c10e 100644
--- a/server/router/api/v1/memo_service.go
+++ b/server/router/api/v1/memo_service.go
@@ -331,8 +331,9 @@ func (s *APIV1Service) UpdateMemo(ctx context.Context, request *v1pb.UpdateMemoR
 				return nil, errors.Wrap(err, "failed to set memo relations")
 			}
 		} else if path == "location" {
-			memo.Payload.Location = convertLocationToStore(request.Memo.Location)
-			update.Payload = memo.Payload
+			payload := memo.Payload
+			payload.Location = convertLocationToStore(request.Memo.Location)
+			update.Payload = payload
 		}
 	}
 
diff --git a/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx b/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx
index cf09ebcf..1e271d95 100644
--- a/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx
+++ b/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx
@@ -1,6 +1,6 @@
 import { Button, IconButton, Input } from "@mui/joy";
 import { LatLng } from "leaflet";
-import { MapPinIcon } from "lucide-react";
+import { MapPinIcon, XIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
 import LeafletMap from "@/components/LeafletMap";
@@ -10,10 +10,11 @@ import { useTranslate } from "@/utils/i18n";
 
 interface Props {
   location?: Location;
-  onChange: (location: Location) => void;
+  onChange: (location?: Location) => void;
 }
 
 interface State {
+  initilized: boolean;
   placeholder: string;
   position: LatLng;
 }
@@ -21,14 +22,24 @@ interface State {
 const LocationSelector = (props: Props) => {
   const t = useTranslate();
   const [state, setState] = useState<State>({
+    initilized: false,
     placeholder: props.location?.placeholder || "",
     position: new LatLng(props.location?.latitude || 0, props.location?.longitude || 0),
   });
   const [popoverOpen, setPopoverOpen] = useState<boolean>(false);
 
+  useEffect(() => {
+    setState((state) => ({
+      ...state,
+      placeholder: props.location?.placeholder || "",
+      position: new LatLng(props.location?.latitude || 0, props.location?.longitude || 0),
+    }));
+  }, [props.location]);
+
   useEffect(() => {
     if (popoverOpen && !props.location) {
       const handleError = (error: any, errorMessage: string) => {
+        setState({ ...state, initilized: true });
         toast.error(errorMessage);
         console.error(error);
       };
@@ -38,7 +49,7 @@ const LocationSelector = (props: Props) => {
           (position) => {
             const lat = position.coords.latitude;
             const lng = position.coords.longitude;
-            setState({ ...state, position: new LatLng(lat, lng) });
+            setState({ ...state, position: new LatLng(lat, lng), initilized: true });
           },
           (error) => {
             handleError(error, "Error getting current position");
@@ -69,21 +80,30 @@ const LocationSelector = (props: Props) => {
     setState({ ...state, position });
   };
 
+  const removeLocation = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    props.onChange(undefined);
+  };
+
   return (
     <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
       <PopoverTrigger>
-        <IconButton size="sm" component="div">
+        <IconButton className="group" size="sm" component="div">
           <MapPinIcon className="w-5 h-5 mx-auto shrink-0" />
           {props.location && (
-            <span className="font-normal ml-0.5 text-ellipsis whitespace-nowrap overflow-hidden max-w-32">
-              {props.location.placeholder}
-            </span>
+            <>
+              <span className="font-normal ml-0.5 text-ellipsis whitespace-nowrap overflow-hidden max-w-32">
+                {props.location.placeholder}
+              </span>
+              <XIcon className="w-5 h-5 mx-auto shrink-0 hidden group-hover:block hover:opacity-80" onClick={removeLocation} />
+            </>
           )}
         </IconButton>
       </PopoverTrigger>
       <PopoverContent align="center">
         <div className="min-w-80 sm:w-128 flex flex-col justify-start items-start">
-          <LeafletMap key={JSON.stringify(state.position)} latlng={state.position} onChange={onPositionChanged} />
+          <LeafletMap key={JSON.stringify(state.initilized)} latlng={state.position} onChange={onPositionChanged} />
           <div className="mt-2 w-full flex flex-row justify-between items-center gap-2">
             <Input
               placeholder="Choose location"
diff --git a/web/src/components/MemoEditor/index.tsx b/web/src/components/MemoEditor/index.tsx
index c194a7b6..3f3561ad 100644
--- a/web/src/components/MemoEditor/index.tsx
+++ b/web/src/components/MemoEditor/index.tsx
@@ -45,7 +45,6 @@ export interface Props {
 }
 
 interface State {
-  initialized: boolean;
   memoVisibility: Visibility;
   resourceList: Resource[];
   relationList: MemoRelation[];
@@ -65,7 +64,6 @@ const MemoEditor = (props: Props) => {
   const resourceStore = useResourceStore();
   const currentUser = useCurrentUser();
   const [state, setState] = useState<State>({
-    initialized: false,
     memoVisibility: Visibility.PRIVATE,
     resourceList: [],
     relationList: [],
@@ -112,16 +110,13 @@ const MemoEditor = (props: Props) => {
 
   useAsyncEffect(async () => {
     if (!memoName) {
-      setState((prevState) => ({
-        ...prevState,
-        initialized: true,
-      }));
       return;
     }
 
     const memo = await memoStore.getOrFetchMemoByName(memoName);
     if (memo) {
       handleEditorFocus();
+      setDisplayTime(memo.displayTime);
       setState((prevState) => ({
         ...prevState,
         memoVisibility: memo.visibility,
@@ -129,14 +124,9 @@ const MemoEditor = (props: Props) => {
         relationList: memo.relations,
         location: memo.location,
       }));
-      setDisplayTime(memo.displayTime);
       if (!contentCache) {
         editorRef.current?.setContent(memo.content ?? "");
       }
-      setState((prevState) => ({
-        ...prevState,
-        initialized: true,
-      }));
     }
   }, [memoName]);
 
@@ -403,10 +393,6 @@ const MemoEditor = (props: Props) => {
 
   const allowSave = (hasContent || state.resourceList.length > 0) && !state.isUploadingResource && !state.isRequesting;
 
-  if (!state.initialized) {
-    return null;
-  }
-
   return (
     <MemoEditorContext.Provider
       value={{