Added basic touchbar implementation for query screen

package.json

@@ -35,6 +35,7 @@
   },
   "dependencies": {
     "@fontsource/roboto": "^4.5.1",
+    "@luwol03/react-touchbar-electron": "^1.2.0",
     "@material-ui/core": "^4.11.2",
     "@material-ui/icons": "^4.11.2",
     "@testing-library/jest-dom": "^5.11.9",

src/Components/ConfirmDialog/ConfirmDialog.jsx

@@ -4,8 +4,15 @@ import { useTranslation } from "react-i18next";
 import Button from "../Button/Button.jsx";
 import Modal from "../Modal/Modal.jsx";
 
+import useDebounceCallback from "../../hooks/useDebounceCallback.js";
+
 import "./ConfirmDialog.scss";
 
+import {
+  TouchBar,
+  Button as TouchBarButton,
+} from "@luwol03/react-touchbar-electron";
+
 const ConfirmDialog = ({
   title = null,
   description = null,
@@ -20,30 +27,53 @@ const ConfirmDialog = ({
 }) => {
   const [t] = useTranslation();
 
+  const onCloseD = useDebounceCallback(onClose, 500);
+  const onSubmitD = useDebounceCallback(onSubmit, 500);
+
   return (
-    <Modal size="small" title={title} open={show} onClose={onClose} xxl>
-      <div className="submit-dialog">
-        <div className="description">
-          <span>{description}</span>
-          {children}
-        </div>
-        <div className="actions">
+    <>
+      {show && (
+        <TouchBar>
           {showAbortButton && (
-            <Button onClick={onClose} appearance="primary">
-              {cancelText || t("global.abort")}
-            </Button>
+            <TouchBarButton
+              label={cancelText || t("global.abort")}
+              backgroundColor="#727cf5"
+              onClick={onCloseD}
+            />
           )}
-          <Button
-            disabled={!canSubmit}
-            onClick={onSubmit}
-            appearance="red"
-            block={!showAbortButton}
-          >
-            {submitText || t("global.delete")}
-          </Button>
+          <TouchBarButton
+            label={submitText || t("global.delete")}
+            backgroundColor="#ff586e"
+            onClick={onSubmitD}
+            enabled={canSubmit}
+          />
+        </TouchBar>
+      )}
+
+      <Modal size="small" title={title} open={show} onClose={onClose} xxl>
+        <div className="submit-dialog">
+          <div className="description">
+            <span>{description}</span>
+            {children}
+          </div>
+          <div className="actions">
+            {showAbortButton && (
+              <Button onClick={onClose} appearance="primary">
+                {cancelText || t("global.abort")}
+              </Button>
+            )}
+            <Button
+              disabled={!canSubmit}
+              onClick={onSubmit}
+              appearance="red"
+              block={!showAbortButton}
+            >
+              {submitText || t("global.delete")}
+            </Button>
+          </div>
         </div>
-      </div>
-    </Modal>
+      </Modal>
+    </>
   );
 };
 

src/hooks/useDebounceCallback.js

@@ -0,0 +1,19 @@
+import { useEffect, useRef } from "react";
+
+const useDebounceCallback = (callback, delay) => {
+  const latestCallback = useRef();
+  const latestExecutionTime = useRef(-Infinity);
+
+  useEffect(() => {
+    latestCallback.current = callback;
+  }, [callback]);
+
+  return () => {
+    if (latestExecutionTime.current < Date.now() - delay) {
+      latestCallback.current?.();
+      latestExecutionTime.current = Date.now();
+    }
+  };
+};
+
+export default useDebounceCallback;

src/modules/about.js

@@ -2,7 +2,7 @@ let getDesktopVersions = () => Promise.resolve();
 
 if (window.VOCASCAN_CONFIG.ENV === "electron") {
   getDesktopVersions = () => {
-    return window.electron.invoke("getVersions");
+    return window.electron.ipcRenderer.invoke("getVersions");
   };
 }
 

src/modules/clipboard.js

@@ -2,7 +2,7 @@ let copyToClip = () => Promise.reject();
 
 if (window.VOCASCAN_CONFIG.ENV === "electron") {
   copyToClip = ({ text }) => {
-    return window.electron.invoke("copy-to-clip", { text });
+    return window.electron.ipcRenderer.invoke("copy-to-clip", { text });
   };
 }
 

src/modules/update.js

@@ -3,10 +3,10 @@ let startUpdate = null;
 const available = window.VOCASCAN_CONFIG.ENV === "electron";
 
 if (available) {
-  updateNotifier = window.electron;
+  updateNotifier = window.electron.ipcRenderer;
 
   startUpdate = () => {
-    window.electron.send("start-update");
+    window.electron.ipcRenderer.send("start-update");
   };
 }
 

src/screens/Learn/Query/Query.jsx

@@ -1,11 +1,13 @@
 import React, { useState, useCallback, useEffect } from "react";
+import { useTranslation } from "react-i18next";
 import { useDispatch, useSelector } from "react-redux";
 import { useParams } from "react-router";
 import { useHistory } from "react-router-dom";
 
 import ProgressBar from "../../../Components/Charts/ProgressBar/ProgressBar.jsx";
 import VocabCard from "../../../Components/VocabCard/VocabCard.jsx";
 
+import useDebounceCallback from "../../../hooks/useDebounceCallback.js";
 import useSnack from "../../../hooks/useSnack.js";
 import {
   setQueryCorrect,
@@ -16,7 +18,10 @@ import { getQueryVocabulary, checkQuery } from "../../../utils/api.js";
 
 import "./Query.scss";
 
+import { TouchBar, Button } from "@luwol03/react-touchbar-electron";
+
 const Query = () => {
+  const { t } = useTranslation();
   const { showSnack } = useSnack();
   const { direction } = useParams();
   const dispatch = useDispatch();
@@ -142,27 +147,63 @@ const Query = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const onCorrect = useDebounceCallback(
+    useCallback(
+      () => sendVocabCheck(currVocab.id, true, true),
+      [currVocab?.id, sendVocabCheck]
+    ),
+    500
+  );
+  const onWrong = useDebounceCallback(
+    useCallback(
+      () => sendVocabCheck(currVocab.id, false, true),
+      [currVocab?.id, sendVocabCheck]
+    ),
+    500
+  );
+
   if (!loaded) {
     return null;
   }
 
   return (
-    <div className="query-wrapper">
-      <div className="progress">
-        <ProgressBar value={actualProgress} max={vocabSize} bottomText={true} />
-      </div>
-      <div className="content">
-        {currVocab && (
-          <VocabCard
-            currVocab={currVocab}
-            onCorrect={() => sendVocabCheck(currVocab.id, true, true)}
-            onWrong={() => sendVocabCheck(currVocab.id, false, true)}
-            disabled={buttonDisabled}
-            currDirection={currDirection}
+    <>
+      <TouchBar>
+        <Button
+          label={t("global.wrong")}
+          onClick={onWrong}
+          backgroundColor="#ff586e"
+          enabled={!buttonDisabled}
+        />
+        <Button
+          label={t("global.correct")}
+          onClick={onCorrect}
+          backgroundColor="#0acf97"
+          enabled={!buttonDisabled}
+        />
+      </TouchBar>
+
+      <div className="query-wrapper">
+        <div className="progress">
+          <ProgressBar
+            value={actualProgress}
+            max={vocabSize}
+            bottomText={true}
           />
-        )}
+        </div>
+        <div className="content">
+          {currVocab && (
+            <VocabCard
+              currVocab={currVocab}
+              onCorrect={onCorrect}
+              onWrong={onWrong}
+              disabled={buttonDisabled}
+              currDirection={currDirection}
+            />
+          )}
+        </div>
       </div>
-    </div>
+    </>
   );
 };