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,31 +1,63 @@
 import { onMount } from 'solid-js'
 
+/**
+ * A utility function for drawing our line segments
+ * @param {AudioContext} ctx the audio context
+ * @param {number} x  the x coordinate of the beginning of the line segment
+ * @param {number} height the desired height of the line segment
+ * @param {number} width the desired width of the line segment
+ * @param {boolean} isEven whether or not the segmented is even-numbered
+ */
+const drawLineSegment = (ctx, x, height, width, isEven) => {
+  ctx.lineWidth = 1 // how thick the line is
+  ctx.strokeStyle = '#fff' // what color our line is
+  ctx.beginPath()
+  const h = isEven ? height : -height
+  ctx.moveTo(x, 0)
+  ctx.lineTo(x, h)
+  ctx.arc(x + width / 2, h, width / 2, Math.PI, 0, isEven)
+  ctx.lineTo(x + width, 0)
+  ctx.stroke()
+}
+
+/**
+ * Filters the AudioBuffer retrieved from an external source
+ * @param {AudioBuffer} audioBuffer the AudioBuffer from drawAudio()
+ * @returns {Array} an array of floating point numbers
+ */
+const filterData = (audioBuffer) => {
+  const rawData = audioBuffer.getChannelData(0) // We only need to work with one channel of data
+  const samples = 70 // Number of samples we want to have in our final data set
+  const blockSize = Math.floor(rawData.length / samples) // the number of samples in each subdivision
+  const filteredData = []
+  for (let i = 0; i < samples; i++) {
+    const blockStart = blockSize * i // the location of the first sample in the block
+    let sum = 0
+    for (let j = 0; j < blockSize; j++) {
+      sum = sum + Math.abs(rawData[blockStart + j]) // find the sum of all the samples in the block
+    }
+    filteredData.push(sum / blockSize) // divide the sum by the block size to get the average
+  }
+  return filteredData
+}
+
+/**
+ * Normalizes the audio data to make a cleaner illustration
+ * @param {Array} filteredData the data from filterData()
+ * @returns {Array} an normalized array of floating point numbers
+ */
+const normalizeData = (filteredData) => {
+  const multiplier = Math.pow(Math.max(...filteredData), -1)
+  return filteredData.map((n) => n * multiplier)
+}
+
 interface SoundwaveProps {
-  url: String
+  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
-   * @param {number} x  the x coordinate of the beginning of the line segment
-   * @param {number} height the desired height of the line segment
-   * @param {number} width the desired width of the line segment
-   * @param {boolean} isEven whether or not the segmented is even-numbered
-   */
-  const drawLineSegment = (ctx, x, height, width, isEven) => {
-    ctx.lineWidth = 1 // how thick the line is
-    ctx.strokeStyle = '#fff' // what color our line is
-    ctx.beginPath()
-    const h = isEven ? height : -height
-    ctx.moveTo(x, 0)
-    ctx.lineTo(x, h)
-    ctx.arc(x + width / 2, h, width / 2, Math.PI, 0, isEven)
-    ctx.lineTo(x + width, 0)
-    ctx.stroke()
-  }
 
   /**
    * Draws the audio file into a canvas element.
@@ -58,37 +90,6 @@ export const Soundwave = (props: SoundwaveProps) => {
     }
   }
 
-  /**
-   * Filters the AudioBuffer retrieved from an external source
-   * @param {AudioBuffer} audioBuffer the AudioBuffer from drawAudio()
-   * @returns {Array} an array of floating point numbers
-   */
-  const filterData = (audioBuffer) => {
-    const rawData = audioBuffer.getChannelData(0) // We only need to work with one channel of data
-    const samples = 70 // Number of samples we want to have in our final data set
-    const blockSize = Math.floor(rawData.length / samples) // the number of samples in each subdivision
-    const filteredData = []
-    for (let i = 0; i < samples; i++) {
-      const blockStart = blockSize * i // the location of the first sample in the block
-      let sum = 0
-      for (let j = 0; j < blockSize; j++) {
-        sum = sum + Math.abs(rawData[blockStart + j]) // find the sum of all the samples in the block
-      }
-      filteredData.push(sum / blockSize) // divide the sum by the block size to get the average
-    }
-    return filteredData
-  }
-
-  /**
-   * Normalizes the audio data to make a cleaner illustration
-   * @param {Array} filteredData the data from filterData()
-   * @returns {Array} an normalized array of floating point numbers
-   */
-  const normalizeData = (filteredData) => {
-    const multiplier = Math.pow(Math.max(...filteredData), -1)
-    return filteredData.map((n) => n * multiplier)
-  }
-
   /**
    * 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