Fix more build errors

apps/metamigo-frontend/components/voice/voicelines/shared.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/display-name */
 import React, { useState, useEffect } from "react";
 import PlayIcon from "@material-ui/icons/PlayCircleFilled";
 import {
@@ -25,7 +26,7 @@ const tts = async (providerId: any): Promise<TTSProvider> => {
   return (voice, language, prompt): Promise<void> =>
     new Promise((resolve) => {
       if (!voice || !language || !prompt) resolve();
-      const Device = twilioClient.Device;
+      const { Device } = twilioClient;
       const device = new Device();
       const silence = `${absoluteUrl().origin}/static/silence.mp3`;
       device.setup(token, {
@@ -39,7 +40,7 @@ const tts = async (providerId: any): Promise<TTSProvider> => {
           outgoing: silence,
         },
       });
-      device.on("ready", function (device: any) {
+      device.on("ready", (device: any) => {
         device.connect({ language, voice, prompt });
       });
       device.on("disconnect", () => resolve());
@@ -69,14 +70,14 @@ export const TextToSpeechButton = ({ form }: any) => {
   useEffect(() => {
     (async () => {
       setPlayText({
-        func: async () => {
+        async func() {
           setLoading(true);
           if (ttsProvider) await ttsProvider.provider(voice, language, prompt);
           setLoading(false);
         },
       });
     })();
-  }, [prompt, language, voice, ttsProvider?.provider]);
+  }, [prompt, language, voice, ttsProvider, ttsProvider?.provider]);
 
   const disabled = !(providerId && prompt?.length >= 2 && voice && language);
   /* TODO add this back to IconButtonwhen we know how to extend MUI theme and appease typescript
@@ -90,19 +91,17 @@ export const TextToSpeechButton = ({ form }: any) => {
   );
 };
 
-export const PromptInput = (form: any, ...rest: any[]) => {
-  return (
-    <TextInput
-      source="promptText"
-      multiline
-      options={{ fullWidth: true }}
-      InputProps={{ endAdornment: <TextToSpeechButton form={form} /> }}
-      {...rest}
-    />
-  );
-};
+export const PromptInput = (form: any, ...rest: any[]) => (
+  <TextInput
+    source="promptText"
+    multiline
+    options={{ fullWidth: true }}
+    InputProps={{ endAdornment: <TextToSpeechButton form={form} /> }}
+    {...rest}
+  />
+);
 
-const validateVoice = (args: any, values: any) => {
+const validateVoice = (_args: any, values: any) => {
   if (!values.language) return "validation.language";
   if (!values.voice) return "validation.voice";
   // @ts-expect-error
@@ -145,25 +144,20 @@ const getAvailableNumbers = async (providerId: string) => {
   }
 };
 
-const sidToNumber = (sid: any) => {
-  return availableNumbers
-    .filter(({ id }) => id === sid)
-    .map(({ name }) => name)[0];
-};
+const sidToNumber = (sid: any) =>
+  availableNumbers.filter(({ id }) => id === sid).map(({ name }) => name)[0];
 
-export const populateNumber = (data: any) => {
-  return {
-    ...data,
-    number: sidToNumber(data.providerLineSid),
-  };
-};
+export const populateNumber = (data: any) => ({
+  ...data,
+  number: sidToNumber(data.providerLineSid),
+});
 
 const hasNumbers = (
-  args: any,
-  value: any,
-  values: any,
-  translate: any,
-  ...props: any[]
+  _args: any,
+  _value: any,
+  _values: any,
+  _translate: any,
+  ..._props: any[]
 ) => {
   if (noAvailableNumbers) return "validation.noAvailableNumbers";
 
@@ -197,7 +191,7 @@ export const AvailableNumbersInput = (form: any, ...rest: any[]) => {
         notify("validation.noAvailableNumbers", { type: "error" });
       setLoading(false);
     }
-  }, [form && form.formData ? form.formData.providerId : undefined]);
+  }, [form, notify, translate]);
 
   return (
     <>