Saved Requests: add name field (#1175)

* Refactor save modal to a generic component * Saved request name
stellar · Nov 26, 2024 · 72739dc · 72739dc
1 parent 2268150
commit 72739dc
Show file tree

Hide file tree

Showing 10 changed files with 286 additions and 320 deletions.
diff --git a/src/app/(sidebar)/account/create/page.tsx b/src/app/(sidebar)/account/create/page.tsx
@@ -11,16 +11,17 @@ import { useQueryClient } from "@tanstack/react-query";
 import { useIsTestingNetwork } from "@/hooks/useIsTestingNetwork";
 import { useNetworkChanged } from "@/hooks/useNetworkChanged";
 import { getNetworkHeaders } from "@/helpers/getNetworkHeaders";
+import { localStorageSavedKeypairs } from "@/helpers/localStorageSavedKeypairs";
 
 import { GenerateKeypair } from "@/components/GenerateKeypair";
 import { ExpandBox } from "@/components/ExpandBox";
 import { SuccessMsg } from "@/components/FriendBot/SuccessMsg";
 import { ErrorMsg } from "@/components/FriendBot/ErrorMsg";
 import { Box } from "@/components/layout/Box";
-import { SaveKeypairModal } from "@/components/SaveKeypairModal";
+import { PageCard } from "@/components/layout/PageCard";
+import { SaveToLocalStorageModal } from "@/components/SaveToLocalStorageModal";
 
 import "../styles.scss";
-import { PageCard } from "@/components/layout/PageCard";
 
 export default function CreateAccount() {
   const { account, network } = useStore();
@@ -176,14 +177,21 @@ export default function CreateAccount() {
         }}
       />
 
-      <SaveKeypairModal
+      <SaveToLocalStorageModal
         type="save"
+        itemTitle="Keypair"
+        itemProps={{
+          publicKey: account.publicKey,
+          secretKey: secretKey,
+        }}
+        allSavedItems={localStorageSavedKeypairs.get()}
         isVisible={isSaveModalVisible}
         onClose={() => {
           setIsSaveModalVisible(false);
         }}
-        publicKey={account.publicKey!}
-        secretKey={secretKey}
+        onUpdate={(updatedItems) => {
+          localStorageSavedKeypairs.set(updatedItems);
+        }}
       />
     </div>
   );

diff --git a/src/app/(sidebar)/account/saved/page.tsx b/src/app/(sidebar)/account/saved/page.tsx
@@ -13,8 +13,9 @@ import {
 
 import { Box } from "@/components/layout/Box";
 import { InputSideElement } from "@/components/InputSideElement";
-import { SaveKeypairModal } from "@/components/SaveKeypairModal";
 import { SavedItemTimestampAndDelete } from "@/components/SavedItemTimestampAndDelete";
+import { PageCard } from "@/components/layout/PageCard";
+import { SaveToLocalStorageModal } from "@/components/SaveToLocalStorageModal";
 
 import { localStorageSavedKeypairs } from "@/helpers/localStorageSavedKeypairs";
 import { arrayItem } from "@/helpers/arrayItem";
@@ -27,7 +28,6 @@ import { useFriendBot } from "@/query/useFriendBot";
 import { useAccountInfo } from "@/query/useAccountInfo";
 
 import { NetworkType, SavedKeypair } from "@/types/types";
-import { PageCard } from "@/components/layout/PageCard";
 
 export default function SavedKeypairs() {
   const { network, selectNetwork, updateIsDynamicNetworkSelect } = useStore();
@@ -177,8 +177,11 @@ export default function SavedKeypairs() {
 
       <>{renderOtherNetworkMessage()}</>
 
-      <SaveKeypairModal
+      <SaveToLocalStorageModal
         type="editName"
+        itemTitle="Keypair"
+        itemTimestamp={currentKeypairTimestamp}
+        allSavedItems={localStorageSavedKeypairs.get()}
         isVisible={currentKeypairTimestamp !== undefined}
         onClose={(isUpdate?: boolean) => {
           setCurrentKeypairTimestamp(undefined);
@@ -187,7 +190,9 @@ export default function SavedKeypairs() {
             updateSavedKeypairs();
           }
         }}
-        keypairTimestamp={currentKeypairTimestamp}
+        onUpdate={(updatedItems) => {
+          localStorageSavedKeypairs.set(updatedItems);
+        }}
       />
     </Box>
   );

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>
   );
 };