refactor: use store hooks once per component

labeleven-dev · Jul 29, 2022 · 158f1a3 · 158f1a3
1 parent c62bc6b
commit 158f1a3
Show file tree

Hide file tree

Showing 9 changed files with 24 additions and 25 deletions.
diff --git a/src/components/client/Instructions.tsx b/src/components/client/Instructions.tsx
@@ -13,8 +13,7 @@ export const InstructionContext = React.createContext(newInstruction());
 export const Instructions: React.FC<{
   instructions: SortableCollection<IInstruction>;
 }> = ({ instructions }) => {
-  const set = useTransactionStore((state) => state.set);
-  const addInstruction = useTransactionStore((state) => state.addInstruction);
+  const { addInstruction, set } = useTransactionStore((state) => state);
 
   const setOrderItem = (itemOrders: IID[]) => {
     set((state) => {

diff --git a/src/components/client/TransactionHeader.tsx b/src/components/client/TransactionHeader.tsx
@@ -36,8 +36,9 @@ export const TransactionHeader: React.FC<{ transaction: ITransaction }> = ({
   const rpcEndpoint = useOptionsStore(
     (state) => state.transactionOptions.rpcEndpoint
   );
-  const results = useTransactionStore((state) => state.results);
-  const setTransaction = useTransactionStore((state) => state.set);
+  const { results, set: setTransaction } = useTransactionStore(
+    (state) => state
+  );
   const setOptions = useOptionsStore((state) => state.set);
 
   const { publicKey: walletPublicKey } = useWallet();

diff --git a/src/components/client/results/Results.tsx b/src/components/client/results/Results.tsx
@@ -28,11 +28,10 @@ import { BalanceTable } from "./BalanceTable";
 import { ProgramLogs } from "./ProgramLogs";
 
 export const Results: React.FC = () => {
-  const results = useTransactionStore((state) => state.results);
+  const { results, set } = useTransactionStore((state) => state);
   const rpcEndpoint = useOptionsStore(
     (state) => state.transactionOptions.rpcEndpoint
   );
-  const set = useTransactionStore((state) => state.set);
 
   return (
     <Grid p="5">

diff --git a/src/components/header/WalletButton.tsx b/src/components/header/WalletButton.tsx
@@ -20,8 +20,10 @@ import { FaLightbulb, FaWallet } from "react-icons/fa";
 import { useTransactionStore } from "../../hooks/useTransactionStore";
 
 export const WalletButton: React.FC = () => {
-  const isOpen = useTransactionStore((state) => state.uiState.welcomeOpen);
-  const set = useTransactionStore((state) => state.set);
+  const {
+    uiState: { welcomeOpen: isOpen },
+    set,
+  } = useTransactionStore((state) => state);
 
   return (
     <Popover

diff --git a/src/components/options/GeneralOptions.tsx b/src/components/options/GeneralOptions.tsx
@@ -7,8 +7,7 @@ import { ChoiceOption } from "./fields/ChoiceOption";
 import { ToggleOption } from "./fields/ToggleOption";
 
 export const GeneralOptions: React.FC = () => {
-  const appOptions = useOptionsStore((state) => state.appOptions);
-  const set = useOptionsStore((state) => state.set);
+  const { appOptions, set } = useOptionsStore((state) => state);
 
   return (
     <FormControl display="flex" alignItems="center">

diff --git a/src/components/options/Options.tsx b/src/components/options/Options.tsx
@@ -26,16 +26,18 @@ import { RpcEndpointOptions } from "./RpcEndpointOptions";
 import { TransactionOptions } from "./TransactionOptions";
 
 export const Options: React.FC = () => {
-  const isOpen = useTransactionStore((state) => state.uiState.optionsOpen);
-  const setTransaction = useTransactionStore((state) => state.set);
+  const {
+    uiState: { optionsOpen: isOpen },
+    set,
+  } = useTransactionStore((state) => state);
   const setOptions = useOptionsStore((state) => state.set);
 
   return (
     <Modal
       size="xl"
       isOpen={isOpen}
       onClose={() => {
-        setTransaction((state) => {
+        set((state) => {
           state.uiState.optionsOpen = false;
         });
       }}

diff --git a/src/components/options/RpcEndpointOptions.tsx b/src/components/options/RpcEndpointOptions.tsx
@@ -7,10 +7,10 @@ import { Sortable } from "../common/Sortable";
 import { RpcEndpointOption } from "./fields/RpcEndpointOption";
 
 export const RpcEndpointOptions: React.FC = () => {
-  const rpcEndpoints = useOptionsStore(
-    (state) => state.appOptions.rpcEndpoints
-  );
-  const set = useOptionsStore((state) => state.set);
+  const {
+    appOptions: { rpcEndpoints },
+    set,
+  } = useOptionsStore((state) => state);
 
   return (
     <Grid>

diff --git a/src/components/options/TransactionOptions.tsx b/src/components/options/TransactionOptions.tsx
@@ -8,10 +8,7 @@ import { NumberOption } from "./fields/NumberOption";
 import { ToggleOption } from "./fields/ToggleOption";
 
 export const TransactionOptions: React.FC = () => {
-  const transactionOptions = useOptionsStore(
-    (state) => state.transactionOptions
-  );
-  const set = useOptionsStore((state) => state.set);
+  const { transactionOptions, set } = useOptionsStore((state) => state);
 
   return (
     <FormControl display="flex" alignItems="center">

diff --git a/src/hooks/useInstruction.ts b/src/hooks/useInstruction.ts
@@ -12,22 +12,22 @@ export const useInstruction = () => {
   const uiState = useTransactionStore(
     (state) => state.uiState.instructions[instruction.id]
   );
-  const setTransaction = useTransactionStore((state) => state.set);
+  const set = useTransactionStore((state) => state.set);
 
   const update = (fn: (state: WritableDraft<IInstruction>) => void) => {
-    setTransaction((state) => {
+    set((state) => {
       fn(state.transaction.instructions.map[instruction.id]);
     });
   };
 
   const updateUi = (fn: (state: WritableDraft<UIInstructionState>) => void) => {
-    setTransaction((state) => {
+    set((state) => {
       fn(state.uiState.instructions[instruction.id]);
     });
   };
 
   const reset = () => {
-    setTransaction((state) => {
+    set((state) => {
       state.transaction.instructions.map[instruction.id] = {
         ...newInstruction(),
         id: instruction.id,