From deac54853cd0a0ba1747b50e5320a7fb65893189 Mon Sep 17 00:00:00 2001
From: Kohminchae <mc0jooo@gmail.com>
Date: Wed, 11 Sep 2024 23:27:41 +0900
Subject: [PATCH 1/3] chore(fe): block testcase and limit edit when submission
 exist

---
 .../app/admin/problem/[id]/edit/page.tsx      | 33 +++++++++++++++----
 .../problem/_components/ExampleTextarea.tsx   |  6 +++-
 .../admin/problem/_components/LimitForm.tsx   |  4 ++-
 .../problem/_components/TestcaseField.tsx     |  4 ++-
 .../problem/_components/TestcaseItem.tsx      |  4 +++
 5 files changed, 42 insertions(+), 9 deletions(-)

diff --git a/apps/frontend/app/admin/problem/[id]/edit/page.tsx b/apps/frontend/app/admin/problem/[id]/edit/page.tsx
index a0e95da22c..3a072ae1a5 100644
--- a/apps/frontend/app/admin/problem/[id]/edit/page.tsx
+++ b/apps/frontend/app/admin/problem/[id]/edit/page.tsx
@@ -4,8 +4,9 @@ import { useConfirmNavigation } from '@/app/admin/_components/ConfirmNavigation'
 import { Button } from '@/components/ui/button'
 import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
 import { UPDATE_PROBLEM } from '@/graphql/problem/mutations'
-import { GET_PROBLEM } from '@/graphql/problem/queries'
+import { GET_PROBLEM, GET_PROBLEMS } from '@/graphql/problem/queries'
 import { useMutation, useQuery } from '@apollo/client'
+import { Language, Level } from '@generated/graphql'
 import type { Template, Testcase, UpdateProblemInput } from '@generated/graphql'
 import { zodResolver } from '@hookform/resolvers/zod'
 import Link from 'next/link'
@@ -38,9 +39,7 @@ export default function Page({ params }: { params: { id: string } }) {
 
   const methods = useForm<UpdateProblemInput>({
     resolver: zodResolver(editSchema),
-    defaultValues: {
-      template: []
-    }
+    defaultValues: { template: [] }
   })
 
   const { handleSubmit, setValue, getValues } = methods
@@ -134,6 +133,28 @@ export default function Page({ params }: { params: { id: string } }) {
     router.refresh()
   }
 
+  const [blockEdit, setBlockEdit] = useState<boolean>(false)
+
+  useQuery(GET_PROBLEMS, {
+    variables: {
+      groupId: 1,
+      take: 500,
+      input: {
+        difficulty: [
+          Level.Level1,
+          Level.Level2,
+          Level.Level3,
+          Level.Level4,
+          Level.Level5
+        ],
+        languages: [Language.C, Language.Cpp, Language.Java, Language.Python3]
+      }
+    },
+    onCompleted: (data) => {
+      if (data.getProblems[0].submissionCount > 0) setBlockEdit(true)
+    }
+  })
+
   return (
     <ScrollArea className="shrink-0">
       <main className="flex flex-col gap-6 px-20 py-16">
@@ -187,10 +208,10 @@ export default function Page({ params }: { params: { id: string } }) {
               </div>
             </div>
 
-            {getValues('testcases') && <TestcaseField />}
+            {getValues('testcases') && <TestcaseField blockEdit={blockEdit} />}
 
             <FormSection title="Limit">
-              <LimitForm />
+              <LimitForm blockEdit={blockEdit} />
             </FormSection>
             <TemplateField />
             <SwitchField
diff --git a/apps/frontend/app/admin/problem/_components/ExampleTextarea.tsx b/apps/frontend/app/admin/problem/_components/ExampleTextarea.tsx
index 48aff23d46..303d676fa7 100644
--- a/apps/frontend/app/admin/problem/_components/ExampleTextarea.tsx
+++ b/apps/frontend/app/admin/problem/_components/ExampleTextarea.tsx
@@ -10,13 +10,15 @@ interface ExampleTextareaProps {
   // TODO: any를 다른 type으로 대체
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   register: any
+  blockEdit: boolean
 }
 export default function ExampleTextarea({
   onRemove,
   inputName,
   outputName,
   className,
-  register
+  register,
+  blockEdit
 }: ExampleTextareaProps) {
   return (
     <div
@@ -30,11 +32,13 @@ export default function ExampleTextarea({
         onClick={() => onRemove()}
       />
       <Textarea
+        disabled={blockEdit}
         placeholder="Input"
         className="resize-none border-0 px-4 py-0 shadow-none focus-visible:ring-0"
         {...register(inputName)}
       />
       <Textarea
+        disabled={blockEdit}
         placeholder="Output"
         className="min-h-[120px] rounded-none border-l border-transparent border-l-gray-200 px-4 py-0 shadow-none focus-visible:ring-0"
         {...register(outputName)}
diff --git a/apps/frontend/app/admin/problem/_components/LimitForm.tsx b/apps/frontend/app/admin/problem/_components/LimitForm.tsx
index 434d2caa83..6c6c77e3dc 100644
--- a/apps/frontend/app/admin/problem/_components/LimitForm.tsx
+++ b/apps/frontend/app/admin/problem/_components/LimitForm.tsx
@@ -4,7 +4,7 @@ import { useFormContext } from 'react-hook-form'
 import ErrorMessage from '../../_components/ErrorMessage'
 import { inputStyle } from '../../utils'
 
-export default function LimitForm() {
+export default function LimitForm({ blockEdit }: { blockEdit: boolean }) {
   const {
     formState: { errors },
     register
@@ -15,6 +15,7 @@ export default function LimitForm() {
       <div className="flex flex-col gap-1">
         <div className="flex items-center gap-2">
           <Input
+            disabled={blockEdit}
             id="time"
             type="number"
             min={0}
@@ -32,6 +33,7 @@ export default function LimitForm() {
       <div className="flex flex-col gap-1">
         <div className="flex items-center gap-2">
           <Input
+            disabled={blockEdit}
             id="memory"
             type="number"
             min={0}
diff --git a/apps/frontend/app/admin/problem/_components/TestcaseField.tsx b/apps/frontend/app/admin/problem/_components/TestcaseField.tsx
index ae54a873ff..b32639757e 100644
--- a/apps/frontend/app/admin/problem/_components/TestcaseField.tsx
+++ b/apps/frontend/app/admin/problem/_components/TestcaseField.tsx
@@ -18,7 +18,7 @@ import AddBadge from './AddBadge'
 import { CautionDialog } from './CautionDialog'
 import TestcaseItem from './TestcaseItem'
 
-export default function TestcaseField() {
+export default function TestcaseField({ blockEdit }: { blockEdit: boolean }) {
   const {
     formState: { errors },
     getValues,
@@ -119,6 +119,7 @@ export default function TestcaseField() {
           (item, index) =>
             !item.isHidden && (
               <TestcaseItem
+                blockEdit={blockEdit}
                 key={index}
                 index={index}
                 itemError={itemErrors}
@@ -134,6 +135,7 @@ export default function TestcaseField() {
           (item, index) =>
             item.isHidden && (
               <TestcaseItem
+                blockEdit={blockEdit}
                 key={index}
                 index={index}
                 itemError={itemErrors}
diff --git a/apps/frontend/app/admin/problem/_components/TestcaseItem.tsx b/apps/frontend/app/admin/problem/_components/TestcaseItem.tsx
index 2d6e540d5c..54440d23f7 100644
--- a/apps/frontend/app/admin/problem/_components/TestcaseItem.tsx
+++ b/apps/frontend/app/admin/problem/_components/TestcaseItem.tsx
@@ -9,12 +9,14 @@ import { isInvalid } from '../_libs/utils'
 import ExampleTextarea from './ExampleTextarea'
 
 interface TestcaseItemProps {
+  blockEdit: boolean
   index: number
   itemError: FieldErrorsImpl | undefined
   onRemove: () => void
 }
 
 export default function TestcaseItem({
+  blockEdit,
   index,
   itemError,
   onRemove
@@ -77,6 +79,7 @@ export default function TestcaseItem({
 
         <div>
           <input
+            disabled={blockEdit}
             {...register(`testcases.${index}.scoreWeight`, {
               setValueAs: (value) => (isInvalid(value) ? null : Number(value))
             })}
@@ -94,6 +97,7 @@ export default function TestcaseItem({
         </div>
       </div>
       <ExampleTextarea
+        blockEdit={blockEdit}
         onRemove={onRemove}
         inputName={`testcases.${index}.input`}
         outputName={`testcases.${index}.output`}

From 4da3ecf754f482a865d16dcfc8d7d3376fa73bfe Mon Sep 17 00:00:00 2001
From: Kohminchae <mc0jooo@gmail.com>
Date: Wed, 18 Sep 2024 22:13:23 +0900
Subject: [PATCH 2/3] chore(fe): change blockEdit as optional property

---
 .../app/admin/problem/[id]/edit/page.tsx      | 29 ++++---------------
 .../problem/_components/ExampleTextarea.tsx   |  2 +-
 .../admin/problem/_components/LimitForm.tsx   |  2 +-
 .../problem/_components/TestcaseField.tsx     |  2 +-
 .../problem/_components/TestcaseItem.tsx      |  2 +-
 apps/frontend/app/admin/problem/page.tsx      |  2 +-
 apps/frontend/graphql/problem/queries.ts      |  1 +
 7 files changed, 11 insertions(+), 29 deletions(-)

diff --git a/apps/frontend/app/admin/problem/[id]/edit/page.tsx b/apps/frontend/app/admin/problem/[id]/edit/page.tsx
index 3a072ae1a5..72200d86b1 100644
--- a/apps/frontend/app/admin/problem/[id]/edit/page.tsx
+++ b/apps/frontend/app/admin/problem/[id]/edit/page.tsx
@@ -4,9 +4,8 @@ import { useConfirmNavigation } from '@/app/admin/_components/ConfirmNavigation'
 import { Button } from '@/components/ui/button'
 import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
 import { UPDATE_PROBLEM } from '@/graphql/problem/mutations'
-import { GET_PROBLEM, GET_PROBLEMS } from '@/graphql/problem/queries'
+import { GET_PROBLEM } from '@/graphql/problem/queries'
 import { useMutation, useQuery } from '@apollo/client'
-import { Language, Level } from '@generated/graphql'
 import type { Template, Testcase, UpdateProblemInput } from '@generated/graphql'
 import { zodResolver } from '@hookform/resolvers/zod'
 import Link from 'next/link'
@@ -44,6 +43,7 @@ export default function Page({ params }: { params: { id: string } }) {
 
   const { handleSubmit, setValue, getValues } = methods
 
+  const [blockEdit, setBlockEdit] = useState<boolean>(false)
   const [showHint, setShowHint] = useState<boolean>(false)
   const [showSource, setShowSource] = useState<boolean>(false)
   const [isDialogOpen, setDialogOpen] = useState<boolean>(false)
@@ -56,6 +56,9 @@ export default function Page({ params }: { params: { id: string } }) {
     },
     onCompleted: (problemData) => {
       const data = problemData.getProblem
+
+      if (data.submissionCount > 0) setBlockEdit(true)
+
       setValue('id', +id)
       setValue('title', data.title)
       setValue('isVisible', data.isVisible)
@@ -133,28 +136,6 @@ export default function Page({ params }: { params: { id: string } }) {
     router.refresh()
   }
 
-  const [blockEdit, setBlockEdit] = useState<boolean>(false)
-
-  useQuery(GET_PROBLEMS, {
-    variables: {
-      groupId: 1,
-      take: 500,
-      input: {
-        difficulty: [
-          Level.Level1,
-          Level.Level2,
-          Level.Level3,
-          Level.Level4,
-          Level.Level5
-        ],
-        languages: [Language.C, Language.Cpp, Language.Java, Language.Python3]
-      }
-    },
-    onCompleted: (data) => {
-      if (data.getProblems[0].submissionCount > 0) setBlockEdit(true)
-    }
-  })
-
   return (
     <ScrollArea className="shrink-0">
       <main className="flex flex-col gap-6 px-20 py-16">
diff --git a/apps/frontend/app/admin/problem/_components/ExampleTextarea.tsx b/apps/frontend/app/admin/problem/_components/ExampleTextarea.tsx
index 303d676fa7..ad8ce4c0a6 100644
--- a/apps/frontend/app/admin/problem/_components/ExampleTextarea.tsx
+++ b/apps/frontend/app/admin/problem/_components/ExampleTextarea.tsx
@@ -10,7 +10,7 @@ interface ExampleTextareaProps {
   // TODO: any를 다른 type으로 대체
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   register: any
-  blockEdit: boolean
+  blockEdit?: boolean
 }
 export default function ExampleTextarea({
   onRemove,
diff --git a/apps/frontend/app/admin/problem/_components/LimitForm.tsx b/apps/frontend/app/admin/problem/_components/LimitForm.tsx
index 6c6c77e3dc..a0b5e6d2dd 100644
--- a/apps/frontend/app/admin/problem/_components/LimitForm.tsx
+++ b/apps/frontend/app/admin/problem/_components/LimitForm.tsx
@@ -4,7 +4,7 @@ import { useFormContext } from 'react-hook-form'
 import ErrorMessage from '../../_components/ErrorMessage'
 import { inputStyle } from '../../utils'
 
-export default function LimitForm({ blockEdit }: { blockEdit: boolean }) {
+export default function LimitForm({ blockEdit }: { blockEdit?: boolean }) {
   const {
     formState: { errors },
     register
diff --git a/apps/frontend/app/admin/problem/_components/TestcaseField.tsx b/apps/frontend/app/admin/problem/_components/TestcaseField.tsx
index b32639757e..762634aa22 100644
--- a/apps/frontend/app/admin/problem/_components/TestcaseField.tsx
+++ b/apps/frontend/app/admin/problem/_components/TestcaseField.tsx
@@ -18,7 +18,7 @@ import AddBadge from './AddBadge'
 import { CautionDialog } from './CautionDialog'
 import TestcaseItem from './TestcaseItem'
 
-export default function TestcaseField({ blockEdit }: { blockEdit: boolean }) {
+export default function TestcaseField({ blockEdit }: { blockEdit?: boolean }) {
   const {
     formState: { errors },
     getValues,
diff --git a/apps/frontend/app/admin/problem/_components/TestcaseItem.tsx b/apps/frontend/app/admin/problem/_components/TestcaseItem.tsx
index 54440d23f7..303eb63fec 100644
--- a/apps/frontend/app/admin/problem/_components/TestcaseItem.tsx
+++ b/apps/frontend/app/admin/problem/_components/TestcaseItem.tsx
@@ -9,7 +9,7 @@ import { isInvalid } from '../_libs/utils'
 import ExampleTextarea from './ExampleTextarea'
 
 interface TestcaseItemProps {
-  blockEdit: boolean
+  blockEdit?: boolean
   index: number
   itemError: FieldErrorsImpl | undefined
   onRemove: () => void
diff --git a/apps/frontend/app/admin/problem/page.tsx b/apps/frontend/app/admin/problem/page.tsx
index 3d6cda5c87..7f1434ca37 100644
--- a/apps/frontend/app/admin/problem/page.tsx
+++ b/apps/frontend/app/admin/problem/page.tsx
@@ -133,7 +133,7 @@ export default function Page({
             enableFilter={true}
             enableDelete={true}
             enablePagination={true}
-            defaultSortColumn={{ id: 'createTime', desc: true }}
+            defaultSortColumn={{ id: 'updateTime', desc: true }}
           />
         )}
       </div>
diff --git a/apps/frontend/graphql/problem/queries.ts b/apps/frontend/graphql/problem/queries.ts
index f9c2d17bb1..42ab44a8fe 100644
--- a/apps/frontend/graphql/problem/queries.ts
+++ b/apps/frontend/graphql/problem/queries.ts
@@ -16,6 +16,7 @@ const GET_PROBLEM = gql(`
       description
       inputDescription
       outputDescription
+      submissionCount
       testcase {
         id
         input

From d48902060b372b3434638e0c00119b06c7d34e4b Mon Sep 17 00:00:00 2001
From: b0xercat <seojin3154@naver.com>
Date: Thu, 19 Sep 2024 14:29:37 +0900
Subject: [PATCH 3/3] fix(fe): hand over only changed field in problem edit

---
 .../app/admin/problem/[id]/edit/page.tsx      | 60 ++++++++++++++++++-
 1 file changed, 58 insertions(+), 2 deletions(-)

diff --git a/apps/frontend/app/admin/problem/[id]/edit/page.tsx b/apps/frontend/app/admin/problem/[id]/edit/page.tsx
index 3b670e930b..709c6572e5 100644
--- a/apps/frontend/app/admin/problem/[id]/edit/page.tsx
+++ b/apps/frontend/app/admin/problem/[id]/edit/page.tsx
@@ -6,7 +6,12 @@ import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
 import { UPDATE_PROBLEM } from '@/graphql/problem/mutations'
 import { GET_PROBLEM } from '@/graphql/problem/queries'
 import { useMutation, useQuery } from '@apollo/client'
-import type { Template, Testcase, UpdateProblemInput } from '@generated/graphql'
+import type {
+  GetProblemQuery,
+  Template,
+  Testcase,
+  UpdateProblemInput
+} from '@generated/graphql'
 import { zodResolver } from '@hookform/resolvers/zod'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
@@ -49,6 +54,8 @@ export default function Page({ params }: { params: { id: string } }) {
   const [showSource, setShowSource] = useState<boolean>(false)
   const [isDialogOpen, setDialogOpen] = useState<boolean>(false)
   const [dialogDescription, setDialogDescription] = useState<string>('')
+  const [initialData, setInitialData] =
+    useState<GetProblemQuery['getProblem']>()
 
   useQuery(GET_PROBLEM, {
     variables: {
@@ -57,6 +64,7 @@ export default function Page({ params }: { params: { id: string } }) {
     },
     onCompleted: (problemData) => {
       const data = problemData.getProblem
+      setInitialData(data)
       setValue('id', +id)
       setValue('title', data.title)
       setValue('isVisible', data.isVisible)
@@ -104,9 +112,57 @@ export default function Page({ params }: { params: { id: string } }) {
     }
   })
 
+  // TODO: refactor after discussing schema ProblemWithIsVisible and UpdateProblemInput
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const getChangedFields = (initial: any, current: any) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const changedFields: any = {}
+
+    // Define a map of fields that need to be renamed for comparison
+    const fieldMapping: Record<string, string> = {
+      testcases: 'testcase'
+    }
+
+    for (const key in current) {
+      const mappedKey = fieldMapping[key] || key
+      if (JSON.stringify(current[key]) !== JSON.stringify(initial[mappedKey])) {
+        changedFields[key] = current[key]
+      }
+    }
+    return changedFields
+  }
+
   const [updateProblem, { error }] = useMutation(UPDATE_PROBLEM)
 
   const onSubmit = async (input: UpdateProblemInput) => {
+    // TODO: need to check tags and templates from input
+    const currentValues = getValues()
+    const changedFields = getChangedFields(initialData, currentValues)
+
+    // remove id and __typename from testcases
+    if (changedFields.testcases) {
+      changedFields.testcases = changedFields.testcases.map(
+        ({
+          id,
+          __typename,
+          ...rest
+        }: {
+          id: number
+          __typename: string
+          input: string
+          output: string
+          isHidden: boolean
+          scoreWeight: number
+        }) => {
+          void id
+          void __typename
+          return rest
+        }
+      )
+    }
+
+    changedFields['id'] = Number(id)
+
     const testcases = getValues('testcases') as Testcase[]
     if (validateScoreWeight(testcases) === false) {
       setDialogDescription(
@@ -127,7 +183,7 @@ export default function Page({ params }: { params: { id: string } }) {
     await updateProblem({
       variables: {
         groupId: 1,
-        input
+        input: changedFields
       }
     })
     if (error) {