made node use context providers

src/utils/providers/CommentProvider.tsx

@@ -0,0 +1,37 @@
+import { IComment, IFile, INode } from '~/redux/types';
+import { IUser } from '~/redux/auth/types';
+import React, { createContext, FC, useContext } from 'react';
+import { EMPTY_USER } from '~/redux/auth/constants';
+import { EMPTY_NODE } from '~/redux/node/constants';
+
+export interface CommentProviderProps {
+  node: INode;
+  user: IUser;
+  comments: IComment[];
+  count: number;
+  lastSeenCurrent?: string;
+  isLoadingNode: boolean;
+  isLoadingComments: boolean;
+  onShowImageModal: (images: IFile[], index: number) => void;
+  onLoadMoreComments: () => void;
+  onDeleteComment: (id: IComment['id'], isLocked: boolean) => void;
+}
+
+const CommentContext = createContext<CommentProviderProps>({
+  node: EMPTY_NODE,
+  user: EMPTY_USER,
+  comments: [],
+  count: 0,
+  lastSeenCurrent: undefined,
+  isLoadingNode: false,
+  isLoadingComments: false,
+  onShowImageModal: () => {},
+  onLoadMoreComments: () => {},
+  onDeleteComment: () => {},
+});
+
+export const CommentProvider: FC<CommentProviderProps> = ({ children, ...contextValue }) => {
+  return <CommentContext.Provider value={contextValue}>{children}</CommentContext.Provider>;
+};
+
+export const useCommentContext = () => useContext(CommentContext);

src/utils/providers/NodeProvider.tsx

@@ -0,0 +1,50 @@
+import { INode } from '~/redux/types';
+import { INodeRelated } from '~/redux/node/types';
+import { EMPTY_NODE } from '~/redux/node/constants';
+import React, { createContext, FC, useContext } from 'react';
+
+export interface NodeContextProps {
+  node: INode;
+  related: INodeRelated;
+  isUser: boolean;
+  isLoading: boolean;
+  // user: IUser;
+  // isLoadingComments: boolean;
+  // lastSeenCurrent?: string;
+  // commentsCount: number;
+  // comments: IComment[];
+  // onShowImageModal: (images: IFile[], index: number) => void;
+  // onLoadMoreComments: () => void;
+  // onDeleteComment: (id: IComment['id'], isLocked: boolean) => void;
+  // onTagsChange: (tags: string[]) => void;
+  // onTagClick: (tag: Partial<ITag>) => void;
+  // onTagDelete: (id: ITag['ID']) => void;
+}
+
+export const NodeContext = createContext<NodeContextProps>({
+  node: EMPTY_NODE,
+  related: { albums: {}, similar: [] },
+  isUser: false,
+  isLoading: false,
+
+  // CommentContext
+  // user: EMPTY_USER,
+  // lastSeenCurrent: undefined,
+  // comments: [],
+  // commentsCount: 0,
+  // onLoadMoreComments: () => {},
+  // onShowImageModal: () => {},
+  // onDeleteComment: () => {},
+  // isLoadingComments: false,
+
+  // TagContext
+  // onTagsChange: () => {},
+  // onTagClick: () => {},
+  // onTagDelete: () => {},
+});
+
+export const NodeProvider: FC<NodeContextProps> = ({ children, ...contextValue }) => {
+  return <NodeContext.Provider value={contextValue}>{children}</NodeContext.Provider>;
+};
+
+export const useNodeContext = () => useContext(NodeContext);

src/utils/providers/TagProvider.tsx

@@ -0,0 +1,28 @@
+import React, { createContext, FC, useContext } from 'react';
+import { ITag } from '~/redux/types';
+
+export interface TagContextProps {
+  tags: ITag[];
+  canAppend: boolean;
+  canDelete: boolean;
+  isLoading: boolean;
+  onChange: (tags: string[]) => void;
+  onTagClick: (tag: Partial<ITag>) => void;
+  onTagDelete: (id: ITag['ID']) => void;
+}
+
+const TagContext = createContext<TagContextProps>({
+  tags: [],
+  canDelete: false,
+  canAppend: false,
+  isLoading: false,
+  onChange: () => {},
+  onTagClick: () => {},
+  onTagDelete: () => {},
+});
+
+export const TagProvider: FC<TagContextProps> = ({ children, ...contextValue }) => {
+  return <TagContext.Provider value={contextValue}>{children}</TagContext.Provider>;
+};
+
+export const useTagContext = () => useContext(TagContext);