refactor: optimized key in form & anonymous functions Refactoring (Pr…

…ovableHQ#835) * refactor: remove unused key and avoid use index as key * refactor: useMemo instead of anonymous functions * refactor: useMemo instead of anonymous functions --------- Co-authored-by: Brent C <[email protected]>
demox-labs · Feb 9, 2024 · a08416f · a08416f
1 parent a5cc47b
commit a08416f
Show file tree

Hide file tree

Showing 10 changed files with 80 additions and 56 deletions.
diff --git a/website/src/components/InputForm.jsx b/website/src/components/InputForm.jsx
@@ -11,7 +11,6 @@ const createFormField = (field, index) => (
     <Form.Item
         label={nameOrIndex(field, index)}
         name={nameOrIndex(field, index)}
-        key={index}
     >
         <Input placeholder={field.type} />
     </Form.Item>
@@ -20,10 +19,9 @@ const createFormField = (field, index) => (
 export const FormGenerator = ({ formData }) => {
     const renderFormFields = (fields) => {
         return fields.map((field, index) => {
-            console.log("field", field);
             if (field.members) {
                 return (
-                    <div key={index}>
+                    <div key={nameOrIndex(field, index)}>
                         <Title level={4}>{nameOrIndex(field, index)}</Title>
                         {renderFormFields(field.members)}
                     </div>

diff --git a/website/src/tabs/account/SignMessage.jsx b/website/src/tabs/account/SignMessage.jsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import {useMemo, useState} from "react";
 import { Card, Divider, Form, Input } from "antd";
 import { CopyButton } from "../../components/CopyButton";
 import { useAleoWASM } from "../../aleo-wasm-hook";
@@ -37,9 +37,17 @@ export const SignMessage = () => {
 
     const layout = { labelCol: { span: 3 }, wrapperCol: { span: 21 } };
 
+    const signatureString = useMemo(() => {
+        return signingKey !== null ? signingKey : ""
+    }, [signingKey]);
+
+    const messageString = useMemo(() => {
+        return message !== null ? message : ""
+    }, [signingKey]);
+
+
     if (aleo !== null) {
-        const signatureString = () => (signingKey !== null ? signingKey : "");
-        const messageString = () => (message !== null ? message : "");
+
 
         return (
             <Card
@@ -61,7 +69,7 @@ export const SignMessage = () => {
                             name="Message"
                             size="large"
                             placeholder="Message"
-                            value={messageString()}
+                            value={messageString}
                             allowClear={true}
                             onChange={onMessageChange}
                         />
@@ -74,9 +82,9 @@ export const SignMessage = () => {
                             <Input
                                 size="large"
                                 placeholder="Signature"
-                                value={signatureString()}
+                                value={signatureString}
                                 addonAfter={
-                                    <CopyButton data={signatureString()} />
+                                    <CopyButton data={signatureString} />
                                 }
                                 disabled
                             />

diff --git a/website/src/tabs/rest/GetBlockByHash.jsx b/website/src/tabs/rest/GetBlockByHash.jsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import {useMemo, useState} from "react";
 import { Card, Divider, Form, Input, Row, Col } from "antd";
 import axios from "axios";
 import { CopyButton } from "../../components/CopyButton";
@@ -41,8 +41,9 @@ export const GetBlockByHash = () => {
 
     const layout = { labelCol: { span: 3 }, wrapperCol: { span: 21 } };
 
-    const blockString = () =>
-        blockByHash !== null ? blockByHash.toString() : "";
+    const blockString = useMemo(() => {
+        return blockByHash !== null ? blockByHash.toString() : ""
+    }, [blockByHash]);
 
     return (
         <Card
@@ -74,13 +75,13 @@ export const GetBlockByHash = () => {
                                     size="large"
                                     rows={15}
                                     placeholder="Block"
-                                    value={blockString()}
+                                    value={blockString}
                                     disabled
                                 />
                             </Form.Item>
                         </Col>
                         <Col span={1} align="middle">
-                            <CopyButton data={blockString()} />
+                            <CopyButton data={blockString} />
                         </Col>
                     </Row>
                 </Form>

diff --git a/website/src/tabs/rest/GetBlockByHeight.jsx b/website/src/tabs/rest/GetBlockByHeight.jsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import {useMemo, useState} from "react";
 import { Card, Divider, Form, Input, Row, Col } from "antd";
 import axios from "axios";
 import { CopyButton } from "../../components/CopyButton";
@@ -43,8 +43,9 @@ export const GetBlockByHeight = () => {
 
     const layout = { labelCol: { span: 3 }, wrapperCol: { span: 21 } };
 
-    const blockString = () =>
-        blockByHeight !== null ? blockByHeight.toString() : "";
+    const blockString = useMemo(() => {
+        return blockByHeight !== null ? blockByHeight.toString() : ""
+    }, [blockByHeight]);
 
     return (
         <Card
@@ -76,13 +77,13 @@ export const GetBlockByHeight = () => {
                                     size="large"
                                     rows={15}
                                     placeholder="Block"
-                                    value={blockString()}
+                                    value={blockByHeight}
                                     disabled
                                 />
                             </Form.Item>
                         </Col>
                         <Col span={1} align="middle">
-                            <CopyButton data={blockString()} />
+                            <CopyButton data={blockString} />
                         </Col>
                     </Row>
                 </Form>

diff --git a/website/src/tabs/rest/GetLatestBlock.jsx b/website/src/tabs/rest/GetLatestBlock.jsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import {useMemo, useState} from "react";
 import { Button, Card, Col, Divider, Form, Input, Row } from "antd";
 import axios from "axios";
 import { CopyButton } from "../../components/CopyButton";
@@ -21,8 +21,9 @@ export const GetLatestBlock = () => {
 
     const layout = { labelCol: { span: 3 }, wrapperCol: { span: 21 } };
 
-    const latestBlockString = () =>
-        latestBlock !== null ? latestBlock.toString() : "";
+    const latestBlockString = useMemo(() => {
+        return latestBlock !== null ? latestBlock.toString() : ""
+    }, [latestBlock]);
 
     return (
         <Card
@@ -33,7 +34,7 @@ export const GetLatestBlock = () => {
                 <Col>
                     <Button
                         type="primary"
-                        
+
                         size="middle"
                         onClick={tryRequest}
                     >
@@ -51,13 +52,13 @@ export const GetLatestBlock = () => {
                                     size="large"
                                     rows={15}
                                     placeholder="Block"
-                                    value={latestBlockString()}
+                                    value={latestBlockString}
                                     disabled
                                 />
                             </Form.Item>
                         </Col>
                         <Col span={1} align="middle">
-                            <CopyButton data={latestBlockString()} />
+                            <CopyButton data={latestBlockString} />
                         </Col>
                     </Row>
                 </Form>

diff --git a/website/src/tabs/rest/GetLatestBlockHeight.jsx b/website/src/tabs/rest/GetLatestBlockHeight.jsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import {useMemo, useState} from "react";
 import { Button, Card, Col, Divider, Form, Input, Row } from "antd";
 import axios from "axios";
 import { CopyButton } from "../../components/CopyButton";
@@ -21,8 +21,9 @@ export const GetLatestBlockHeight = () => {
 
     const layout = { labelCol: { span: 3 }, wrapperCol: { span: 21 } };
 
-    const latestHeightString = () =>
-        latestHeight !== null ? latestHeight.toString() : "";
+    const latestHeightString = useMemo(() => {
+        return latestHeight !== null ? latestHeight.toString() : ""
+    }, [latestHeight]);
 
     return (
         <Card
@@ -33,7 +34,7 @@ export const GetLatestBlockHeight = () => {
                 <Col>
                     <Button
                         type="primary"
-                        
+
                         size="middle"
                         onClick={tryRequest}
                     >
@@ -49,10 +50,10 @@ export const GetLatestBlockHeight = () => {
                             size="large"
                             rows={1}
                             placeholder="Block"
-                            value={latestHeightString()}
+                            value={latestHeightString}
                             addonAfter={
                                 <CopyButton
-                                    data={latestHeightString()}
+                                    data={latestHeightString}
                                 />
                             }
                             disabled

diff --git a/website/src/tabs/rest/GetMappingNames.jsx b/website/src/tabs/rest/GetMappingNames.jsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import {useMemo, useState} from "react";
 import { Button, Card, Col, Divider, Form, Input, Row } from "antd";
 import axios from "axios";
 import { CopyButton } from "../../components/CopyButton";
@@ -56,8 +56,14 @@ export const GetMappingNames = () => {
     };
 
     const layout = { labelCol: { span: 3 }, wrapperCol: { span: 21 } };
-    const mappingString = () => (mapping !== null ? mapping : "");
-    const programIDString = () => (programID !== null ? programID : "");
+
+    const mappingString = useMemo(() => {
+        return mapping !== null ? mapping : ""
+    }, [mapping]);
+
+    const programIDString = useMemo(() => {
+        return programID !== null ? programID : ""
+    }, [programID]);
 
     return (
         <Card
@@ -66,7 +72,7 @@ export const GetMappingNames = () => {
             extra={
                 <Button
                     type="primary"
-                    
+
                     size="middle"
                     onClick={() => {
                         tryRequest("credits.aleo");
@@ -89,7 +95,7 @@ export const GetMappingNames = () => {
                         allowClear
                         onSearch={onSearch}
                         onChange={onChange}
-                        value={programIDString()}
+                        value={programIDString}
                     />
                 </Form.Item>
             </Form>
@@ -107,13 +113,13 @@ export const GetMappingNames = () => {
                                         whiteSpace: "pre-wrap",
                                         overflowWrap: "break-word",
                                     }}
-                                    value={mappingString()}
+                                    value={mappingString}
                                     disabled
                                 />
                             </Form.Item>
                         </Col>
                         <Col span={1} align="middle">
-                            <CopyButton data={mappingString()} />
+                            <CopyButton data={mappingString} />
                         </Col>
                     </Row>
                 </Form>

diff --git a/website/src/tabs/rest/GetMappingValue.jsx b/website/src/tabs/rest/GetMappingValue.jsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import {useMemo, useState} from "react";
 import { Button, Card, Col, Divider, Form, Input, Result, Row } from "antd";
 import axios from "axios";
 import { CopyButton } from "../../components/CopyButton";
@@ -43,8 +43,9 @@ export const GetMappingValue = () => {
         setMappingKey(key);
     };
 
-    const mappingErrorString = () =>
-        mappingError !== null ? mappingError : "";
+    const mappingErrorString = useMemo(() => {
+        return mappingError !== null ? mappingError : ""
+    }, [mappingError]);
 
     // Attempts to request the program bytecode with the given program id.
     const tryRequest = () => {
@@ -92,7 +93,7 @@ export const GetMappingValue = () => {
             extra={
                 <Button
                     type="primary"
-                    
+
                     size="middle"
                     onClick={() => {
                         setDefaultRequest(
@@ -142,7 +143,7 @@ export const GetMappingValue = () => {
                 <Col>
                     <Button
                         type="primary"
-                        
+
                         size="middle"
                         onClick={tryRequest}
                     >
@@ -179,7 +180,7 @@ export const GetMappingValue = () => {
                 <Result
                     status="error"
                     title="Mapping Error"
-                    subTitle={"Error: " + mappingErrorString()}
+                    subTitle={"Error: " + mappingErrorString}
                 />
             )}
         </Card>

diff --git a/website/src/tabs/rest/GetProgram.jsx b/website/src/tabs/rest/GetProgram.jsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import {useMemo, useState} from "react";
 import { Button, Card, Col, Divider, Form, Input, Row } from "antd";
 import axios from "axios";
 import { CopyButton } from "../../components/CopyButton";
@@ -54,8 +54,14 @@ export const GetProgram = () => {
     };
 
     const layout = { labelCol: { span: 3 }, wrapperCol: { span: 21 } };
-    const programString = () => (program !== null ? program : "");
-    const programIDString = () => (programID !== null ? programID : "");
+
+    const programString = useMemo(() => {
+        return program !== null ? program : ""
+    }, [program]);
+
+    const programIDString = useMemo(() => {
+        return programID !== null ? programID : ""
+    }, [programID])
 
     return (
         <Card
@@ -64,7 +70,7 @@ export const GetProgram = () => {
             extra={
                 <Button
                     type="primary"
-                    
+
                     size="middle"
                     onClick={() => {
                         tryRequest("credits.aleo");
@@ -87,7 +93,7 @@ export const GetProgram = () => {
                         allowClear
                         onSearch={onSearch}
                         onChange={onChange}
-                        value={programIDString()}
+                        value={programIDString}
                     />
                 </Form.Item>
             </Form>
@@ -105,13 +111,13 @@ export const GetProgram = () => {
                                         whiteSpace: "pre-wrap",
                                         overflowWrap: "break-word",
                                     }}
-                                    value={programString()}
+                                    value={programString}
                                     disabled
                                 />
                             </Form.Item>
                         </Col>
                         <Col span={1} align="middle">
-                            <CopyButton data={programString()} />
+                            <CopyButton data={programString} />
                         </Col>
                     </Row>
                 </Form>