Merge branch 'develop' of https://github.com/Quiddlee/graphiql-app in…

…to feat/add_responsive_to_docs
Quiddlee · Jan 4, 2024 · 1a7f434 · 1a7f434
2 parents d180506 + 6f41f82
commit 1a7f434
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 5 deletions.
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -30,7 +30,7 @@ const Header = () => {
         {isSettings && !isMobile ? (
           <h1 style={{ viewTransitionName: 'title' }} className="mr-auto flex items-center pl-4 font-readex_pro">
             <button type="button" onClick={handleClick} className="flex h-12 w-12 items-center justify-center">
-              <IconButton>
+              <IconButton className="animate-fade-in-screen duration-500">
                 <Icon>arrow_left_alts</Icon>
               </IconButton>
             </button>
@@ -41,7 +41,7 @@ const Header = () => {
             style={{
               viewTransitionName: 'title',
             }}
-            className="ml-[53px] mr-auto font-readex_pro sm:ml-7 lg:ml-4"
+            className="ml-[53px] mr-auto animate-fade-in-title font-readex_pro sm:ml-7 lg:ml-4"
           >
             <Link to={ROUTES.WELCOME_PAGE}>GraphiQL</Link>
           </h1>

diff --git a/src/components/RequestEditor/ui/Controls.tsx b/src/components/RequestEditor/ui/Controls.tsx
@@ -3,7 +3,8 @@ import { FC, HTMLAttributes } from 'react';
 import { useLocation } from 'react-router-dom';
 import { toast } from 'react-toastify';
 
-import { useLanguage } from '@/shared/Context/hooks';
+import submitRequest from '@/components/Editor/lib/submitRequest';
+import { useAppContext, useLanguage } from '@/shared/Context/hooks';
 import ROUTES from '@shared/constants/routes';
 import urlParams from '@shared/constants/urlParams';
 import cn from '@shared/lib/helpers/cn';
@@ -20,6 +21,7 @@ type ControlsProps = HTMLAttributes<HTMLUListElement> & {
 };
 
 const Controls: FC<ControlsProps> = ({ onResponseOpen, isHidden, className }) => {
+  const { updateCurrentResponse, prettifyEditors } = useAppContext();
   const { readUrl } = useUrl();
   const screenType = useScreen();
   const { translation } = useLanguage();
@@ -32,6 +34,18 @@ const Controls: FC<ControlsProps> = ({ onResponseOpen, isHidden, className }) =>
   const isAnimationsDisabled = screenType === 'tablet' || screenType === 'mobile';
   if (pathname.slice(1) !== ROUTES.MAIN) return null;
 
+  const handleSubmitRequest = async () => {
+    const query = readUrl(urlParams.QUERY);
+    const variables = readUrl(urlParams.VARIABLES);
+    const headers = readUrl(urlParams.HEADERS);
+    const response = await submitRequest(query, variables, headers);
+    updateCurrentResponse(JSON.stringify(response));
+  };
+
+  const handlePrettifier = () => {
+    prettifyEditors(true);
+  };
+
   const handleCopyText = async () => {
     const query = readUrl(urlParams.QUERY);
     await navigator.clipboard.writeText(query);
@@ -56,6 +70,7 @@ const Controls: FC<ControlsProps> = ({ onResponseOpen, isHidden, className }) =>
             'animate-fade-in-standard [animation-delay:400ms]': !isHidden && !isAnimationsDisabled,
             'animate-fade-out-screen': isHidden,
           })}
+          onClick={handleSubmitRequest}
         >
           <Icon slot="icon">play_arrow</Icon>
         </Fab>
@@ -78,6 +93,7 @@ const Controls: FC<ControlsProps> = ({ onResponseOpen, isHidden, className }) =>
         className={cn('tooltipElem flex h-12 w-12 origin-bottom items-center justify-center')}
       >
         <FilledIconButton
+          onClick={handlePrettifier}
           className={cn({
             'animate-fade-in-screen [animation-delay:500ms]': !isHidden && !isAnimationsDisabled,
             'animate-fade-out-screen': isHidden,

diff --git a/src/test/setupTests.tsx b/src/test/setupTests.tsx
@@ -10,15 +10,15 @@ import { afterEach, expect, vi } from 'vitest';
 import * as useEditor from '@components/Editor/lib/hooks/useEditor';
 import * as useScreen from '@shared/lib/hooks/useScreen';
 
+vi.spyOn(useScreen, 'default').mockReturnValue('desktop');
+
 vi.spyOn(useEditor, 'default').mockReturnValue({
   query: [1, vi.fn()],
   variables: [2, vi.fn()],
   headers: [3, vi.fn()],
   invalidateKeys: vi.fn(),
 });
 
-vi.spyOn(useScreen, 'default').mockReturnValue('desktop');
-
 Object.defineProperty(window, 'matchMedia', {
   writable: true,
   value: vi.fn().mockImplementation((query) => ({

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -69,6 +69,16 @@ export default {
             translate: 0,
           },
         },
+        'fade-in-title': {
+          from: {
+            opacity: 0,
+            transform: 'scale(2)',
+          },
+          to: {
+            opacity: 1,
+            transform: 'scale(1)',
+          },
+        },
       },
       animation: {
         'fade-in-screen': 'fade-in 400ms cubic-bezier(0.05, 0.7, 0.1, 1.0) backwards',
@@ -79,6 +89,7 @@ export default {
         'fade-in-snackbar-body': 'fade-in-snackbar-body 500ms cubic-bezier(0, 0, 0, 1) backwards',
         'fade-out-snackbar': 'fade-out-snackbar 200ms cubic-bezier(0.3, 0, 1, 1) forwards',
         'fade-in-settings': 'fade-in-settings 500ms cubic-bezier(0.05, 0.7, 0.1, 1.0) both',
+        'fade-in-title': 'fade-in-title 250ms cubic-bezier(0.05, 0.7, 0.1, 1.0) both',
       },
       colors: {
         primary: 'var(--md-sys-color-primary)',