feat: redirect to deployments when click on deploy

This commit is contained in:
Mauricio Siu
2024-12-14 20:28:28 -06:00
parent 181a2ca3c9
commit ea0f797d0f
4 changed files with 38 additions and 11 deletions

View File

@@ -11,6 +11,7 @@ import {
} from "@/components/ui/alert-dialog"; } from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { api } from "@/utils/api"; import { api } from "@/utils/api";
import { useRouter } from "next/router";
import { toast } from "sonner"; import { toast } from "sonner";
interface Props { interface Props {
@@ -18,6 +19,7 @@ interface Props {
} }
export const DeployApplication = ({ applicationId }: Props) => { export const DeployApplication = ({ applicationId }: Props) => {
const router = useRouter();
const { data, refetch } = api.application.one.useQuery( const { data, refetch } = api.application.one.useQuery(
{ {
applicationId, applicationId,
@@ -51,6 +53,9 @@ export const DeployApplication = ({ applicationId }: Props) => {
.then(async () => { .then(async () => {
toast.success("Application deployed succesfully"); toast.success("Application deployed succesfully");
await refetch(); await refetch();
router.push(
`/dashboard/project/${data?.projectId}/services/application/${applicationId}?tab=deployments`,
);
}) })
.catch(() => { .catch(() => {

View File

@@ -11,6 +11,7 @@ import {
} from "@/components/ui/alert-dialog"; } from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { api } from "@/utils/api"; import { api } from "@/utils/api";
import { useRouter } from "next/router";
import { toast } from "sonner"; import { toast } from "sonner";
interface Props { interface Props {
@@ -18,6 +19,7 @@ interface Props {
} }
export const DeployCompose = ({ composeId }: Props) => { export const DeployCompose = ({ composeId }: Props) => {
const router = useRouter();
const { data, refetch } = api.compose.one.useQuery( const { data, refetch } = api.compose.one.useQuery(
{ {
composeId, composeId,
@@ -48,9 +50,15 @@ export const DeployCompose = ({ composeId }: Props) => {
await refetch(); await refetch();
await deploy({ await deploy({
composeId, composeId,
}).catch(() => { })
toast.error("Error to deploy Compose"); .then(async () => {
}); router.push(
`/dashboard/project/${data?.project.projectId}/services/compose/${composeId}?tab=deployments`
);
})
.catch(() => {
toast.error("Error to deploy Compose");
});
await refetch(); await refetch();
}} }}

View File

@@ -44,7 +44,7 @@ import type {
import Head from "next/head"; import Head from "next/head";
import Link from "next/link"; import Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import React, { useState, type ReactElement } from "react"; import React, { useState, useEffect, type ReactElement } from "react";
import superjson from "superjson"; import superjson from "superjson";
type TabState = type TabState =
@@ -62,7 +62,14 @@ const Service = (
const { applicationId, activeTab } = props; const { applicationId, activeTab } = props;
const router = useRouter(); const router = useRouter();
const { projectId } = router.query; const { projectId } = router.query;
const [tab, setSab] = useState<TabState>(activeTab); const [tab, setTab] = useState<TabState>(activeTab);
useEffect(() => {
if (router.query.tab) {
setTab(router.query.tab as TabState);
}
}, [router.query.tab]);
const { data } = api.application.one.useQuery( const { data } = api.application.one.useQuery(
{ applicationId }, { applicationId },
{ {
@@ -191,9 +198,9 @@ const Service = (
defaultValue="general" defaultValue="general"
className="w-full" className="w-full"
onValueChange={(e) => { onValueChange={(e) => {
setSab(e as TabState); setTab(e as TabState);
const newPath = `/dashboard/project/${projectId}/services/application/${applicationId}?tab=${e}`; const newPath = `/dashboard/project/${projectId}/services/application/${applicationId}?tab=${e}`;
router.push(newPath, undefined, { shallow: true }); router.push(newPath);
}} }}
> >
<div className="flex flex-row items-center justify-between w-full gap-4"> <div className="flex flex-row items-center justify-between w-full gap-4">

View File

@@ -38,7 +38,7 @@ import type {
import Head from "next/head"; import Head from "next/head";
import Link from "next/link"; import Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import React, { useState, type ReactElement } from "react"; import React, { useState, useEffect, type ReactElement } from "react";
import superjson from "superjson"; import superjson from "superjson";
type TabState = type TabState =
@@ -55,7 +55,14 @@ const Service = (
const { composeId, activeTab } = props; const { composeId, activeTab } = props;
const router = useRouter(); const router = useRouter();
const { projectId } = router.query; const { projectId } = router.query;
const [tab, setSab] = useState<TabState>(activeTab); const [tab, setTab] = useState<TabState>(activeTab);
useEffect(() => {
if (router.query.tab) {
setTab(router.query.tab as TabState);
}
}, [router.query.tab]);
const { data } = api.compose.one.useQuery( const { data } = api.compose.one.useQuery(
{ composeId }, { composeId },
{ {
@@ -183,9 +190,9 @@ const Service = (
defaultValue="general" defaultValue="general"
className="w-full" className="w-full"
onValueChange={(e) => { onValueChange={(e) => {
setSab(e as TabState); setTab(e as TabState);
const newPath = `/dashboard/project/${projectId}/services/compose/${composeId}?tab=${e}`; const newPath = `/dashboard/project/${projectId}/services/compose/${composeId}?tab=${e}`;
router.push(newPath, undefined, { shallow: true }); router.push(newPath);
}} }}
> >
<div className="flex flex-row items-center justify-between w-full gap-4"> <div className="flex flex-row items-center justify-between w-full gap-4">