feat: add editor

package.json

@@ -22,13 +22,18 @@
     ]
   },
   "dependencies": {
+    "@codemirror/lang-javascript": "^6.1.8",
     "@emotion/react": "^11.11.0",
     "@fontsource/inter": "^4.5.15",
     "@mantine/core": "^6.0.10",
     "@mantine/form": "^6.0.10",
     "@mantine/hooks": "^6.0.10",
     "@mantine/notifications": "^6.0.11",
     "@tabler/icons-react": "^2.18.0",
+    "@tanstack/react-query": "^4.29.11",
+    "@uiw/codemirror-theme-github": "^4.20.2",
+    "@uiw/react-codemirror": "^4.20.2",
+    "axios": "^1.4.0",
     "firebase": "^9.22.0",
     "i18next": "^22.5.0",
     "i18next-http-backend": "^2.2.1",
@@ -37,7 +42,8 @@
     "react-firebase-hooks": "^5.1.1",
     "react-i18next": "^12.3.1",
     "react-router-dom": "^6.11.1",
-    "zod": "^3.21.4"
+    "zod": "^3.21.4",
+    "zustand": "^4.3.8"
   },
   "devDependencies": {
     "@trivago/prettier-plugin-sort-imports": "^4.1.1",

src/App.tsx

@@ -1,25 +1,24 @@
 import { RouterProvider, createBrowserRouter } from 'react-router-dom';
 
-import { useAppColorScheme } from '@hooks';
-import { ColorSchemeProvider, MantineProvider } from '@mantine/core';
+import { MantineProvider } from '@mantine/core';
 import { Notifications } from '@mantine/notifications';
 import { routes } from '@routes';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { theme } from '@theme';
 
 import './i18n';
 
 const router = createBrowserRouter(routes);
+const queryClient = new QueryClient();
 
 const App = () => {
-  const [colorScheme, toggleColorScheme] = useAppColorScheme();
-
   return (
-    <ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
-      <MantineProvider withGlobalStyles withNormalizeCSS theme={{ colorScheme, ...theme }}>
+    <QueryClientProvider client={queryClient}>
+      <MantineProvider withGlobalStyles withNormalizeCSS theme={theme}>
         <Notifications position="top-center" limit={3} />
         <RouterProvider router={router} />
       </MantineProvider>
-    </ColorSchemeProvider>
+    </QueryClientProvider>
   );
 };
 

src/api/api.ts

@@ -0,0 +1,17 @@
+import { API_SETTINGS } from '@constants';
+import axios from 'axios';
+
+const queryData = async (query: string) => {
+  const response = await axios({
+    method: 'POST',
+    url: API_SETTINGS.API_BASE_URL,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    data: JSON.stringify({ query }),
+  });
+
+  return response.data;
+};
+
+export default queryData;

src/components/CodeEditor/CodeEditor.styles.tsx

@@ -0,0 +1,22 @@
+import { createStyles } from '@mantine/core';
+
+const useStyles = createStyles((theme) => ({
+  editor: {
+    height: '100%',
+    overflowY: 'auto',
+
+    '.cm-editor': {
+      height: '100%',
+    },
+
+    '.cm-scroller': {
+      backgroundColor: theme.colors.gray[1],
+    },
+
+    '.cm-activeLine': {
+      backgroundColor: 'transparent',
+    },
+  },
+}));
+
+export default useStyles;

src/components/CodeEditor/CodeEditor.tsx

@@ -0,0 +1,34 @@
+import { javascript } from '@codemirror/lang-javascript';
+import { Box } from '@mantine/core';
+import { githubLight } from '@uiw/codemirror-theme-github';
+import ReactCodeMirror from '@uiw/react-codemirror';
+
+import useStyles from './CodeEditor.styles';
+
+type CodeEditorType = {
+  code: string;
+  isActive: boolean;
+  onChange?: (code: string) => void;
+};
+
+const CodeEditor = ({ code, isActive, onChange }: CodeEditorType) => {
+  const { classes } = useStyles();
+
+  return (
+    <Box
+      className={classes.editor}
+      component={ReactCodeMirror}
+      value={code}
+      extensions={[javascript()]}
+      theme={githubLight}
+      basicSetup={{
+        foldGutter: false,
+        lineNumbers: false,
+      }}
+      readOnly={!isActive}
+      onChange={onChange}
+    />
+  );
+};
+
+export default CodeEditor;

src/components/EditorTab/EditorTab.styles.tsx

@@ -3,14 +3,18 @@ import { createStyles } from '@mantine/core';
 const useStyles = createStyles((theme) => ({
   container: {
     height: '100%',
-    gap: theme.spacing.xs,
   },
 
   box: {
     height: '100%',
     backgroundColor: theme.colors.gray[1],
     padding: 10,
     borderRadius: theme.radius.md,
+
+    [theme.fn.smallerThan('xs')]: {
+      padding: 5,
+      fontSize: 12,
+    },
   },
 }));
 

src/components/EditorTab/EditorTab.tsx

@@ -1,15 +1,31 @@
-import { Box, Group } from '@mantine/core';
+import { CodeEditor } from '@components';
+import { useEditor } from '@hooks';
+import { Box, Button, Center, Group, Stack } from '@mantine/core';
 
 import useStyles from './EditorTab.styles';
 
 const EditorTab = () => {
   const { classes } = useStyles();
+  const { query, setQuery, code, onMutate, isLoading } = useEditor();
 
   return (
-    <Group grow className={classes.container}>
-      <Box className={classes.box}>1</Box>
-      <Box className={classes.box}>2</Box>
-    </Group>
+    <>
+      <Center pb={10}>
+        <Button onClick={onMutate} disabled={isLoading}>
+          Run Query
+        </Button>
+      </Center>
+      <Group grow spacing={7} className={classes.container}>
+        <Box className={classes.box}>
+          <CodeEditor code={query} isActive={true} onChange={setQuery} />
+        </Box>
+        <Stack sx={{ height: '100%' }}>
+          <Box className={classes.box}>
+            <CodeEditor code={code} isActive={false} />
+          </Box>
+        </Stack>
+      </Group>
+    </>
   );
 };
 

src/components/GraphQlSchemaContent/GraphQlSchemaContent.tsx

@@ -8,7 +8,7 @@ interface GraphQlSchemaContentProps {
   schema: GraphQLSchemaJsToTS;
 }
 
-interface graphType {
+interface GraphType {
   name: string;
   result: string[];
 }
@@ -28,7 +28,7 @@ const GraphQlSchemaContent = ({ schema }: GraphQlSchemaContentProps) => {
 
   const { classes, cx } = useStyles();
 
-  const functionOfType = (obj: Type2, res: string[]): graphType => {
+  const functionOfType = (obj: Type2, res: string[]): GraphType => {
     const resultArr = [...res, obj.kind];
 
     if (obj.name) {
@@ -79,7 +79,7 @@ const GraphQlSchemaContent = ({ schema }: GraphQlSchemaContentProps) => {
 
     if (isDisabled)
       return (
-        <Box component="span" className={classes.disabled}>
+        <Box component="span" key={name} className={classes.disabled}>
           {finalResult}
         </Box>
       );

src/components/index.tsx

@@ -11,3 +11,4 @@ export { default as MemberTag } from './MemberTag/MemberTag';
 export { default as RSLink } from './RSLink/RSLink';
 export { default as AboutUs } from './AboutUs/AboutUs';
 export { default as EditorTab } from './EditorTab/EditorTab';
+export { default as CodeEditor } from './CodeEditor/CodeEditor';

src/constants/apiSettings.ts

@@ -1,7 +1 @@
-export const API_CREDENTIALS = {};
-
 export const API_BASE_URL = 'https://countries.trevorblades.com/graphql';
-
-export const API_ENDPOINTS = {
-  TEMP: '/temp',
-};

src/helpers/helpers.tsx

@@ -1,12 +1,9 @@
 import { notifications } from '@mantine/notifications';
-import { IconX } from '@tabler/icons-react';
 
-export const showNotificationsError = (err: unknown) => {
+export const showNotificationsError = (errorMessage: unknown) => {
   return notifications.show({
-    title: 'Error',
-    message: `${err} 🤥`,
+    message: `${errorMessage} 🤥`,
     autoClose: 3000,
-    icon: <IconX />,
     color: 'red',
   });
 };

src/hooks/index.ts

@@ -1,4 +1,3 @@
-export { default as useAppColorScheme } from './useAppColorScheme';
 export { default as useAppLanguage } from './useAppLanguage';
 export { default as useAppScroll } from './useAppScroll';
-export { default as useGetGraphQL } from './useGetGraphQL';
+export { default as useEditor } from './useEditor';

src/hooks/useEditor.tsx

@@ -0,0 +1,30 @@
+import { useEffect, useMemo } from 'react';
+
+import queryData from '@api/api';
+import { showNotificationsError } from '@helpers';
+import { useStoreQuery } from '@store';
+import { useMutation } from '@tanstack/react-query';
+
+const useEditor = () => {
+  const query = useStoreQuery((state) => state.query);
+  const setQuery = useStoreQuery((state) => state.setQuery);
+  const { data, isLoading, isError, mutate } = useMutation({ mutationFn: queryData });
+
+  const code = useMemo(() => {
+    if (typeof data === 'string') return data;
+    if (!data) return '';
+    return JSON.stringify(data, null, ' ');
+  }, [data]);
+
+  useEffect(() => {
+    if (isError) showNotificationsError('something');
+  }, [isError]);
+
+  const onMutate = () => {
+    mutate(query);
+  };
+
+  return { query, setQuery, code, onMutate, isLoading };
+};
+
+export default useEditor;

src/layouts/BaseLayout/BaseLayout.tsx

@@ -3,12 +3,16 @@ import { Outlet } from 'react-router-dom';
 import { Footer, Header } from '@layouts';
 import { AppShell, Box, Container, createStyles } from '@mantine/core';
 
-const useStyles = createStyles({
+const useStyles = createStyles((theme) => ({
   container: {
     flexGrow: 1,
     height: '100%',
+
+    [theme.fn.smallerThan('xs')]: {
+      padding: 7,
+    },
   },
-});
+}));
 
 const BaseLayout = () => {
   const { classes } = useStyles();

src/pages/GraphQlPage/GraphQlPage.styles.tsx

@@ -5,7 +5,8 @@ const useStyles = createStyles((theme) => {
 
   return {
     tabs: {
-      height: '100%',
+      height: `calc(100% - ${px(tabsSpacing) * 5}px)`,
+      maxHeight: 800,
     },
 
     tab: {

src/pages/GraphQlPage/GraphQlPage.tsx

@@ -10,7 +10,6 @@ import useStyles from './GraphQlPage.styles';
 
 const GraphQlPage = () => {
   const { classes } = useStyles();
-
   const { t } = useTranslation();
 
   return (

src/store/index.ts

@@ -1 +1 @@
-export {};
+export { default as useStoreQuery } from './useStoreQuery';