diff --git a/apps/frontend/modules/environment/code-editor.component.tsx b/apps/frontend/modules/environment/code-editor.component.tsx index 7402239..497603c 100644 --- a/apps/frontend/modules/environment/code-editor.component.tsx +++ b/apps/frontend/modules/environment/code-editor.component.tsx @@ -5,6 +5,7 @@ import Editor, { useMonaco } from '@monaco-editor/react' import { useCallback, useEffect, useState } from 'react' import { useDebounce } from 'react-use' import { useEnviromentStore } from './useEnvirnoment' +import { usePreviousDistinct } from "react-use" const theme = { base: 'vs', @@ -28,14 +29,9 @@ export default function CodeEditor() { const changeLanguage = useEnviromentStore(e => e.changeLanguage) const runCode = useEnviromentStore(e => e.runCode) const loadingState = useEnviromentStore(e => e.loadingState) - - const extractFile = useCallback(() => { - return environment.files.find( - file => file.language.id === environment.language.id - ) - }, [environment.files, environment.language]) - - const [value, setValue] = useState(extractFile().data) + const getCurrentFile = useEnviromentStore(e => e.getCurrentFile) + const languageId = usePreviousDistinct(environment.language.id) + const [value, setValue] = useState(getCurrentFile().data); useEffect(() => { if (monaco) { @@ -45,17 +41,22 @@ export default function CodeEditor() { }, [monaco]) useEffect(() => { - setValue(extractFile().data) - }, [extractFile]) + setValue(getCurrentFile().data) + }, [languageId, getCurrentFile]) useDebounce( () => { - !isChangingLanguage && - extractFile().data !== value && - updateFile(extractFile().id, value) + const file = getCurrentFile() + + if (isChangingLanguage) + return + + if (file.data !== value) { + updateFile(file.id, value) + } }, 250, - [value, extractFile] + [value, getCurrentFile] ) return (
diff --git a/apps/frontend/modules/environment/useEnvirnoment.tsx b/apps/frontend/modules/environment/useEnvirnoment.tsx index 0b6e9af..320b691 100644 --- a/apps/frontend/modules/environment/useEnvirnoment.tsx +++ b/apps/frontend/modules/environment/useEnvirnoment.tsx @@ -128,6 +128,7 @@ interface EnvironmentStore { runTestCases: () => Promise updateUiState: (state: Partial) => void setCustomInput: (str: string) => void + getCurrentFile: () => EnvironmentQuery['envirnoment']['files'][0] } const { Provider, useStore: useEnviromentStore } = @@ -136,6 +137,7 @@ const { Provider, useStore: useEnviromentStore } = const createEnvironmentStore = (context: EnvironmentStoreCreateArgs) => { return create((set, get) => ({ api: createEnvApi(context.gql), + editorCode: '', uiState: { consoleTab: 'console', statementTab: 'statment', @@ -159,14 +161,22 @@ const createEnvironmentStore = (context: EnvironmentStoreCreateArgs) => { loadingState: { ...state.loadingState, [key]: newState }, })) }, + getCurrentFile: () => { + const { environment } = get() + + return environment.files.find( + file => file.language.id === environment.language.id + ) + }, fetchEnvironment: async () => { get().setLoading('loadingEnv', true) try { const env = await get().api.getEnv(context.envId) + const { envirnoment } = env.data set({ - environment: env.data.envirnoment, + environment: envirnoment, }) } catch (e) { console.error(e) diff --git a/package.json b/package.json index 24427e1..d3b4b40 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "@nestjs/jwt": "^8.0.0", "@nestjs/passport": "^8.0.1", "@nestjs/platform-express": "^8.2.2", + "@nrwl/next": "^13.10.4", "@prisma/client": "^3.11.0", "@radix-ui/react-checkbox": "^0.1.4", "@radix-ui/react-scroll-area": "^0.1.4", @@ -60,7 +61,7 @@ "monaco": "^1.201704190613.0", "monaco-editor": "^0.32.1", "nestjs-joi": "^1.6.0", - "next": "12.1.0", + "next": "12.1.1", "next-compose-plugins": "^2.2.1", "next-remove-imports": "^1.0.6", "next-transpile-modules": "^9.0.0", @@ -90,7 +91,6 @@ "tslib": "^2.0.0", "unique-username-generator": "^1.0.1", "uuid": "^8.3.2", - "@nrwl/next": "^13.10.4", "zustand": "^4.0.0-rc.0" }, "devDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f37c16e..c9c6b11 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -96,7 +96,7 @@ specifiers: monaco: ^1.201704190613.0 monaco-editor: ^0.32.1 nestjs-joi: ^1.6.0 - next: 12.1.0 + next: 12.1.1 next-compose-plugins: ^2.2.1 next-remove-imports: ^1.0.6 next-transpile-modules: ^9.0.0 @@ -150,7 +150,7 @@ dependencies: '@nestjs/jwt': 8.0.0_@nestjs+common@8.2.5 '@nestjs/passport': 8.1.0_fad574eebf217792c1a96edf566992e9 '@nestjs/platform-express': 8.2.5_dd9ef2e1e23f087665d46fe53bbbed58 - '@nrwl/next': 13.10.4_fb5a143e35f01ffbc190cb275e6f36a2 + '@nrwl/next': 13.10.4_19e6c3782e2cbd1321540bc5cc62d0c4 '@prisma/client': 3.11.0_prisma@3.11.0 '@radix-ui/react-checkbox': 0.1.4_react@17.0.2 '@radix-ui/react-scroll-area': 0.1.4_react@17.0.2 @@ -188,7 +188,7 @@ dependencies: monaco: 1.201704190613.0 monaco-editor: 0.32.1 nestjs-joi: 1.6.0_8164bf95aaf0cd9318f93f39e449bdbe - next: 12.1.0_0f2fd6b33f6a1fbafc35fb025cab224e + next: 12.1.1_0f2fd6b33f6a1fbafc35fb025cab224e next-compose-plugins: 2.2.1 next-remove-imports: 1.0.6 next-transpile-modules: 9.0.0 @@ -256,7 +256,7 @@ devDependencies: cypress: 8.7.0 dotenv: 14.3.2 eslint: 8.10.0 - eslint-config-next: 12.1.0_2d5b0a47c49503d60b5d3f44ee40432d + eslint-config-next: 12.1.0_7d8399cc05b6504119569450deb621b1 eslint-config-prettier: 8.4.0_eslint@8.10.0 eslint-plugin-cypress: 2.12.1_eslint@8.10.0 eslint-plugin-import: 2.25.2_eslint@8.10.0 @@ -4322,8 +4322,8 @@ packages: - chokidar dev: true - /@next/env/12.1.0: - resolution: {integrity: sha512-nrIgY6t17FQ9xxwH3jj0a6EOiQ/WDHUos35Hghtr+SWN/ntHIQ7UpuvSi0vaLzZVHQWaDupKI+liO5vANcDeTQ==} + /@next/env/12.1.1: + resolution: {integrity: sha512-VmTRkfo/IXOQCATndjW3OjKb8zmAuB07eDdzO9XvuXZP87SyvnCYw3jrhUuFhOe/FVsKiloafa5LJfToUpvjUQ==} dev: false /@next/eslint-plugin-next/12.1.0: @@ -4331,8 +4331,17 @@ packages: dependencies: glob: 7.1.7 - /@next/swc-android-arm64/12.1.0: - resolution: {integrity: sha512-/280MLdZe0W03stA69iL+v6I+J1ascrQ6FrXBlXGCsGzrfMaGr7fskMa0T5AhQIVQD4nA/46QQWxG//DYuFBcA==} + /@next/swc-android-arm-eabi/12.1.1: + resolution: {integrity: sha512-phV9H6d1eK1oVC7nmKKcCXvgOWT4K7aLC/beyO6yvbFC4XtBLE21vPwVl7B4ybz5xjSa6TXoR3TMR6vkW6Mv+A==} + engines: {node: '>= 10'} + cpu: [arm] + os: [android] + requiresBuild: true + dev: false + optional: true + + /@next/swc-android-arm64/12.1.1: + resolution: {integrity: sha512-X5qEz0YeeYT0Gz2wXPAEtRKEuAsLUIEgC/DDfS98t/5Idjv0S4aqIX+TQdzoXP5bwQkIr+mSg+MBIdLtbtnCsA==} engines: {node: '>= 10'} cpu: [arm64] os: [android] @@ -4340,8 +4349,8 @@ packages: dev: false optional: true - /@next/swc-darwin-arm64/12.1.0: - resolution: {integrity: sha512-R8vcXE2/iONJ1Unf5Ptqjk6LRW3bggH+8drNkkzH4FLEQkHtELhvcmJwkXcuipyQCsIakldAXhRbZmm3YN1vXg==} + /@next/swc-darwin-arm64/12.1.1: + resolution: {integrity: sha512-bKKSNaTdnO3XPnfaR4NSpPcbs80fdbtOYC2lgtqLzA0bOMioupixMP5GrA/gfJHwh7GRH+A+sbgKQWsqSsYAqQ==} engines: {node: '>= 10'} cpu: [arm64] os: [darwin] @@ -4349,8 +4358,8 @@ packages: dev: false optional: true - /@next/swc-darwin-x64/12.1.0: - resolution: {integrity: sha512-ieAz0/J0PhmbZBB8+EA/JGdhRHBogF8BWaeqR7hwveb6SYEIJaDNQy0I+ZN8gF8hLj63bEDxJAs/cEhdnTq+ug==} + /@next/swc-darwin-x64/12.1.1: + resolution: {integrity: sha512-2VOsA6WLDuDBA6935djohWGGeUIKeQhXwDwu1CKx1b8+6YMMIvFr/y2dpPWoct+5/IjFz84a2MnbABwpoNB9YA==} engines: {node: '>= 10'} cpu: [x64] os: [darwin] @@ -4358,8 +4367,8 @@ packages: dev: false optional: true - /@next/swc-linux-arm-gnueabihf/12.1.0: - resolution: {integrity: sha512-njUd9hpl6o6A5d08dC0cKAgXKCzm5fFtgGe6i0eko8IAdtAPbtHxtpre3VeSxdZvuGFh+hb0REySQP9T1ttkog==} + /@next/swc-linux-arm-gnueabihf/12.1.1: + resolution: {integrity: sha512-1urXtWwqjqbbpJBWeJYz5ATgelKacVNdKIdhfahbsmW+DZGoK5TYovgieyHFYUCyHdTuKeLTVR62ahIRUBv1YA==} engines: {node: '>= 10'} cpu: [arm] os: [linux] @@ -4367,8 +4376,8 @@ packages: dev: false optional: true - /@next/swc-linux-arm64-gnu/12.1.0: - resolution: {integrity: sha512-OqangJLkRxVxMhDtcb7Qn1xjzFA3s50EIxY7mljbSCLybU+sByPaWAHY4px97ieOlr2y4S0xdPKkQ3BCAwyo6Q==} + /@next/swc-linux-arm64-gnu/12.1.1: + resolution: {integrity: sha512-CDD9yFuknDvTOzzDnvfmb58USI5Vu6FUyzw96udKj7KA/n1YrNQ4K8X7KsDCRZoqfRWYceAyj1EpwHkfdiB7bg==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] @@ -4376,8 +4385,8 @@ packages: dev: false optional: true - /@next/swc-linux-arm64-musl/12.1.0: - resolution: {integrity: sha512-hB8cLSt4GdmOpcwRe2UzI5UWn6HHO/vLkr5OTuNvCJ5xGDwpPXelVkYW/0+C3g5axbDW2Tym4S+MQCkkH9QfWA==} + /@next/swc-linux-arm64-musl/12.1.1: + resolution: {integrity: sha512-nxyjgmbOpZm7gGPj9EV5Cqosoujt+ih/8SO2XG+BetgfAk0+c15793DHVAljNuc8GF9wpzqQnjMMUZ211VmQsg==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] @@ -4385,8 +4394,8 @@ packages: dev: false optional: true - /@next/swc-linux-x64-gnu/12.1.0: - resolution: {integrity: sha512-OKO4R/digvrVuweSw/uBM4nSdyzsBV5EwkUeeG4KVpkIZEe64ZwRpnFB65bC6hGwxIBnTv5NMSnJ+0K/WmG78A==} + /@next/swc-linux-x64-gnu/12.1.1: + resolution: {integrity: sha512-L8Cu8kH3Vn2dnRpvcvGGA1TlmDP2WXJ+qDwvjb/ikDXLdRdmFvJwHh45JUGiW2FHed3lGseOgNsuYiDvnT8Cdw==} engines: {node: '>= 10'} cpu: [x64] os: [linux] @@ -4394,8 +4403,8 @@ packages: dev: false optional: true - /@next/swc-linux-x64-musl/12.1.0: - resolution: {integrity: sha512-JohhgAHZvOD3rQY7tlp7NlmvtvYHBYgY0x5ZCecUT6eCCcl9lv6iV3nfu82ErkxNk1H893fqH0FUpznZ/H3pSw==} + /@next/swc-linux-x64-musl/12.1.1: + resolution: {integrity: sha512-4RAb7L69MoRSggBqUfF3OrtBCUN2zPDi7asfL7bfxEhH10LGzyfil8dT0GVjPOPFz/SyLx3ORd6avGij2IlJUA==} engines: {node: '>= 10'} cpu: [x64] os: [linux] @@ -4403,8 +4412,8 @@ packages: dev: false optional: true - /@next/swc-win32-arm64-msvc/12.1.0: - resolution: {integrity: sha512-T/3gIE6QEfKIJ4dmJk75v9hhNiYZhQYAoYm4iVo1TgcsuaKLFa+zMPh4056AHiG6n9tn2UQ1CFE8EoybEsqsSw==} + /@next/swc-win32-arm64-msvc/12.1.1: + resolution: {integrity: sha512-zvkuNIgOxkAU3RbzWRGCcFasDxWJdhONt2YeRGe39dJERHhEFA1u4HgaZw/SFE/kfrNRUZbXjJNAg3OU/EpPZw==} engines: {node: '>= 10'} cpu: [arm64] os: [win32] @@ -4412,8 +4421,8 @@ packages: dev: false optional: true - /@next/swc-win32-ia32-msvc/12.1.0: - resolution: {integrity: sha512-iwnKgHJdqhIW19H9PRPM9j55V6RdcOo6rX+5imx832BCWzkDbyomWnlzBfr6ByUYfhohb8QuH4hSGEikpPqI0Q==} + /@next/swc-win32-ia32-msvc/12.1.1: + resolution: {integrity: sha512-GsNDtZ//uKWNVjiwv3YKQYsDXuRWTz8jTmxopf5Ws3dK+zA77hn4o46LBQg0JPCNqTUO6eIOlUBjqSL6ejxmSQ==} engines: {node: '>= 10'} cpu: [ia32] os: [win32] @@ -4421,8 +4430,8 @@ packages: dev: false optional: true - /@next/swc-win32-x64-msvc/12.1.0: - resolution: {integrity: sha512-aBvcbMwuanDH4EMrL2TthNJy+4nP59Bimn8egqv6GHMVj0a44cU6Au4PjOhLNqEh9l+IpRGBqMTzec94UdC5xg==} + /@next/swc-win32-x64-msvc/12.1.1: + resolution: {integrity: sha512-nH5osn/uK9wsjT8Jh1YxMtRrkN5hoCNLQjsEdvfUfb+loQXeYiBd3n/0DUJkf6Scjfv6/htfUTPP3AEa7AbBxQ==} engines: {node: '>= 10'} cpu: [x64] os: [win32] @@ -5269,7 +5278,7 @@ packages: - webpack-cli dev: true - /@nrwl/next/13.10.4_fb5a143e35f01ffbc190cb275e6f36a2: + /@nrwl/next/13.10.4_19e6c3782e2cbd1321540bc5cc62d0c4: resolution: {integrity: sha512-7BE2raO4L6X7Z2HEgLz2zkC5a4DOFp/fo7E+nUQNWrCmtc8baA3RHvWafq9DddTr6pPF0LuZeiGcMxuqo7HEkw==} peerDependencies: next: ^12.1.0 @@ -5284,9 +5293,9 @@ packages: '@nrwl/workspace': 13.10.4_0c1ad649636d67dbfb1995f7859a342f '@svgr/webpack': 6.2.0 chalk: 4.1.0 - eslint-config-next: 12.1.0_2d5b0a47c49503d60b5d3f44ee40432d + eslint-config-next: 12.1.0_7d8399cc05b6504119569450deb621b1 fs-extra: 9.1.0 - next: 12.1.0_0f2fd6b33f6a1fbafc35fb025cab224e + next: 12.1.1_0f2fd6b33f6a1fbafc35fb025cab224e ts-node: 9.1.1_typescript@4.3.5 tsconfig-paths: 3.12.0 url-loader: 4.1.1 @@ -5902,7 +5911,7 @@ packages: babel-plugin-transform-typescript-metadata: 0.3.2 browserslist: 4.19.3 bytes: 3.1.1 - caniuse-lite: 1.0.30001312 + caniuse-lite: 1.0.30001339 chalk: 4.1.0 chokidar: 3.5.3 copy-webpack-plugin: 9.1.0_webpack@5.66.0 @@ -14769,7 +14778,7 @@ packages: optionalDependencies: source-map: 0.6.1 - /eslint-config-next/12.1.0_2d5b0a47c49503d60b5d3f44ee40432d: + /eslint-config-next/12.1.0_7d8399cc05b6504119569450deb621b1: resolution: {integrity: sha512-tBhuUgoDITcdcM7xFvensi9I5WTI4dnvH4ETGRg1U8ZKpXrZsWQFdOKIDzR3RLP5HR3xXrLviaMM4c3zVoE/pA==} peerDependencies: eslint: ^7.23.0 || ^8.0.0 @@ -14789,7 +14798,7 @@ packages: eslint-plugin-jsx-a11y: 6.5.1_eslint@8.10.0 eslint-plugin-react: 7.28.0_eslint@8.10.0 eslint-plugin-react-hooks: 4.3.0_eslint@8.10.0 - next: 12.1.0_0f2fd6b33f6a1fbafc35fb025cab224e + next: 12.1.1_0f2fd6b33f6a1fbafc35fb025cab224e typescript: 4.3.5 transitivePeerDependencies: - supports-color @@ -21185,8 +21194,8 @@ packages: escalade: 3.1.1 dev: false - /next/12.1.0_0f2fd6b33f6a1fbafc35fb025cab224e: - resolution: {integrity: sha512-s885kWvnIlxsUFHq9UGyIyLiuD0G3BUC/xrH0CEnH5lHEWkwQcHOORgbDF0hbrW9vr/7am4ETfX4A7M6DjrE7Q==} + /next/12.1.1_0f2fd6b33f6a1fbafc35fb025cab224e: + resolution: {integrity: sha512-IOfEIAgroMtsoYz6HXpDS+b5WB9WZ+MH266COXGlcpIiYSgUyJf9xV6vF+zY2RPvBJFT4fUW0EVdVnoOmTloDw==} engines: {node: '>=12.22.0'} hasBin: true peerDependencies: @@ -21203,26 +21212,27 @@ packages: sass: optional: true dependencies: - '@next/env': 12.1.0 + '@next/env': 12.1.1 caniuse-lite: 1.0.30001339 postcss: 8.4.5 react: 17.0.2 react-dom: 17.0.2_react@17.0.2 sass: 1.43.2 - styled-jsx: 5.0.0_react@17.0.2 + styled-jsx: 5.0.1_react@17.0.2 use-subscription: 1.5.1_react@17.0.2 optionalDependencies: - '@next/swc-android-arm64': 12.1.0 - '@next/swc-darwin-arm64': 12.1.0 - '@next/swc-darwin-x64': 12.1.0 - '@next/swc-linux-arm-gnueabihf': 12.1.0 - '@next/swc-linux-arm64-gnu': 12.1.0 - '@next/swc-linux-arm64-musl': 12.1.0 - '@next/swc-linux-x64-gnu': 12.1.0 - '@next/swc-linux-x64-musl': 12.1.0 - '@next/swc-win32-arm64-msvc': 12.1.0 - '@next/swc-win32-ia32-msvc': 12.1.0 - '@next/swc-win32-x64-msvc': 12.1.0 + '@next/swc-android-arm-eabi': 12.1.1 + '@next/swc-android-arm64': 12.1.1 + '@next/swc-darwin-arm64': 12.1.1 + '@next/swc-darwin-x64': 12.1.1 + '@next/swc-linux-arm-gnueabihf': 12.1.1 + '@next/swc-linux-arm64-gnu': 12.1.1 + '@next/swc-linux-arm64-musl': 12.1.1 + '@next/swc-linux-x64-gnu': 12.1.1 + '@next/swc-linux-x64-musl': 12.1.1 + '@next/swc-win32-arm64-msvc': 12.1.1 + '@next/swc-win32-ia32-msvc': 12.1.1 + '@next/swc-win32-x64-msvc': 12.1.1 transitivePeerDependencies: - '@babel/core' - babel-plugin-macros @@ -26994,13 +27004,13 @@ packages: inline-style-parser: 0.1.1 dev: false - /styled-jsx/5.0.0_react@17.0.2: - resolution: {integrity: sha512-qUqsWoBquEdERe10EW8vLp3jT25s/ssG1/qX5gZ4wu15OZpmSMFI2v+fWlRhLfykA5rFtlJ1ME8A8pm/peV4WA==} + /styled-jsx/5.0.1_react@17.0.2: + resolution: {integrity: sha512-+PIZ/6Uk40mphiQJJI1202b+/dYeTVd9ZnMPR80pgiWbjIwvN2zIp4r9et0BgqBuShh48I0gttPlAXA7WVvBxw==} engines: {node: '>= 12.0.0'} peerDependencies: '@babel/core': '*' babel-plugin-macros: '*' - react: '>= 16.8.0 || 17.x.x || 18.x.x' + react: '>= 16.8.0 || 17.x.x || ^18.0.0-0' peerDependenciesMeta: '@babel/core': optional: true