feat(DangerZone.tsx): add toggle intake component to danger zone card, …

…closes #52 feat(ToggleIntake.tsx): add toggle intake component to allow pausing and resuming of project data intake feat(Overview.tsx): add project status to project overview refactor(docker-compose.yml): comment out test service refactor(projectActions.ts): remove unused function and simplify invalidateAllProjectCache function to invalidate all project cache and edit page cache after toggling project paused status
icoretech · Jun 4, 2023 · b28a057 · b28a057
1 parent f20f89a
commit b28a057
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 26 deletions.
diff --git a/components/project/Overview.tsx b/components/project/Overview.tsx
@@ -43,6 +43,10 @@ export default async function Overview({ projectId }: OverviewProps) {
               <dt className="text-sm font-medium leading-6 text-white">API Key</dt>
               <dd className="mt-1 text-sm leading-6 text-gray-400">{project.api_key}</dd>
             </div>
+            <div className="py-3">
+              <dt className="text-sm font-medium leading-6 text-white">Status</dt>
+              <dd className="mt-1 text-sm leading-6 text-gray-400">{project.paused ? 'Paused' : 'Accepting data'}</dd>
+            </div>
           </dl>
         </div>
         <div className="rounded-lg bg-gray-900 p-6">

diff --git a/components/project/cards/DangerZone.tsx b/components/project/cards/DangerZone.tsx
@@ -1,5 +1,6 @@
 import ConfirmationDialog from '@/components/ConfirmationDialog';
 import { getProjectById } from '@/lib/queries/projects';
+import ToggleIntake from './ToggleIntake';
 
 type DangerZoneProps = {
   projectId: string;
@@ -12,17 +13,22 @@ export default async function DangerZone({ projectId }: DangerZoneProps) {
   }
 
   return (
-    <>
-      <h3 className="text-base font-semibold leading-6 text-rose-500">Danger Zone</h3>
-      <div className="mt-6 space-y-4">
-        <div className="grid grid-cols-1 justify-items-center gap-4">
+    <div className="space-y-4">
+      <header>
+        <h3 className="text-sm font-semibold text-rose-500">Danger Zone</h3>
+      </header>
+
+      <div className="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0">
+        <div className="md:flex-1">
           <ConfirmationDialog
             projectId={project.id}
             title="Delete All Errors"
             body={`Are you sure you want to delete all exceptions for the project "${project.name}"? This action cannot be undone.`}
             btnId="deleteAllErrors"
           />
+        </div>
 
+        <div className="md:flex-1">
           <ConfirmationDialog
             projectId={project.id}
             title="Delete Project"
@@ -31,6 +37,8 @@ export default async function DangerZone({ projectId }: DangerZoneProps) {
           />
         </div>
       </div>
-    </>
+
+      <ToggleIntake projectId={project.id} isPaused={project.paused} />
+    </div>
   );
 }
diff --git a/components/project/cards/ToggleIntake.tsx b/components/project/cards/ToggleIntake.tsx
@@ -0,0 +1,46 @@
+'use client';
+
+import { toggleProjectPausedStatus } from '@/app/_actions';
+import classNames from '@/lib/classNames';
+import { Switch } from '@headlessui/react';
+import { useEffect, useState, useTransition } from 'react';
+
+export default function ToggleIntake({ projectId, isPaused }: { projectId: string; isPaused: boolean }) {
+  const [enabled, setEnabled] = useState(!isPaused);
+  const [isPending, startTransition] = useTransition();
+
+  useEffect(() => {
+    setEnabled(!isPaused);
+  }, [isPaused]);
+
+  const handleToggle = async () => {
+    const newEnabledStatus = !enabled;
+    setEnabled(newEnabledStatus);
+    startTransition(() => toggleProjectPausedStatus(projectId));
+  };
+
+  return (
+    <Switch.Group as="div" className="flex items-center">
+      <Switch
+        checked={enabled}
+        onChange={handleToggle}
+        className={classNames(
+          enabled ? 'bg-indigo-600' : 'bg-gray-200',
+          'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2'
+        )}
+      >
+        <span
+          aria-hidden="true"
+          className={classNames(
+            enabled ? 'translate-x-5' : 'translate-x-0',
+            'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out'
+          )}
+        />
+      </Switch>
+      <Switch.Label as="span" className="ml-3 text-sm">
+        <span className="font-medium text-gray-200">Accept Data</span>{' '}
+        <span className="text-gray-400">({enabled ? 'Active' : 'Paused'})</span>
+      </Switch.Label>
+    </Switch.Group>
+  );
+}
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -49,16 +49,16 @@ services:
     #   timeout: 2s
     #   retries: 3
 
-  test:
-    extends: nextbase
-    command: yarn test
-    restart: 'always'
-    environment:
-      DATABASE_URL: 'postgresql://postgres:airbroke@db/airbroke_test?connection_limit=15'
-      DIRECT_URL: 'postgresql://postgres:airbroke@db/airbroke_test?connection_limit=15'
-    depends_on:
-      nextbase:
-        condition: service_completed_successfully
+  # test:
+  #   extends: nextbase
+  #   command: yarn test
+  #   restart: 'always'
+  #   environment:
+  #     DATABASE_URL: 'postgresql://postgres:airbroke@db/airbroke_test?connection_limit=15'
+  #     DIRECT_URL: 'postgresql://postgres:airbroke@db/airbroke_test?connection_limit=15'
+  #   depends_on:
+  #     nextbase:
+  #       condition: service_completed_successfully
 
 volumes:
   db_data:

diff --git a/lib/actions/projectActions.ts b/lib/actions/projectActions.ts
@@ -21,18 +21,8 @@ function invalidateProjectsCache(): void {
   revalidatePath('/projects');
 }
 
-function invalidateProjectCache(projectId: string): void {
-  revalidatePath(`/projects/${projectId}`);
-}
-
 async function invalidateAllProjectCache(): Promise<void> {
-  const projects = await prisma.project.findMany({ select: { id: true } });
-  const projectIds = projects.map((project) => project.id);
-
-  await Promise.all([
-    ...projectIds.map((id) => invalidateProjectCache(id)),
-    invalidateProjectsCache(),
-  ]);
+  revalidatePath('/projects/[project_id]');
 }
 
 export async function createProject(data?: FormData): Promise<CreateProjectResponse> {
@@ -117,5 +107,7 @@ export async function toggleProjectPausedStatus(projectId: string): Promise<void
     data: { paused: !project.paused },
   });
 
+  revalidatePath(`/projects/[project_id]/edit`);
   invalidateAllProjectCache();
+
 }