fix(fe): unpack contest config (#1614)

* fix(fe): unpack contest config * fix(deps): revert cmdk to v0.2.1 * fix(fe): add default value
skkuding · Mar 26, 2024 · 5d9c5a7 · 5d9c5a7
1 parent 926367c
commit 5d9c5a7
Show file tree

Hide file tree

Showing 6 changed files with 238 additions and 50 deletions.
diff --git a/apps/frontend/app/admin/contest/[id]/page.tsx b/apps/frontend/app/admin/contest/[id]/page.tsx
@@ -40,7 +40,8 @@ const UPDATE_CONTEST = gql(`
   mutation UpdateContest($groupId: Int!, $input: UpdateContestInput!) {
     updateContest(groupId: $groupId, input: $input) {
       id
-      config
+      isRankVisible
+      isVisible
       description
       endTime
       startTime
@@ -121,10 +122,8 @@ const inputStyle =
 const schema = z.object({
   id: z.number(),
   title: z.string().min(1).max(100),
-  config: z.object({
-    isRankVisible: z.boolean(),
-    isVisible: z.boolean()
-  }),
+  isRankVisible: z.boolean(),
+  isVisible: z.boolean(),
   description: z.string().min(1),
   startTime: z.date(),
   endTime: z.date()
@@ -155,10 +154,8 @@ export default function Page({ params }: { params: { id: string } }) {
   } = useForm<UpdateContestInput>({
     resolver: zodResolver(schema),
     defaultValues: {
-      config: {
-        isRankVisible: true,
-        isVisible: true
-      }
+      isRankVisible: true,
+      isVisible: true
     }
   })
 
@@ -349,7 +346,7 @@ export default function Page({ params }: { params: { id: string } }) {
               {errors.title && (
                 <div className="flex items-center gap-1 text-xs text-red-500">
                   <PiWarningBold />
-                  {getValues('title').length === 0
+                  {getValues('title')?.length === 0
                     ? 'required'
                     : errors.title?.message}
                 </div>
@@ -405,7 +402,7 @@ export default function Page({ params }: { params: { id: string } }) {
                   <TextEditor
                     placeholder="Enter a description..."
                     onChange={field.onChange}
-                    defaultValue={field.value}
+                    defaultValue={field.value ?? ''}
                   />
                 )}
                 name="description"

diff --git a/apps/frontend/app/admin/contest/_components/Columns.tsx b/apps/frontend/app/admin/contest/_components/Columns.tsx
@@ -24,17 +24,16 @@ interface DataTableContest {
   endTime: string
   description: string
   participants: number
-  config: {
-    isVisible: boolean
-    isRankVisible: boolean
-  }
+  isVisible: boolean
+  isRankVisible: boolean
 }
 
 const EDIT_VISIBLE = gql(`
   mutation UpdateContestVisible($groupId: Int!, $input: UpdateContestInput!) {
     updateContest(groupId: $groupId, input: $input) {
       id
-      config
+      isVisible
+      isRankVisible
     }
   }
 `)
@@ -46,7 +45,7 @@ function VisibleCell({ row }: { row: Row<DataTableContest> }) {
     <div className="flex space-x-2">
       <Switch
         id="hidden-mode"
-        checked={row.original.config.isVisible}
+        checked={row.original.isVisible}
         onCheckedChange={() => {
           const currentTime = dateFormatter(new Date(), 'YYYY-MM-DD HH:mm:ss')
           const startTime = dateFormatter(
@@ -61,10 +60,6 @@ function VisibleCell({ row }: { row: Row<DataTableContest> }) {
             toast.error('Cannot change visibility of ongoing contest')
             return
           }
-          row.original.config = {
-            ...row.original.config,
-            isVisible: !row.original.config.isVisible
-          }
           // TODO: contest update API 수정되면 고치기
           updateVisible({
             variables: {
@@ -75,10 +70,8 @@ function VisibleCell({ row }: { row: Row<DataTableContest> }) {
                 startTime: row.original.startTime,
                 endTime: row.original.endTime,
                 description: row.original.description,
-                config: {
-                  isVisible: row.original.config.isVisible,
-                  isRankVisible: row.original.config.isRankVisible
-                }
+                isVisible: !row.original.isVisible,
+                isRankVisible: row.original.isRankVisible
               }
             }
           })
@@ -90,7 +83,7 @@ function VisibleCell({ row }: { row: Row<DataTableContest> }) {
             <Tooltip>
               <TooltipTrigger asChild>
                 <button>
-                  {row.original.config.isVisible ? (
+                  {row.original.isVisible ? (
                     <FiEye className="text-primary h-[14px] w-[14px]" />
                   ) : (
                     <FiEyeOff className="h-[14px] w-[14px] text-gray-400" />
@@ -99,22 +92,20 @@ function VisibleCell({ row }: { row: Row<DataTableContest> }) {
               </TooltipTrigger>
               <TooltipContent
                 className={cn(
-                  row.original.config.isVisible ? 'bg-primary' : 'bg-black'
+                  row.original.isVisible ? 'bg-primary' : 'bg-black'
                 )}
                 align="end"
                 alignOffset={-20}
               >
-                {row.original.config.isVisible ? (
+                {row.original.isVisible ? (
                   <p>This contest is visible</p>
                 ) : (
                   <p>This contest is not visible to users</p>
                 )}
                 <TooltipPrimitive.Arrow
                   className={cn(
                     'fill-current',
-                    row.original.config.isVisible
-                      ? 'text-primary'
-                      : 'text-black'
+                    row.original.isVisible ? 'text-primary' : 'text-black'
                   )}
                 />
               </TooltipContent>
@@ -189,7 +180,7 @@ export const columns: ColumnDef<DataTableContest>[] = [
     )
   },
   {
-    accessorKey: 'config.isVisible',
+    accessorKey: 'isVisible',
     header: ({ column }) => (
       <DataTableColumnHeader column={column} title="Visible" />
     ),

diff --git a/apps/frontend/app/admin/contest/create/page.tsx b/apps/frontend/app/admin/contest/create/page.tsx
@@ -34,7 +34,8 @@ const CREATE_CONTEST = gql(`
   mutation CreateContest($groupId: Int!, $input: CreateContestInput!) {
     createContest(groupId: $groupId, input: $input) {
       id
-      config
+      isVisible
+      isRankVisible
       description
       endTime
       startTime
@@ -84,10 +85,8 @@ const inputStyle =
 
 const schema = z.object({
   title: z.string().min(1).max(100),
-  config: z.object({
-    isRankVisible: z.boolean().optional(),
-    isVisible: z.boolean().optional()
-  }),
+  isRankVisible: z.boolean().optional(),
+  isVisible: z.boolean().optional(),
   description: z.string().min(1),
   startTime: z.date(),
   endTime: z.date()
@@ -116,10 +115,8 @@ export default function Page() {
   } = useForm<CreateContestInput>({
     resolver: zodResolver(schema),
     defaultValues: {
-      config: {
-        isRankVisible: true,
-        isVisible: true
-      }
+      isRankVisible: true,
+      isVisible: true
     }
   })
 

diff --git a/apps/frontend/app/admin/contest/page.tsx b/apps/frontend/app/admin/contest/page.tsx
@@ -29,7 +29,8 @@ const GET_CONTESTS = gql(`
       endTime
       description
       participants
-      config
+      isRankVisible
+      isVisible
     }
   }
 `)

diff --git a/apps/frontend/package.json b/apps/frontend/package.json
@@ -53,7 +53,7 @@
     "@uiw/codemirror-themes": "^4.21.25",
     "@uiw/react-codemirror": "^4.21.25",
     "apollo-upload-client": "^18.0.1",
-    "cmdk": "^1.0.0",
+    "cmdk": "^0.2.1",
     "date-fns": "^3.6.0",
     "dayjs": "^1.11.10",
     "dotenv": "^16.4.5",