diff --git a/web/components/SqlDataTable/index.tsx b/web/components/SqlDataTable/index.tsx index d8e81476..0f731182 100644 --- a/web/components/SqlDataTable/index.tsx +++ b/web/components/SqlDataTable/index.tsx @@ -15,13 +15,12 @@ import { } from "@gen/graphql-types"; import useSessionQueryHistory from "@hooks/useSessionQueryHistory"; import { SqlQueryParams } from "@lib/params"; -import { isMutation } from "@lib/parseSqlQuery"; -import { refetchSqlUpdateQueriesCacheEvict } from "@lib/refetchQueries"; -import { useEffect, useState } from "react"; +import { useState } from "react"; import SqlMessage from "./SqlMessage"; import { isReadOnlyDatabaseRevisionError } from "./SqlMessage/utils"; import WorkingDiff from "./WorkingDiff"; import css from "./index.module.css"; +import useSqlQuery from "./useSqlQuery"; type Props = { params: SqlQueryParams; @@ -37,25 +36,7 @@ type InnerProps = Props & { }; function Inner(props: InnerProps) { - const { addMutation } = useSessionQueryHistory(); - const isMut = isMutation(props.params.q); - - useEffect(() => { - if (!isMut) return; - addMutation(props.params.q); - }, [props.params.q]); - - useEffect(() => { - if (!isMut) return; - if (props.gqlError) return; - // Need timeout here so that queries are not refetched before sql query has - // time to finish - setTimeout(() => { - props.client - .refetchQueries(refetchSqlUpdateQueriesCacheEvict) - .catch(console.error); - }, 300); - }, [props.gqlError, isMut, props.client]); + const isMut = useSqlQuery(props.params, props.client, props.gqlError); const msg = ; return ( diff --git a/web/components/SqlDataTable/useSqlQuery.ts b/web/components/SqlDataTable/useSqlQuery.ts new file mode 100644 index 00000000..e2747b54 --- /dev/null +++ b/web/components/SqlDataTable/useSqlQuery.ts @@ -0,0 +1,54 @@ +import { + ApolloClient, + ApolloError, + NormalizedCacheObject, +} from "@apollo/client"; +import useSessionQueryHistory from "@hooks/useSessionQueryHistory"; +import { SqlQueryParams } from "@lib/params"; +import { isMutation } from "@lib/parseSqlQuery"; +import { refetchSqlUpdateQueriesCacheEvict } from "@lib/refetchQueries"; +import { databases } from "@lib/urls"; +import { useRouter } from "next/router"; +import { useEffect } from "react"; + +export default function useSqlQuery( + params: SqlQueryParams, + client: ApolloClient, + gqlError?: ApolloError, +): boolean { + const router = useRouter(); + const { addMutation } = useSessionQueryHistory(); + const isMut = isMutation(params.q); + + useEffect(() => { + if (!isMut) return; + addMutation(params.q); + }, [params.q]); + + useEffect(() => { + if (!isMut) return; + if (gqlError) return; + // Need timeout here so that queries are not refetched before sql query has + // time to finish + setTimeout(() => { + client + .refetchQueries(refetchSqlUpdateQueriesCacheEvict) + .catch(console.error); + }, 300); + }, [gqlError, isMut, client]); + + useEffect(() => { + if (gqlError) { + return; + } + const lower = params.q.toLowerCase(); + if ( + lower.includes("drop database") && + lower.includes(params.databaseName) + ) { + router.push(databases.hrefPathname()).catch(console.error); + } + }, [params.q, params.databaseName, gqlError]); + + return isMut; +} diff --git a/web/components/pageComponents/DatabasesPage/index.tsx b/web/components/pageComponents/DatabasesPage/index.tsx index d459ed22..5719ed9e 100644 --- a/web/components/pageComponents/DatabasesPage/index.tsx +++ b/web/components/pageComponents/DatabasesPage/index.tsx @@ -1,42 +1,58 @@ import CreateDatabase from "@components/CreateDatabase"; +import ErrorMsg from "@components/ErrorMsg"; +import Loader from "@components/Loader"; import MainLayout from "@components/layouts/MainLayout"; import Link from "@components/links/Link"; import { useDatabasesQuery } from "@gen/graphql-types"; import { database } from "@lib/urls"; import { FaChevronRight } from "@react-icons/all-files/fa/FaChevronRight"; import cx from "classnames"; +import { useRouter } from "next/router"; +import { useEffect } from "react"; import css from "./index.module.css"; export default function DatabasesPage() { const res = useDatabasesQuery(); + const router = useRouter(); + + useEffect(() => { + if (!res.data) return; + if (res.data.databases.length === 1) { + const { href, as } = database({ databaseName: res.data.databases[0] }); + router.push(href, as).catch(console.error); + } + }, [res.data?.databases]); return ( -

Choose a database

-

- Choose an existing database or create a new database to get started. -

- {res.data?.databases.length ? ( -
    - {res.data.databases.map(db => ( -
  • - -
    - {db} - - Go - -
    - -
  • - ))} -
- ) : ( -

- No databases found. Create a database to get started. + +

Choose a database

+

+ Choose an existing database or create a new database to get started.

- )} - + {res.data?.databases.length ? ( +
    + {res.data.databases.map(db => ( +
  • + +
    + {db} + + Go + +
    + +
  • + ))} +
+ ) : ( +

+ No databases found. Create a database to get started. +

+ )} + + +
); } diff --git a/web/lib/refetchQueries.ts b/web/lib/refetchQueries.ts index bf870558..3d9aabde 100644 --- a/web/lib/refetchQueries.ts +++ b/web/lib/refetchQueries.ts @@ -122,6 +122,7 @@ export const refetchSqlUpdateQueriesCacheEvict: RefetchOptions = { "schemaDiff", "doltProcedures", "doltSchemas", + "databases", ].forEach(fieldName => { cache.evict({ fieldName }); });