refactored component errors

src/utils/dom.ts

@@ -89,7 +89,10 @@ export const getURLFromString = (
   return url.replace('REMOTE_CURRENT://', process.env.REACT_APP_REMOTE_CURRENT);
 };
 
-export const getURL = (file: Partial<IFile>, size?: typeof PRESETS[keyof typeof PRESETS]) => {
+export const getURL = (
+  file: Partial<IFile> | undefined,
+  size?: typeof PRESETS[keyof typeof PRESETS]
+) => {
   return file?.url ? getURLFromString(file.url, size) : '';
 };
 

src/utils/fn.ts

@@ -10,16 +10,20 @@ export const objFromArray = (array: any[], key: string) =>
   array.reduce((obj, el) => (key && el[key] ? { ...obj, [el[key]]: el } : obj), {});
 
 export const groupCommentsByUser = (
-  result: ICommentGroup[],
+  grouppedComments: ICommentGroup[],
   comment: IComment
 ): ICommentGroup[] => {
-  const last: ICommentGroup = path([result.length - 1], result) || null;
+  const last: ICommentGroup | undefined = path([grouppedComments.length - 1], grouppedComments);
+
+  if (!comment.user) {
+    return grouppedComments;
+  }
 
   return [
     ...(!last || path(['user', 'id'], last) !== path(['user', 'id'], comment)
       ? [
           // add new group
-          ...result,
+          ...grouppedComments,
           {
             user: comment.user,
             comments: [comment],
@@ -28,7 +32,7 @@ export const groupCommentsByUser = (
         ]
       : [
           // append to last group
-          ...result.slice(0, result.length - 1),
+          ...grouppedComments.slice(0, grouppedComments.length - 1),
           {
             ...last,
             comments: [...last.comments, comment],
@@ -37,6 +41,3 @@ export const groupCommentsByUser = (
         ]),
   ];
 };
-
-// const isSameComment = (comments, index) =>
-//   comments[index - 1] && comments[index - 1].user.id === comments[index].user.id;

src/utils/hooks/fileUploader.tsx

@@ -1,4 +1,12 @@
-import React, { createContext, FC, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import React, {
+  createContext,
+  FC,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 import { IFile, IFileWithUUID } from '~/redux/types';
 import { UPLOAD_SUBJECTS, UPLOAD_TARGETS } from '~/redux/uploads/constants';
 import { getFileType } from '~/utils/uploader';
@@ -7,6 +15,8 @@ import { useDispatch } from 'react-redux';
 import { uploadUploadFiles } from '~/redux/uploads/actions';
 import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
 import { selectUploads } from '~/redux/uploads/selectors';
+import { has, path } from 'ramda';
+import { IUploadStatus } from '~/redux/uploads/reducer';
 
 export const useFileUploader = (
   subject: typeof UPLOAD_SUBJECTS[keyof typeof UPLOAD_SUBJECTS],
@@ -31,7 +41,7 @@ export const useFileUploader = (
         })
       );
 
-      const temps = items.map(file => file.temp_id);
+      const temps = items.filter(el => !!el.temp_id).map(file => file.temp_id!);
 
       setPendingIDs([...pendingIDs, ...temps]);
       dispatch(uploadUploadFiles(items));
@@ -41,9 +51,10 @@ export const useFileUploader = (
 
   useEffect(() => {
     const added = pendingIDs
-      .map(temp_uuid => statuses[temp_uuid] && statuses[temp_uuid].uuid)
-      .map(el => !!el && uploadedFiles[el])
-      .filter(el => !!el && !files.some(file => file && file.id === el.id));
+      .map(temp_uuid => path([temp_uuid, 'uuid'], statuses) as IUploadStatus['uuid'])
+      .filter(el => el)
+      .map(el => (path([String(el)], uploadedFiles) as IFile) || undefined)
+      .filter(el => !!el! && !files.some(file => file && file.id === el.id));
 
     const newPending = pendingIDs.filter(
       temp_id =>
@@ -68,7 +79,7 @@ export const useFileUploader = (
 };
 
 export type FileUploader = ReturnType<typeof useFileUploader>;
-const FileUploaderContext = createContext<FileUploader>(null);
+const FileUploaderContext = createContext<FileUploader | undefined>(undefined);
 
 export const FileUploaderProvider: FC<{ value: FileUploader; children }> = ({
   value,

src/utils/hooks/index.ts

@@ -1,9 +1,9 @@
 import { useCallback, useEffect } from 'react';
 
-export const useCloseOnEscape = (onRequestClose: () => void, ignore_inputs = false) => {
+export const useCloseOnEscape = (onRequestClose?: () => void, ignore_inputs = false) => {
   const onEscape = useCallback(
     event => {
-      if (event.key !== 'Escape') return;
+      if (event.key !== 'Escape' || !onRequestClose) return;
       if (
         ignore_inputs &&
         (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA')

src/utils/hooks/useCommentFormFormik.ts

@@ -12,7 +12,7 @@ const validationSchema = object().shape({
 });
 
 const onSuccess = ({ resetForm, setStatus, setSubmitting }: FormikHelpers<IComment>) => (
-  e: string
+  e?: string
 ) => {
   setSubmitting(false);
 

src/utils/player.ts

@@ -32,15 +32,12 @@ export class PlayerClass {
     });
   }
 
-  public current: number = 0;
+  public current = 0;
+  public total = 0;
+  public element = new Audio();
+  public duration = 0;
 
-  public total: number = 0;
-
-  public element: HTMLAudioElement = typeof Audio !== 'undefined' ? new Audio() : null;
-
-  public duration: number = 0;
-
-  public set = (src: string): void => {
+  public set = (src: string) => {
     this.element.src = src;
   };
 

src/utils/tag.ts

@@ -3,11 +3,11 @@ import { ITag } from '~/redux/types';
 export const separateTags = (tags: Partial<ITag>[]): Partial<ITag>[][] =>
   (tags || []).reduce(
     (obj, tag) =>
-      tag.title.substr(0, 1) === '/' ? [[...obj[0], tag], obj[1]] : [obj[0], [...obj[1], tag]],
-    [[], []]
+      tag?.title?.substr(0, 1) === '/' ? [[...obj[0], tag], obj[1]] : [obj[0], [...obj[1], tag]],
+    [[], []] as Partial<ITag>[][]
   );
 
 export const separateTagOptions = (options: string[]): string[][] =>
   separateTags(options.map((title): Partial<ITag> => ({ title }))).map(item =>
-    item.map(({ title }) => title)
+    item.filter(tag => tag.title).map(({ title }) => title!)
   );