Feat / headers, bunches of fixes

src/components/Documentation/Documentation.module.scss

@@ -8,6 +8,10 @@
   overflow-y: auto;
   overflow-x: hidden;
   @extend %custom-scroll;
+  @include media-tablet {
+    width: 100%;
+    padding-left: 2%;
+  }
 }
 .docs__title {
   font-size: 2.4rem;

src/components/Documentation/Documentation.tsx

@@ -30,7 +30,7 @@ function Documentation() {
 
   return (
     <Suspense fallback={<Loader />}>
-      <div className={styles.docs__innerWrapper}>
+      <section className={styles.docs__innerWrapper}>
         <h1 className={styles.docs__title}>{t('documentation.title')}</h1>
         {isConnected && schema && page === 'index' && (
           <DocsMain schema={schema} />
@@ -49,7 +49,7 @@ function Documentation() {
             <h2>{t('documentation.errors.not-connected')}</h2>
           </div>
         )}
-      </div>
+      </section>
     </Suspense>
   );
 }

src/components/HeadersSection/HeadersSection.tsx

@@ -7,7 +7,7 @@ import styles from './HeadersSection.module.scss';
 
 function Headers() {
   const { t } = useLocalization();
-  const selectHeaders = (state: RootState) => state.editor.variables;
+  const selectHeaders = (state: RootState) => state.editor.headers;
   const headers = useAppSelector(selectHeaders);
   const { setHeaders } = useActions();
 

src/components/MainEndpointInput/MainEndpointInput.tsx

@@ -1,14 +1,17 @@
 import { useEffect, useState } from 'react';
-import { useActions } from 'hooks/redux-hooks';
+import { useActions, useAppSelector } from 'hooks/redux-hooks';
 import { useDebounce } from 'use-debounce';
 
 import { useLocalization } from 'shared/context/LocalizationContext';
+import { RootState } from 'shared/store/store';
 import { useCachedPreflightQuery } from 'utils/graphql-connect';
 
 import styles from './MainEndpointInput.module.scss';
 
 function MainEndpointInput() {
-  const [endpoint, setEndpoint] = useState('');
+  const selectEndpoint = (state: RootState) => state.endpoint.url;
+  const endpointState = useAppSelector(selectEndpoint);
+  const [endpoint, setEndpoint] = useState(endpointState);
   const [endpointDebounce] = useDebounce(endpoint, 1000);
 
   const { setTakenSchema, resetTakenSchema, setUrl } = useActions();
@@ -26,7 +29,14 @@ function MainEndpointInput() {
   useEffect(() => {
     if (isSuccess) setTakenSchema(data);
     else if (isError) resetTakenSchema();
-  }, [data, isError, isSuccess, resetTakenSchema, setTakenSchema]);
+  }, [
+    data,
+    endpointState,
+    isError,
+    isSuccess,
+    resetTakenSchema,
+    setTakenSchema,
+  ]);
 
   return (
     <>
@@ -39,6 +49,7 @@ function MainEndpointInput() {
           name="api-endpoint"
           id="api-endpoint"
           type="text"
+          value={endpointState}
           placeholder={t('placeholders.endpoint')}
           className={styles.dashboard__endpoint_input}
           onChange={handleEndpointChange}

src/locales/en_US.json

@@ -26,16 +26,16 @@
     }
   },
   "navigation": {
-    "home": "Home",
+    "home": "Editor",
     "welcome": "Welcome"
   },
   "welcomePage": {
     "welcome": "Welcome to the GraphQL API Playground",
     "freePossibilitiesHeading": "Explore infinite possibilities and data combination with GraphQL for free!",
     "instantResponse": "Instant response.",
     "instantResponseText": "Get exactly what you are looking for.",
-    "graphqlNewbie": "New to Graph QL?",
-    "graphqlTutorials": "Get started with free Graph QL tutorials.",
+    "graphqlNewbie": "New to GraphQL?",
+    "graphqlTutorials": "Get started with free GraphQL tutorials.",
     "startLearning": "Start learning",
     "developmentTeamHeading": "Meet our development team",
     "inFavorOfRsschool": "This project was created during the final task of RS School React course.",
@@ -103,11 +103,11 @@
     "evgeniy": {
       "name": "Evgeniy Redchenko",
       "role": "Frontend Developer",
-      "bio": "Evgeniy was started his programming carrier in 2021 with a commercial project - a site for restoraunt. It was such an exciting experience that he decided to fully immerse himself in this job, learning and improving his project in parallel",
+      "bio": "Evgeniy was started his programming carrier in 2021 with a commercial project - a site for restaurant. It was such an exciting experience that he decided to fully immerse himself in this job, learning and improving his project in parallel",
       "contributions": {
         "editor": "The initial version of the editor",
-        "reqHandler": "Graph QL request & response handler",
-        "apiInput": "Graph QL API input",
+        "reqHandler": "GraphQL request & response handler",
+        "apiInput": "GraphQL API input",
         "store": "Redux store",
         "headersVars": "Variables & headers logic",
         "documentation": "Documentation section logic"
@@ -125,13 +125,13 @@
     "passwordConfirm": "Repeat your password",
     "passwordUpdate": "Enter new password",
     "code": "Enter your query here",
-    "endpoint": "Enter your Graph QL API endpoint",
+    "endpoint": "Enter your GraphQL API endpoint",
     "headers": "Enter headers",
     "variables": "Enter variables"
   },
   "yup": {
     "name": {
-      "matches": "First letter should be uppercased",
+      "matches": "First letter should be upper-cased",
       "required": "Name is required in order to proceed"
     },
     "email": {
@@ -161,5 +161,11 @@
     "errors": {
       "not-connected": "API is not connected"
     }
+  },
+  "toaster": {
+    "errors": {
+      "wrongVariables": "Please enter valid JSON in variables",
+      "wrongHeaders": "Please enter valid JSON in headers"
+    }
   }
 }

src/locales/ru_RU.json

@@ -26,16 +26,16 @@
     }
   },
   "navigation": {
-    "home": "Домой",
-    "welcome": "Приветственная страница"
+    "home": "Редактор",
+    "welcome": "Домой"
   },
   "welcomePage": {
     "welcome": "Добро пожаловать в песочницу для GraphQL запросов",
     "freePossibilitiesHeading": "Исследуйте безграничные возможности и комбинации данных с помощью GraphQL бесплатно!",
     "instantResponse": "Моментальный ответ.",
     "instantResponseText": "В точности следуя запросу.",
     "graphqlNewbie": "Впервые с GraphQL?",
-    "graphqlTutorials": "Начните с бесплатных руководств по Graph QL.",
+    "graphqlTutorials": "Начните с бесплатных руководств по GraphQL.",
     "startLearning": "Начать учиться",
     "developmentTeamHeading": "Встречайте нашу команду",
     "inFavorOfRsschool": "Этот проект был создан во время финального задания курса RS School React.",
@@ -51,7 +51,7 @@
     "welcomeHeader": "Добро пожаловать на борт!"
   },
   "passwordResetPage": {
-    "sendResetLink": "Отправить ссылку на восстановение пароля на эл.почту"
+    "sendResetLink": "Отправить ссылку на восстановление пароля на эл.почту"
   },
   "mainPage": {
     "variablesSwitch": "Переменные",
@@ -101,13 +101,13 @@
       }
     },
     "evgeniy": {
-      "name": "Евгений Редьченко",
+      "name": "Евгений Редченко",
       "role": "Фронтенд разработчик",
       "bio": "Евгений начал свою карьеру разработчика в 2021 году с внезапного заказа - сайта для ресторана. Это был настолько захватывающий опыт, что он решил полностью посвятить себя фронтенд-разработке, учась и параллельно улучшая свой проект.",
       "contributions": {
         "editor": "Изначальная версия редактора",
-        "reqHandler": "Graph QL обработчики запросов и ответов",
-        "apiInput": "Graph QL ввод адреса API",
+        "reqHandler": "GraphQL обработчики запросов и ответов",
+        "apiInput": "GraphQL ввод адреса API",
         "store": "Redux store",
         "headersVars": "Логика переменных и заголовков",
         "documentation": "Логика раздела документации к API"
@@ -124,8 +124,8 @@
     "password": "Введите пароль",
     "passwordConfirm": "Повторите введённый пароль",
     "passwordUpdate": "Введите новый пароль",
-    "code": "Введите Graph QL запрос",
-    "endpoint": "Введите Graph QL API URL адрес",
+    "code": "Введите GraphQL запрос",
+    "endpoint": "Введите GraphQL API URL адрес",
     "headers": "Введите заголовки",
     "variables": "Введите переменные"
   },
@@ -147,7 +147,7 @@
       "number": "Пароль должен содержать минимум одну цифру",
       "special": "Пароль должен содержать минимум один специальный символ",
       "length": "Пароль должен состоять минимум из 8 знаков",
-      "unicode-password": "Пароль должен поддерживать символы Юникода"
+      "unicode-password": "Пароль должен поддерживать символы Юникод"
     },
     "confirmPassword": {
       "required": "Подтверждение пароля необходим для продолжения",
@@ -161,5 +161,11 @@
     "errors": {
       "not-connected": "Ошибка: нет данных от API"
     }
+  },
+  "toaster": {
+    "errors": {
+      "wrongVariables:": "Переменные должны быть в валидном JSON-формате",
+      "wrongHeaders": "Заголовки должны быть в валидном JSON-формате"
+    }
   }
 }

src/pages/MainPage/MainPage.module.scss

@@ -160,8 +160,9 @@
 }
 
 .column3 {
+  flex-shrink: 2;
   border-radius: 1rem;
-  padding: 2.1rem 6rem;
+  padding: 2.1rem 4rem;
   overflow-y: auto;
   @extend %custom-scroll;
   background-color: $color-background-secondary;

src/pages/MainPage/MainPage.tsx

@@ -17,20 +17,22 @@ function MainPage() {
   const selectRequest = (state: RootState) => state.editor.request;
   const selectResponse = (state: RootState) => state.editor.response;
   const selectVariables = (state: RootState) => state.editor.variables;
+  const selectHeaders = (state: RootState) => state.editor.headers;
+  const selectEndpoint = (state: RootState) => state.endpoint.url;
+  const selectDocsIsOpened = (state: RootState) => state.docs.isOpened;
   const request = useAppSelector(selectRequest);
   const response = useAppSelector(selectResponse);
   const variables = useAppSelector(selectVariables);
-  const { setRequest, setResponse } = useActions();
+  const headers = useAppSelector(selectHeaders);
+  const endpoint = useAppSelector(selectEndpoint);
+  const isDocsOpen = useAppSelector(selectDocsIsOpened);
+  const { setRequest, setResponse, setIsOpened } = useActions();
   const [activeComponent, setActiveComponent] = useState<string | null>(null);
   const [isPanelOpen, setIsPanelOpen] = useState(false);
-  const [isDocsOpen, setIsDocsOpen] = useState(false);
   const [isButtonVariablesClicked, setIsButtonVariablesClicked] =
     useState(false);
   const [isButtonHeadersClicked, setIsButtonHeadersClicked] = useState(false);
 
-  const selectEndpoint = (state: RootState) => state.endpoint.url;
-  const endpoint = useAppSelector(selectEndpoint);
-
   const { t } = useLocalization();
 
   const handleClick = (component: string) => {
@@ -54,11 +56,18 @@ function MainPage() {
   };
 
   const handleDocumentationButtonClick = () => {
-    setIsDocsOpen(!isDocsOpen);
+    setIsOpened(!isDocsOpen);
   };
 
   const handleRequest = async () => {
-    makeGraphQLRequest(endpoint, request, variables)
+    makeGraphQLRequest(
+      endpoint,
+      request,
+      t('toaster.errors.wrongVariables'),
+      t('toaster.errors.wrongHeaders'),
+      variables,
+      headers
+    )
       .then((res) => setResponse(JSON.stringify(res, null, 2)))
       .catch((err: Error) => setResponse(JSON.stringify(err.message, null, 2)));
   };
@@ -78,7 +87,7 @@ function MainPage() {
   };
 
   return (
-    <div className={styles.dashboard}>
+    <main className={styles.dashboard}>
       <div className={styles.dashboard__endpoint_wrapper}>
         <MainEndpointInput />
       </div>
@@ -108,6 +117,7 @@ function MainPage() {
               placeholder={t('placeholders.code')}
               value={request}
               onChange={handleRequestFieldChange}
+              name="request-textarea"
             />
             <div className={styles.dashboard__buttons}>
               <button
@@ -170,7 +180,7 @@ function MainPage() {
           </pre>
         </div>
       </div>
-    </div>
+    </main>
   );
 }
 export default MainPage;

src/pages/WelcomePage/WelcomePage.module.scss

@@ -10,7 +10,8 @@
   background-image: url('/jpg/home-bg.jpg');
   min-height: 1285px;
   background-repeat: no-repeat;
-  background-size: 100% 100%;
+  background-size: cover;
+  background-position: center;
   margin-top: -70px;
 }
 .navigation {

src/pages/WelcomePage/WelcomePage.tsx

@@ -18,7 +18,7 @@ function WelcomePage() {
 
   return (
     <Suspense fallback={<Loader />}>
-      <div className={styles.welcome}>
+      <main className={styles.welcome}>
         <div className={styles.welcome_top__wrapper}>
           <div className={styles.welcome_top}>
             <div className={styles.welcome_top_left}>
@@ -105,7 +105,7 @@ function WelcomePage() {
           </a>
           .
         </div>
-      </div>
+      </main>
     </Suspense>
   );
 }

src/shared/store/slices/docsSlice.ts

@@ -3,11 +3,13 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import GraphQLMethod from 'shared/enums/GraphQLMethod';
 
 interface DocsState {
+  isOpened: boolean;
   targetName: string;
   targetType: string;
   method: GraphQLMethod;
 }
 const initialState: DocsState = {
+  isOpened: false,
   targetName: 'index',
   targetType: '',
   method: GraphQLMethod.Query,
@@ -17,6 +19,9 @@ const docsSlice = createSlice({
   name: 'docs',
   initialState,
   reducers: {
+    setIsOpened: (state, action: PayloadAction<boolean>) => {
+      state.isOpened = action.payload;
+    },
     setDocsTargetName: (state, action: PayloadAction<string>) => {
       state.targetName = action.payload;
     },