diff --git a/apps/web/app/App.tsx b/apps/web/app/App.tsx index c63e50077..ac24cb91b 100644 --- a/apps/web/app/App.tsx +++ b/apps/web/app/App.tsx @@ -1,25 +1,3 @@ -'use client' - -import { AppShell, Header } from '@egodb/ui' -import { EGOTable } from '@egodb/table-ui' -import { CreateTableFormDrawer } from '../components/create-table-form' -import { TableNavList } from '../components/tables-list-nav/table-list-nav' - export default function App() { - return ( - <> - } - header={ -
- {/* Header content */} -
- } - > - - - - - ) + return <>{null} } diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx index 1e5ead616..8d3efc94e 100644 --- a/apps/web/app/layout.tsx +++ b/apps/web/app/layout.tsx @@ -1,3 +1,7 @@ +'use client' +import { Aside, Box } from '@egodb/ui' +import { CreateTableFormDrawer } from '../components/create-table-form' +import { TableNavList } from '../components/tables-list-nav/table-list-nav' import RootStyleRegistry from './emotion' import Trpc from './trpc' @@ -7,7 +11,13 @@ export default function RootLayout({ children }: { children: React.ReactNode }) - {children} + + + + + + + diff --git a/apps/web/app/table/[id]/page.tsx b/apps/web/app/table/[id]/page.tsx new file mode 100644 index 000000000..4a4159fb4 --- /dev/null +++ b/apps/web/app/table/[id]/page.tsx @@ -0,0 +1,29 @@ +'use client' + +import { Alert, Container, IconAlertCircle } from '@egodb/ui' +import { trpc } from '../../../trpc' +import Table from './table' + +export default function Page({ params: { id } }: { params: { id: string } }) { + const getTable = trpc.table.get.useQuery({ id }) + + if (getTable.isLoading) { + return 'loading' + } + + if (getTable.isError) { + return ( + + } title="Oops! Get Table Error!" mt="lg" color="red"> + {getTable.error.message} + + + ) + } + + if (!getTable.data) { + return 'none' + } + + return +} diff --git a/apps/web/app/table/[id]/table.tsx b/apps/web/app/table/[id]/table.tsx new file mode 100644 index 000000000..f914a64e4 --- /dev/null +++ b/apps/web/app/table/[id]/table.tsx @@ -0,0 +1,18 @@ +'use client' + +import type { IGetTableOutput } from '@egodb/core' +import { EGOTable } from '@egodb/table-ui' +import { Box, Title } from '@egodb/ui' + +interface IProps { + table: NonNullable +} + +export default function Table({ table }: IProps) { + return ( + + {table.name} + + + ) +} diff --git a/apps/web/components/create-table-form/create-table-form.tsx b/apps/web/components/create-table-form/create-table-form.tsx index 43c6fddcf..a5292e400 100644 --- a/apps/web/components/create-table-form/create-table-form.tsx +++ b/apps/web/components/create-table-form/create-table-form.tsx @@ -1,4 +1,5 @@ import { Alert, Button, Divider, Group, IconAlertCircle, Text, Space, TextInput } from '@egodb/ui' +import { useRouter } from 'next/navigation' import { trpc } from '../../trpc' import { CreateTableAddColumnButton } from './create-table-add-field-button' import { useCreateTableFormContext } from './create-table-form-context' @@ -12,11 +13,13 @@ interface IProps { export const CreateTableForm: React.FC = ({ onCancel, onSuccess }) => { const form = useCreateTableFormContext() const utils = trpc.useContext() + const router = useRouter() const createTable = trpc.table.create.useMutation({ - onSuccess: () => { + onSuccess: (data) => { reset() utils.table.list.refetch() + router.push(`table/${data.id}`) onSuccess?.() }, }) diff --git a/apps/web/components/tables-list-nav/table-list-nav.tsx b/apps/web/components/tables-list-nav/table-list-nav.tsx index 66563ebc7..355af373d 100644 --- a/apps/web/components/tables-list-nav/table-list-nav.tsx +++ b/apps/web/components/tables-list-nav/table-list-nav.tsx @@ -1,4 +1,4 @@ -import { Navbar, Box, Skeleton, NavLink, Center, Button, IconPlus } from '@egodb/ui' +import { Navbar, Box, Skeleton, NavLink, Center, Button, IconPlus, ScrollArea } from '@egodb/ui' import { useAtom } from 'jotai' import { trpc } from '../../trpc' import { createTableFormDrawerOpened } from '../create-table-form/drawer-opened.atom' @@ -8,8 +8,8 @@ export const TableNavList: React.FC = () => { const getTables = trpc.table.list.useQuery({}) return ( - - + + {getTables.isLoading && ( <> diff --git a/packages/core/column/column.schema.ts b/packages/core/column/column.schema.ts index 67c4e6683..7da804725 100644 --- a/packages/core/column/column.schema.ts +++ b/packages/core/column/column.schema.ts @@ -7,6 +7,7 @@ export const createColumnSchema = z.discriminatedUnion('type', [createTextColumn export type ICreateColumnSchema = z.infer export const queryColumnSchema = z.discriminatedUnion('type', [textColumnQuerySchema, numberColumnQuerySchema]) +export type IQueryColumnSchema = z.infer export const queryColumnsSchema = z.array(queryColumnSchema) export type IQueryColumnsSchema = z.infer diff --git a/packages/core/column/value-objects/column-name.vo.ts b/packages/core/column/value-objects/column-name.vo.ts index 03f3b96c3..1a1e67929 100644 --- a/packages/core/column/value-objects/column-name.vo.ts +++ b/packages/core/column/value-objects/column-name.vo.ts @@ -1,7 +1,7 @@ import { ValueObject } from '@egodb/domain' import * as z from 'zod' -export const columnNameSchema = z.string().min(2).max(20) +export const columnNameSchema = z.string().trim().min(2).max(20) export class ColumnName extends ValueObject { private constructor(value: string) { diff --git a/packages/core/commands/create-table/create-table.command.handler.ts b/packages/core/commands/create-table/create-table.command.handler.ts index bc5c52132..f5d002f99 100644 --- a/packages/core/commands/create-table/create-table.command.handler.ts +++ b/packages/core/commands/create-table/create-table.command.handler.ts @@ -12,5 +12,7 @@ export class CreateTableCommandHandler implements ICreateTableCommandHandler { async execute(command: CreateTableCommand): Promise { const table = Table.create(command) await this.repo.insert(table) + + return { id: table.id.value } } } diff --git a/packages/core/commands/create-table/create-table.command.output.ts b/packages/core/commands/create-table/create-table.command.output.ts index 15d30fd63..b82cc0d49 100644 --- a/packages/core/commands/create-table/create-table.command.output.ts +++ b/packages/core/commands/create-table/create-table.command.output.ts @@ -1,3 +1,6 @@ import * as z from 'zod' +import { tableIdSchema } from '../../value-objects' -export const createTableCommandOutput = z.void() +export const createTableCommandOutput = z.object({ + id: tableIdSchema, +}) diff --git a/packages/core/queries/get-table/get-table.query.handler.ts b/packages/core/queries/get-table/get-table.query.handler.ts index 3bc5c2ebf..846fb9efe 100644 --- a/packages/core/queries/get-table/get-table.query.handler.ts +++ b/packages/core/queries/get-table/get-table.query.handler.ts @@ -7,8 +7,8 @@ export class GetTableQueryHandler implements IQueryHandler { - const table = (await this.rm.findOneById(query.id)).unwrap() + const table = (await this.rm.findOneById(query.id)).into(undefined) - return { id: table.id, name: table.name, columns: table.columns } + return table && { id: table.id, name: table.name, columns: table.columns } } } diff --git a/packages/core/queries/get-table/get-table.query.output.ts b/packages/core/queries/get-table/get-table.query.output.ts index 93345e63d..3128046d8 100644 --- a/packages/core/queries/get-table/get-table.query.output.ts +++ b/packages/core/queries/get-table/get-table.query.output.ts @@ -1,8 +1,10 @@ import * as z from 'zod' import { queryColumnsSchema } from '../../column' -export const getTableQueryOutput = z.object({ - id: z.string(), - name: z.string(), - columns: queryColumnsSchema, -}) +export const getTableQueryOutput = z + .object({ + id: z.string(), + name: z.string(), + columns: queryColumnsSchema, + }) + .optional() diff --git a/packages/core/queries/get-tables/get-tables.query.output.ts b/packages/core/queries/get-tables/get-tables.query.output.ts index 47301970d..b38413e28 100644 --- a/packages/core/queries/get-tables/get-tables.query.output.ts +++ b/packages/core/queries/get-tables/get-tables.query.output.ts @@ -1,4 +1,4 @@ import * as z from 'zod' import { getTableQueryOutput } from '../get-table/get-table.query.output' -export const getTablesQueryOutput = z.array(getTableQueryOutput) +export const getTablesQueryOutput = z.array(getTableQueryOutput.unwrap()) diff --git a/packages/core/specifications/table-id.specifaction.ts b/packages/core/specifications/table-id.specifaction.ts index 61e26d1f1..108cf6b3b 100644 --- a/packages/core/specifications/table-id.specifaction.ts +++ b/packages/core/specifications/table-id.specifaction.ts @@ -2,7 +2,7 @@ import { CompositeSpecification } from '@egodb/domain' import type { Result } from 'oxide.ts' import { Ok } from 'oxide.ts' import type { Table } from '../table' -import type { TableId } from '../value-objects' +import { TableId } from '../value-objects' import type { ITableSpecVisitor } from './interface' export class WithTableId extends CompositeSpecification { @@ -24,3 +24,5 @@ export class WithTableId extends CompositeSpecification { return Ok(undefined) } } + +export const WithTableIdS = (id: string) => new WithTableId(TableId.from(id)) diff --git a/packages/core/value-objects/table-name.vo.ts b/packages/core/value-objects/table-name.vo.ts index 5fec2f100..b23625c4b 100644 --- a/packages/core/value-objects/table-name.vo.ts +++ b/packages/core/value-objects/table-name.vo.ts @@ -1,7 +1,7 @@ import { ValueObject } from '@egodb/domain' import * as z from 'zod' -export const tableNameSchema = z.string().min(2).max(20) +export const tableNameSchema = z.string().trim().min(2).max(20) export class TableName extends ValueObject { private constructor(name: string) { diff --git a/packages/table-ui/index.tsx b/packages/table-ui/index.tsx index a43f9ce91..7daa51737 100644 --- a/packages/table-ui/index.tsx +++ b/packages/table-ui/index.tsx @@ -1,81 +1,20 @@ +import type { IGetTableOutput } from '@egodb/core' import { Table } from '@egodb/ui' import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table' -import { useReducer, useState } from 'react' +import { useReducer } from 'react' -type Person = { - firstName: string - lastName: string - age: number - visits: number - status: string - progress: number +interface IProps { + table: NonNullable } -const defaultData: Person[] = [ - { - firstName: 'tanner', - lastName: 'linsley', - age: 24, - visits: 100, - status: 'In Relationship', - progress: 50, - }, - { - firstName: 'tandy', - lastName: 'miller', - age: 40, - visits: 40, - status: 'Single', - progress: 80, - }, - { - firstName: 'joe', - lastName: 'dirte', - age: 45, - visits: 20, - status: 'Complicated', - progress: 10, - }, -] - -const columnHelper = createColumnHelper() - -const columns = [ - columnHelper.accessor('firstName', { - cell: (info) => info.getValue(), - footer: (info) => info.column.id, - }), - columnHelper.accessor((row) => row.lastName, { - id: 'lastName', - cell: (info) => {info.getValue()}, - header: () => Last Name, - footer: (info) => info.column.id, - }), - columnHelper.accessor('age', { - header: () => 'Age', - cell: (info) => info.renderValue(), - footer: (info) => info.column.id, - }), - columnHelper.accessor('visits', { - header: () => Visits, - footer: (info) => info.column.id, - }), - columnHelper.accessor('status', { - header: 'Status', - footer: (info) => info.column.id, - }), - columnHelper.accessor('progress', { - header: 'Profile Progress', - footer: (info) => info.column.id, - }), -] - -export const EGOTable = () => { - const [data] = useState(() => [...defaultData]) +export const EGOTable: React.FC = ({ table }) => { const rerender = useReducer(() => ({}), {})[1] + // TODO: helper types should infered by type + const columnHelper = createColumnHelper>() + const columns = table.columns.map((c) => columnHelper.accessor(c.name, { id: c.id })) - const table = useReactTable({ - data, + const rt = useReactTable({ + data: [], columns, getCoreRowModel: getCoreRowModel(), }) @@ -84,7 +23,7 @@ export const EGOTable = () => {
- {table.getHeaderGroups().map((headerGroup) => ( + {rt.getHeaderGroups().map((headerGroup) => ( {headerGroup.headers.map((header) => ( ))} - - {table.getRowModel().rows.map((row) => ( + {/* + {rt.getRowModel().rows.map((row) => ( {row.getVisibleCells().map((cell) => ( @@ -104,7 +43,7 @@ export const EGOTable = () => { ))} - {table.getFooterGroups().map((footerGroup) => ( + {rt.getFooterGroups().map((footerGroup) => ( {footerGroup.headers.map((header) => ( ))} - + */}
@@ -94,8 +33,8 @@ export const EGOTable = () => {
{flexRender(cell.column.columnDef.cell, cell.getContext())}
@@ -113,7 +52,7 @@ export const EGOTable = () => { ))}