make form input work with number and string

src/app/lib/update.ts

@@ -6,11 +6,11 @@ import { revalidatePath } from "next/cache"
 import { redirect } from "next/navigation"
 
 
-export async function updateField({ text, number, table, column, id, pathname }: { text?: string, number?: number, table: string, column: string, id: number, pathname: string }) {
+export async function updateField({ string: string, number, table, column, id, pathname }: { string?: string, number?: number, table: string, column: string, id: number, pathname: string }) {
 	const res = await prisma[table].update({
 		where: { id },
 		data: {
-			[column]: text ?? number
+			[column]: string ?? number
 		}
 	})
 	console.log(`updated record in ${table}: ${JSON.stringify(res)}`)

src/app/publication/columns.tsx

@@ -17,10 +17,9 @@ import Link from "next/link"
 import { PubsWithGenres } from "./page"
 import { DialogClose } from "@radix-ui/react-dialog"
 import { actions } from "app/ui/tables/actions"
-import { TextInputCell } from "app/ui/tables/inputs/textInput"
 import { selectCol } from "app/ui/tables/selectColumn"
-import NumberInputCell from "app/ui/tables/inputs/numberInput"
-
+import InputCell from "app/ui/tables/inputs/input"
+import { formSchema } from "app/ui/forms/pub"
 
 const columnHelper = createColumnHelper<PubsWithGenres>()
 
@@ -39,14 +38,16 @@ export const columns: ColumnDef<PubsWithGenres>[] = [
         </Button>
       )
     },
-    cell: TextInputCell
+    cell: InputCell,
+    meta: { formSchema }
 
   },
 
   {
     accessorKey: "link",
     header: "Link",
-    cell: TextInputCell
+    cell: InputCell,
+    meta: { formSchema }
   },
 
   columnHelper.accessor("genres", {
@@ -65,7 +66,7 @@ export const columns: ColumnDef<PubsWithGenres>[] = [
     meta: {
       step: 10
     },
-    cell: NumberInputCell
+    cell: InputCell
   },
 
 

src/app/story/columns.tsx

@@ -7,7 +7,7 @@ import GenreBadges from "app/ui/genreBadges"
 import { actions } from "app/ui/tables/actions"
 import { TextInputCell } from "app/ui/tables/inputs/textInput"
 import { selectCol } from "app/ui/tables/selectColumn"
-import NumberInputCell from "app/ui/tables/inputs/numberInput"
+import InputCell from "app/ui/tables/inputs/input"
 import { formSchema } from "app/ui/forms/story"
 
 const columnHelper = createColumnHelper<StoryWithGenres>()
@@ -27,7 +27,7 @@ export const columns: ColumnDef<StoryWithGenres>[] = [
         </Button>
       )
     },
-    cell: TextInputCell,
+    cell: InputCell,
     meta: { formSchema }
 
   },
@@ -45,7 +45,7 @@ export const columns: ColumnDef<StoryWithGenres>[] = [
       )
     },
     enableColumnFilter: false,
-    cell: NumberInputCell,
+    cell: InputCell,
     meta: {
       step: 50,
       formSchema

src/app/ui/forms/pub.tsx

@@ -27,7 +27,7 @@ import { ComponentProps } from "react"
 import { Genre } from "@prisma/client"
 import GenrePicker from "./genrePicker"
 
-const formSchema = z.object({
+export const formSchema = z.object({
 	title: z.string().min(2).max(50),
 	link: z.string(),
 	query_after_days: z.coerce.number().min(30),

src/app/ui/tables/inputs/input.tsx

@@ -3,23 +3,19 @@ import { Input } from "@/components/ui/input";
 import { CellContext } from "@tanstack/react-table";
 import { updateField } from "app/lib/update";
 import { useState } from "react";
-import { TableInputContainer } from "./inputContainer";
 import { z } from "zod";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { toast } from "@/components/ui/use-toast";
 import { Form, FormControl, FormField, FormItem, FormMessage } from "@/components/ui/form";
-import { Button } from "@/components/ui/button";
-import { useFormState } from "react-dom";
 
-export default function NumberInputCell(props: CellContext<any, any>) {
+export default function InputCell(props: CellContext<any, any>) {
   const [isActive, setIsActive] = useState(false)
 
   const table = props.table.options.meta.tableName
   const id = props.row.original.id
   const column = props.column.id
   const pathname = props.table.options.meta.pathname
-  const value = props.cell.getValue()
   const formSchema = props.column.columnDef.meta.formSchema.pick({ [column]: true })
 
   const form = useForm<z.infer<typeof formSchema>>({
@@ -29,6 +25,10 @@ export default function NumberInputCell(props: CellContext<any, any>) {
     },
   })
 
+  const type = typeof props.cell.getValue()
+  console.log(type)
+
+
   function onSubmit(value: z.infer<typeof formSchema>) {
     toast({
       title: "You submitted the following values:",
@@ -41,11 +41,10 @@ export default function NumberInputCell(props: CellContext<any, any>) {
     updateField({
       id,
       table,
-      number: value[column],
+      [type]: value[column],
       column,
       pathname
     })
-    setIsActive(false)
   }
 
   function onErrors(errors) {
@@ -84,7 +83,7 @@ export default function NumberInputCell(props: CellContext<any, any>) {
                   <FormControl
                   >
                     <Input
-                      type="number"
+                      type={type}
                       autoFocus={true}
                       step={props.column.columnDef.meta.step}
                       {...field}

src/app/ui/tables/inputs/inputContainer.tsx

@@ -1,20 +0,0 @@
-"use client"
-
-import { ComponentProps, Dispatch, SetStateAction } from "react"
-
-export function TableInputContainer({ isActive, setIsActive, children }: ComponentProps<"div"> & { isActive: boolean, setIsActive: Dispatch<SetStateAction<boolean>> }) {
-  return (
-    <div
-      onDoubleClick={() => setIsActive(prev => !prev)}
-      className="w-full h-fit flex items-center justify-center"
-      tabIndex={0}
-      onKeyDown={e => {
-        if (e.code === "Enter" && !isActive) {
-          setIsActive(true)
-        }
-      }}
-    >
-      {children}
-    </div>
-  )
-}

src/app/ui/tables/inputs/textInput.tsx

@@ -1,54 +0,0 @@
-import { Cell, CellContext, Table } from "@tanstack/react-table"
-import { useState, useEffect } from "react"
-import { Input } from "@/components/ui/input"
-import { Button } from "@/components/ui/button"
-import { Check, CircleX } from "lucide-react"
-import { updateField } from "app/lib/update"
-import { TableInputContainer } from "./inputContainer"
-
-export const TextInputCell = (props: CellContext<any, any>) => {
-  let initialValue = props.getValue()
-  const [value, setValue] = useState(initialValue)
-  const [isActive, setIsActive] = useState(false)
-
-  const table = props.table.options.meta.tableName
-  const id = props.row.original.id
-  const column = props.column.id
-  const pathname = props.table.options.meta.pathname
-
-  function handleConfirm() {
-    if (value === initialValue) {
-      setIsActive(false)
-      return
-    }
-    updateField({
-      id,
-      table,
-      text: value,
-      column,
-      pathname
-    })
-    initialValue = value
-    setIsActive(false)
-  }
-  function handleExit() {
-    setValue(initialValue)
-    setIsActive(false)
-  }
-
-  return (
-    <TableInputContainer isActive={isActive} setIsActive={setIsActive}>
-      {isActive ?
-        <Input
-          value={value}
-          onChange={e => setValue(e.target.value)}
-          autoFocus={true}
-          onBlur={handleExit}
-          onKeyDown={e => { if (e.code === "Enter") { handleConfirm() } }}
-          className="w-full"
-        />
-        : <p>{value}</p>
-      }
-    </TableInputContainer>
-  )
-}