made boris use context

src/components/boris/BorisComments/index.tsx

@@ -5,46 +5,39 @@ import { NodeCommentForm } from '~/components/node/NodeCommentForm';
 import { NodeNoComments } from '~/components/node/NodeNoComments';
 import { NodeComments } from '~/views/node/NodeComments';
 import { Footer } from '~/components/main/Footer';
-import { IComment, IFile, INode } from '~/redux/types';
-import { IUser } from '~/redux/auth/types';
-import { CommentProvider } from '~/utils/providers/CommentProvider';
+import { CommentProvider, useCommentContext } from '~/utils/providers/CommentProvider';
+import { useUserContext } from '~/utils/providers/UserProvider';
+import { useNodeContext } from '~/utils/providers/NodeProvider';
 
-interface IProps {
-  node: INode;
-  user: IUser;
-  commentCount: number;
-  comments: IComment[];
-  isLoadingComments: boolean;
-  onShowImageModal: (images: IFile[], index: number) => void;
-  onLoadMoreComments: () => void;
-  onDeleteComment: (id: IComment['id'], isLocked: boolean) => void;
-}
+interface IProps {}
+
+const BorisComments: FC<IProps> = () => {
+  const user = useUserContext();
+  const {
+    isLoading,
+    comments,
+    onLoadMoreComments,
+    onDeleteComment,
+    onShowImageModal,
+    count,
+  } = useCommentContext();
+  const { node } = useNodeContext();
 
-const BorisComments: FC<IProps> = ({
-  node,
-  user,
-  isLoadingComments,
-  commentCount,
-  comments,
-  onLoadMoreComments,
-  onDeleteComment,
-  onShowImageModal,
-}) => {
   return (
     <>
       <Group className={styles.grid}>
         {user.is_user && <NodeCommentForm isBefore nodeId={node.id} />}
 
-        {isLoadingComments ? (
+        {isLoading ? (
           <NodeNoComments is_loading count={7} />
         ) : (
           <CommentProvider
             comments={comments}
-            count={commentCount}
+            count={count}
             onDeleteComment={onDeleteComment}
             onLoadMoreComments={onLoadMoreComments}
             onShowImageModal={onShowImageModal}
-            isLoading={isLoadingComments}
+            isLoading={isLoading}
           >
             <NodeComments order="ASC" />
           </CommentProvider>

src/containers/main/MainRouter/index.tsx

@@ -1,6 +1,5 @@
 import React, { FC } from 'react';
 import { URLS } from '~/constants/urls';
-import { BorisLayout } from '~/layouts/BorisLayout';
 import { ErrorNotFound } from '~/containers/pages/ErrorNotFound';
 import { Redirect, Route, Switch, useLocation } from 'react-router';
 import { LabLayout } from '~/layouts/LabLayout';
@@ -8,6 +7,7 @@ import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
 import { selectAuthUser } from '~/redux/auth/selectors';
 import { ProfileLayout } from '~/layouts/ProfileLayout';
 import FlowPage from '~/pages';
+import BorisPage from '~/pages/boris';
 import NodePage from '~/pages/node/[id]';
 
 interface IProps {}
@@ -19,7 +19,7 @@ const MainRouter: FC<IProps> = () => {
   return (
     <Switch location={location}>
       <Route path={URLS.NODE_URL(':id')} component={NodePage} />
-      <Route path={URLS.BORIS} component={BorisLayout} />
+      <Route path={URLS.BORIS} component={BorisPage} />
       <Route path={URLS.ERRORS.NOT_FOUND} component={ErrorNotFound} />
       <Route path={URLS.PROFILE_PAGE(':username')} component={ProfileLayout} />
 

src/layouts/BorisLayout/index.tsx

@@ -1,71 +1,25 @@
-import React, { FC, useCallback, useEffect } from 'react';
-import { selectNode, selectNodeComments } from '~/redux/node/selectors';
-import { selectAuthIsTester } from '~/redux/auth/selectors';
-import { useDispatch } from 'react-redux';
+import React, { FC } from 'react';
 import styles from './styles.module.scss';
 import { Group } from '~/components/containers/Group';
 import boris from '~/sprites/boris_robot.svg';
-import { useRandomPhrase } from '~/constants/phrases';
-import isBefore from 'date-fns/isBefore';
-import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
-import { selectBorisStats } from '~/redux/boris/selectors';
-import { authSetState, authSetUser } from '~/redux/auth/actions';
-import { nodeLoadNode } from '~/redux/node/actions';
-import { borisLoadStats } from '~/redux/boris/actions';
 import { Container } from '~/containers/main/Container';
 import StickyBox from 'react-sticky-box/dist/esnext';
 import { BorisComments } from '~/components/boris/BorisComments';
 import { Card } from '~/components/containers/Card';
 import { SidebarRouter } from '~/containers/main/SidebarRouter';
 import { BorisSidebar } from '~/components/boris/BorisSidebar';
-import { useImageModal } from '~/utils/hooks/useImageModal';
-import { useNodeComments } from '~/utils/hooks/node/useNodeComments';
-import { useUser } from '~/utils/hooks/user/userUser';
+import { useUserContext } from '~/utils/providers/UserProvider';
+import { BorisUsageStats } from '~/redux/boris/reducer';
 
-type IProps = {};
+type IProps = {
+  title: string;
+  setIsBetaTester: (val: boolean) => void;
+  isTester: boolean;
+  stats: BorisUsageStats;
+};
 
-const BorisLayout: FC<IProps> = () => {
-  const title = useRandomPhrase('BORIS_TITLE');
-  const dispatch = useDispatch();
-  const node = useShallowSelect(selectNode);
-  const stats = useShallowSelect(selectBorisStats);
-  const comments = useShallowSelect(selectNodeComments);
-  const isTester = useShallowSelect(selectAuthIsTester);
-  const user = useUser();
-
-  useEffect(() => {
-    const last_comment = comments[0];
-
-    if (!last_comment) return;
-
-    if (
-      user.last_seen_boris &&
-      last_comment.created_at &&
-      !isBefore(new Date(user.last_seen_boris), new Date(last_comment.created_at))
-    )
-      return;
-
-    dispatch(authSetUser({ last_seen_boris: last_comment.created_at }));
-  }, [user.last_seen_boris, dispatch, comments]);
-
-  useEffect(() => {
-    if (node.is_loading) return;
-    dispatch(nodeLoadNode(696, 'DESC'));
-  }, [dispatch]);
-
-  useEffect(() => {
-    dispatch(borisLoadStats());
-  }, [dispatch]);
-
-  const setBetaTester = useCallback(
-    (is_tester: boolean) => {
-      dispatch(authSetState({ is_tester }));
-    },
-    [dispatch]
-  );
-
-  const onShowImageModal = useImageModal();
-  const { onLoadMoreComments, onDelete: onDeleteComment } = useNodeComments(696);
+const BorisLayout: FC<IProps> = ({ title, setIsBetaTester, isTester, stats }) => {
+  const user = useUserContext();
 
   return (
     <Container>
@@ -82,16 +36,7 @@ const BorisLayout: FC<IProps> = () => {
 
         <div className={styles.container}>
           <Card className={styles.content}>
-            <BorisComments
-              node={node.current}
-              user={user}
-              comments={node.comments}
-              commentCount={node.comment_count}
-              isLoadingComments={node.is_loading_comments}
-              onLoadMoreComments={onLoadMoreComments}
-              onShowImageModal={onShowImageModal}
-              onDeleteComment={onDeleteComment}
-            />
+            <BorisComments />
           </Card>
 
           <Group className={styles.stats}>
@@ -99,7 +44,7 @@ const BorisLayout: FC<IProps> = () => {
               <BorisSidebar
                 isTester={isTester}
                 stats={stats}
-                setBetaTester={setBetaTester}
+                setBetaTester={setIsBetaTester}
                 user={user}
               />
             </StickyBox>

src/pages/boris.tsx

@@ -0,0 +1,49 @@
+import React, { useEffect, VFC } from 'react';
+import { useDispatch } from 'react-redux';
+import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
+import { selectNode } from '~/redux/node/selectors';
+import { BorisLayout } from '~/layouts/BorisLayout';
+import { nodeLoadNode } from '~/redux/node/actions';
+import { CommentProvider } from '~/utils/providers/CommentProvider';
+import { useImageModal } from '~/utils/hooks/useImageModal';
+import { useNodeComments } from '~/utils/hooks/node/useNodeComments';
+import { useBoris } from '~/utils/hooks/boris/useBoris';
+
+const BorisPage: VFC = () => {
+  const dispatch = useDispatch();
+  const node = useShallowSelect(selectNode);
+  const {
+    comments,
+    comment_count: count,
+    is_loading_comments: isLoadingComments,
+  } = useShallowSelect(selectNode);
+
+  const onShowImageModal = useImageModal();
+  const { onLoadMoreComments, onDelete: onDeleteComment } = useNodeComments(696);
+  const { title, setIsBetaTester, isTester, stats } = useBoris(comments);
+
+  useEffect(() => {
+    if (node.is_loading) return;
+    dispatch(nodeLoadNode(696, 'DESC'));
+  }, [dispatch]);
+
+  return (
+    <CommentProvider
+      comments={comments}
+      count={count}
+      isLoading={isLoadingComments}
+      onShowImageModal={onShowImageModal}
+      onLoadMoreComments={onLoadMoreComments}
+      onDeleteComment={onDeleteComment}
+    >
+      <BorisLayout
+        title={title}
+        setIsBetaTester={setIsBetaTester}
+        isTester={isTester}
+        stats={stats}
+      />
+    </CommentProvider>
+  );
+};
+
+export default BorisPage;

src/utils/hooks/boris/useBoris.ts

@@ -0,0 +1,48 @@
+import { useDispatch } from 'react-redux';
+import { useCallback, useEffect } from 'react';
+import isBefore from 'date-fns/isBefore';
+import { authSetState, authSetUser } from '~/redux/auth/actions';
+import { borisLoadStats } from '~/redux/boris/actions';
+import { useUser } from '~/utils/hooks/user/userUser';
+import { IComment } from '~/redux/types';
+import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
+import { selectAuthIsTester } from '~/redux/auth/selectors';
+import { selectBorisStats } from '~/redux/boris/selectors';
+import { useRandomPhrase } from '~/constants/phrases';
+
+export const useBoris = (comments: IComment[]) => {
+  const dispatch = useDispatch();
+  const user = useUser();
+
+  useEffect(() => {
+    const last_comment = comments[0];
+
+    if (!last_comment) return;
+
+    if (
+      user.last_seen_boris &&
+      last_comment.created_at &&
+      !isBefore(new Date(user.last_seen_boris), new Date(last_comment.created_at))
+    )
+      return;
+
+    dispatch(authSetUser({ last_seen_boris: last_comment.created_at }));
+  }, [user.last_seen_boris, dispatch, comments]);
+
+  useEffect(() => {
+    dispatch(borisLoadStats());
+  }, [dispatch]);
+
+  const setIsBetaTester = useCallback(
+    (is_tester: boolean) => {
+      dispatch(authSetState({ is_tester }));
+    },
+    [dispatch]
+  );
+
+  const isTester = useShallowSelect(selectAuthIsTester);
+  const stats = useShallowSelect(selectBorisStats);
+  const title = useRandomPhrase('BORIS_TITLE');
+
+  return { setIsBetaTester, isTester, stats, title };
+};