Отрефакторил бэк, исправил ошибки (#138)

* fixed paths to match refactored backend

* fixed some paths according to new backend

* fixed auth urls for new endpoints

* fixed urls

* fixed error handling

* fixes

* fixed error handling on user form

* fixed error handling on oauth

* using fallback: true on node pages

* type button for comment attach buttons

* fixed return types of social delete

* changed the way we upload user avatars

src/hooks/auth/useOAuth.ts

@@ -2,7 +2,12 @@ import { useCallback, useMemo } from 'react';
 
 import useSWR from 'swr';
 
-import { apiAttachSocial, apiDropSocial, apiGetSocials, apiLoginWithSocial } from '~/api/auth';
+import {
+  apiAttachSocial,
+  apiDropSocial,
+  apiGetSocials,
+  apiLoginWithSocial,
+} from '~/api/auth';
 import { API } from '~/constants/api';
 import { Dialog } from '~/constants/modal';
 import { useAuth } from '~/hooks/auth/useAuth';
@@ -15,13 +20,14 @@ export const useOAuth = () => {
   const { isUser, setToken } = useAuth();
   const { showModal, hideModal } = useModal();
 
-  const { data, isValidating: isLoading, mutate } = useSWR(
-    isUser ? API.USER.GET_SOCIALS : null,
-    async () => {
-      const result = await apiGetSocials();
-      return result.accounts;
-    }
-  );
+  const {
+    data,
+    isValidating: isLoading,
+    mutate,
+  } = useSWR(isUser ? API.USER.GET_SOCIALS : null, async () => {
+    const result = await apiGetSocials();
+    return result.accounts;
+  });
 
   const openOauthWindow = useCallback((provider: OAuthProvider) => {
     window.open(API.USER.OAUTH_WINDOW(provider), '', 'width=600,height=400');
@@ -37,10 +43,9 @@ export const useOAuth = () => {
         setToken(result.token);
         hideModal();
       } catch (error) {
-        const needsRegister: string | undefined = path(
-          ['response', 'data', 'needs_register'],
-          error
-        );
+        console.log(path(['response'], error));
+
+        const needsRegister = path(['response', 'status'], error) === 428;
 
         if (needsRegister && token) {
           showModal(Dialog.LoginSocialRegister, { token });
@@ -50,7 +55,7 @@ export const useOAuth = () => {
         showErrorToast(error);
       }
     },
-    [showModal, hideModal, setToken]
+    [showModal, hideModal, setToken],
   );
 
   const loginWithSocial = useCallback(
@@ -62,7 +67,7 @@ export const useOAuth = () => {
       setToken(token);
       hideModal();
     },
-    [setToken, hideModal]
+    [setToken, hideModal],
   );
 
   const attachAccount = useCallback(
@@ -76,7 +81,7 @@ export const useOAuth = () => {
         showErrorToast(error);
       }
     },
-    [mutate]
+    [mutate],
   );
 
   const dropAccount = useCallback(
@@ -88,7 +93,7 @@ export const useOAuth = () => {
         showErrorToast(error);
       }
     },
-    [mutate]
+    [mutate],
   );
 
   const accounts = useMemo(() => data || [], [data]);

src/hooks/auth/useOauthEventListeners.ts

@@ -1,14 +1,14 @@
 import { useEffect } from 'react';
 
 import { EventMessageType } from '~/constants/events';
-import { Dialog } from '~/constants/modal';
 import { useAuth } from '~/hooks/auth/useAuth';
 import { useOAuth } from '~/hooks/auth/useOAuth';
 import { useModal } from '~/hooks/modal/useModal';
 import { includes, path, values } from '~/utils/ramda';
+import { showToastError } from '~/utils/toast';
 
 /** reacts to events passed by window.postMessage */
-export const useMessageEventReactions = () => {
+export const useOauthEventListeners = () => {
   const { loginWithSocial, createSocialAccount, attachAccount } = useOAuth();
   const { showModal } = useModal();
   const { isUser } = useAuth();
@@ -25,7 +25,6 @@ export const useMessageEventReactions = () => {
 
       switch (type) {
         case EventMessageType.OAuthLogin:
-          // TODO: do we really need it?
           loginWithSocial(path(['data', 'payload', 'token'], event));
           break;
         case EventMessageType.OAuthProcessed:
@@ -35,6 +34,12 @@ export const useMessageEventReactions = () => {
             void createSocialAccount(path(['data', 'payload', 'token'], event));
           }
           break;
+        case EventMessageType.OAuthError:
+          const message = path(['data', 'payload', 'error'], event);
+          if (message && typeof message === 'string') {
+            showToastError(message);
+          }
+          break;
         default:
           console.log('unknown message', event.data);
       }

src/hooks/auth/usePatchUser.ts

@@ -1,15 +1,19 @@
 import { useCallback } from 'react';
 
-import { apiUpdateUser } from '~/api/auth';
+import { apiUpdatePhoto, apiUpdateUser } from '~/api/auth';
 import { ApiUpdateUserRequest } from '~/api/auth/types';
 import { UploadSubject, UploadTarget } from '~/constants/uploads';
 import { useUser } from '~/hooks/auth/useUser';
 import { useUploader } from '~/hooks/data/useUploader';
+import { IFile } from '~/types';
 import { showErrorToast } from '~/utils/errors/showToast';
 
 export const usePatchUser = () => {
   const { update } = useUser();
-  const { uploadFile } = useUploader(UploadSubject.Avatar, UploadTarget.Profiles);
+  const { uploadFile } = useUploader(
+    UploadSubject.Avatar,
+    UploadTarget.Profiles,
+  );
 
   const save = useCallback(
     async (user: Partial<ApiUpdateUserRequest['user']>) => {
@@ -17,19 +21,25 @@ export const usePatchUser = () => {
       await update(result.user);
       return result.user;
     },
-    [update]
+    [update],
   );
 
   const updatePhoto = useCallback(
-    async (file: File) => {
+    async (photo: File) => {
       try {
-        const photo = await uploadFile(file);
-        await save({ photo });
+        const file = await uploadFile(photo);
+
+        if (!file) {
+          return;
+        }
+
+        const result = await apiUpdatePhoto({ file: file! });
+        await update(result.user);
       } catch (error) {
         showErrorToast(error);
       }
     },
-    [uploadFile, save]
+    [uploadFile, save],
   );
 
   return { updatePhoto, save };

src/hooks/comments/useGetComments.ts

@@ -8,16 +8,14 @@ import { COMMENTS_DISPLAY } from '~/constants/node';
 import { IComment } from '~/types';
 import { flatten, isNil } from '~/utils/ramda';
 
-const getKey: (nodeId: number) => SWRInfiniteKeyLoader = (nodeId: number) => (
-  pageIndex,
-  previousPageData: IComment[]
-) => {
-  if (pageIndex > 0 && !previousPageData?.length) return null;
-  return `${API.NODE.COMMENT(nodeId)}?page=${pageIndex}`;
-};
+const getKey: (nodeId: number) => SWRInfiniteKeyLoader =
+  (nodeId: number) => (pageIndex, previousPageData: IComment[]) => {
+    if (pageIndex > 0 && !previousPageData?.length) return null;
+    return `${API.NODES.COMMENT(nodeId)}?page=${pageIndex}`;
+  };
 
 const extractKey = (key: string) => {
-  const re = new RegExp(`${API.NODE.COMMENT('\\d+')}\\?page=(\\d+)`);
+  const re = new RegExp(`${API.NODES.COMMENT('\\d+')}\\?page=(\\d+)`);
   const match = key.match(re);
 
   if (!match || !Array.isArray(match) || isNil(match[1])) {
@@ -41,14 +39,26 @@ export const useGetComments = (nodeId: number, fallbackData?: IComment[]) => {
     },
     {
       fallbackData: fallbackData && [fallbackData],
-    }
+    },
   );
 
   const comments = useMemo(() => flatten(data || []), [data]);
-  const hasMore = (data?.[size - 1]?.length || 0) >= COMMENTS_DISPLAY ||
+  const hasMore =
+    (data?.[size - 1]?.length || 0) >= COMMENTS_DISPLAY ||
     (!!data?.length && data?.length > 0 && isValidating);
 
-  const onLoadMoreComments = useCallback(() => setSize(size + 1), [setSize, size]);
+  const onLoadMoreComments = useCallback(
+    () => setSize(size + 1),
+    [setSize, size],
+  );
 
-  return { comments, hasMore, onLoadMoreComments, isLoading: !data && isValidating, mutate, data, isLoadingMore: !!data?.length && isValidating };
+  return {
+    comments,
+    hasMore,
+    onLoadMoreComments,
+    isLoading: !data && isValidating,
+    mutate,
+    data,
+    isLoadingMore: !!data?.length && isValidating,
+  };
 };

src/hooks/node/useGetNodeRelated.ts

@@ -8,8 +8,9 @@ import { INode } from '~/types';
 import { ApiGetNodeRelatedResult } from '~/types/node';
 
 export const useGetNodeRelated = (id?: INode['id']) => {
-  const { data, isValidating, mutate } = useSWR<ApiGetNodeRelatedResult>(API.NODE.RELATED(id), () =>
-    apiGetNodeRelated({ id })
+  const { data, isValidating, mutate } = useSWR<ApiGetNodeRelatedResult>(
+    API.NODES.RELATED(id),
+    () => apiGetNodeRelated({ id }),
   );
 
   const refresh = useCallback(() => mutate(data, true), [data, mutate]);

src/hooks/node/useLoadNode.ts

@@ -12,7 +12,7 @@ import { ApiGetNodeResponse } from '~/types/node';
 
 const getKey = (nodeId: number, userId = 0) =>
   JSON.stringify({
-    url: API.NODE.GET_NODE(nodeId),
+    url: API.NODES.GET(nodeId),
     userId,
   });
 
@@ -21,7 +21,7 @@ export const useLoadNode = (id: number, fallbackData?: ApiGetNodeResponse) => {
   const { data, isValidating, mutate } = useSWR<ApiGetNodeResponse>(
     getKey(id, user.id),
     () => apiGetNode({ id }),
-    { fallbackData, revalidateOnMount: true }
+    { fallbackData, revalidateOnMount: true },
   );
 
   const update = useCallback(
@@ -33,7 +33,7 @@ export const useLoadNode = (id: number, fallbackData?: ApiGetNodeResponse) => {
 
       await mutate({ node: { ...data.node, ...node } }, true);
     },
-    [data, mutate]
+    [data, mutate],
   );
 
   useOnNodeSeen(data?.node);

src/hooks/sortable/index.ts

@@ -1 +0,0 @@
-export * from './useSortableActions';