Skip to content

Commit 76d1ca9

Browse files
ValeryVerkhoturovValeryVerkhoturov
committed
fix: hydration error, nextConfig absence, React key error
1 parent de87ac2 commit 76d1ca9

File tree

12 files changed

+57
-46
lines changed

12 files changed

+57
-46
lines changed

‎.env.example

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,2 @@
11
OPENAI_API_KEY = ""
2-
UPSTASH_REDIS_REST_URL=""
3-
UPSTASH_REDIS_REST_TOKEN=""
42
NEXT_PUBLIC_APP_URL="http://localhost:3000"

‎next.config.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/** @type {import('next').NextConfig} */
2+
const nextConfig = {}
3+
4+
module.exports = nextConfig

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
"eventsource-parser": "^1.0.0",
3131
"jotai": "^2.1.0",
3232
"lucide-react": "^0.216.0",
33-
"next": "13.4.2",
33+
"next": "^13.4.5",
3434
"next-themes": "^0.2.1",
3535
"openai": "^3.2.1",
3636
"react": "18.2.0",

‎src/app/layout.tsx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import React from "react";
12
import Providers from '@/components/providers';
23
import '../styles/globals.css';
34
import { Inter } from 'next/font/google';
@@ -7,6 +8,7 @@ import { Metadata } from 'next';
78
const inter = Inter({ subsets: ['latin'] });
89

910
export const metadata: Metadata = {
11+
metadataBase: new URL(process.env.NEXT_PUBLIC_APP_URL ?? ''),
1012
title: 'Postgres AI Playground',
1113
description:
1214
'Postgres playground where you can connect to your database and use AI to generate SQL queries',
@@ -45,11 +47,11 @@ export default function RootLayout({
4547
}) {
4648
return (
4749
<html lang="en" suppressHydrationWarning>
48-
<Providers>
49-
<body className={cn(inter.className, 'bg-app text-gray-base')}>
50+
<body className={cn(inter.className, 'bg-app text-gray-base')}>
51+
<Providers>
5052
{children}
51-
</body>
52-
</Providers>
53+
</Providers>
54+
</body>
5355
</html>
5456
);
5557
}

‎src/app/page.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { Panels } from '@/components/panels';
2-
import { Toolbar } from '@/components/toolbar';
1+
import {Panels} from '@/components/panels';
2+
import {Toolbar} from '@/components/toolbar';
33

44
export default function Home() {
55
return (

‎src/components/object.tsx

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,15 @@ import {
44
AccordionItem,
55
AccordionTrigger,
66
} from './shared/accordion';
7-
import { Icon } from './shared/icon';
7+
import {Icon, type IconProps} from './shared/icon';
88

9-
// @ts-ignore
10-
export const Object = ({ name, data }) => {
9+
type ObjectPropName = IconProps['name']
10+
11+
interface ObjectProps {
12+
name: ObjectPropName
13+
data: any
14+
}
15+
export const Object = ({ name, data }: ObjectProps) => {
1116
return (
1217
<Accordion className="text-sm" type="multiple">
1318
<AccordionItem value={name}>
@@ -17,8 +22,7 @@ export const Object = ({ name, data }) => {
1722
</AccordionTrigger>
1823
<AccordionContent className="ml-3">
1924
{
20-
// @ts-ignore
21-
data.map((item) => (
25+
data.map((item: any) => (
2226
<Accordion key={item.table_name} type="multiple">
2327
<AccordionItem value={item.table_name}>
2428
<AccordionTrigger className="my-1.5">
@@ -36,16 +40,14 @@ export const Object = ({ name, data }) => {
3640
<AccordionContent className="ml-12">
3741
<div className="mb-3 space-y-4">
3842
{
39-
// @ts-ignore
40-
item.columns.map((column) => (
43+
item.columns.map((column: any) => (
4144
<div
4245
key={column.column_name}
4346
className="flex items-center space-x-3"
4447
>
4548
<span className="flex-1">
4649
{column.column_name}
4750
</span>
48-
4951
<span className="text-xs inline-flex items-center whitespace-nowrap rounded-full bg-element px-2.5 py-0.5">
5052
{column.data_type}
5153
</span>
@@ -55,7 +57,6 @@ export const Object = ({ name, data }) => {
5557
</div>
5658
</AccordionContent>
5759
</AccordionItem>
58-
5960
<AccordionItem value="indexes">
6061
<AccordionTrigger className="mb-3 ml-6">
6162
Indexes{' '}
@@ -66,14 +67,13 @@ export const Object = ({ name, data }) => {
6667
<AccordionContent className="ml-12">
6768
<div className="mb-3 space-y-3">
6869
{
69-
// @ts-ignore
70-
item.indexes.map((index) => (
70+
item.indexes.map((databaseIndex: any) => (
7171
<div
72-
key={index.index_name}
72+
key={databaseIndex.indexname}
7373
className="flex space-x-3"
7474
>
7575
<span className="flex-1">
76-
{index.indexname}
76+
{databaseIndex.indexname}
7777
</span>
7878
</div>
7979
))

‎src/components/providers.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { Toaster } from 'react-hot-toast';
44
import { Analytics } from '@vercel/analytics/react';
55
import { QueryClientProvider } from '@tanstack/react-query';
66
import { queryClient } from '@/lib/query-client';
7+
import React from "react";
78

89
type ProvidersProps = {
910
children: React.ReactNode;

‎src/components/shared/icon.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -161,7 +161,7 @@ const icons: Record<keyof typeof IconsList, IconType> = {
161161
Sparkles: Sparkles,
162162
};
163163

164-
interface IconProps {
164+
export interface IconProps {
165165
name: keyof typeof icons;
166166
className?: string;
167167
}

‎src/components/sidebar.tsx

Lines changed: 15 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,10 @@
1-
import {
2-
connectionStringAtom,
3-
editorSchemaAtom,
4-
hasConfiguredDatabaseAtom,
5-
} from '@/utils/atoms';
6-
import { connect } from '@/utils/connect';
7-
import { useQuery } from '@tanstack/react-query';
8-
import { useAtom } from 'jotai';
1+
import {connectionStringAtom, editorSchemaAtom, hasConfiguredDatabaseAtom,} from '@/utils/atoms';
2+
import {connect} from '@/utils/connect';
3+
import {useQuery} from '@tanstack/react-query';
4+
import {useAtom} from 'jotai';
95
import React from 'react';
10-
import { toast } from 'react-hot-toast';
11-
import { Object } from './object';
6+
import {toast} from 'react-hot-toast';
7+
import {Object} from './object';
128

139
export const Sidebar = () => {
1410
const [connectionString] = useAtom(connectionStringAtom);
@@ -18,11 +14,13 @@ export const Sidebar = () => {
1814
const { data, isLoading } = useQuery(
1915
['schema'],
2016
async () => {
21-
const res = await connect({
22-
// @ts-ignore
23-
connectionString: connectionString,
24-
});
25-
return res;
17+
if (connectionString) {
18+
return await connect({
19+
connectionString: connectionString,
20+
});
21+
} else {
22+
toast.error(`Connection string is required`)
23+
}
2624
},
2725
{
2826
enabled: hasConfiguredDatabase,
@@ -39,8 +37,8 @@ export const Sidebar = () => {
3937
<div className="flex flex-1 flex-col space-y-2 overflow-y-auto px-3 py-5">
4038
{hasConfiguredDatabase && isLoading ? (
4139
<div className="space-y-5">
42-
<div className="bg-element-active animate-pulse w-28 h-4 my-1.5 rounded-md"></div>
43-
<div className="bg-element-active animate-pulse w-28 h-4 my-1.5 rounded-md"></div>
40+
<div className="bg-element-active animate-pulse w-fill max-w-28 h-4 my-1.5 rounded-md"></div>
41+
<div className="bg-element-active animate-pulse w-fill max-w-28 h-4 my-1.5 rounded-md"></div>
4442
</div>
4543
) : (
4644
<>

‎src/components/theme-select/dynamic-theme-select.tsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import dynamic from 'next/dynamic'
2+
3+
const DynamicThemeSelect = dynamic(() => import('@/components/theme-select/theme-select'), {
4+
ssr: true,
5+
})
6+
7+
export default DynamicThemeSelect

‎src/components/theme-select.tsx renamed to ‎src/components/theme-select/theme-select.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@ import {
99
SelectValue,
1010
} from '@/components/shared/select';
1111

12-
export const ThemeSelect = () => {
12+
const ThemeSelect = () => {
1313
const { theme, setTheme } = useTheme();
1414

1515
return (
16-
<div>
16+
<>
1717
<Select value={theme} onValueChange={setTheme}>
1818
<SelectTrigger className="w-[200px]">
1919
<SelectValue placeholder="Theme" />
@@ -31,7 +31,6 @@ export const ThemeSelect = () => {
3131
<span>Light</span>
3232
</div>
3333
</SelectItem>
34-
3534
<SelectItem value="dark">
3635
<div className="flex items-center space-x-3">
3736
<Icon name="Moon" className="h-4 w-4" />
@@ -40,6 +39,8 @@ export const ThemeSelect = () => {
4039
</SelectItem>
4140
</SelectContent>
4241
</Select>
43-
</div>
42+
</>
4443
);
4544
};
45+
46+
export default ThemeSelect

‎src/components/toolbar.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
import { Icon } from './shared/icon';
99
import { cn } from '@/utils/cn';
1010
import { ConnectDialog } from './connect';
11-
import { ThemeSelect } from './theme-select';
11+
import DynamicThemeSelect from '@/components/theme-select/dynamic-theme-select';
1212
import { CommandPalette } from './command-palette';
1313

1414
export const Toolbar = () => {
@@ -47,7 +47,7 @@ export const Toolbar = () => {
4747
<div className="flex items-center space-x-3">
4848
<div className="flex items-center space-x-3">
4949
<CommandPalette />
50-
<ThemeSelect />
50+
<DynamicThemeSelect />
5151
<div className="flex items-center justify-center space-x-5 rounded-md border border-gray-primary px-4 py-2">
5252
<button
5353
onClick={() => setLayout('horizontal')}

0 commit comments

Comments
 (0)