added node related provider

src/containers/App.tsx

@@ -10,25 +10,28 @@ import { MainRouter } from '~/containers/main/MainRouter';
 import { DragDetectorProvider } from '~/utils/hooks/useDragDetector';
 import { useUser } from '~/utils/hooks/user/userUser';
 import { UserContextProvider } from '~/utils/context/UserContextProvider';
+import { SWRProvider } from '~/utils/providers/SWRProvider';
 
 const App: VFC = () => {
   const user = useUser();
 
   return (
     <ConnectedRouter history={history}>
-      <UserContextProvider user={user}>
-        <DragDetectorProvider>
-          <PageCover />
+      <SWRProvider>
+        <UserContextProvider user={user}>
+          <DragDetectorProvider>
+            <PageCover />
 
-          <MainLayout>
-            <Modal />
-            <Sprites />
+            <MainLayout>
+              <Modal />
+              <Sprites />
 
-            <MainRouter />
-          </MainLayout>
-          <BottomContainer />
-        </DragDetectorProvider>
-      </UserContextProvider>
+              <MainRouter />
+            </MainLayout>
+            <BottomContainer />
+          </DragDetectorProvider>
+        </UserContextProvider>
+      </SWRProvider>
     </ConnectedRouter>
   );
 };

src/pages/node/[id].tsx

@@ -11,7 +11,7 @@ import { NodeContextProvider } from '~/utils/context/NodeContextProvider';
 import { CommentContextProvider } from '~/utils/context/CommentContextProvider';
 import { TagsContextProvider } from '~/utils/context/TagsContextProvider';
 import { useNodePermissions } from '~/utils/hooks/node/useNodePermissions';
-import { NodeRelatedContextProvider } from '~/utils/context/NodeRelatedContextProvider';
+import { NodeRelatedProvider } from '~/utils/providers/NodeRelatedProvider';
 
 type Props = RouteComponentProps<{ id: string }> & {};
 
@@ -42,7 +42,7 @@ const NodePage: FC<Props> = ({
 
   return (
     <NodeContextProvider node={node} isLoading={isLoading}>
-      <NodeRelatedContextProvider related={related} isLoading={isLoading}>
+      <NodeRelatedProvider id={parseInt(id, 10)}>
         <CommentContextProvider
           comments={comments}
           count={commentsCount}
@@ -64,7 +64,7 @@ const NodePage: FC<Props> = ({
             <NodeLayout />
           </TagsContextProvider>
         </CommentContextProvider>
-      </NodeRelatedContextProvider>
+      </NodeRelatedProvider>
     </NodeContextProvider>
   );
 };

src/utils/providers/NodeRelatedProvider.tsx

@@ -1,18 +1,35 @@
-import { INodeRelated } from '~/redux/node/types';
-import React, { createContext, FC, useContext } from 'react';
+import React, { FC } from 'react';
+import { INode } from '~/redux/types';
+import { NodeRelatedContextProvider } from '~/utils/context/NodeRelatedContextProvider';
+import { ApiGetNodeRelatedResult, INodeRelated } from '~/redux/node/types';
+import useSWR from 'swr';
+import { API } from '~/constants/api';
+import { api } from '~/utils/api';
+import { AxiosResponse } from 'axios';
 
 interface NodeRelatedProviderProps {
-  related: INodeRelated;
-  isLoading: boolean;
+  id: INode['id'];
 }
 
-const NodeRelatedContext = createContext<NodeRelatedProviderProps>({
-  related: { albums: {}, similar: [] },
-  isLoading: false,
-});
+const defaultValue: INodeRelated = {
+  albums: {},
+  similar: [],
+};
 
-export const NodeRelatedProvider: FC<NodeRelatedProviderProps> = ({ children, ...rest }) => (
-  <NodeRelatedContext.Provider value={rest}>{children}</NodeRelatedContext.Provider>
-);
+const NodeRelatedProvider: FC<NodeRelatedProviderProps> = ({ id, children }) => {
+  const { data, isValidating } = useSWR<AxiosResponse<ApiGetNodeRelatedResult>>(
+    API.NODE.RELATED(id),
+    api.get
+  );
 
-export const useNodeRelatedContext = () => useContext<NodeRelatedProviderProps>(NodeRelatedContext);
+  return (
+    <NodeRelatedContextProvider
+      related={data?.data?.related || defaultValue}
+      isLoading={isValidating}
+    >
+      {children}
+    </NodeRelatedContextProvider>
+  );
+};
+
+export { NodeRelatedProvider };

src/utils/providers/SWRProvider.tsx

@@ -0,0 +1,8 @@
+import React, { FC } from 'react';
+import { SWRConfig, SWRConfiguration } from 'swr';
+
+const config: SWRConfiguration = {
+  revalidateOnFocus: false,
+};
+
+export const SWRProvider: FC = ({ children }) => <SWRConfig value={config}>{children}</SWRConfig>;