Components: simplify currency-addon

Components/Calculation/addons/currency-addon.tsx

@@ -1,7 +1,6 @@
-import { gql, useApolloClient } from '@apollo/client';
+import { gql, useQuery } from '@apollo/client';
 import type * as CRMTypes from 'graphql/crm.types';
 import { observer } from 'mobx-react-lite';
-import { useState } from 'react';
 import { useStore } from 'stores/hooks';
 
 const QUERY_GET_CURRENCY_SYMBOL = gql`
@@ -17,26 +16,17 @@ const CurrencyAddon = observer(() => {
 
   const currencyid = $calculation.$values.getValue('supplierCurrency');
 
-  const [currencySymbol, setCurrencySymbol] = useState<string | null | undefined>(null);
-
-  const { query } = useApolloClient();
-
-  if (!currencyid) return null;
-
-  query<CRMTypes.GetCurrencySymbolQuery, CRMTypes.GetCurrencySymbolQueryVariables>({
-    query: QUERY_GET_CURRENCY_SYMBOL,
+  const { data } = useQuery<
+    CRMTypes.GetCurrencySymbolQuery,
+    CRMTypes.GetCurrencySymbolQueryVariables
+  >(QUERY_GET_CURRENCY_SYMBOL, {
     variables: {
       currencyid,
     },
-  })
-    .then(({ data }) => {
-      setCurrencySymbol(data?.transactioncurrency?.currencysymbol);
-    })
-    .catch(() => {
-      setCurrencySymbol(null);
-    });
+    skip: !currencyid,
+  });
 
-  return <span>{currencySymbol}</span>;
+  return <span>{data?.transactioncurrency?.currencysymbol}</span>;
 });
 
 export default <CurrencyAddon />;