fixed comment deletion with hooks

src/index.tsx

@@ -5,14 +5,23 @@ import { PersistGate } from 'redux-persist/integration/react';
 import { configureStore } from '~/redux/store';
 import App from '~/containers/App';
 import '~/styles/main.scss';
+import { SWRConfig } from 'swr';
 
 const { store, persistor } = configureStore();
 
 render(
-  <Provider store={store}>
-    <PersistGate loading={null} persistor={persistor}>
-      <App />
-    </PersistGate>
-  </Provider>,
+  <SWRConfig
+    value={{
+      revalidateIfStale: false,
+      revalidateOnFocus: false,
+      revalidateOnReconnect: false,
+    }}
+  >
+    <Provider store={store}>
+      <PersistGate loading={null} persistor={persistor}>
+        <App />
+      </PersistGate>
+    </Provider>
+  </SWRConfig>,
   document.getElementById('app')
 );

src/layouts/BorisLayout/index.tsx

@@ -1,5 +1,4 @@
 import React, { FC, useCallback, useEffect } from 'react';
-import { selectNode, selectNodeComments } from '~/redux/node/selectors';
 import { selectAuthIsTester, selectUser } from '~/redux/auth/selectors';
 import { useDispatch } from 'react-redux';
 import styles from './styles.module.scss';
@@ -11,7 +10,6 @@ import { BorisStats } from '~/components/boris/BorisStats';
 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';

src/redux/messages/api.ts

@@ -24,6 +24,6 @@ export const apiSendMessage = ({ username, message }: ApiSendMessageRequest) =>
 export const apiDeleteMessage = ({ username, id, is_locked }: ApiDeleteMessageRequest) =>
   api
     .delete<ApiDeleteMessageResult>(API.USER.MESSAGE_DELETE(username, id), {
-      params: { is_locked },
+      params: { isLocked: is_locked },
     })
     .then(cleanResult);

src/redux/node/actions.ts

@@ -118,10 +118,17 @@ export const nodeLock = (id: INode['id'], is_locked: boolean) => ({
   is_locked,
 });
 
-export const nodeLockComment = (id: IComment['id'], is_locked: boolean) => ({
+export const nodeLockComment = (
+  nodeID: INode['id'],
+  commentID: IComment['id'],
+  isLocked: boolean,
+  callback: (e?: string) => void
+) => ({
   type: NODE_ACTIONS.LOCK_COMMENT,
-  id,
-  is_locked,
+  nodeID,
+  commentID,
+  callback,
+  isLocked,
 });
 
 export const nodeEditComment = (id: IComment['id']) => ({

src/redux/node/api.ts

@@ -108,10 +108,10 @@ export const apiPostNodeHeroic = ({ id }: ApiPostNodeHeroicRequest) =>
 
 export const apiLockNode = ({ id, is_locked }: ApiLockNodeRequest) =>
   api
-    .post<ApiLockNodeResult>(API.NODE.POST_LOCK(id), { is_locked })
+    .post<ApiLockNodeResult>(API.NODE.POST_LOCK(id), { isLocked: is_locked })
     .then(cleanResult);
 
-export const apiLockComment = ({ id, is_locked, current }: ApiLockCommentRequest) =>
+export const apiLockComment = ({ nodeID, isLocked, commentID }: ApiLockCommentRequest) =>
   api
-    .post<ApiLockcommentResult>(API.NODE.LOCK_COMMENT(current, id), { is_locked })
+    .post<ApiLockcommentResult>(API.NODE.LOCK_COMMENT(nodeID, commentID), { is_locked: isLocked })
     .then(cleanResult);

src/redux/node/sagas.ts

@@ -312,41 +312,23 @@ function* onLockSaga({ id, is_locked }: ReturnType<typeof nodeLock>) {
   }
 }
 
-function* onLockCommentSaga({ id, is_locked }: ReturnType<typeof nodeLockComment>) {
-  const { current, comments }: ReturnType<typeof selectNode> = yield select(selectNode);
-
+function* onLockCommentSaga({
+  commentID,
+  nodeID,
+  isLocked,
+  callback,
+}: ReturnType<typeof nodeLockComment>) {
   try {
-    yield put(
-      nodeSetComments(
-        comments.map(comment =>
-          comment.id === id
-            ? { ...comment, deleted_at: is_locked ? new Date().toISOString() : undefined }
-            : comment
-        )
-      )
-    );
-
-    const data: Unwrap<typeof apiLockComment> = yield call(apiLockComment, {
-      current: current.id,
-      id,
-      is_locked,
+    yield call(apiLockComment, {
+      commentID,
+      nodeID,
+      isLocked,
     });
 
-    yield put(
-      nodeSetComments(
-        comments.map(comment =>
-          comment.id === id ? { ...comment, deleted_at: data.deleted_at || undefined } : comment
-        )
-      )
-    );
-  } catch {
-    yield put(
-      nodeSetComments(
-        comments.map(comment =>
-          comment.id === id ? { ...comment, deleted_at: current.deleted_at } : comment
-        )
-      )
-    );
+    callback();
+  } catch (e) {
+    console.log(e);
+    callback(e.toString());
   }
 }
 

src/redux/node/types.ts

@@ -71,9 +71,9 @@ export type ApiLockNodeResult = {
 };
 
 export type ApiLockCommentRequest = {
-  id: IComment['id'];
-  current: INode['id'];
-  is_locked: boolean;
+  commentID: IComment['id'];
+  nodeID: INode['id'];
+  isLocked: boolean;
 };
 export type ApiLockcommentResult = {
   deleted_at: string;

src/utils/hooks/node/useNodeComments.ts

@@ -22,7 +22,7 @@ export const useNodeComments = (id: INode['id']) => {
     [id]
   );
 
-  const { data, error, isValidating, size, setSize } = useSWRInfinite(getKey, fetcher);
+  const { data, error, isValidating, size, setSize, mutate } = useSWRInfinite(getKey, fetcher);
 
   const comments = useMemo<IComment[]>(
     () => (data || []).reduce((acc, { comments }) => [...acc, ...comments], [] as IComment[]),
@@ -40,14 +40,37 @@ export const useNodeComments = (id: INode['id']) => {
   const isLoading = !data && !isValidating;
 
   const onDelete = useCallback(
-    (id: IComment['id'], locked: boolean) => dispatch(nodeLockComment(id, locked)),
-    [dispatch]
+    (commentID: IComment['id'], locked: boolean) => {
+      const callback = (e?: string) => {
+        if (!e && data) {
+          console.log({ data, commentID });
+
+          mutate(
+            data.map(page => ({
+              ...page,
+              comments: page.comments.map(comment =>
+                comment.id === commentID
+                  ? {
+                      ...comment,
+                      deleted_at: locked ? new Date().toISOString() : undefined,
+                    }
+                  : comment
+              ),
+            })),
+            false
+          );
+        }
+      };
+
+      dispatch(nodeLockComment(id, commentID, locked, callback));
+    },
+    [id, mutate, data]
   );
   const onLoadMoreComments = useCallback(() => setSize(size + 1), [size, setSize]);
 
   const onShowPhotoswipe = useCallback(
     (images: IFile[], index: number) => dispatch(modalShowPhotoswipe(images, index)),
-    [dispatch]
+    []
   );
 
   return { comments, count, error, isLoading, onDelete, onLoadMoreComments, onShowPhotoswipe };