linter-pass

.eslintrc.js

@@ -74,6 +74,8 @@ module.exports = {
     'unicorn/numeric-separators-style': 'off',
     'unicorn/prefer-node-protocol': 'off',
 
+    'promise/always-return': 'off',
+
     eqeqeq: 'error',
     'no-param-reassign': 'error',
     'no-nested-ternary': 'error',

src/components/Article/Soundwave.tsx

@@ -1,12 +1,5 @@
 import { onMount } from 'solid-js'
 
-interface SoundwaveProps {
-  url: String
-  context: AudioContext
-}
-
-export const Soundwave = (props: SoundwaveProps) => {
-  let canvasRef: HTMLCanvasElement
 /**
  * A utility function for drawing our line segments
  * @param {AudioContext} ctx the audio context
@@ -27,37 +20,6 @@ export const Soundwave = (props: SoundwaveProps) => {
   ctx.stroke()
 }
 
-  /**
-   * Draws the audio file into a canvas element.
-   * @param {Array} normalizedData The filtered array returned from filterData()
-   * @returns {Array} a normalized array of data
-   */
-  const draw = (normalizedData) => {
-    // set up the canvas
-    const canvas = canvasRef
-    const dpr = window.devicePixelRatio || 1
-    const padding = 20
-    canvas.width = canvas.offsetWidth * dpr
-    canvas.height = (canvas.offsetHeight + padding * 2) * dpr
-    const ctx = canvas.getContext('2d')
-    ctx.scale(dpr, dpr)
-    ctx.translate(0, canvas.offsetHeight / 2 + padding) // set Y = 0 to be in the middle of the canvas
-
-    // draw the line segments
-    const width = canvas.offsetWidth / normalizedData.length
-    // eslint-disable-next-line unicorn/no-for-loop
-    for (let i = 0; i < normalizedData.length; i++) {
-      const x = width * i
-      let height = normalizedData[i] * canvas.offsetHeight - padding
-      if (height < 0) {
-        height = 0
-      } else if (height > canvas.offsetHeight / 2) {
-        height = height - canvas.offsetHeight / 2
-      }
-      drawLineSegment(ctx, x, height, width, (i + 1) % 2)
-    }
-  }
-
 /**
  * Filters the AudioBuffer retrieved from an external source
  * @param {AudioBuffer} audioBuffer the AudioBuffer from drawAudio()
@@ -89,6 +51,45 @@ export const Soundwave = (props: SoundwaveProps) => {
   return filteredData.map((n) => n * multiplier)
 }
 
+interface SoundwaveProps {
+  url: string
+  context: AudioContext
+}
+
+export const Soundwave = (props: SoundwaveProps) => {
+  let canvasRef: HTMLCanvasElement
+
+  /**
+   * Draws the audio file into a canvas element.
+   * @param {Array} normalizedData The filtered array returned from filterData()
+   * @returns {Array} a normalized array of data
+   */
+  const draw = (normalizedData) => {
+    // set up the canvas
+    const canvas = canvasRef
+    const dpr = window.devicePixelRatio || 1
+    const padding = 20
+    canvas.width = canvas.offsetWidth * dpr
+    canvas.height = (canvas.offsetHeight + padding * 2) * dpr
+    const ctx = canvas.getContext('2d')
+    ctx.scale(dpr, dpr)
+    ctx.translate(0, canvas.offsetHeight / 2 + padding) // set Y = 0 to be in the middle of the canvas
+
+    // draw the line segments
+    const width = canvas.offsetWidth / normalizedData.length
+    // eslint-disable-next-line unicorn/no-for-loop
+    for (let i = 0; i < normalizedData.length; i++) {
+      const x = width * i
+      let height = normalizedData[i] * canvas.offsetHeight - padding
+      if (height < 0) {
+        height = 0
+      } else if (height > canvas.offsetHeight / 2) {
+        height = height - canvas.offsetHeight / 2
+      }
+      drawLineSegment(ctx, x, height, width, (i + 1) % 2)
+    }
+  }
+
   /**
    * Retrieves audio from an external source, the initializes the drawing function
    * @param {AudioContext} audioContext the audio context

src/components/Inbox/DialogAvatar.tsx

@@ -25,10 +25,10 @@ const colors = [
 ]
 
 const getById = (letter: string) =>
-  colors[Math.abs(Number(BigInt(letter.toLowerCase().charCodeAt(0) - 97) % BigInt(colors.length)))]
+  colors[Math.abs(Number(BigInt(letter.toLowerCase().codePointAt(0) - 97) % BigInt(colors.length)))]
 
 const DialogAvatar = (props: Props) => {
-  const nameFirstLetter = props.name.substring(0, 1)
+  const nameFirstLetter = props.name.slice(0, 1)
   const randomBg = createMemo(() => {
     return getById(nameFirstLetter)
   })

src/components/Inbox/DialogCard.tsx

@@ -7,16 +7,17 @@ type Props = {
   online?: boolean
   message?: string
   counter?: number
-} & Author
+  author?: Author
+}
 
 const DialogCard = (props: Props) => {
   return (
     <div class={styles.DialogCard}>
       <div class={styles.avatar}>
-        <DialogAvatar name={props.name} url={props.userpic} online={props.online} />
+        <DialogAvatar name={props.author.name} url={props.author.userpic} online={props.online} />
       </div>
       <div class={styles.row}>
-        <div class={styles.name}>{props.name}</div>
+        <div class={styles.name}>{props.author.name}</div>
         <div class={styles.message}>
           Указать предпочтительные языки для результатов поиска можно в разделе
         </div>

src/components/Views/Inbox.tsx

@@ -53,6 +53,11 @@ const userSearch = (array: Author[], keyword: string) => {
   })
 }
 
+const postMessage = async (msg: string) => {
+  const response = await client.mutation(newMessageQuery, { messageBody: msg }).toPromise()
+  return response.data.createComment
+}
+
 export const InboxView = () => {
   const [messages, setMessages] = createSignal([])
   const [authors, setAuthors] = createSignal<Author[]>([])
@@ -84,10 +89,6 @@ export const InboxView = () => {
     if (response.error) console.debug('getMessages', response.error)
     setMessages(response.data.comments.data)
   }
-  const postMessage = async (msg: string) => {
-    const response = await client.mutation(newMessageQuery, { messageBody: msg }).toPromise()
-    return response.data.createComment
-  }
 
   let chatWindow
   onMount(async () => {
@@ -109,6 +110,7 @@ export const InboxView = () => {
         setPostMessageText('')
         chatWindow.scrollTop = chatWindow.scrollHeight
       })
+      .catch(console.error)
   }
   const handleChangeMessage = (event) => {
     setPostMessageText(event.target.value)
@@ -131,9 +133,7 @@ export const InboxView = () => {
           </div>
           <div class="holder">
             <div class="dialogs">
-              <For each={authors()}>
+              <For each={authors()}>{(author: Author) => <DialogCard author={author} online={true} />}</For>
-                {(author) => <DialogCard name={author.name} slug={author.slug} online={true} />}
-              </For>
             </div>
           </div>
         </div>

src/utils/config.ts

@@ -1,2 +1,2 @@
-export const isDev = import.meta.env.VERCEL_ENV === 'development'
+export const isDev = import.meta.env.VERCEL_ENV !== 'production'
 export const apiBaseUrl = import.meta.env.API_URL