Revert "make form input work with number and string"

This reverts commit 2294d0c0b0.

src/app/lib/update.ts

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

src/app/publication/columns.tsx

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

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 InputCell from "app/ui/tables/inputs/input"
+import NumberInputCell from "app/ui/tables/inputs/numberInput"
 import { formSchema } from "app/ui/forms/story"
 
 const columnHelper = createColumnHelper<StoryWithGenres>()
@@ -27,7 +27,7 @@ export const columns: ColumnDef<StoryWithGenres>[] = [
         </Button>
       )
     },
-    cell: InputCell,
+    cell: TextInputCell,
     meta: { formSchema }
 
   },
@@ -45,7 +45,7 @@ export const columns: ColumnDef<StoryWithGenres>[] = [
       )
     },
     enableColumnFilter: false,
-    cell: InputCell,
+    cell: NumberInputCell,
     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"
 
-export const formSchema = z.object({
+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/inputContainer.tsx

@@ -0,0 +1,20 @@
+"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/numberInput.tsx

@@ -3,19 +3,23 @@ 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 InputCell(props: CellContext<any, any>) {
+export default function NumberInputCell(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>>({
@@ -25,10 +29,6 @@ export default function InputCell(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,10 +41,11 @@ export default function InputCell(props: CellContext<any, any>) {
     updateField({
       id,
       table,
-      [type]: value[column],
+      number: value[column],
       column,
       pathname
     })
+    setIsActive(false)
   }
 
   function onErrors(errors) {
@@ -83,7 +84,7 @@ export default function InputCell(props: CellContext<any, any>) {
                   <FormControl
                   >
                     <Input
-                      type={type}
+                      type="number"
                       autoFocus={true}
                       step={props.column.columnDef.meta.step}
                       {...field}

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

@@ -0,0 +1,54 @@
+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>
+  )
+}