Merge pull request #86 from Gkuzin13/dev

Dev
Gkuzin13 · Jan 24, 2024 · 0a11a40 · 0a11a40
2 parents 872f889 + 645f96c
commit 0a11a40
Show file tree

Hide file tree

Showing 9 changed files with 137 additions and 88 deletions.
diff --git a/apps/client/src/App.tsx b/apps/client/src/App.tsx
@@ -212,18 +212,32 @@ const App = () => {
   useEffect(() => {
     if (!roomId) return;
 
-    const [request, abortController] = api.getPage(roomId);
+    const abortController = new AbortController();
 
-    request.then(({ page }) => {
-      dispatch(canvasActions.setNodes(page.nodes, { broadcast: false }));
-    });
+    (async () => {
+      const { data, error } = await api.getPage(roomId, {
+        signal: abortController.signal,
+      });
+
+      if (data) {
+        dispatch(canvasActions.setNodes(data.page.nodes, { broadcast: false }));
+      }
+
+      if (error) {
+        addNotification({
+          title: 'Live collaboration',
+          description: 'Could not load shapes',
+          type: 'error',
+        });
+      }
+    })();
 
     return () => {
       if (abortController.signal) {
         abortController.abort();
       }
     };
-  }, [roomId, dispatch]);
+  }, [roomId, dispatch, addNotification]);
 
   useEffect(() => {
     if (!roomId) return;
@@ -246,20 +260,16 @@ const App = () => {
 
     const unsubscribe = dispatch(addCollabActionsListeners(ws, roomId));
 
+    addNotification({
+      title: 'Live collaboration',
+      description: 'You are connected',
+      type: 'success',
+    });
+
     return () => {
       unsubscribe({ cancelActive: true });
     };
-  }, [ws, roomId, dispatch]);
-
-  useEffect(() => {
-    if (ws.isConnected) {
-      addNotification({
-        title: 'Live collaboration',
-        description: 'You are connected',
-        type: 'success',
-      });
-    }
-  }, [ws.isConnected, addNotification]);
+  }, [ws, roomId, addNotification, dispatch]);
 
   useEffect(() => {
     if (ws.isConnected || ws.isConnecting || roomId) {

diff --git a/apps/client/src/components/Elements/Dialog/Dialog.tsx b/apps/client/src/components/Elements/Dialog/Dialog.tsx
@@ -20,8 +20,8 @@ const Dialog = ({ title, description, open, onClose }: Props) => {
     <DialogPrimitive.Root open={open} onOpenChange={handleOpenChange}>
       <DialogPrimitive.Portal>
         <Styled.Overlay />
-        <Styled.Content>
-          <Styled.Close>
+        <Styled.Content data-testid="dialog-content">
+          <Styled.Close data-testid="close-dialog-button">
             <Icon name="x" size="lg" />
           </Styled.Close>
           <Styled.Title>{title}</Styled.Title>

diff --git a/apps/client/src/components/Panels/Panels.tsx b/apps/client/src/components/Panels/Panels.tsx
@@ -63,7 +63,7 @@ const Panels = ({ selectedNodeIds }: Props) => {
 
   const ws = useWebSocket();
   const { online } = useNetworkState();
-  const modal = useModal();
+  const { openModal } = useModal();
 
   const dispatch = useAppDispatch();
 
@@ -137,7 +137,7 @@ const Panels = ({ selectedNodeIds }: Props) => {
 
               setCursorByToolType(stage, project.toolType ?? 'select');
             } else {
-              modal.open({
+              openModal({
                 title: 'Error',
                 description: 'Could not load file',
               });
@@ -148,7 +148,7 @@ const Panels = ({ selectedNodeIds }: Props) => {
         }
       }
     },
-    [store, modal, dispatch],
+    [store, openModal, dispatch],
   );
 
   const handleZoomChange = useCallback(

diff --git a/apps/client/src/components/Panels/SharePanel/SharePanel.tsx b/apps/client/src/components/Panels/SharePanel/SharePanel.tsx
@@ -15,14 +15,20 @@ const SharePanel = ({ isPageShared }: Props) => {
   const [qrCode, setQRCode] = useState<QRCodeResponse | null>(null);
   const [error, setError] = useState<string | null>(null);
 
-  const handlePopoverOpen = (open: boolean) => {
+  const handlePopoverOpen = async (open: boolean) => {
     if (isPageShared && open && !qrCode) {
       const url = window.location.href;
 
-      setError(null);
+      const { data, error } = await api.makeQRCode({ url });
 
-      const [request] = api.makeQRCode({ url });
-      request.then(setQRCode).catch(setError);
+      if (data) {
+        setQRCode(data);
+        setError(null);
+      }
+
+      if (error) {
+        setError(error.message);
+      }
     }
   };
 

diff --git a/apps/client/src/components/Panels/SharePanel/ShareablePageContent.tsx b/apps/client/src/components/Panels/SharePanel/ShareablePageContent.tsx
@@ -16,30 +16,30 @@ const SharablePageContent = () => {
   const nodes = useAppSelector(selectNodes);
   const stageConfig = useAppSelector(selectConfig);
 
-  const handlePageShare = () => {
+  const handlePageShare = async () => {
     if (!nodes.length) {
       return;
     }
 
     setLoading(true);
-
-    const [request] = api.sharePage({
+    
+    const { data, error } = await api.sharePage({
       page: { nodes, stageConfig },
     });
 
-    request
-      .then((data) => {
-        if (data?.id) {
-          const updatedURL = urlSearchParam.set(
-            CONSTANTS.COLLAB_ROOM_URL_PARAM,
-            data.id,
-          );
+    if (data?.id) {
+      const updatedURL = urlSearchParam.set(
+        CONSTANTS.COLLAB_ROOM_URL_PARAM,
+        data.id,
+      );
+
+      window.history.pushState({}, '', updatedURL);
+      window.location.reload();
+    }
 
-          window.history.pushState({}, '', updatedURL);
-          window.location.reload();
-        }
-      })
-      .catch(() => setLoading(false));
+    if (error) {
+      setLoading(false);
+    }
   };
 
   return (

diff --git a/apps/client/src/contexts/__tests__/modal.test.tsx b/apps/client/src/contexts/__tests__/modal.test.tsx
@@ -1,21 +1,58 @@
-import { act, renderHook, screen } from '@testing-library/react';
+import { act, renderHook, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { ModalProvider, useModal } from '../modal';
 
 describe('modal context', () => {
-  it('opens dialog with provided content', async () => {
+  it('opens with provided content', async () => {
     const { result } = renderHook(() => useModal(), { wrapper: ModalProvider });
 
     await act(async () => {
-      result.current.open({ title: 'title', description: 'description' });
+      result.current.openModal({
+        title: 'test title',
+        description: 'test description',
+      });
     });
 
-    expect(result.current.opened).toBe(true);
-    expect(result.current.content).toEqual({
-      title: 'title',
-      description: 'description',
+    const content = screen.getByTestId(/dialog-content/);
+
+    expect(content).toBeInTheDocument();
+    expect(within(content).getByText(/test title/)).toBeInTheDocument();
+    expect(within(content).getByText(/test description/)).toBeInTheDocument();
+  });
+
+  it('closes by clicking close button', async () => {
+    const { result } = renderHook(() => useModal(), { wrapper: ModalProvider });
+
+    await act(async () => {
+      result.current.openModal({
+        title: 'test title',
+        description: 'test description',
+      });
+    });
+
+    expect(screen.getByTestId(/dialog-content/)).toBeInTheDocument();
+
+    await userEvent.click(screen.getByTestId(/close-dialog-button/));
+
+    expect(screen.queryByTestId(/dialog-content/)).not.toBeInTheDocument();
+  });
+
+  it('closes from closeModal', async () => {
+    const { result } = renderHook(() => useModal(), { wrapper: ModalProvider });
+
+    await act(async () => {
+      result.current.openModal({
+        title: 'test title',
+        description: 'test description',
+      });
+    });
+
+    expect(screen.getByTestId(/dialog-content/)).toBeInTheDocument();
+
+    await act(async () => {
+      result.current.closeModal();
     });
 
-    expect(screen.getByText('title')).toBeInTheDocument();
-    expect(screen.getByText('description')).toBeInTheDocument();
+    expect(screen.queryByTestId(/dialog-content/)).not.toBeInTheDocument();
   });
 });
diff --git a/apps/client/src/contexts/modal.tsx b/apps/client/src/contexts/modal.tsx
@@ -1,13 +1,11 @@
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 import useDisclosure from '@/hooks/useDisclosure/useDisclosure';
 import Dialog from '@/components/Elements/Dialog/Dialog';
 import { createContext } from './createContext';
 
 type ModalContextValue = {
-  opened: boolean;
-  content: ModalContent;
-  open: (content: ModalContent) => void;
-  close: () => void;
+  openModal: (content: ModalContent) => void;
+  closeModal: () => void;
 };
 
 type ModalContent = {
@@ -25,13 +23,18 @@ export const ModalProvider = ({ children }: React.PropsWithChildren) => {
     description: '',
   });
 
-  const openModal = (content: ModalContent) => {
-    setContent(content);
-    open();
-  };
+  const openModal = useCallback(
+    (content: ModalContent) => {
+      setContent(content);
+      open();
+    },
+    [open],
+  );
+
+  const closeModal = useCallback(() => close(), [close]);
 
   return (
-    <ModalContext.Provider value={{ opened, content, open: openModal, close }}>
+    <ModalContext.Provider value={{ openModal, closeModal }}>
       {children}
       <Dialog open={opened} {...content} onClose={close} />
     </ModalContext.Provider>

diff --git a/apps/client/src/hooks/useDisclosure/useDisclosure.ts b/apps/client/src/hooks/useDisclosure/useDisclosure.ts
@@ -8,21 +8,9 @@ export type UseDisclosureReturn = [
 const useDisclosure = (initialState = false): UseDisclosureReturn => {
   const [opened, setOpened] = useState(initialState);
 
-  const open = () => {
-    setOpened((prevState) => {
-      return prevState ? prevState : true;
-    });
-  };
-
-  const close = () => {
-    setOpened((prevState) => {
-      return !prevState ? prevState : false;
-    });
-  };
-
-  const toggle = () => {
-    opened ? close() : open();
-  };
+  const open = () => setOpened(true);
+  const close = () => setOpened(false);
+  const toggle = () => setOpened((prevOpened) => !prevOpened);
 
   return [opened, { open, close, toggle }];
 };

diff --git a/apps/client/src/services/api.ts b/apps/client/src/services/api.ts
@@ -9,6 +9,11 @@ import type {
   UpdatePageResponse,
 } from 'shared';
 
+type QueryReturn<D> = {
+  data: D | null;
+  error: HTTPError | null;
+};
+
 const baseUrl = IS_PROD ? BASE_URL : BASE_URL_DEV;
 
 class HTTPError extends Error {}
@@ -17,23 +22,23 @@ const createQuery = (
   baseUrl: RequestInfo | URL = '',
   baseInit?: RequestInit,
 ) => {
-  return <T>(url: RequestInfo | URL, init?: RequestInit) => {
-    const controller = new AbortController();
-    const signal = controller.signal;
+  return async <D>(
+    url: RequestInfo | URL,
+    init?: RequestInit,
+  ): Promise<QueryReturn<D>> => {
+    try {
+      const res = await fetch(`${baseUrl}${url}`, { ...baseInit, ...init });
 
-    const result = fetch(`${baseUrl}${url}`, {
-      ...baseInit,
-      ...init,
-      signal,
-    }).then((res) => {
       if (!res.ok) {
         throw new HTTPError(res.statusText, { cause: res });
       }
+
+      const data = await res.json();
 
-      return res.json() as Promise<T>;
-    });
-
-    return [result, controller] as const;
+      return { data, error: null };
+    } catch (error) {
+      return { data: null, error: error as HTTPError };
+    }
   };
 };
 
@@ -59,8 +64,8 @@ const api = {
 };
 
 export default {
-  getPage: (pageId: string) => {
-    return api.get<GetPageResponse>(`/p/${pageId}`);
+  getPage: (pageId: string, init?: RequestInit) => {
+    return api.get<GetPageResponse>(`/p/${pageId}`, init);
   },
   updatePage: (pageId: string, body: UpdatePageRequestBody) => {
     return api.patch<UpdatePageResponse>(`/p/${pageId}`, body);