feat: 🎸 add speech to text in search func

package.json

@@ -35,6 +35,7 @@
     "react-router-dom": "^5.1.2",
     "react-scripts": "^3.4.1",
     "react-select": "^3.0.8",
+    "react-speech-recognition": "^3.8.2",
     "react-stripe-elements": "^6.0.1",
     "react-table": "^7.0.0-rc.15",
     "serve": "^11.3.0",
@@ -51,6 +52,7 @@
     "@types/react-leaflet": "^2.5.2",
     "@types/react-router-dom": "^5.1.5",
     "@types/react-select": "^3.0.13",
+    "@types/react-speech-recognition": "^3.6.0",
     "@types/react-stripe-elements": "^6.0.4",
     "@types/react-table": "^7.0.19",
     "@types/styled-components": "^5.1.0",

src/components/mainPage/MainPage.tsx

@@ -6,14 +6,19 @@ import FormControlLabel from '@material-ui/core/FormControlLabel';
 import Radio from '@material-ui/core/Radio';
 import RadioGroup from '@material-ui/core/RadioGroup';
 import TextField from '@material-ui/core/TextField';
+import IconButton from '@material-ui/core/IconButton';
 import Button from '@material-ui/core/Button';
 import Avatar from '@material-ui/core/Avatar';
 import FastfoodIcon from '@material-ui/icons/Fastfood';
+import MicIcon from '@material-ui/icons/Mic';
+import MicOffIcon from '@material-ui/icons/MicOff';
 import Tooltip from '@material-ui/core/Tooltip';
 import Bounce from 'react-reveal/Bounce';
 import { red, grey } from '@material-ui/core/colors';
 import HelpOutlineIcon from '@material-ui/icons/HelpOutline';
 import { useTranslation } from 'react-i18next';
+import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition';
+
 import _ from 'lodash';
 import axios from 'axios';
 
@@ -57,8 +62,14 @@ function MainPage(): JSX.Element {
   const classes = useStyles();
   const { t } = useTranslation();
 
+  const { transcript, listening, resetTranscript } = useSpeechRecognition();
+  // console.log('listening = ', listening);
+  // console.log('transcript = ', transcript);
+
   const [selectedTermList, setSelectedTermList] = useState<any[]>([]);
   const [selectedTerm, setSelectedTerm] = useState<any>(null);
+  const [selectedMicLanguageList, setSelectedMicLanguageList] = useState<any[]>([]);
+  const [selectedMicLanguage, setSelectedMicLanguage] = useState<any>(null);
   const [radioButtonValue, setRadioButtonValue] = useState<string>('');
 
   const [formattedRandomFoodList, setFormattedRandomFoodList] = useState<any[]>([]);
@@ -79,6 +90,7 @@ function MainPage(): JSX.Element {
 
   useEffect(() => {
     getSelectedTermList();
+    getSelectedMicLanguageList();
     getUserCurrentLatLong();
     setIntitialResultList();
   }, []);
@@ -94,6 +106,10 @@ function MainPage(): JSX.Element {
     }
   }, [resultList]);
 
+  useEffect(() => {
+    setLocation(transcript);
+  }, [transcript]);
+
   const getSelectedTermList = async () => {
     const response = await axios.get(`${ROOT_URL}/category/get-categories`, {
       headers: {
@@ -202,6 +218,20 @@ function MainPage(): JSX.Element {
     }
   };
 
+  const getSelectedMicLanguageList = () => {
+    const selectedMicLanguageList = [
+      {
+        value: 'en-GB',
+        label: 'English (UK)',
+      },
+      {
+        value: 'en-US',
+        label: 'English (US)',
+      },
+    ];
+    setSelectedMicLanguageList(selectedMicLanguageList);
+  };
+
   const getUserCurrentLatLong = () => {
     navigator.geolocation.getCurrentPosition((location: any) => {
       const latitude = location.coords.latitude;
@@ -295,6 +325,10 @@ function MainPage(): JSX.Element {
     setSelectedTerm(selectedTerm);
   };
 
+  const handleMicLanguageSelectDropdownChange = (selectedMicLanguage: any) => {
+    setSelectedMicLanguage(selectedMicLanguage);
+  };
+
   const handleRadioButtonChange = (e: any) => {
     setRadioButtonValue(e.target.value);
   };
@@ -415,6 +449,7 @@ function MainPage(): JSX.Element {
             value={location}
             onChange={e => handleLocationChange(e)}
           />
+          {renderSpeechToTextDiv()}
           <div className="my-3"></div>
         </div>
       );
@@ -423,6 +458,72 @@ function MainPage(): JSX.Element {
     return locationInput;
   };
 
+  const renderSpeechToTextDiv = () => {
+    const micLanguage = selectedMicLanguage && selectedMicLanguage.value ? selectedMicLanguage.value : 'en-GB';
+
+    const speechToTextDiv = (
+      <div>
+        {renderMicIcon(listening, micLanguage)}
+        {renderMicLanguageSelectDropdown()}
+        <Button variant="outlined" color="primary" onClick={resetTranscript}>
+          {t('reset')}
+        </Button>
+      </div>
+    );
+
+    return speechToTextDiv;
+  };
+
+  const renderMicIcon = (listening: boolean, language: string) => {
+    const startListening = () => SpeechRecognition.startListening({ continuous: true, language: language });
+
+    let micIconDiv = (
+      <IconButton
+        aria-label="micOffIcon"
+        onMouseOver={startListening}
+        onMouseLeave={SpeechRecognition.stopListening}
+        onMouseDown={startListening}
+        onMouseUp={SpeechRecognition.stopListening}
+      >
+        <MicOffIcon fontSize="large" style={{ color: red[500], cursor: 'pointer' }} />
+      </IconButton>
+    );
+
+    if (listening) {
+      micIconDiv = (
+        <IconButton
+          aria-label="micIcon"
+          onMouseOver={startListening}
+          onMouseLeave={SpeechRecognition.stopListening}
+          onMouseDown={startListening}
+          onMouseUp={SpeechRecognition.stopListening}
+        >
+          <MicIcon fontSize="large" style={{ color: red[500], cursor: 'pointer' }} />
+        </IconButton>
+      );
+    }
+
+    return micIconDiv;
+  };
+
+  const renderMicLanguageSelectDropdown = () => {
+    const selectDropdown = (
+      <div>
+        <Select
+          styles={selectStyles}
+          placeholder={t('selectMicLanguage')}
+          value={selectedMicLanguage}
+          onChange={handleMicLanguageSelectDropdownChange}
+          options={selectedMicLanguageList}
+          isClearable={true}
+        />
+        <div className="my-3"></div>
+      </div>
+    );
+
+    return selectDropdown;
+  };
+
   // const renderLatitudeAndLongitudeInput = () => {
   //   let latitudeAndLongitudeInput: any = null;
   //

src/translations/common.json

@@ -9,11 +9,13 @@
       "contactUs": "Contact us",
 
       "selectTheFoodYouWant": "Select the food you want...",
+      "selectMicLanguage": "Select mic language",
       "places": "Places",
       "currentLocation": "Current Location",
       "currentLocationWaitForBrowserDetection": "Current Location (wait for browser detection)",
       "submit": "Submit",
       "clear": "Clear",
+      "reset": "Reset",
       "randomFoodCategory": "Random food category:",
 
       "useRandomFoodCategory": "Use random food category",
@@ -59,11 +61,13 @@
       "contactUs": "聯繫我們",
 
       "selectTheFoodYouWant": "選擇你想要的食物...",
+      "selectMicLanguage": "選擇麥克風語言",
       "places": "地點",
       "currentLocation": "當前位置",
       "currentLocationWaitForBrowserDetection": "當前位置 (等待瀏覽器偵查)",
       "submit": "提交",
       "clear": "清除",
+      "reset": "重置",
       "randomFoodCategory": "隨機食物類別:",
 
       "useRandomFoodCategory": "使用隨機食物類別",

yarn.lock

@@ -2297,6 +2297,11 @@
     "@types/react-dom" "*"
     "@types/react-transition-group" "*"
 
+"@types/react-speech-recognition@^3.6.0":
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/@types/react-speech-recognition/-/react-speech-recognition-3.6.0.tgz#3c52e2d3e2306d8fb0f54a769586221cdba4e35b"
+  integrity sha512-nFXlBxhz5Wnz/P7AQenmaG7r9MGBmvZhTW/MLPEPd1CYLgB+6jg0GygIYYM5LR+K1WyZ3+jXGhGszxoLQQkHXQ==
+
 "@types/react-stripe-elements@^6.0.4":
   version "6.0.4"
   resolved "https://registry.yarnpkg.com/@types/react-stripe-elements/-/react-stripe-elements-6.0.4.tgz#0931064941b4f74e25edb8955703eee90774a057"
@@ -11208,6 +11213,11 @@ react-select@^3.0.8:
     react-input-autosize "^2.2.2"
     react-transition-group "^4.3.0"
 
+react-speech-recognition@^3.8.2:
+  version "3.8.2"
+  resolved "https://registry.yarnpkg.com/react-speech-recognition/-/react-speech-recognition-3.8.2.tgz#c82e187db92e32e506f0593d80a2347f2079e0fd"
+  integrity sha512-ZbA8wNNdWPAiN7tHsMc/cgfRkssAQwL3F8yMDEbuxLCT0II7YrNurNb3hAq5X58+zMn7YQO+S3OZt0mp5QA38w==
+
 react-stripe-elements@^6.0.1:
   version "6.1.2"
   resolved "https://registry.yarnpkg.com/react-stripe-elements/-/react-stripe-elements-6.1.2.tgz#bd277e86d0b868a6fac9358df09e0d38149b6736"