Develop

.editorconfig

@@ -0,0 +1,7 @@
+[*]
+charset = utf-8
+insert_final_newline = true
+end_of_line = auto
+indent_style = space
+indent_size = 2
+max_line_length = 80

.eslintignore

@@ -0,0 +1,4 @@
+node_modules/
+build/
+vitest.setup.tsx
+coverage/

.eslintrc.cjs

@@ -0,0 +1,53 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+    'next/core-web-vitals',
+    'prettier',
+    'plugin:prettier/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    tsconfigRootDir: __dirname,
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  plugins: ['react', 'react-hooks', '@typescript-eslint'],
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  rules: {
+    '@typescript-eslint/no-explicit-any': 'error',
+    'react/jsx-uses-react': 'off',
+    'react/jsx-uses-vars': 'off',
+    'react/react-in-jsx-scope': 'off',
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'warn',
+    'prettier/prettier': [
+      'error',
+      {
+        endOfLine: 'auto',
+      },
+    ],
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        vars: 'all',
+        args: 'after-used',
+        ignoreRestSiblings: true,
+        varsIgnorePattern: '_',
+      },
+    ],
+  },
+};

.gitignore

@@ -0,0 +1,42 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# WebStorm
+.idea
+
+# environment
+.env

.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

.lintstagedrc.js

@@ -0,0 +1,8 @@
+const path = require('path');
+
+const buildEslintCommand = (filenames) =>
+  `next lint --fix --file ${filenames.map((f) => path.relative(process.cwd(), f)).join(' --file ')}`;
+
+module.exports = {
+  '*.{js,jsx,ts,tsx}': [buildEslintCommand],
+};

.prettierignore

@@ -0,0 +1,3 @@
+node_modules/
+build/
+coverage/

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "endOfLine": "auto",
+  "printWidth": 120,
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

__test__/mock/handlers.ts

@@ -0,0 +1,7 @@
+import { http, HttpResponse } from 'msw';
+
+export const handlers = [
+  http.get('', () => {
+    return HttpResponse.json('');
+  }),
+];

__test__/mock/mockData.ts

@@ -0,0 +1,4 @@
+export const mockRequests = [
+  { id: '1', method: 'GET', url: 'https://api.example.com', date: '2023-01-01' },
+  { id: '2', method: 'POST', url: 'https://api.test.com', date: '2023-01-02' },
+];

__test__/mock/server.ts

@@ -0,0 +1,4 @@
+import { setupServer } from 'msw/node';
+import { handlers } from './handlers';
+
+export const server = setupServer(...handlers);

__test__/test-utils.tsx

@@ -0,0 +1,79 @@
+import { ReactElement, PropsWithChildren } from 'react';
+import { render, RenderOptions } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { configureStore, combineReducers } from '@reduxjs/toolkit';
+import { ThemeProvider } from '@mui/material/styles';
+import theme from '@/theme';
+import userEvent from '@testing-library/user-event';
+import { mainSlice } from '@/redux/features/mainSlice';
+import { graphiqlSlice } from '@/redux/features/graphiqlSlice';
+import { restfulSlice } from '@/redux/features/restfulSlice';
+import { AbstractIntlMessages, NextIntlClientProvider } from 'next-intl';
+import { AppRouterContext } from 'next/dist/shared/lib/app-router-context.shared-runtime';
+import enLocale from '../messages/en.json';
+import ruLocale from '../messages/ru.json';
+
+const mockUseRouter = {
+  push: vi.fn(),
+  replace: vi.fn(),
+  prefetch: vi.fn(),
+  back: vi.fn(),
+  forward: vi.fn(),
+  refresh: vi.fn(),
+  pathname: '/',
+  locale: 'en',
+  locales: ['en', 'ru'],
+  route: '/',
+};
+
+const rootReducer = combineReducers({
+  main: mainSlice.reducer,
+  restful: restfulSlice.reducer,
+  graphiql: graphiqlSlice.reducer,
+});
+
+export function setupStore(preloadedState?: Partial<RootState>) {
+  return configureStore({
+    reducer: rootReducer,
+    preloadedState,
+  });
+}
+
+export type RootState = ReturnType<typeof rootReducer>;
+export type AppStore = ReturnType<typeof setupStore>;
+export type AppDispatch = AppStore['dispatch'];
+
+interface ExtendedRenderOptions extends Omit<RenderOptions, 'queries'> {
+  preloadedState?: Partial<RootState>;
+  store?: AppStore;
+  locale?: string;
+  messages?: Record<string, string | AbstractIntlMessages>;
+}
+
+export function customRender(ui: ReactElement, extendedRenderOptions: ExtendedRenderOptions = {}) {
+  const {
+    preloadedState = {},
+    store = setupStore(preloadedState),
+    locale = 'en',
+    messages = locale === 'en' ? enLocale : ruLocale,
+    ...renderOptions
+  } = extendedRenderOptions;
+
+  const Wrapper = ({ children }: PropsWithChildren) => (
+    <Provider store={store}>
+      <ThemeProvider theme={theme}>
+        <AppRouterContext.Provider value={mockUseRouter}>
+          <NextIntlClientProvider locale={locale} messages={messages}>
+            {children}
+          </NextIntlClientProvider>
+        </AppRouterContext.Provider>
+      </ThemeProvider>
+    </Provider>
+  );
+
+  return {
+    store,
+    user: userEvent.setup(),
+    ...render(ui, { wrapper: Wrapper, ...renderOptions }),
+  };
+}

app/[locale]/GRAPHQL/[[...endpoint]]/page.tsx

@@ -0,0 +1,36 @@
+import ResponseSection from '@/components/Response';
+import GraphiQLClient from '@/components/GraphiQLClient';
+import { ResizableGroup, ResizableHandle, ResizablePanel } from '@/components/Resizable';
+import { base64ToText } from '@/utils/coderBase64';
+
+interface Props {
+  params?: {
+    endpoint: string[];
+  };
+  searchParams?: Record<string, string>;
+}
+
+function GraphQL({ params, searchParams }: Props) {
+  const responseData = params?.endpoint;
+  const url = Array.isArray(responseData) && responseData[0] ? base64ToText(responseData[0]?.replace('%3D', '=')) : '';
+  const query =
+    Array.isArray(responseData) && responseData[1]
+      ? base64ToText(responseData[1]?.replace('%3D', '='))?.replace(/\\n/g, '\n')
+      : '';
+
+  return (
+    <main className="h-[calc(100vh-6rem)]">
+      <ResizableGroup autoSaveId="graphql" direction="vertical">
+        <ResizablePanel defaultSizePercentage={50} minSizePercentage={15} id="gql-panel">
+          <GraphiQLClient urlinput={url} queryinput={query} headersinput={searchParams || {}} />
+        </ResizablePanel>
+        <ResizableHandle direction="vertical" />
+        <ResizablePanel defaultSizePercentage={50} minSizePercentage={15}>
+          <ResponseSection />
+        </ResizablePanel>
+      </ResizableGroup>
+    </main>
+  );
+}
+
+export default GraphQL;

app/[locale]/GRAPHQL/[[...endpoint]]/qraphql.test.tsx

@@ -0,0 +1,40 @@
+import { screen, render } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import GraphQL from '../../../../app/[locale]/GRAPHQL/[[...endpoint]]/page';
+import { base64ToText } from '../../../../utils/coderBase64';
+import '@testing-library/jest-dom';
+
+vi.mock('@/components/GraphiQLClient', () => ({
+  __esModule: true,
+  default: () => <div>GraphiQLClient Mock</div>,
+}));
+
+vi.mock('@/components/Response', () => ({
+  __esModule: true,
+  default: () => <div>ResponseSection Mock</div>,
+}));
+
+vi.mock('@/utils/coderBase64', () => ({
+  base64ToText: vi.fn((input) => input),
+}));
+
+describe('GraphQL Component', () => {
+  it('renders correctly with params and searchParams', () => {
+    const endpoint = ['aHR0cHM6Ly9hcGkuZXhhbXBsZS5jb20=', 'c2VhcmNoIHRlc3Q='];
+
+    render(<GraphQL params={{ endpoint }} searchParams={{ key: 'value' }} />);
+
+    expect(screen.getByText('GraphiQLClient Mock')).toBeInTheDocument();
+    expect(screen.getByText('ResponseSection Mock')).toBeInTheDocument();
+
+    expect(base64ToText).toHaveBeenCalledWith('aHR0cHM6Ly9hcGkuZXhhbXBsZS5jb20=');
+    expect(base64ToText).toHaveBeenCalledWith('c2VhcmNoIHRlc3Q=');
+  });
+
+  it('handles missing params and searchParams gracefully', () => {
+    render(<GraphQL />);
+
+    expect(screen.getByText('GraphiQLClient Mock')).toBeInTheDocument();
+    expect(screen.getByText('ResponseSection Mock')).toBeInTheDocument();
+  });
+});

app/[locale]/StoreProvider.tsx

@@ -0,0 +1,28 @@
+'use client';
+import { makeStore } from '@/redux/store';
+import type { AppStore } from '@/redux/store';
+import { setupListeners } from '@reduxjs/toolkit/query';
+import type { ReactNode } from 'react';
+import { useEffect, useRef } from 'react';
+import { Provider } from 'react-redux';
+
+interface Props {
+  readonly children: ReactNode;
+}
+
+export const StoreProvider = ({ children }: Props) => {
+  const storeRef = useRef<AppStore | null>(null);
+
+  if (!storeRef.current) {
+    storeRef.current = makeStore();
+  }
+
+  useEffect(() => {
+    if (storeRef.current != null) {
+      const unsubscribe = setupListeners(storeRef.current.dispatch);
+      return unsubscribe;
+    }
+  }, []);
+
+  return <Provider store={storeRef.current}>{children}</Provider>;
+};

app/[locale]/[...rest]/page.tsx

@@ -0,0 +1,19 @@
+import RestForm from '@/components/RestClient';
+import ResponseSection from '@/components/Response';
+import { ResizableGroup, ResizableHandle, ResizablePanel } from '@/components/Resizable';
+
+export default function RESTful() {
+  return (
+    <main className="flex h-[calc(100vh-6rem)]">
+      <ResizableGroup autoSaveId="restful" direction="vertical">
+        <ResizablePanel defaultSizePercentage={50} minSizePercentage={20}>
+          <RestForm />
+        </ResizablePanel>
+        <ResizableHandle direction="vertical" />
+        <ResizablePanel defaultSizePercentage={50} minSizePixels={36}>
+          <ResponseSection />
+        </ResizablePanel>
+      </ResizableGroup>
+    </main>
+  );
+}

app/[locale]/[...rest]/rest.test.tsx

@@ -0,0 +1,24 @@
+import { screen, render } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+
+import '@testing-library/jest-dom';
+import RESTful from '@/app/[locale]/[...rest]/page';
+
+vi.mock('@/components/RestClient', () => ({
+  __esModule: true,
+  default: () => <div>RestForm Mock</div>,
+}));
+
+vi.mock('@/components/Response', () => ({
+  __esModule: true,
+  default: () => <div>ResponseSection Mock</div>,
+}));
+
+describe('RESTful Component', () => {
+  it('renders correctly', () => {
+    render(<RESTful />);
+
+    expect(screen.getByText('RestForm Mock')).toBeInTheDocument();
+    expect(screen.getByText('ResponseSection Mock')).toBeInTheDocument();
+  });
+});