Update

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 (
     <div className="flex-1 h-full w-full">

apps/frontend/modules/environment/useEnvirnoment.tsx

@@ -128,6 +128,7 @@ interface EnvironmentStore {
   runTestCases: () => Promise<void>
   updateUiState: (state: Partial<UIState>) => 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<EnvironmentStore>((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)

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": {