feat: added function to print labels

Antonio Pena · Antonio Pena · commit 21e7e8853e66 · 2022-10-23T18:27:47.000+02:00
Refs: #1
diff --git a/.prettierrc b/.prettierrc
@@ -3,4 +3,4 @@
   "bracketSpacing": false,
   "jsxBracketSameLine": true,
   "quoteProps": "consistent"
-}
+}
diff --git a/README.md b/README.md
@@ -18,6 +18,16 @@ yarn add react-dymo-hooks
 
 ## API
 
+### `printLabel()`
+
+Print Dymo labels
+
+#### Arguments
+
+- {string} printerName - The Dymo Printer to print on
+- {string} labelXml - Label XML parsed to string
+- {string} labelSetXml - LabelSet to print. LabelSet is used to print multiple labels with same layout but different data, e.g. multiple addresses.
+
 ### `useDymoCheckService()`
 
 Return the status of DYMO Label Web Service
@@ -79,25 +89,18 @@ Object containing:
 ### Print a Dymo Label
 
 ```jsx
-import {dymoRequestBuilder} from "react-dymo-hooks";
-
-const params = {
-  data: `printerName=${encodeURIComponent(printerSelected)}&printParamsXml=&labelXml=${encodeURIComponent(
-    xml
-  )}&labelSetXml=`,
-};
-
-function handlePrintLabel() {
-  dymoRequestBuilder({
-    method: "POST",
-    wsAction: "printLabel",
-    axiosOtherParams: params,
-  })
-    .then(() => {})
-    .catch(() => {});
+import {printLabel} from "react-dymo-hooks";
+
+async function handlePrintSingleLabel(printerName, labelXml) {
+  try {
+    const response = await printLabel(printerName, labelXml);
+    console.info(response);
+  } catch (error) {
+    console.error(error);
+  }
 }
 
-<button onClick={handlePrintLabel} />;
+<button onClick={() => handlePrintLabel(printer, xml)} />;
 ```
 
 ```jsx
diff --git a/example/src/App.js b/example/src/App.js
@@ -1,12 +1,11 @@
-import React, { useState, useMemo, memo } from "react";
-import { useDymoCheckService, useDymoFetchPrinters, useDymoOpenLabel } from "react-dymo-hooks";
+import React, {useState, useMemo, memo} from "react";
+import {useDymoCheckService, useDymoFetchPrinters, useDymoOpenLabel, printLabel} from "react-dymo-hooks";
 
-import { generateXmlExample } from "./utils";
+import {generateXmlExample} from "./utils";
 
-
-const DymoLabelPreview = memo(({ xml, statusDymoService, loadingComponent, errorComponent }) => {
-  const { label, statusOpenLabel } = useDymoOpenLabel(statusDymoService, xml);
-  const style = { background: "hsla(0, 0%, 50%, 0.66)", padding: 7 };
+const DymoLabelPreview = memo(({xml, statusDymoService, loadingComponent, errorComponent}) => {
+  const {label, statusOpenLabel} = useDymoOpenLabel(statusDymoService, xml);
+  const style = {background: "hsla(0, 0%, 50%, 0.66)", padding: 7};
   if (statusOpenLabel === "loading") {
     return loadingComponent;
   } else if (statusOpenLabel === "error") {
@@ -22,17 +21,29 @@ const DymoLabelPreview = memo(({ xml, statusDymoService, loadingComponent, error
 
 export default function App() {
   const statusDymoService = useDymoCheckService();
+  const {statusFetchPrinters, printers} = useDymoFetchPrinters(statusDymoService);
+
   const [name, setName] = useState("Antonio Peña Batista");
-  const { statusFetchPrinters, printers } = useDymoFetchPrinters(statusDymoService);
+  const [selectedPrinter, setSelectedPrinter] = useState(null);
 
   const xmlMemo = useMemo(() => generateXmlExample(name), [name]);
+
+  async function handlePrintSingleLabel(printerName, labelXml) {
+    try {
+      const response = await printLabel(printerName, labelXml);
+      console.info(response);
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
   return (
     <div>
       {statusDymoService === "loading" && <h1>Checking dymo web service...</h1>}
       {statusDymoService === "error" && <h1>Error</h1>}
       {statusDymoService === "success" && (
         <React.Fragment>
-          <h3 style={{ color: "green" }}>DYMO service is running in your PC.</h3>
+          <h3 style={{color: "green"}}>DYMO service is running in your PC.</h3>
           <input value={name} title="Name" onChange={(e) => setName(e.target.value)} />
           <br />
           <br />
@@ -47,16 +58,25 @@ export default function App() {
         errorComponent={<h4>Error..</h4>}
       />
       {statusFetchPrinters === "loading" && <h4>Loading printers..</h4>}
+      <br />
       {statusFetchPrinters === "success" && (
         <React.Fragment>
-          <h4>Printers:</h4>
-          <ul>
+          <label htmlFor="printer-select">Choose a Dymo printer:</label>
+          <br />
+          <select name="printers" id="printer-select" onChange={(e) => setSelectedPrinter(e.target.value)}>
+            <option value="">--Please choose an option--</option>
             {printers.map((printer) => (
-              <li key={printer.name}>{printer.name}</li>
+              <option key={printer.name} value={printer.name}>
+                {printer.name}
+              </option>
             ))}
-          </ul>
+          </select>
         </React.Fragment>
       )}
+      <br />
+      <button disabled={!selectedPrinter} onClick={() => handlePrintSingleLabel(selectedPrinter, xmlMemo)}>
+        Print single label
+      </button>
     </div>
   );
 }
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dymo-hooks",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "Collections of react hooks to handle the Dymo LabelWriter web service.",
   "author": "apenab",
   "license": "MIT",
diff --git a/src/dymo_utils.js b/src/dymo_utils.js
@@ -10,7 +10,7 @@ import {
   WS_SVC_PATH,
   WS_ACTIONS,
 } from "./constants";
-import { localRetrieve, localStore } from "./storage";
+import {localRetrieve, localStore} from "./storage";
 
 async function storeDymoRequestParams() {
   let activeHost, activePort;
@@ -30,9 +30,9 @@ async function storeDymoRequestParams() {
           dymoUrlBuilder(WS_PROTOCOL, hostList[currentHostIndex], currentPort, WS_SVC_PATH, "status")
         );
         const [successRequestHost, successRequestPort] = response.config.url.split("/")[2].split(":");
-        localStore("dymo-ws-request-params", { activeHost: successRequestHost, activePort: successRequestPort });
+        localStore("dymo-ws-request-params", {activeHost: successRequestHost, activePort: successRequestPort});
         break loop1;
-      } catch (error) { }
+      } catch (error) {}
     }
   }
 }
@@ -48,23 +48,23 @@ export async function dymoRequestBuilder({
   if (!localRetrieve("dymo-ws-request-params")) {
     await storeDymoRequestParams();
   }
-  const { activeHost, activePort } = localRetrieve("dymo-ws-request-params");
+  const {activeHost, activePort} = localRetrieve("dymo-ws-request-params");
 
   const dymoAxiosInstance = axios.create();
   dymoAxiosInstance.interceptors.response.use(
     function (response) {
       return response;
     },
     async function (error) {
-      if (axios.isCancel(error)) {
+      if (axios.isCancel(error) || error?.response?.status === 500) {
         return Promise.reject(error);
       }
       await storeDymoRequestParams();
       if (!localRetrieve("dymo-ws-request-params")) {
         return Promise.reject(error);
       }
       try {
-        const { activeHost, activePort } = localRetrieve("dymo-ws-request-params");
+        const {activeHost, activePort} = localRetrieve("dymo-ws-request-params");
         const response = await axios.request({
           url: dymoUrlBuilder(wsProtocol, activeHost, activePort, wsPath, wsAction),
           method,
@@ -113,3 +113,23 @@ export function getDymoPrintersFromXml(xml, modelPrinter) {
   });
   return printers;
 }
+
+/**
+ * Print dymo labels
+ *
+ * @param {string} printerName - The Dymo Printer to print on
+ * @param {string} labelXml - Label XML parsed to string
+ * @param {string} labelSetXml - LabelSet to print. LabelSet is used to print multiple labels with same layout but different data, e.g. multiple addresses.
+ * @returns AxiosResponse
+ */
+export function printLabel(printerName, labelXml, labelSetXml) {
+  return dymoRequestBuilder({
+    method: "POST",
+    wsAction: "printLabel",
+    axiosOtherParams: {
+      data: `printerName=${encodeURIComponent(printerName)}&printParamsXml=&labelXml=${encodeURIComponent(
+        labelXml
+      )}&labelSetXml=${labelSetXml || ""}`,
+    },
+  });
+}
diff --git a/src/index.js b/src/index.js
@@ -1,16 +1,18 @@
-import { useState, useEffect, useRef } from "react";
+import {useState, useEffect, useRef} from "react";
 import axios from "axios";
 
-import { useData } from "./hooks";
+import {useData} from "./hooks";
 import {
   dymoUrlBuilder as innerDymoUrlBuilder,
   getDymoPrintersFromXml as innerGetDymoPrintersFromXml,
   dymoRequestBuilder as innerDymoRequestBuilder,
+  printLabel as innerPrintSingleLabel,
 } from "./dymo_utils";
 
 export const dymoUrlBuilder = innerDymoUrlBuilder;
 export const dymoRequestBuilder = innerDymoRequestBuilder;
 export const getDymoPrintersFromXml = innerGetDymoPrintersFromXml;
+export const printLabel = innerPrintSingleLabel;
 
 export function useDymoCheckService(port) {
   const [status, setStatus] = useState("initial");
@@ -22,7 +24,7 @@ export function useDymoCheckService(port) {
     }
     tokenSource.current = axios.CancelToken.source();
     setStatus("loading");
-    dymoRequestBuilder({ method: "GET", wsAction: "status", cancelToken: tokenSource.current.token })
+    dymoRequestBuilder({method: "GET", wsAction: "status", cancelToken: tokenSource.current.token})
       .then(() => {
         tokenSource.current = null;
         setStatus("success");
@@ -43,7 +45,7 @@ export function useDymoCheckService(port) {
 }
 
 export function useDymoFetchPrinters(statusDymoService, modelPrinter = "LabelWriterPrinter", port) {
-  const [data, setData] = useData({ statusFetchPrinters: "initial", printers: [], error: null });
+  const [data, setData] = useData({statusFetchPrinters: "initial", printers: [], error: null});
   const tokenSource = useRef();
 
   useEffect(() => {
@@ -52,9 +54,9 @@ export function useDymoFetchPrinters(statusDymoService, modelPrinter = "LabelWri
         tokenSource.current.cancel();
       }
       tokenSource.current = axios.CancelToken.source();
-      setData({ statusFetchPrinters: "loading" });
+      setData({statusFetchPrinters: "loading"});
 
-      dymoRequestBuilder({ method: "GET", wsAction: "getPrinters", cancelToken: tokenSource.current.token })
+      dymoRequestBuilder({method: "GET", wsAction: "getPrinters", cancelToken: tokenSource.current.token})
         .then((response) => {
           tokenSource.current = null;
           setData({
@@ -65,7 +67,7 @@ export function useDymoFetchPrinters(statusDymoService, modelPrinter = "LabelWri
         })
         .catch((error) => {
           if (!axios.isCancel(error)) {
-            setData({ statusFetchPrinters: "error", printers: [], error: error });
+            setData({statusFetchPrinters: "error", printers: [], error: error});
           }
         });
     }
@@ -80,7 +82,7 @@ export function useDymoFetchPrinters(statusDymoService, modelPrinter = "LabelWri
 }
 
 export function useDymoOpenLabel(statusDymoService, labelXML, port) {
-  const [data, setData] = useData({ statusOpenLabel: "initial", label: null, error: null });
+  const [data, setData] = useData({statusOpenLabel: "initial", label: null, error: null});
   const tokenSource = useRef();
 
   useEffect(() => {
@@ -89,21 +91,21 @@ export function useDymoOpenLabel(statusDymoService, labelXML, port) {
         tokenSource.current.cancel();
       }
       tokenSource.current = axios.CancelToken.source();
-      setData({ statusOpenLabel: "loading" });
+      setData({statusOpenLabel: "loading"});
       dymoRequestBuilder({
         method: "POST",
         wsAction: "renderLabel",
         cancelToken: tokenSource.current.token,
-        axiosOtherParams: { data: `labelXml=${encodeURIComponent(labelXML)}&renderParamsXml=&printerName=` },
-        headers: { "Access-Control-Request-Private-Network": true, "Access-Control-Allow-Origin": "*" }
+        axiosOtherParams: {data: `labelXml=${encodeURIComponent(labelXML)}&renderParamsXml=&printerName=`},
+        headers: {"Access-Control-Request-Private-Network": true, "Access-Control-Allow-Origin": "*"},
       })
         .then((response) => {
           tokenSource.current = null;
-          setData({ statusOpenLabel: "success", label: response.data, error: null });
+          setData({statusOpenLabel: "success", label: response.data, error: null});
         })
         .catch((error) => {
           if (!axios.isCancel(error)) {
-            setData({ statusOpenLabel: "error", label: null, error: error });
+            setData({statusOpenLabel: "error", label: null, error: error});
           }
         });
     }

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "react-dymo-hooks",`
`3`		`- "version": "2.0.1",`
	`3`	`+ "version": "2.0.2",`
`4`	`4`	`"description": "Collections of react hooks to handle the Dymo LabelWriter web service.",`
`5`	`5`	`"author": "apenab",`
`6`	`6`	`"license": "MIT",`