Saved request name

stellar · Nov 22, 2024 · 4bd568d · 4bd568d
1 parent b36137e
commit 4bd568d
Show file tree

Hide file tree

Showing 3 changed files with 131 additions and 59 deletions.
diff --git a/src/app/(sidebar)/endpoints/[[...pages]]/page.tsx b/src/app/(sidebar)/endpoints/[[...pages]]/page.tsx
@@ -23,16 +23,15 @@ import { PrettyJsonTextarea } from "@/components/PrettyJsonTextarea";
 import { ShareUrlButton } from "@/components/ShareUrlButton";
 import { CopyJsonPayloadButton } from "@/components/CopyJsonPayloadButton";
 import { PageCard } from "@/components/layout/PageCard";
+import { SaveToLocalStorageModal } from "@/components/SaveToLocalStorageModal";
 
 import { useStore } from "@/store/useStore";
 import { isEmptyObject } from "@/helpers/isEmptyObject";
 import { sanitizeArray } from "@/helpers/sanitizeArray";
 import { sanitizeObject } from "@/helpers/sanitizeObject";
 import { parseJsonString } from "@/helpers/parseJsonString";
-import { getSaveItemNetwork } from "@/helpers/getSaveItemNetwork";
 import { localStorageSavedEndpointsHorizon } from "@/helpers/localStorageSavedEndpointsHorizon";
 import { localStorageSavedRpcMethods } from "@/helpers/localStorageSavedRpcMethods";
-import { arrayItem } from "@/helpers/arrayItem";
 import { delayedAction } from "@/helpers/delayedAction";
 import { buildEndpointHref } from "@/helpers/buildEndpointHref";
 import { shareableUrl } from "@/helpers/shareableUrl";
@@ -51,6 +50,8 @@ import {
   AssetObjectValue,
   Network,
   FiltersObject,
+  SavedRpcMethod,
+  SavedEndpointHorizon,
 } from "@/types/types";
 
 import { EndpointsLandingPage } from "../components/EndpointsLandingPage";
@@ -138,6 +139,7 @@ export default function Endpoints() {
   const [urlPath, setUrlPath] = useState("");
   const [urlPathParams, setUrlPathparams] = useState("");
   const [urlParams, setUrlParams] = useState("");
+  const [isSaveModalVisible, setIsSaveModalVisible] = useState(false);
 
   const isTransactionPost = () => {
     return [
@@ -678,35 +680,7 @@ export default function Endpoints() {
               icon={<Icon.Save01 />}
               type="button"
               onClick={() => {
-                if (isRpcEndpoint) {
-                  const currentSaved = localStorageSavedRpcMethods.get();
-                  localStorageSavedRpcMethods.set(
-                    arrayItem.add(currentSaved, {
-                      url: requestUrl,
-                      method: pageData.requestMethod,
-                      rpcMethod: pageData.rpcMethod,
-                      timestamp: Date.now(),
-                      route: pathname,
-                      params,
-                      network: getSaveItemNetwork(network),
-                      shareableUrl: shareableUrl("requests"),
-                      payload: getPostPayload(),
-                    }),
-                  );
-                } else {
-                  const currentSaved = localStorageSavedEndpointsHorizon.get();
-                  localStorageSavedEndpointsHorizon.set(
-                    arrayItem.add(currentSaved, {
-                      url: requestUrl,
-                      method: pageData.requestMethod,
-                      timestamp: Date.now(),
-                      route: pathname,
-                      params,
-                      network: getSaveItemNetwork(network),
-                      shareableUrl: shareableUrl("requests"),
-                    }),
-                  );
-                }
+                setIsSaveModalVisible(true);
               }}
               showActionTooltip
               actionTooltipText="Saved"
@@ -1031,6 +1005,39 @@ export default function Endpoints() {
       <Alert variant="primary" placement="inline">
         {renderInfoMessage()}
       </Alert>
+
+      <SaveToLocalStorageModal
+        type="save"
+        itemTitle={isRpcEndpoint ? "RPC Method" : "Horizon Endpoint"}
+        itemProps={{
+          url: requestUrl,
+          method: pageData.requestMethod,
+          route: pathname,
+          params,
+          shareableUrl: shareableUrl("requests"),
+          ...(isRpcEndpoint
+            ? { payload: getPostPayload(), rpcMethod: pageData.rpcMethod }
+            : {}),
+        }}
+        allSavedItems={
+          isRpcEndpoint
+            ? localStorageSavedRpcMethods.get()
+            : localStorageSavedEndpointsHorizon.get()
+        }
+        isVisible={isSaveModalVisible}
+        onClose={() => {
+          setIsSaveModalVisible(false);
+        }}
+        onUpdate={(updatedItems) => {
+          if (isRpcEndpoint) {
+            localStorageSavedRpcMethods.set(updatedItems as SavedRpcMethod[]);
+          } else {
+            localStorageSavedEndpointsHorizon.set(
+              updatedItems as SavedEndpointHorizon[],
+            );
+          }
+        }}
+      />
     </>
   );
 }
diff --git a/src/app/(sidebar)/endpoints/components/SavedEndpointsPage.tsx b/src/app/(sidebar)/endpoints/components/SavedEndpointsPage.tsx
@@ -1,5 +1,5 @@
 import { useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import {
   Alert,
   Badge,
@@ -20,6 +20,7 @@ import { PrettyJsonTextarea } from "@/components/PrettyJsonTextarea";
 import { SavedItemTimestampAndDelete } from "@/components/SavedItemTimestampAndDelete";
 import { CopyJsonPayloadButton } from "@/components/CopyJsonPayloadButton";
 import { PageCard } from "@/components/layout/PageCard";
+import { SaveToLocalStorageModal } from "@/components/SaveToLocalStorageModal";
 
 import { Routes } from "@/constants/routes";
 import { localStorageSavedEndpointsHorizon } from "@/helpers/localStorageSavedEndpointsHorizon";
@@ -54,18 +55,34 @@ export const SavedEndpointsPage = () => {
     number | undefined
   >();
 
-  useEffect(() => {
+  const [currentRequestTimestamp, setCurrentRequestTimestamp] = useState<
+    number | undefined
+  >();
+
+  const isRpcTab = saved.activeTab === "rpc";
+
+  const updateSavedHorizonEndpoints = useCallback(() => {
     const horizonItems = localStorageSavedEndpointsHorizon
       .get()
       .filter((h) => h.network.id === network.id);
+    setSavedEndpointsHorizon(horizonItems);
+  }, [network.id]);
+
+  const updateSavedRpcRequests = useCallback(() => {
     const rpcItems = localStorageSavedRpcMethods
       .get()
       .filter((r) => r.network.id === network.id);
-
-    setSavedEndpointsHorizon(horizonItems);
     setSavedRpcMethods(rpcItems);
   }, [network.id]);
 
+  useEffect(() => {
+    updateSavedHorizonEndpoints();
+  }, [updateSavedHorizonEndpoints]);
+
+  useEffect(() => {
+    updateSavedRpcRequests();
+  }, [updateSavedRpcRequests]);
+
   useEffect(() => {
     const mappedRpcIndex = savedRpcMethods.reduce(
       (acc, _, index) => {
@@ -147,6 +164,24 @@ export const SavedEndpointsPage = () => {
             key={`horizon-${e.timestamp}`}
             addlClassName="PageBody__content"
           >
+            <Input
+              id={`saved-horizon-${e.timestamp}`}
+              fieldSize="md"
+              value={e.name}
+              readOnly
+              placeholder="Click Edit to add Horizon Endpoint name"
+              rightElement={
+                <InputSideElement
+                  variant="button"
+                  placement="right"
+                  onClick={() => {
+                    setCurrentRequestTimestamp(e.timestamp);
+                  }}
+                  icon={<Icon.Edit05 />}
+                />
+              }
+            />
+
             <div className="Endpoints__urlBar">
               <Input
                 id={`endpoint-url-${e.timestamp}`}
@@ -236,6 +271,25 @@ export const SavedEndpointsPage = () => {
                 {e.rpcMethod}
               </Badge>
             </Box>
+
+            <Input
+              id={`saved-rpc-${e.timestamp}`}
+              fieldSize="md"
+              value={e.name}
+              readOnly
+              placeholder="Click Edit to add RPC Request name"
+              rightElement={
+                <InputSideElement
+                  variant="button"
+                  placement="right"
+                  onClick={() => {
+                    setCurrentRequestTimestamp(e.timestamp);
+                  }}
+                  icon={<Icon.Edit05 />}
+                />
+              }
+            />
+
             <div className="Endpoints__urlBar">
               <Input
                 id={`endpoint-url-${e.timestamp}`}
@@ -347,13 +401,12 @@ export const SavedEndpointsPage = () => {
           tab1={{
             id: "rpc",
             label: "RPC Methods",
-            content: saved.activeTab === "rpc" ? <RpcEndpoints /> : null,
+            content: isRpcTab ? <RpcEndpoints /> : null,
           }}
           tab2={{
             id: "horizon",
             label: "Horizon Endpoints",
-            content:
-              saved.activeTab === "horizon" ? <HorizonEndpoints /> : null,
+            content: !isRpcTab ? <HorizonEndpoints /> : null,
           }}
           activeTabId={saved.activeTab}
           onTabChange={(id) => {
@@ -411,6 +464,38 @@ export const SavedEndpointsPage = () => {
           </Button>
         </Modal.Footer>
       </Modal>
+
+      <SaveToLocalStorageModal
+        type="editName"
+        itemTitle={isRpcTab ? "RPC Method" : "Horizon Endpoint"}
+        itemTimestamp={currentRequestTimestamp}
+        allSavedItems={
+          isRpcTab
+            ? localStorageSavedRpcMethods.get()
+            : localStorageSavedEndpointsHorizon.get()
+        }
+        isVisible={currentRequestTimestamp !== undefined}
+        onClose={(isUpdate?: boolean) => {
+          setCurrentRequestTimestamp(undefined);
+
+          if (isUpdate) {
+            if (isRpcTab) {
+              updateSavedRpcRequests();
+            } else {
+              updateSavedHorizonEndpoints();
+            }
+          }
+        }}
+        onUpdate={(updatedItems) => {
+          if (isRpcTab) {
+            localStorageSavedRpcMethods.set(updatedItems as SavedRpcMethod[]);
+          } else {
+            localStorageSavedEndpointsHorizon.set(
+              updatedItems as SavedEndpointHorizon[],
+            );
+          }
+        }}
+      />
     </Box>
   );
 };
diff --git a/src/components/SaveToLocalStorageModal.tsx b/src/components/SaveToLocalStorageModal.tsx
@@ -1,7 +1,6 @@
 import { useEffect, useState } from "react";
 import { Button, Input, Modal } from "@stellar/design-system";
 import { arrayItem } from "@/helpers/arrayItem";
-// import { localStorageSavedKeypairs } from "@/helpers/localStorageSavedKeypairs";
 import { getSaveItemNetwork } from "@/helpers/getSaveItemNetwork";
 import { useStore } from "@/store/useStore";
 import { AnyObject, LocalStorageSavedItem } from "@/types/types";
@@ -82,14 +81,6 @@ export const SaveToLocalStorageModal = <
             variant="primary"
             onClick={() => {
               if (currentItemIndex >= 0) {
-                // localStorageSavedKeypairs.set(
-                //   arrayItem.update(allSavedItems, currentItemIndex, {
-                //     ...currentItem,
-                //     timestamp: Date.now(),
-                //     name: savedItemName,
-                //   }),
-                // );
-
                 onUpdate(
                   arrayItem.update(allSavedItems, currentItemIndex, {
                     ...currentItem,
@@ -133,23 +124,12 @@ export const SaveToLocalStorageModal = <
             size="md"
             variant="primary"
             onClick={() => {
-              // const allCurrentKeypairs = localStorageSavedKeypairs.get();
-
-              // localStorageSavedKeypairs.set(
-              //   arrayItem.add(allCurrentKeypairs, {
-              //     timestamp: Date.now(),
-              //     network: getSaveItemNetwork(network),
-              //     name: savedItemName,
-              //     publicKey,
-              //     secretKey,
-              //   }),
-              // );
               onUpdate(
                 arrayItem.add(allSavedItems, {
                   timestamp: Date.now(),
                   network: getSaveItemNetwork(network),
                   name: savedItemName,
-                  ...itemProps,
+                  ...(itemProps || {}),
                 }),
               );