feat: edit buttons for streams and fixtures (#17)

* feat: edit buttons for streams and fixtures

* fix: change edit buttons to links

Author: archessmn

.env.example

@@ -0,0 +1,8 @@
+DATABASE_URL="postgres://postgres:postgres@localhost/radio_tx"
+PUBLIC_URL="http://localhost:3000"
+HLS_SEGMENTS_URL="http://localhost:3000"
+STREAM_CONTROLLER_TOKEN="changeme"
+DASHBOARD_USER="pass"
+DASHBOARD_PASS="word"
+NEXTAUTH_URL="http://localhost:3000"
+AUTH_SECRET="secret"

.envrc

@@ -0,0 +1 @@
+use flake

.gitignore

@@ -32,6 +32,8 @@ yarn-error.log*
 
 # env files (can opt-in for committing if needed)
 .env*
+!.env.example
+!.envrc
 
 # vercel
 .vercel

flake.nix

@@ -7,39 +7,56 @@
     flake-utils.url = "github:numtide/flake-utils";
   };
 
-  outputs = { self, nixpkgs, flake-utils, crane, ... }:
+  outputs =
+    {
+      self,
+      nixpkgs,
+      flake-utils,
+      crane,
+      ...
+    }:
     {
       overlays.default = final: prev: {
         inherit (self.packages.${prev.system}) selector;
       };
-    } // flake-utils.lib.eachDefaultSystem (system:
+    }
+    // flake-utils.lib.eachDefaultSystem (
+      system:
       let
         pkgs = import nixpkgs {
           inherit system;
         };
 
-        deps = with pkgs; [
-        ] ++ pkgs.lib.optionals pkgs.stdenv.isDarwin [
-          pkgs.libiconv
-        ];
+        deps =
+          with pkgs;
+          [
+          ]
+          ++ pkgs.lib.optionals pkgs.stdenv.isDarwin [
+            pkgs.libiconv
+          ];
 
         craneLib = crane.mkLib pkgs;
       in
       {
         devShells.default = craneLib.devShell {
-          packages = with pkgs; [
-            rust-analyzer
-            mpv
-            ffmpeg_6
-            liquidsoap
-            yarn-berry
-            ansible
-            sshpass
-          ] ++ deps;
+          packages =
+            with pkgs;
+            [
+              rust-analyzer
+              mpv
+              ffmpeg_6
+              liquidsoap
+              yarn-berry
+              ansible
+              sshpass
+              openssl
+            ]
+            ++ deps;
 
           PRISMA_QUERY_ENGINE_LIBRARY = "${pkgs.prisma-engines}/lib/libquery_engine.node";
           PRISMA_QUERY_ENGINE_BINARY = "${pkgs.prisma-engines}/bin/query-engine";
           PRISMA_SCHEMA_ENGINE_BINARY = "${pkgs.prisma-engines}/bin/schema-engine";
         };
-      });
+      }
+    );
 }

src/app/dashboard/ingest/[id]/edit/actions.ts

@@ -0,0 +1,22 @@
+'use server';
+
+import { prisma } from '@/lib/db';
+import { action } from '@/lib/forms';
+import { editIngestPointSchema } from './schema';
+import { notifyIngestUpdated } from '@/lib/stream-controller';
+import { redirect } from 'next/navigation';
+
+export const editIngestPoint = action(editIngestPointSchema, async (edit) => {
+  const ingestPoint = await prisma.ingestPoint.update({
+    where: {
+      id: edit.id,
+    },
+    data: {
+      name: edit.name,
+      icecastServer: edit.icecastServer,
+      icecastMount: edit.icecastMount,
+    },
+  });
+  await notifyIngestUpdated(ingestPoint.id);
+  redirect(`/dashboard/ingest/${ingestPoint.id}`);
+});

src/app/dashboard/ingest/[id]/edit/form.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import { useForm, zodResolver } from '@mantine/form';
+import { Button, Group, TextInput } from '@mantine/core';
+import { IngestPoint } from '@prisma/client';
+import { editIngestPoint } from './actions';
+import { editIngestPointSchema } from './schema';
+
+export function EditIngestForm({ ingestPoint }: { ingestPoint: IngestPoint }) {
+  const form = useForm({
+    mode: 'controlled',
+    initialValues: {
+      id: ingestPoint.id,
+      name: ingestPoint.name,
+      icecastServer: ingestPoint.icecastServer,
+      icecastMount: ingestPoint.icecastMount,
+    },
+    validate: zodResolver(editIngestPointSchema),
+  });
+
+  return (
+    <form
+      onSubmit={async (e) => {
+        e.preventDefault();
+        form.validate();
+        if (form.isValid()) {
+          console.log(form.values);
+          const result = await editIngestPoint(form.values);
+          if (!result.ok) {
+            console.error('Something went wrong', result);
+            alert(
+              'Something went wrong! Check the browser console for details.'
+            );
+            return;
+          }
+        }
+      }}
+    >
+      <TextInput
+        {...form.getInputProps('name')}
+        label="Name"
+        withAsterisk
+        placeholder="ROB-5"
+      />
+      <TextInput
+        {...form.getInputProps('icecastServer')}
+        label="Icecast server"
+        withAsterisk
+        placeholder="https://radio.ingest.roses.media"
+      />
+      <TextInput
+        {...form.getInputProps('icecastMount')}
+        label="Icecast mountpoint"
+        withAsterisk
+        placeholder="ROB-5"
+      />
+
+      <Group justify="flex-end" mt="md">
+        <Button type="submit">Create</Button>
+      </Group>
+    </form>
+  );
+}

src/app/dashboard/ingest/[id]/edit/page.tsx

@@ -0,0 +1,18 @@
+import { prisma } from '@/lib/db';
+import { EditIngestForm } from './form';
+
+export default async function EditIngest({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const awaitedParams = await params;
+
+  const ingestPoint = await prisma.ingestPoint.findUniqueOrThrow({
+    where: {
+      id: awaitedParams.id,
+    },
+  });
+
+  return <EditIngestForm ingestPoint={ingestPoint} />;
+}

src/app/dashboard/ingest/[id]/edit/schema.ts

@@ -0,0 +1,8 @@
+import { z } from 'zod';
+
+export const editIngestPointSchema = z.object({
+  id: z.string(),
+  name: z.string(),
+  icecastServer: z.string(),
+  icecastMount: z.string(),
+});

src/app/dashboard/ingest/[id]/page.tsx

@@ -1,7 +1,8 @@
 import { prisma } from '@/lib/db';
-import { Space, Text, Title } from '@mantine/core';
+import { Button, Group, Space, Text, Title } from '@mantine/core';
 import { notFound } from 'next/navigation';
 import { DeleteButton } from './components';
+import Link from 'next/link';
 
 export default async function StreamPage({
   params,
@@ -21,7 +22,17 @@ export default async function StreamPage({
 
   return (
     <>
-      <Title order={1}>{ingest.name}</Title>
+      <Group>
+        <Title order={1}>{ingest.name}</Title>
+        <Link
+          href={`/dashboard/ingest/${id}/edit`}
+          style={{
+            marginLeft: 'auto',
+          }}
+        >
+          <Button>Edit</Button>
+        </Link>
+      </Group>
 
       <Space h="md" />
 

src/app/dashboard/layout.tsx

@@ -13,7 +13,7 @@ export default async function DashboardLayout({
 }) {
   const u = await getServerSession();
   if (!u) {
-    redirect('/api/auth/login');
+    redirect('/api/auth/signin');
   }
 
   const isAnyStreamLive =