refactored hooks directory

src/hooks/data/useFileUploader.tsx

@@ -0,0 +1,89 @@
+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';
+import uuid from 'uuid4';
+import { useDispatch } from 'react-redux';
+import { uploadUploadFiles } from '~/redux/uploads/actions';
+import { useShallowSelect } from '~/hooks/data/useShallowSelect';
+import { selectUploads } from '~/redux/uploads/selectors';
+import { path } from 'ramda';
+import { IUploadStatus } from '~/redux/uploads/reducer';
+
+export const useFileUploader = (
+  subject: typeof UPLOAD_SUBJECTS[keyof typeof UPLOAD_SUBJECTS],
+  target: typeof UPLOAD_TARGETS[keyof typeof UPLOAD_TARGETS],
+  initialFiles?: IFile[]
+) => {
+  const dispatch = useDispatch();
+  const { files: uploadedFiles, statuses } = useShallowSelect(selectUploads);
+
+  const [files, setFiles] = useState<IFile[]>(initialFiles || []);
+  const [pendingIDs, setPendingIDs] = useState<string[]>([]);
+
+  const uploadFiles = useCallback(
+    (files: File[]) => {
+      const items: IFileWithUUID[] = files.map(
+        (file: File): IFileWithUUID => ({
+          file,
+          temp_id: uuid(),
+          subject,
+          target,
+          type: getFileType(file),
+        })
+      );
+
+      const temps = items.filter(el => !!el.temp_id).map(file => file.temp_id!);
+
+      setPendingIDs([...pendingIDs, ...temps]);
+      dispatch(uploadUploadFiles(items));
+    },
+    [pendingIDs, setPendingIDs, dispatch, subject, target]
+  );
+
+  useEffect(() => {
+    const added = pendingIDs
+      .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 =>
+        statuses[temp_id] &&
+        (!statuses[temp_id].uuid || !added.some(file => file.id === statuses[temp_id].uuid))
+    );
+
+    if (added.length) {
+      setPendingIDs(newPending);
+      setFiles([...files, ...added]);
+    }
+  }, [statuses, files, pendingIDs, setFiles, setPendingIDs, uploadedFiles]);
+
+  const pending = useMemo(() => pendingIDs.map(id => statuses[id]).filter(el => !!el), [
+    statuses,
+    pendingIDs,
+  ]);
+
+  const isLoading = pending.length > 0;
+
+  return { uploadFiles, pending, files, setFiles, isUploading: isLoading };
+};
+
+export type FileUploader = ReturnType<typeof useFileUploader>;
+const FileUploaderContext = createContext<FileUploader | undefined>(undefined);
+
+export const FileUploaderProvider: FC<{ value: FileUploader; children }> = ({
+  value,
+  children,
+}) => <FileUploaderContext.Provider value={value}>{children}</FileUploaderContext.Provider>;
+
+export const useFileUploaderContext = () => useContext(FileUploaderContext);

src/hooks/data/usePersistedState.ts

@@ -0,0 +1,19 @@
+import { useEffect, useMemo, useState } from 'react';
+
+export const usePersistedState = (key: string, initial: string): [string, (val: string) => any] => {
+  const stored = useMemo(() => {
+    try {
+      return localStorage.getItem(`vault_${key}`) || initial;
+    } catch (e) {
+      return initial;
+    }
+  }, [key]);
+
+  const [val, setVal] = useState<string>(stored);
+
+  useEffect(() => {
+    localStorage.setItem(`vault_${key}`, val);
+  }, [val]);
+
+  return [val, setVal];
+};

src/hooks/data/useShallowSelect.ts

@@ -0,0 +1,5 @@
+import { shallowEqual, useSelector } from 'react-redux';
+import { IState } from '~/redux/store';
+
+export const useShallowSelect = <T extends (state: IState) => any>(selector: T): ReturnType<T> =>
+  useSelector(selector, shallowEqual);

src/hooks/data/useTranslatedError.ts

@@ -0,0 +1,17 @@
+import { ERROR_LITERAL } from '~/constants/errors';
+import { has } from 'ramda';
+import { useMemo } from 'react';
+
+export const useTranslatedError = (error: string | undefined) => {
+  return useMemo(() => {
+    if (!error) {
+      return '';
+    }
+
+    if (!has(error, ERROR_LITERAL)) {
+      return error;
+    }
+
+    return ERROR_LITERAL[error];
+  }, [error]);
+};