feat: first commit of source-delete, with basic styling and fetches

src/api/agileLive/ingest.ts

@@ -127,3 +127,25 @@ export async function getSourceThumbnail(
   }
   throw await response.json();
 }
+
+export async function deleteSrtSource(ingestUuid: string, sourceId: number) {
+  const response = await fetch(
+    new URL(
+      AGILE_BASE_API_PATH + `/ingests/${ingestUuid}/sources/${sourceId}`,
+      process.env.AGILE_URL
+    ),
+    {
+      method: 'DELETE',
+      headers: {
+        authorization: getAuthorizationHeader()
+      },
+      next: {
+        revalidate: 0
+      }
+    }
+  );
+  if (response.ok) {
+    return response.status;
+  }
+  throw await response.text();
+}

src/api/manager/inventory.ts

@@ -1,6 +1,7 @@
 import { ObjectId } from 'mongodb';
 import { getDatabase } from '../mongoClient/dbClient';
 import { Numbers } from '../../interfaces/Source';
+import { Log } from '../logger';
 
 interface IResponse {
   audio_stream?: {
@@ -20,3 +21,14 @@ export async function getAudioMapping(id: ObjectId): Promise<IResponse> {
       throw `Could not find audio mapping for source: ${id.toString()}`;
     })) as IResponse;
 }
+
+export async function deleteInventorySourceItem(id: string): Promise<void> {
+  const db = await getDatabase();
+  // Information sent to db:
+  console.log('DB', { _id: { $eq: new ObjectId(id) } });
+
+  await db
+    .collection('inventory')
+    .deleteOne({ _id: { $eq: new ObjectId(id) } });
+  Log().info('Deleted source', id);
+}

src/app/api/manager/inventory/[_id]/route.ts

@@ -0,0 +1,29 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { isAuthenticated } from '../../../../../api/manager/auth';
+import { Params } from 'next/dist/shared/lib/router/utils/route-matcher';
+import { deleteInventorySourceItem } from '../../../../../api/manager/inventory';
+
+export async function DELETE(
+  request: NextRequest,
+  { params }: { params: Params }
+): Promise<NextResponse> {
+  if (!(await isAuthenticated())) {
+    return new NextResponse(`Not Authorized!`, {
+      status: 403
+    });
+  }
+
+  try {
+    await deleteInventorySourceItem(params._id);
+    return new NextResponse(null, {
+      status: 200
+    });
+  } catch (error) {
+    return new NextResponse(
+      `Error occurred while posting to DB! Error: ${error}`,
+      {
+        status: 500
+      }
+    );
+  }
+}

src/components/inventory/editView/EditView.tsx

@@ -1,12 +1,13 @@
 import Image from 'next/image';
 import { getSourceThumbnail } from '../../../utils/source';
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import EditViewContext from '../EditViewContext';
 import GeneralSettings from './GeneralSettings';
 import { SourceWithId } from '../../../interfaces/Source';
 import UpdateButtons from './UpdateButtons';
 import AudioChannels from './AudioChannels/AudioChannels';
 import { IconExclamationCircle } from '@tabler/icons-react';
+import { useDeleteSource } from '../../../hooks/sources/useDeleteSource';
 
 export default function EditView({
   source,
@@ -18,7 +19,23 @@ export default function EditView({
   close: () => void;
 }) {
   const [loaded, setLoaded] = useState(false);
+  const [itemToDelete, setItemToDelete] = useState<SourceWithId | null>(null);
   const src = useMemo(() => getSourceThumbnail(source), [source]);
+  const [loading, deleteComplete] = useDeleteSource(itemToDelete);
+
+  const deleteInventorySource = async () => {
+    console.log('delete: ', source);
+    setItemToDelete(source);
+  };
+
+  useEffect(() => {
+    if (deleteComplete) {
+      console.log('RESET - delete is done: ', deleteComplete);
+      setItemToDelete(null);
+      close();
+    }
+  }, [close, deleteComplete]);
+
   return (
     <EditViewContext source={source} updateSource={updateSource}>
       <div className="flex flex-row">
@@ -50,7 +67,10 @@ export default function EditView({
         <AudioChannels source={source} />
       </div>
 
-      <UpdateButtons close={close} />
+      <UpdateButtons
+        close={close}
+        deleteInventorySource={() => deleteInventorySource()}
+      />
     </EditViewContext>
   );
 }

src/components/inventory/editView/UpdateButtons.tsx

@@ -4,8 +4,15 @@ import { EditViewContext } from '../EditViewContext';
 import { useTranslate } from '../../../i18n/useTranslate';
 import styles from './animation.module.scss';
 import { Loader } from '../../loader/Loader';
+import { IconTrash } from '@tabler/icons-react';
 
-export default function UpdateButtons({ close }: { close: () => void }) {
+export default function UpdateButtons({
+  close,
+  deleteInventorySource
+}: {
+  close: () => void;
+  deleteInventorySource: () => void;
+}) {
   const t = useTranslate();
   const {
     saved: [saved],
@@ -22,6 +29,14 @@ export default function UpdateButtons({ close }: { close: () => void }) {
       </div>
 
       <div className="flex">
+        <Button
+          state="warning"
+          className="mr-5 relative flex"
+          type="submit"
+          onClick={deleteInventorySource}
+        >
+          <IconTrash className="text-p" />
+        </Button>
         <Button state="warning" onClick={close}>
           {t('close')}
         </Button>

src/hooks/sources/useDeleteSource.tsx

@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react';
+import { SourceWithId } from '../../interfaces/Source';
+
+export function useDeleteSource(source: SourceWithId | null) {
+  const [loading, setLoading] = useState(true);
+  const [deleteComplete, setDeleteComplete] = useState(false);
+
+  useEffect(() => {
+    if (source && source.status === 'gone') {
+      setLoading(true);
+      setDeleteComplete(false);
+      // Source to be deleted:
+      console.log('source._id', source);
+      fetch(`/api/manager/inventory/${source._id}`, {
+        method: 'DELETE',
+        // TODO: Implement api key
+        headers: [['x-api-key', `Bearer apisecretkey`]]
+      })
+        .then((response) => {
+          if (response.ok) {
+            setLoading(false);
+            setDeleteComplete(true);
+          }
+        })
+        .catch((e) => {
+          console.log(`Failed to delete source-item: ${e}`);
+        });
+    } else {
+      setLoading(false);
+      setDeleteComplete(false);
+    }
+  }, [source]);
+  return [loading, deleteComplete];
+}