removed player reducer, migrated to CRA 5

src/hooks/comments/useGetComments.ts

@@ -1,15 +1,14 @@
-import { KeyLoader } from 'swr';
-import { IComment } from '~/redux/types';
 import { API } from '~/constants/api';
 import { flatten, isNil } from 'ramda';
-import useSWRInfinite from 'swr/infinite';
+import useSWRInfinite, { SWRInfiniteKeyLoader } from 'swr/infinite';
 import { apiGetNodeComments } from '~/api/node';
 import { COMMENTS_DISPLAY } from '~/constants/node';
 import { useCallback } from 'react';
+import { IComment } from '~/redux/types';
 
-const getKey: (nodeId: number) => KeyLoader<IComment[]> = (nodeId: number) => (
+const getKey: (nodeId: number) => SWRInfiniteKeyLoader = (nodeId: number) => (
   pageIndex,
-  previousPageData
+  previousPageData: IComment[]
 ) => {
   if (pageIndex > 0 && !previousPageData?.length) return null;
   return `${API.NODE.COMMENT(nodeId)}?page=${pageIndex}`;

src/hooks/dom/useFormatWrapper.ts

@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback } from "react";
 
 /** wraps text inside textarea with tags */
 export const useFormatWrapper = (

src/hooks/dom/useGlobalLoader.ts

@@ -1,7 +1,7 @@
-import { useEffect } from 'react';
-import { useFlowStore } from '~/store/flow/useFlowStore';
-import { hideLoader } from '~/utils/dom/hideLoader';
-import { useFlowLoader } from '~/hooks/flow/useFlowLoader';
+import { useEffect } from "react";
+import { useFlowStore } from "~/store/flow/useFlowStore";
+import { hideLoader } from "~/utils/dom/hideLoader";
+import { useFlowLoader } from "~/hooks/flow/useFlowLoader";
 
 /** simply waits for all data to settle and then show the app */
 export const useGlobalLoader = () => {

src/hooks/dom/useInputPasteUpload.ts

@@ -1,5 +1,5 @@
-import { useCallback } from 'react';
-import { getImageFromPaste } from '~/utils/uploader';
+import { useCallback } from "react";
+import { getImageFromPaste } from "~/utils/uploader";
 
 // useInputPasteUpload attaches event listener to input, that calls onUpload if user pasted any image
 export const useInputPasteUpload = (onUpload: (files: File[]) => void) => {

src/hooks/flow/useFlowLayout.ts

@@ -1,6 +1,6 @@
-import { useCallback } from 'react';
-import { usePersistedState } from '~/hooks/data/usePersistedState';
-import { experimentalFeatures } from '~/constants/features';
+import { useCallback } from "react";
+import { usePersistedState } from "~/hooks/data/usePersistedState";
+import { experimentalFeatures } from "~/constants/features";
 
 enum Layout {
   Fluid = 'fluid',

src/hooks/lab/useGetLabNodes.ts

@@ -1,5 +1,4 @@
-import useSWRInfinite from 'swr/infinite';
-import { KeyLoader } from 'swr';
+import useSWRInfinite, { SWRInfiniteKeyLoader } from 'swr/infinite';
 import { GetLabNodesRequest, ILabNode } from '~/types/lab';
 import { getLabNodes } from '~/api/lab';
 import { flatten, last, uniqBy } from 'ramda';
@@ -8,7 +7,7 @@ import { useCallback, useEffect } from 'react';
 import { INode } from '~/redux/types';
 import { useUser } from '~/hooks/user/userUser';
 
-const getKey: (isUser: boolean) => KeyLoader<ILabNode[]> = isUser => (index, prev) => {
+const getKey: (isUser: boolean) => SWRInfiniteKeyLoader = isUser => (index, prev: ILabNode[]) => {
   if (!isUser) return null;
   if (index > 0 && !prev?.length) return null;
 

src/hooks/metadata/useYoutubeMetadata.ts

@@ -0,0 +1,16 @@
+import { useMetadataProvider } from '~/utils/providers/MetadataProvider';
+import { useEffect } from 'react';
+
+export const useYoutubeMetadata = (id: string) => {
+  const { queue, enqueue, metadata, pending } = useMetadataProvider();
+
+  useEffect(() => {
+    if (queue.includes(id) || pending.includes(id)) {
+      return;
+    }
+
+    enqueue(id);
+  }, [id]);
+
+  return metadata[id];
+};

src/hooks/navigation/useBlockBackButton.ts

@@ -1,5 +1,5 @@
-import { useEffect } from 'react';
-import { history } from '~/redux/store';
+import { useEffect } from "react";
+import { history } from "~/redux/store";
 
 /**
  * useBlockBackButton - blocks back navigation and calls {callback}

src/hooks/node/useGotoNode.ts

@@ -1,7 +1,7 @@
-import { INode } from '~/redux/types';
-import { useHistory } from 'react-router';
-import { useCallback } from 'react';
-import { URLS } from '~/constants/urls';
+import { INode } from "~/redux/types";
+import { useHistory } from "react-router";
+import { useCallback } from "react";
+import { URLS } from "~/constants/urls";
 
 // useGotoNode returns fn, that navigates to node
 export const useGotoNode = (id: INode['id']) => {

src/hooks/node/useNodeAudios.ts

@@ -3,10 +3,6 @@ import { useMemo } from 'react';
 import { UploadType } from '~/constants/uploads';
 
 export const useNodeAudios = (node: INode) => {
-  if (!node?.files) {
-    return [];
-  }
-
   return useMemo(() => node.files.filter(file => file && file.type === UploadType.Audio), [
     node.files,
   ]);

src/hooks/node/useNodeBlocks.ts

@@ -1,7 +1,7 @@
-import { INode } from '~/redux/types';
-import { createElement, FC, useCallback, useMemo } from 'react';
-import { isNil, prop } from 'ramda';
-import { INodeComponentProps, LAB_PREVIEW_LAYOUT, NODE_COMPONENTS, NODE_HEADS, NODE_INLINES, } from '~/constants/node';
+import { INode } from "~/redux/types";
+import { createElement, FC, useCallback, useMemo } from "react";
+import { isNil, prop } from "ramda";
+import { INodeComponentProps, LAB_PREVIEW_LAYOUT, NODE_COMPONENTS, NODE_HEADS, NODE_INLINES } from "~/constants/node";
 
 // useNodeBlocks returns head, block and inline blocks of node
 export const useNodeBlocks = (node: INode, isLoading: boolean) => {

src/hooks/node/useNodeFormFormik.ts

@@ -2,25 +2,24 @@ import { INode } from '~/redux/types';
 import { useCallback, useRef } from 'react';
 import { FormikConfig, FormikHelpers, useFormik, useFormikContext } from 'formik';
 import { object } from 'yup';
-import { keys } from 'ramda';
 import { showErrorToast } from '~/utils/errors/showToast';
 import { Uploader } from '~/utils/context/UploaderContextProvider';
+import { getValidationErrors } from '~/utils/errors/getValidationErrors';
 
 const validationSchema = object().shape({});
 
 const afterSubmit = ({ resetForm, setSubmitting, setErrors }: FormikHelpers<INode>) => (
-  e?: string,
-  errors?: Record<string, string>
+  error?: unknown
 ) => {
   setSubmitting(false);
 
-  if (e) {
-    showErrorToast(e);
+  if (error) {
+    showErrorToast(error);
     return;
   }
 
-  if (errors && keys(errors).length) {
-    setErrors(errors);
+  if (getValidationErrors(error)) {
+    setErrors(getValidationErrors(error)!);
     return;
   }
 
@@ -49,7 +48,7 @@ export const useNodeFormFormik = (
         await sendSaveRequest({ ...values, files: uploader.files });
         afterSubmit(helpers)();
       } catch (error) {
-        afterSubmit(helpers)(error?.response?.data?.error, error?.response?.data?.errors);
+        afterSubmit(helpers)(error);
       }
     },
     [sendSaveRequest, uploader.files]

src/hooks/node/useOnNodeSeen.ts

@@ -1,7 +1,7 @@
-import { INode } from '~/redux/types';
-import { useEffect } from 'react';
-import { useFlowStore } from '~/store/flow/useFlowStore';
-import { useGetLabStats } from '~/hooks/lab/useGetLabStats';
+import { INode } from "~/redux/types";
+import { useEffect } from "react";
+import { useFlowStore } from "~/store/flow/useFlowStore";
+import { useGetLabStats } from "~/hooks/lab/useGetLabStats";
 
 // useOnNodeSeen updates node seen status across all needed places
 export const useOnNodeSeen = (node?: INode) => {

src/hooks/player/usePlayer.ts

@@ -1,17 +0,0 @@
-import { useShallowSelect } from '~/hooks/data/useShallowSelect';
-import { selectPlayer } from '~/redux/player/selectors';
-import { useCallback } from 'react';
-import { playerPause, playerPlay, playerSeek, playerStop } from '~/redux/player/actions';
-import { useDispatch } from 'react-redux';
-
-export const usePlayer = () => {
-  const { status, file } = useShallowSelect(selectPlayer);
-  const dispatch = useDispatch();
-
-  const onPlayerPlay = useCallback(() => dispatch(playerPlay()), [dispatch]);
-  const onPlayerPause = useCallback(() => dispatch(playerPause()), [dispatch]);
-  const onPlayerSeek = useCallback((pos: number) => dispatch(playerSeek(pos)), [dispatch]);
-  const onPlayerStop = useCallback(() => dispatch(playerStop()), [dispatch]);
-
-  return { status, file, onPlayerPlay, onPlayerSeek, onPlayerPause, onPlayerStop };
-};

src/hooks/search/useSearch.ts

@@ -1,14 +1,16 @@
 import { useCallback, useEffect, useState } from 'react';
-import useSWRInfinite from 'swr/infinite';
+import useSWRInfinite, { SWRInfiniteKeyLoader } from 'swr/infinite';
 import { flatten } from 'ramda';
 import { getSearchResults } from '~/api/flow';
-import { KeyLoader } from 'swr';
 import { INode } from '~/redux/types';
 import { GetSearchResultsRequest } from '~/types/flow';
 
 const RESULTS_COUNT = 20;
 
-const getKey: (text: string) => KeyLoader<INode[]> = text => (pageIndex, previousPageData) => {
+const getKey: (text: string) => SWRInfiniteKeyLoader = text => (
+  pageIndex,
+  previousPageData: INode[]
+) => {
   if ((pageIndex > 0 && !previousPageData?.length) || !text) return null;
 
   const props: GetSearchResultsRequest = {

src/hooks/tag/useTagNodes.ts

@@ -1,14 +1,16 @@
-import { KeyLoader } from 'swr';
 import { INode } from '~/redux/types';
 import { API } from '~/constants/api';
 import { flatten, isNil } from 'ramda';
-import useSWRInfinite from 'swr/infinite';
+import useSWRInfinite, { SWRInfiniteKeyLoader } from 'swr/infinite';
 import { useCallback } from 'react';
 import { apiGetNodesOfTag } from '~/api/tags';
 
 const PAGE_SIZE = 10;
 
-const getKey: (tag: string) => KeyLoader<INode[]> = tag => (pageIndex, previousPageData) => {
+const getKey: (tag: string) => SWRInfiniteKeyLoader = tag => (
+  pageIndex,
+  previousPageData: INode[]
+) => {
   if (pageIndex > 0 && !previousPageData?.length) return null;
   return `${API.TAG.NODES}?tag=${tag}&page=${pageIndex}`;
 };