live coding

package.json

@@ -23,6 +23,7 @@
     "@fontsource/material-icons": "^4.5.4",
     "@fontsource/roboto": "^4.5.8",
     "@hookform/resolvers": "^2.9.11",
+    "@monaco-editor/react": "^4.4.6",
     "@mui/icons-material": "^5.11.11",
     "@mui/material": "^5.11.0",
     "@mui/system": "^5.11.1",

src/api/liveCodingApi.ts

@@ -0,0 +1,8 @@
+import { resultData } from '../types/liveCodingTypes';
+import { instance } from './Instance/instance';
+
+export const resultApi = {
+  postResult() {
+    return instance.post<resultData[]>(`result`);
+  },
+};

src/components/layout/header/FullHeader/FullHeader.tsx

@@ -43,6 +43,11 @@ export const FullHeader = () => {
                   {t('createTest')}
                 </Button>
               </Link>
+              <Link href='/live-codding'>
+                <Button color='info' variant='contained'>
+                  {t('liveCodding')}
+                </Button>
+              </Link>
               {!!token && (
                 <Button
                   color='info'

src/pages/live-codding/DegreeLiveCodding/TabPanel/index.tsx

@@ -0,0 +1,17 @@
+import { Typography } from '@mui/material';
+
+type TabPanelProps = {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+};
+
+export const TabPanel = (props: TabPanelProps) => {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div role='tabpanel' hidden={value !== index} {...other}>
+      {value === index && <Typography>{children}</Typography>}
+    </div>
+  );
+}

src/pages/live-codding/DegreeLiveCodding/index.tsx

@@ -0,0 +1,33 @@
+import { useState } from 'react';
+import { Tabs, Tab } from '@mui/material';
+import { TabPanel } from './TabPanel';
+
+type Props = {
+  tabs: {
+    label: string;
+    content: React.ReactNode;
+  }[];
+};
+
+export default function TabbedView({ tabs }: Props) {
+  const [value, setValue] = useState(0);
+
+  const handleChange = (_: React.SyntheticEvent, newValue: number) => {
+    setValue(newValue);
+  };
+
+  return (
+    <>
+      <Tabs value={value} onChange={handleChange} centered>
+        {tabs.map((tab, index) => (
+          <Tab key={index} label={tab.label} />
+        ))}
+      </Tabs>
+      {tabs.map((tab, index) => (
+        <TabPanel key={index} value={value} index={index}>
+          {tab.content}
+        </TabPanel>
+      ))}
+    </>
+  );
+}

src/pages/live-codding/SolutionLiveCodding/index.tsx

@@ -0,0 +1,84 @@
+import React, { useState } from 'react';
+import Editor from '@monaco-editor/react';
+import { Button, Container, Grid, Stack, TextField } from '@mui/material';
+import { Box } from '@mui/system';
+import { Controller, SubmitHandler, useForm } from 'react-hook-form';
+import { StylizedPaper } from '../../../components/common/StylizedPaper/StylizedPaper';
+import { resultApi } from '../../../api/liveCodingApi';
+import { resultDataType } from '../../../types/liveCodingTypes';
+
+const MonacoEditor = () => {
+  const [code, setCode] = useState<string>('console.log("Hello World!");');
+  const [output, setOutput] = useState<any>('');
+  const { handleSubmit, control } = useForm<resultDataType>();
+
+  const handleEditorChange = (value: string | undefined) => {
+    setCode(value || '');
+  };
+
+  const handleRunCode = () => {
+    try {
+      setOutput(eval(code));
+    } catch (error: any) {
+      setOutput(`Error: ${error.message}`);
+    }
+  };
+
+  const handleResultData = async (resultData: resultDataType) => {
+    const payload = {
+      ...resultData,
+      codeResult: output
+    }
+    await resultApi.postResult(payload)
+  }
+
+  return (
+    <Container>
+      <Stack>
+        <form onSubmit={handleSubmit(handleResultData)}>
+          <Box sx={{ marginBottom: '2rem' }}>
+            <StylizedPaper title='' i18nName=''>
+              <Editor
+                height='30vh'
+                defaultLanguage='javascript'
+                defaultValue={code}
+                onChange={handleEditorChange}
+              />
+            </StylizedPaper>
+          </Box>
+          <Stack direction='row' spacing={2}>
+            <Box sx={{ flexGrow: 1 }}>
+              <Button variant='contained' onClick={handleRunCode}>
+                Run Code
+              </Button>
+            </Box>
+            <Box sx={{ flexGrow: 3 }}>
+              <Controller
+                name='codeResult'
+                control={control}
+                render={() => (
+                  <TextField
+                    label=''
+                    multiline
+                    rows={5}
+                    disabled
+                    value={output}
+                    variant='outlined'
+                    fullWidth
+                  />
+                )}
+              />
+            </Box>
+            <Box sx={{ flexGrow: 1 }}>
+              <Button variant='contained' type='submit'>
+                Check result
+              </Button>
+            </Box>
+          </Stack>
+        </form>
+      </Stack>
+    </Container>
+  );
+};
+
+export default MonacoEditor;

src/pages/live-codding/index.tsx

@@ -0,0 +1,31 @@
+import { Box, Stack } from '@mui/material';
+import { useState } from 'react';
+import { StylizedPaper } from '../../components/common/StylizedPaper/StylizedPaper';
+import { Layout } from '../../components/layout/Layout';
+import DegreeLiveCodding from './DegreeLiveCodding';
+import CodeEditor from './SolutionLiveCodding';
+
+const LiveCodding = () => (
+  <Layout>
+    <Stack direction='row' spacing={2}>
+      <Box sx={{ flexGrow: 1 }}>
+        <StylizedPaper title='What’s the degree?'>
+          <DegreeLiveCodding
+            tabs={[
+              { label: 'Description', content: 'Description' },
+              { label: 'Drafts', content: 'Drafts' },
+              { label: 'Solutions', content: 'Solutions' },
+            ]}
+          />
+        </StylizedPaper>
+      </Box>
+      <Box sx={{ flexGrow: 1 }}>
+        <StylizedPaper title='Live Coding'>
+          <CodeEditor />
+        </StylizedPaper>
+      </Box>
+    </Stack>
+  </Layout>
+);
+
+export default LiveCodding;

src/pages/registration/index.tsx

@@ -51,7 +51,7 @@ const SignUpPage = () => {
             <AuthTextField
               register={register}
               error={errors.nickname}
-              name='nickName'
+              name='nickname'
               required='warningRequired'
             />
             <AuthTextField

src/types/liveCodingTypes.ts

@@ -0,0 +1,3 @@
+export type resultDataType = {
+  codeResult: any;
+};

yarn.lock

@@ -1785,6 +1785,21 @@
   resolved "https://registry.npmjs.org/@mdx-js/util/-/util-1.6.22.tgz"
   integrity sha512-H1rQc1ZOHANWBvPcW+JpGwr+juXSxM8Q8YCkm3GhZd8REu1fHR3z99CErO1p9pkcfcxZnMdIZdIsXkOHY0NilA==
 
+"@monaco-editor/loader@^1.3.2":
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/@monaco-editor/loader/-/loader-1.3.3.tgz#7f1742bd3cc21c0362a46a4056317f6e5215cfca"
+  integrity sha512-6KKF4CTzcJiS8BJwtxtfyYt9shBiEv32ateQ9T4UVogwn4HM/uPo9iJd2Dmbkpz8CM6Y0PDUpjnZzCwC+eYo2Q==
+  dependencies:
+    state-local "^1.0.6"
+
+"@monaco-editor/react@^4.4.6":
+  version "4.4.6"
+  resolved "https://registry.yarnpkg.com/@monaco-editor/react/-/react-4.4.6.tgz#8ae500b0edf85276d860ed702e7056c316548218"
+  integrity sha512-Gr3uz3LYf33wlFE3eRnta4RxP5FSNxiIV9ENn2D2/rN8KgGAD8ecvcITRtsbbyuOuNkwbuHYxfeaz2Vr+CtyFA==
+  dependencies:
+    "@monaco-editor/loader" "^1.3.2"
+    prop-types "^15.7.2"
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz"
@@ -11885,6 +11900,11 @@ stackframe@^1.3.4:
   resolved "https://registry.npmjs.org/stackframe/-/stackframe-1.3.4.tgz"
   integrity sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw==
 
+state-local@^1.0.6:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/state-local/-/state-local-1.0.7.tgz#da50211d07f05748d53009bee46307a37db386d5"
+  integrity sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==
+
 state-toggle@^1.0.0:
   version "1.0.3"
   resolved "https://registry.npmjs.org/state-toggle/-/state-toggle-1.0.3.tgz"