added node related provider

package.json

@@ -41,6 +41,7 @@
     "redux-saga": "^1.1.1",
     "sticky-sidebar": "^3.3.1",
     "swiper": "^6.8.4",
+    "swr": "^1.0.1",
     "throttle-debounce": "^2.1.0",
     "typescript": "^4.0.5",
     "typograf": "^6.11.3",

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>;

yarn.lock

@@ -4016,6 +4016,11 @@ depd@~1.1.2:
   resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
   integrity sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=
 
+dequal@2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.2.tgz#85ca22025e3a87e65ef75a7a437b35284a7e319d"
+  integrity sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug==
+
 des.js@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.1.tgz#5382142e1bdc53f85d86d53e5f4aa7deb91e0843"
@@ -10917,6 +10922,13 @@ swiper@^6.8.4:
     dom7 "^3.0.0"
     ssr-window "^3.0.0"
 
+swr@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/swr/-/swr-1.0.1.tgz#15f62846b87ee000e52fa07812bb65eb62d79483"
+  integrity sha512-EPQAxSjoD4IaM49rpRHK0q+/NzcwoT8c0/Ylu/u3/6mFj/CWnQVjNJ0MV2Iuw/U+EJSd2TX5czdAwKPYZIG0YA==
+  dependencies:
+    dequal "2.0.2"
+
 symbol-observable@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"