Skip to content

Commit

Permalink
Remove Supabase ClientComponentClient; replace realtime with useQuery()
Browse files Browse the repository at this point in the history
  • Loading branch information
@ZIJ
ZIJ committed Oct 25, 2024
1 parent 9365fd2 commit 32f76a9
Show file tree
Hide file tree
Showing 21 changed files with 46 additions and 1,396 deletions.
49 changes: 2 additions & 47 deletions ...pages)/org/[organizationId]/(specific-organization-pages)/activity/AllActivityDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,8 @@
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { getAllRunsByOrganizationId } from "@/data/user/runs";
import { supabaseUserClientComponentClient } from "@/supabase-clients/user/supabaseUserClientComponentClient";
import { useQuery } from "@tanstack/react-query";
import { motion } from "framer-motion";
import { useEffect } from "react";
import { AllActivityTable } from "./AllActivityTable";

export default function AllActivityDetails({
Expand All @@ -16,60 +14,17 @@ export default function AllActivityDetails({
organizationId: string;
allowedProjectIdsForUser: string[];
}) {
const { data: runs, refetch, isLoading } = useQuery(
const { data: runs, isLoading } = useQuery(
['runs', organizationId],
async () => {
return getAllRunsByOrganizationId(organizationId);
},
{
refetchOnWindowFocus: false,
refetchInterval: 10000,
}
);

useEffect(() => {
const channels: ReturnType<typeof supabaseUserClientComponentClient.channel>[] = [];

if (runs) {
const projectIds = Array.from(new Set(runs.map(run => run.project_id)));

projectIds.forEach(projectId => {
const channel = supabaseUserClientComponentClient
.channel(`digger_runs_realtime_${projectId}`)
.on(
'postgres_changes',
{
event: 'INSERT',
schema: 'public',
table: 'digger_runs',
filter: `project_id=eq.${projectId}`
},
(payload) => {
refetch();
}
)
.on(
'postgres_changes',
{
event: 'UPDATE',
schema: 'public',
table: 'digger_runs',
filter: `project_id=eq.${projectId}`
},
(payload) => {
refetch();
},
)
.subscribe();

channels.push(channel);
});
}

return () => {
channels.forEach(channel => channel.unsubscribe());
};
}, [runs, refetch]);

if (isLoading) {
return (
<div className="w-full">
Expand Down
39 changes: 2 additions & 37 deletions ...es)/(application-pages)/project/[projectSlug]/(specific-project-pages)/AllRunsDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,8 @@
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { getRunsByProjectId } from "@/data/user/runs";
import { supabaseUserClientComponentClient } from "@/supabase-clients/user/supabaseUserClientComponentClient";
import { useQuery } from "@tanstack/react-query";
import { motion } from "framer-motion";
import { useEffect } from "react";
import { AllRunsTable } from "./AllRunsTable";

export default function AllRunsDetails({
Expand All @@ -17,50 +15,17 @@ export default function AllRunsDetails({
projectSlug: string;
}) {

const { data: runs, refetch, isLoading } = useQuery(
const { data: runs, isLoading } = useQuery(
['runs', projectId],
async () => {
return getRunsByProjectId(projectId);
},
{
refetchOnWindowFocus: false,
refetchInterval: 10000,
}
);

useEffect(() => {
const channel = supabaseUserClientComponentClient
.channel('digger_runs_realtime')
.on(
'postgres_changes',
{
event: 'INSERT',
schema: 'public',
table: 'digger_runs',
filter: `project_id=eq.${projectId}`
},
(payload) => {
refetch();
}
)
.on(
'postgres_changes',
{
event: 'UPDATE',
schema: 'public',
table: 'digger_runs',
filter: `project_id=eq.${projectId}`
},
(payload) => {
refetch();
},
)
.subscribe();

return () => {
channel.unsubscribe();
};
}, [projectId, refetch]);

if (isLoading) {
return (
<div className="w-full">
Expand Down
104 changes: 42 additions & 62 deletions ...cated-pages)/(application-pages)/project/[projectSlug]/runs/[runId]/ProjectRunDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,19 @@ import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { approveRun, rejectRun } from "@/data/user/runs";
import { approveRun, getOutputLogsAndWorkflowURLFromBatchId, getRunById, getTFOutputAndWorkflowURLFromBatchId, rejectRun } from "@/data/user/runs";
import { useSAToastMutation } from "@/hooks/useSAToastMutation";
import { ToSnakeCase, ToTitleCase } from "@/lib/utils";
import { supabaseUserClientComponentClient } from "@/supabase-clients/user/supabaseUserClientComponentClient";
import { Table } from "@/types";
import { user_profiles } from "@prisma/client";
import { DotFilledIcon } from "@radix-ui/react-icons";
import { useQuery } from "@tanstack/react-query";
import { AnimatePresence, motion } from 'framer-motion';
import { CheckCircle2, GitPullRequest, LinkIcon, Loader2, Play, XCircle } from 'lucide-react';
import Image from 'next/image';
import Link from "next/link";
import { useRouter } from 'next/navigation';
import React, { useEffect, useState } from 'react';
import React, { useState } from 'react';
import { statusColors } from "../../(specific-project-pages)/AllRunsTable";


Expand Down Expand Up @@ -166,72 +166,52 @@ export const ProjectRunDetails: React.FC<{
}
);

const [run, setRun] = useState(initialRun);
const { data: run } = useQuery(
[`run-${initialRun.id}`, initialRun.id],
async () => {
return getRunById(initialRun.id);
},
{
refetchInterval: 5000,
initialData: initialRun
}
);

useQuery(
[`batch-${planBatchId}`, planBatchId],
async () => {
const data = await getTFOutputAndWorkflowURLFromBatchId(planBatchId);
setTfOutput(data.terraform_output);
setWorkflowRunUrl(data.workflow_run_url);
return data;
},
{
refetchInterval: 5000,
initialData: { terraform_output: initialTfOutput, workflow_run_url: initialWorkflowRunUrl }
}
);

useQuery(
[`batch-${applyBatchId}`, applyBatchId],
async () => {
const data = await getOutputLogsAndWorkflowURLFromBatchId(applyBatchId);
setApplyTerraformOutput(data.terraform_output);
setApplyWorkflowRunUrl(data.workflow_run_url);
return data;
},
{
refetchInterval: 5000,
initialData: { terraform_output: initialTfOutput, workflow_run_url: initialWorkflowRunUrl }
}
);

const [tfOutput, setTfOutput] = useState(initialTfOutput);
const [workflowRunUrl, setWorkflowRunUrl] = useState(initialWorkflowRunUrl);
const [applyTerraformOutput, setApplyTerraformOutput] = useState(initialApplyTerraformOutput);
const [applyWorkflowRunUrl, setApplyWorkflowRunUrl] = useState(initialApplyWorkflowRunUrl);

const [isDialogOpen, setIsDialogOpen] = useState(false);


useEffect(() => {
const channel = supabaseUserClientComponentClient
.channel(`digger_run_${run.id}`)
.on(
'postgres_changes',
{
event: 'UPDATE',
schema: 'public',
table: 'digger_runs',
filter: `id=eq.${run.id}`
},
(payload) => {
setRun(payload.new as Table<'digger_runs'>);
}
)
.subscribe();

const jobChannel = supabaseUserClientComponentClient
.channel(`digger_jobs_${run.id}`)
.on(
'postgres_changes',
{
event: 'UPDATE',
schema: 'public',
table: 'digger_jobs',
filter: `batch_id=eq.${planBatchId}`
},
(payload) => {
const updatedJob = payload.new as Table<'digger_jobs'>;
setTfOutput(updatedJob.terraform_output || null);
setWorkflowRunUrl(updatedJob.workflow_run_url || null);
}
)
.on(
'postgres_changes',
{
event: 'UPDATE',
schema: 'public',
table: 'digger_jobs',
filter: `batch_id=eq.${applyBatchId}`
},
(payload) => {
const updatedJob = payload.new as Table<'digger_jobs'>;
setApplyTerraformOutput(updatedJob.terraform_output || null);
setApplyWorkflowRunUrl(updatedJob.workflow_run_url || null);
}
)
.subscribe();

return () => {
supabaseUserClientComponentClient.removeChannel(channel);
supabaseUserClientComponentClient.removeChannel(jobChannel);
};


}, [run.id, run.plan_stage_id, run.apply_stage_id]);

return (
<div className="flex rounded-lg bg-background border overflow-hidden h-[calc(100vh-220px)] w-full">
<motion.div
Expand Down
16 changes: 0 additions & 16 deletions src/app/logout/page.tsx
View file

This file was deleted.

92 changes: 0 additions & 92 deletions src/components/NavigationMenu/ExternalNavbar/DocsMobileNavigation.tsx
View file

This file was deleted.

Loading

0 comments on commit 32f76a9

Please sign in to comment.