From 3b3a9fc783f85c0f3f6c079e200179a277e384e0 Mon Sep 17 00:00:00 2001
From: Drew Lytle <aml3ed@virginia.edu>
Date: Tue, 7 Feb 2023 14:51:17 -0500
Subject: [PATCH 1/7] Refactor onEnter handler to handle case of putting lyrics
 on a new line

---
 .../forms/song/LineFields/LineFields.tsx      | 36 ++++++++++++-------
 .../forms/song/StanzaFields/StanzaFields.tsx  | 10 +++---
 2 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/app/components/forms/song/LineFields/LineFields.tsx b/app/components/forms/song/LineFields/LineFields.tsx
index f3b2819..911b796 100644
--- a/app/components/forms/song/LineFields/LineFields.tsx
+++ b/app/components/forms/song/LineFields/LineFields.tsx
@@ -1,6 +1,6 @@
 import type { ILine, IMarking } from "@/types/song";
 import { Menu } from "@headlessui/react";
-import type { KeyboardEvent } from "react";
+import type { ClipboardEvent, KeyboardEvent } from "react";
 import { useState } from "react";
 import { usePopper } from "react-popper";
 import { Input } from "~/components/Input";
@@ -12,7 +12,7 @@ import uniqid from "uniqid";
 
 type Props = {
   line: ILine;
-  insertLine?: () => void;
+  insertLine?: (lyric?: string) => void;
   deleteLine?: () => void;
 };
 
@@ -44,28 +44,40 @@ export const LineFields: React.FC<Props> = ({
     placement: "left",
   });
 
-  const insertMark = (index: number) => {
+  function insertMark(index: number) {
     return () => {
       const length = markingsFieldArray.length;
       push({ indent: index, id: uniqid(), mark: "" } as IMarking);
       focus(`input[name="${namespace}markings[${length}].mark"]`);
     };
-  };
+  }
 
-  const removeMark = (index: number) => {
+  function removeMark(index: number) {
     return () => {
       remove(index);
     };
-  };
+  }
 
-  const newLineOnEnterKey = (e: KeyboardEvent<HTMLInputElement>) => {
+  function newLineOnEnterKey(e: KeyboardEvent<HTMLInputElement>) {
     if (e.key === "Enter") {
       e.preventDefault();
-      if (insertLine) insertLine();
+      const target = e.target as HTMLInputElement;
+      // Get text after the current cursor position
+      const afterCursorText = target.value.slice(
+        target.selectionStart ?? undefined
+      );
+      // Remove the text after the cursor from current lyrics input
+      target.value = target.value.slice(0, target.selectionStart ?? undefined);
+      // Insert line with text after the cursor
+      if (insertLine) insertLine(afterCursorText);
     }
-  };
+  }
 
-  const confirmAndDelete = () => {
+  function onPasteLyrics(e: ClipboardEvent<HTMLInputElement>) {
+    // Trigger handlePaste from StanzaContext
+  }
+
+  function confirmAndDelete() {
     if (
       confirm(
         "Are you sure you want to delete this line?\nYou can't undo this action."
@@ -73,12 +85,11 @@ export const LineFields: React.FC<Props> = ({
     ) {
       if (deleteLine) deleteLine();
     }
-  };
+  }
 
   return (
     <div className="w-full whitespace-nowrap" data-testid="line-fields">
       <Input name="id" hidden readOnly defaultValue={line.id} />
-
       <div className="group relative" ref={setReferenceElement}>
         <Menu>
           <div
@@ -166,6 +177,7 @@ export const LineFields: React.FC<Props> = ({
           className="font-mono"
           defaultValue={line.lyrics}
           onKeyDown={newLineOnEnterKey}
+          onPaste={onPasteLyrics}
         />
         <Input
           name="notes"
diff --git a/app/components/forms/song/StanzaFields/StanzaFields.tsx b/app/components/forms/song/StanzaFields/StanzaFields.tsx
index 814d3c5..6301b6b 100644
--- a/app/components/forms/song/StanzaFields/StanzaFields.tsx
+++ b/app/components/forms/song/StanzaFields/StanzaFields.tsx
@@ -19,8 +19,10 @@ export const StanzaFields: React.FC<{
   const namespace = useNamespace("");
 
   const insertLine = (index: number) => {
-    return () => {
-      insert(index + 1, createMockStanza({}).lines[0]);
+    return (lyrics?: string) => {
+      const lineToInsert = createMockStanza({}).lines[0];
+      lineToInsert.lyrics = lyrics || "";
+      insert(index + 1, lineToInsert);
       focus(`input[name="${namespace}lines[${index + 1}].lyrics"]`);
     };
   };
@@ -83,7 +85,7 @@ export const StanzaFields: React.FC<{
             <button
               type="button"
               aria-label="Add Line"
-              onClick={insertLine(index)}
+              onClick={() => insertLine(index)()}
               className="block h-2 w-full rounded-sm bg-neutral-200 py-1 font-mono text-sm leading-none text-neutral-600 opacity-0 transition-all hover:h-6 hover:opacity-100"
             >
               + Add Line
@@ -94,7 +96,7 @@ export const StanzaFields: React.FC<{
           <button
             type="button"
             aria-label="Add Line"
-            onClick={insertLine(0)}
+            onClick={() => insertLine(0)()}
             className="block h-2 w-full rounded-sm bg-neutral-200 py-1 font-mono text-sm leading-none text-neutral-600 opacity-0 transition-all hover:h-6 hover:opacity-100"
           >
             + Add Line

From 1e805b627f0ccf418dbb468253c4e4f57a706d98 Mon Sep 17 00:00:00 2001
From: Drew Lytle <aml3ed@virginia.edu>
Date: Tue, 7 Feb 2023 18:25:38 -0500
Subject: [PATCH 2/7] Convert plain text to stanzas

---
 app/helpers/convertPlainTextToStanzas.test.ts | 98 +++++++++++++++++++
 app/helpers/convertPlainTextToStanzas.ts      | 21 ++++
 test/factories/song.factory.ts                | 21 ++--
 3 files changed, 131 insertions(+), 9 deletions(-)
 create mode 100644 app/helpers/convertPlainTextToStanzas.test.ts
 create mode 100644 app/helpers/convertPlainTextToStanzas.ts

diff --git a/app/helpers/convertPlainTextToStanzas.test.ts b/app/helpers/convertPlainTextToStanzas.test.ts
new file mode 100644
index 0000000..46f4c5c
--- /dev/null
+++ b/app/helpers/convertPlainTextToStanzas.test.ts
@@ -0,0 +1,98 @@
+import type { IStanza } from "@/types/song";
+import { convertPlainTextToStanzas } from "./convertPlainTextToStanzas";
+
+const singleStanzaText =
+  "This is a song\nWith an single stanza\nThis is a song";
+
+const singleStanzaConverted: IStanza[] = [
+  {
+    type: expect.anything(),
+    id: expect.any(String),
+    lines: [
+      {
+        id: expect.any(String),
+        lyrics: "This is a song",
+        markings: [],
+        notes: "",
+      },
+      {
+        id: expect.any(String),
+        lyrics: "With an single stanza",
+        markings: [],
+        notes: "",
+      },
+      {
+        id: expect.any(String),
+        lyrics: "This is a song",
+        markings: [],
+        notes: "",
+      },
+    ],
+  },
+];
+
+test("Should convert to list with single stanza", () => {
+  expect(convertPlainTextToStanzas(singleStanzaText)).toMatchObject(
+    singleStanzaConverted
+  );
+});
+
+const multipleStanzaText =
+  "This is a song\nWith an single stanza\nThis is a song\n\nThis is a song\nWith an single stanza\nThis is a song";
+
+const multipleStanzaConverted: IStanza[] = [
+  {
+    type: expect.anything(),
+    id: expect.any(String),
+    lines: [
+      {
+        id: expect.any(String),
+        lyrics: "This is a song",
+        markings: [],
+        notes: "",
+      },
+      {
+        id: expect.any(String),
+        lyrics: "With an single stanza",
+        markings: [],
+        notes: "",
+      },
+      {
+        id: expect.any(String),
+        lyrics: "This is a song",
+        markings: [],
+        notes: "",
+      },
+    ],
+  },
+  {
+    type: expect.anything(),
+    id: expect.any(String),
+    lines: [
+      {
+        id: expect.any(String),
+        lyrics: "This is a song",
+        markings: [],
+        notes: "",
+      },
+      {
+        id: expect.any(String),
+        lyrics: "With an single stanza",
+        markings: [],
+        notes: "",
+      },
+      {
+        id: expect.any(String),
+        lyrics: "This is a song",
+        markings: [],
+        notes: "",
+      },
+    ],
+  },
+];
+
+test("Should convert to list with multiple stanzas", () => {
+  expect(convertPlainTextToStanzas(multipleStanzaText)).toMatchObject(
+    multipleStanzaConverted
+  );
+});
diff --git a/app/helpers/convertPlainTextToStanzas.ts b/app/helpers/convertPlainTextToStanzas.ts
new file mode 100644
index 0000000..8457027
--- /dev/null
+++ b/app/helpers/convertPlainTextToStanzas.ts
@@ -0,0 +1,21 @@
+import {
+  createMockLine,
+  createMockStanza,
+} from "@/test/factories/song.factory";
+import type { ILine, IStanza } from "@/types/song";
+
+export function convertPlainTextToStanzas(text: string) {
+  // Split text into Stanzas
+  const textSplitByStanzas = text.split("\n\n");
+  const stanzas = [] as IStanza[];
+  textSplitByStanzas.forEach((stanzaText) => {
+    const textSplitIntoLyrics = stanzaText.split("\n");
+    const lines = [] as ILine[];
+    textSplitIntoLyrics.forEach((lyrics) => {
+      lines.push(createMockLine({ lyrics }));
+    });
+    stanzas.push(createMockStanza({ lines }));
+  });
+
+  return stanzas;
+}
diff --git a/test/factories/song.factory.ts b/test/factories/song.factory.ts
index e8e75b2..765360c 100644
--- a/test/factories/song.factory.ts
+++ b/test/factories/song.factory.ts
@@ -1,4 +1,4 @@
-import type { IMarking, IStanza } from "@/types/song";
+import type { ILine, IMarking, IStanza } from "@/types/song";
 import type { Song } from "@prisma/client";
 import uniqid from "uniqid";
 
@@ -99,14 +99,17 @@ export function createMockStanza(p: Partial<IStanza>): IStanza {
   return {
     id: uniqid(),
     type: "verse",
-    lines: [
-      {
-        id: uniqid(),
-        lyrics: "",
-        markings: [],
-        notes: "",
-      },
-    ],
+    lines: [createMockLine()],
+    ...p,
+  };
+}
+
+export function createMockLine(p?: Partial<ILine>): ILine {
+  return {
+    id: uniqid(),
+    lyrics: "",
+    markings: [],
+    notes: "",
     ...p,
   };
 }

From d56df8a3bda6282ad7d7c86de91480e425868517 Mon Sep 17 00:00:00 2001
From: Drew Lytle <aml3ed@virginia.edu>
Date: Wed, 8 Feb 2023 15:39:59 -0500
Subject: [PATCH 3/7] Add findIndex function to useArray

---
 app/lib/useArray.test.ts | 13 +++++++++++++
 app/lib/useArray.ts      |  6 +++++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/app/lib/useArray.test.ts b/app/lib/useArray.test.ts
index b7c7f4e..8316392 100644
--- a/app/lib/useArray.test.ts
+++ b/app/lib/useArray.test.ts
@@ -54,3 +54,16 @@ test("can delete items", () => {
   expect(result.current.items[0]).toBe(1);
   expect(result.current.items.length).toBe(1);
 });
+
+test("can findIndex", () => {
+  const { result } = renderHook(() => useArray([{ id: 0 }, { id: 1 }]));
+
+  expect(result.current.findIndex((value) => value.id === 0)).toBe(0);
+  expect(result.current.findIndex((value) => value.id === 1)).toBe(1);
+
+  act(() => {
+    result.current.insert(1, { id: 3 });
+  });
+
+  expect(result.current.findIndex((value) => value.id === 3)).toBe(1);
+});
diff --git a/app/lib/useArray.ts b/app/lib/useArray.ts
index 97477c6..52d8970 100644
--- a/app/lib/useArray.ts
+++ b/app/lib/useArray.ts
@@ -35,6 +35,10 @@ export function useArray<T>(initialItems: T[]) {
     });
   };
 
+  const findIndex = (predicate: (value: T) => unknown) => {
+    return items.findIndex(predicate);
+  };
+
   const swap = (indexA: number, indexB: number) => {
     setItems((oldItems) => {
       const items = [...oldItems];
@@ -43,5 +47,5 @@ export function useArray<T>(initialItems: T[]) {
     });
   };
 
-  return { items, remove, push, replace, insert, swap };
+  return { items, remove, push, replace, insert, swap, findIndex };
 }

From 4e9bd41cbcf860e620b8f511fbf309d8e0d1c65a Mon Sep 17 00:00:00 2001
From: Drew Lytle <aml3ed@virginia.edu>
Date: Wed, 8 Feb 2023 15:40:12 -0500
Subject: [PATCH 4/7] Add red color to tailwind config

---
 tailwind.config.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/tailwind.config.js b/tailwind.config.js
index ce877dd..e91404c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -14,6 +14,7 @@ module.exports = {
       neutral: colors.stone,
       primary: colors.orange,
       secondary: colors.cyan,
+      red: colors.red,
     },
   },
   plugins: [],

From a0430d1cb02f3426728c4212b8f849c321177ef2 Mon Sep 17 00:00:00 2001
From: Drew Lytle <aml3ed@virginia.edu>
Date: Wed, 8 Feb 2023 16:15:25 -0500
Subject: [PATCH 5/7] Handle pasting lyrics

---
 .../forms/song/LineFields/LineFields.tsx      | 23 ++++-
 .../forms/song/StanzaFields/StanzaFields.tsx  |  9 +-
 app/helpers/convertPlainTextToLines.test.ts   | 32 ++++++
 app/helpers/convertPlainTextToLines.ts        | 14 +++
 app/helpers/convertPlainTextToStanzas.test.ts | 98 -------------------
 app/helpers/convertPlainTextToStanzas.ts      | 21 ----
 app/lib/useArray.test.ts                      | 15 +++
 app/lib/useArray.ts                           | 10 +-
 8 files changed, 99 insertions(+), 123 deletions(-)
 create mode 100644 app/helpers/convertPlainTextToLines.test.ts
 create mode 100644 app/helpers/convertPlainTextToLines.ts
 delete mode 100644 app/helpers/convertPlainTextToStanzas.test.ts
 delete mode 100644 app/helpers/convertPlainTextToStanzas.ts

diff --git a/app/components/forms/song/LineFields/LineFields.tsx b/app/components/forms/song/LineFields/LineFields.tsx
index 911b796..2527b70 100644
--- a/app/components/forms/song/LineFields/LineFields.tsx
+++ b/app/components/forms/song/LineFields/LineFields.tsx
@@ -9,10 +9,12 @@ import { Fieldset, useNamespace } from "~/lib/fieldset";
 import { useArray } from "~/lib/useArray";
 import { useFocus } from "~/lib/useFocus";
 import uniqid from "uniqid";
+import { convertPlainTextToLines } from "~/helpers/convertPlainTextToLines";
 
 type Props = {
   line: ILine;
   insertLine?: (lyric?: string) => void;
+  updateLine?: (lyric: string) => void;
   deleteLine?: () => void;
 };
 
@@ -20,6 +22,7 @@ export const LineFields: React.FC<Props> = ({
   line,
   insertLine,
   deleteLine,
+  updateLine,
 }) => {
   const {
     items: markingsFieldArray,
@@ -73,7 +76,23 @@ export const LineFields: React.FC<Props> = ({
     }
   }
 
-  function onPasteLyrics(e: ClipboardEvent<HTMLInputElement>) {
+  async function onPasteLyrics(e: ClipboardEvent<HTMLInputElement>) {
+    const pastedText = e.clipboardData.getData("text/plain");
+    const target = e.target as HTMLInputElement;
+    // If input is blank and pasted text includes an end return
+    if (!target.value && pastedText.includes("\n")) {
+      // Prevent default paste
+      e.preventDefault();
+      const linesToAdd = convertPlainTextToLines(pastedText);
+      // Reverse the array for adding it to the lyrics linearly
+      linesToAdd.reverse();
+      if (updateLine) updateLine(linesToAdd.pop()?.lyrics || "");
+      // Insert the new lyrics in reverse order
+      linesToAdd.forEach((line) => {
+        if (insertLine) insertLine(line.lyrics);
+      });
+    }
+
     // Trigger handlePaste from StanzaContext
   }
 
@@ -116,7 +135,7 @@ export const LineFields: React.FC<Props> = ({
               </svg>
             </Menu.Button>
           </div>
-          <Menu.Items className="divide-gray-100 absolute z-10 w-28 origin-top-left -translate-x-9 divide-y rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+          <Menu.Items className="absolute z-20 w-28 origin-top-left -translate-x-9 divide-y divide-neutral-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
             <Menu.Item>
               {({ active }) => (
                 <button
diff --git a/app/components/forms/song/StanzaFields/StanzaFields.tsx b/app/components/forms/song/StanzaFields/StanzaFields.tsx
index 6301b6b..5bfcc0f 100644
--- a/app/components/forms/song/StanzaFields/StanzaFields.tsx
+++ b/app/components/forms/song/StanzaFields/StanzaFields.tsx
@@ -13,7 +13,7 @@ export const StanzaFields: React.FC<{
   insertStanza?: () => void;
   deleteStanza?: () => void;
 }> = ({ stanza, insertStanza, deleteStanza }) => {
-  const { items: lines, insert, remove } = useArray(stanza.lines);
+  const { items: lines, insert, remove, update } = useArray(stanza.lines);
 
   const focus = useFocus();
   const namespace = useNamespace("");
@@ -33,6 +33,12 @@ export const StanzaFields: React.FC<{
     };
   };
 
+  const updateLine = (index: number) => {
+    return (lyrics: string) => {
+      update(index, { lyrics });
+    };
+  };
+
   const confirmAndDelete = () => {
     if (
       confirm(
@@ -78,6 +84,7 @@ export const StanzaFields: React.FC<{
             <Fieldset.Headless namespace={`lines[${index}]`}>
               <LineFields
                 line={line}
+                updateLine={updateLine(index)}
                 deleteLine={deleteLine(index)}
                 insertLine={insertLine(index)}
               />
diff --git a/app/helpers/convertPlainTextToLines.test.ts b/app/helpers/convertPlainTextToLines.test.ts
new file mode 100644
index 0000000..ad04099
--- /dev/null
+++ b/app/helpers/convertPlainTextToLines.test.ts
@@ -0,0 +1,32 @@
+import type { ILine } from "@/types/song";
+import { convertPlainTextToLines } from "./convertPlainTextToLines";
+
+const samplePastedText =
+  "This is a song\nWith an single stanza\nThis is a song";
+
+const singleStanzaConverted: ILine[] = [
+  {
+    id: expect.any(String),
+    lyrics: "This is a song",
+    markings: [],
+    notes: "",
+  },
+  {
+    id: expect.any(String),
+    lyrics: "With an single stanza",
+    markings: [],
+    notes: "",
+  },
+  {
+    id: expect.any(String),
+    lyrics: "This is a song",
+    markings: [],
+    notes: "",
+  },
+];
+
+test("Should convert to list with single stanza", () => {
+  expect(convertPlainTextToLines(samplePastedText)).toMatchObject(
+    singleStanzaConverted
+  );
+});
diff --git a/app/helpers/convertPlainTextToLines.ts b/app/helpers/convertPlainTextToLines.ts
new file mode 100644
index 0000000..4f6c012
--- /dev/null
+++ b/app/helpers/convertPlainTextToLines.ts
@@ -0,0 +1,14 @@
+import { createMockLine } from "@/test/factories/song.factory";
+import type { ILine } from "@/types/song";
+
+export function convertPlainTextToLines(text: string) {
+  // Split text into Lines
+
+  const textSplitIntoLyrics = text.split("\n");
+  const lines = [] as ILine[];
+  textSplitIntoLyrics.forEach((lyrics) => {
+    lines.push(createMockLine({ lyrics }));
+  });
+
+  return lines;
+}
diff --git a/app/helpers/convertPlainTextToStanzas.test.ts b/app/helpers/convertPlainTextToStanzas.test.ts
deleted file mode 100644
index 46f4c5c..0000000
--- a/app/helpers/convertPlainTextToStanzas.test.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-import type { IStanza } from "@/types/song";
-import { convertPlainTextToStanzas } from "./convertPlainTextToStanzas";
-
-const singleStanzaText =
-  "This is a song\nWith an single stanza\nThis is a song";
-
-const singleStanzaConverted: IStanza[] = [
-  {
-    type: expect.anything(),
-    id: expect.any(String),
-    lines: [
-      {
-        id: expect.any(String),
-        lyrics: "This is a song",
-        markings: [],
-        notes: "",
-      },
-      {
-        id: expect.any(String),
-        lyrics: "With an single stanza",
-        markings: [],
-        notes: "",
-      },
-      {
-        id: expect.any(String),
-        lyrics: "This is a song",
-        markings: [],
-        notes: "",
-      },
-    ],
-  },
-];
-
-test("Should convert to list with single stanza", () => {
-  expect(convertPlainTextToStanzas(singleStanzaText)).toMatchObject(
-    singleStanzaConverted
-  );
-});
-
-const multipleStanzaText =
-  "This is a song\nWith an single stanza\nThis is a song\n\nThis is a song\nWith an single stanza\nThis is a song";
-
-const multipleStanzaConverted: IStanza[] = [
-  {
-    type: expect.anything(),
-    id: expect.any(String),
-    lines: [
-      {
-        id: expect.any(String),
-        lyrics: "This is a song",
-        markings: [],
-        notes: "",
-      },
-      {
-        id: expect.any(String),
-        lyrics: "With an single stanza",
-        markings: [],
-        notes: "",
-      },
-      {
-        id: expect.any(String),
-        lyrics: "This is a song",
-        markings: [],
-        notes: "",
-      },
-    ],
-  },
-  {
-    type: expect.anything(),
-    id: expect.any(String),
-    lines: [
-      {
-        id: expect.any(String),
-        lyrics: "This is a song",
-        markings: [],
-        notes: "",
-      },
-      {
-        id: expect.any(String),
-        lyrics: "With an single stanza",
-        markings: [],
-        notes: "",
-      },
-      {
-        id: expect.any(String),
-        lyrics: "This is a song",
-        markings: [],
-        notes: "",
-      },
-    ],
-  },
-];
-
-test("Should convert to list with multiple stanzas", () => {
-  expect(convertPlainTextToStanzas(multipleStanzaText)).toMatchObject(
-    multipleStanzaConverted
-  );
-});
diff --git a/app/helpers/convertPlainTextToStanzas.ts b/app/helpers/convertPlainTextToStanzas.ts
deleted file mode 100644
index 8457027..0000000
--- a/app/helpers/convertPlainTextToStanzas.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import {
-  createMockLine,
-  createMockStanza,
-} from "@/test/factories/song.factory";
-import type { ILine, IStanza } from "@/types/song";
-
-export function convertPlainTextToStanzas(text: string) {
-  // Split text into Stanzas
-  const textSplitByStanzas = text.split("\n\n");
-  const stanzas = [] as IStanza[];
-  textSplitByStanzas.forEach((stanzaText) => {
-    const textSplitIntoLyrics = stanzaText.split("\n");
-    const lines = [] as ILine[];
-    textSplitIntoLyrics.forEach((lyrics) => {
-      lines.push(createMockLine({ lyrics }));
-    });
-    stanzas.push(createMockStanza({ lines }));
-  });
-
-  return stanzas;
-}
diff --git a/app/lib/useArray.test.ts b/app/lib/useArray.test.ts
index 8316392..172a51c 100644
--- a/app/lib/useArray.test.ts
+++ b/app/lib/useArray.test.ts
@@ -67,3 +67,18 @@ test("can findIndex", () => {
 
   expect(result.current.findIndex((value) => value.id === 3)).toBe(1);
 });
+
+test("can update object", () => {
+  const { result } = renderHook(() =>
+    useArray([
+      { id: 0, value: 0 },
+      { id: 1, value: 1 },
+    ])
+  );
+
+  act(() => {
+    result.current.update(1, { value: 2 });
+  });
+
+  expect(result.current.items[1]).toMatchObject({ id: 1, value: 2 });
+});
diff --git a/app/lib/useArray.ts b/app/lib/useArray.ts
index 52d8970..3b76a86 100644
--- a/app/lib/useArray.ts
+++ b/app/lib/useArray.ts
@@ -27,6 +27,14 @@ export function useArray<T>(initialItems: T[]) {
     });
   };
 
+  const update = (index: number, item: Partial<T>) => {
+    setItems((oldItems) => {
+      const items = [...oldItems];
+      items.splice(index, 1, { ...items[index], ...item });
+      return items;
+    });
+  };
+
   const push = (item: T) => {
     setItems((oldItems) => {
       const items = [...oldItems];
@@ -47,5 +55,5 @@ export function useArray<T>(initialItems: T[]) {
     });
   };
 
-  return { items, remove, push, replace, insert, swap, findIndex };
+  return { items, remove, push, replace, insert, swap, findIndex, update };
 }

From 7f358ee75f262e6e906b3b7a625ad8101de00646 Mon Sep 17 00:00:00 2001
From: Drew Lytle <aml3ed@virginia.edu>
Date: Wed, 8 Feb 2023 16:31:06 -0500
Subject: [PATCH 6/7] Add generate tailwind styles to gitignore

---
 .gitignore | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.gitignore b/.gitignore
index c78d9a4..29b6023 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,6 +12,8 @@ node_modules
 /prisma/data.db-journal
 /postgres-data
 
+tailwind.css
+
 .DS_Store
 coverage
 build
\ No newline at end of file

From 8e9a5b4d85150c0d352af7acc6cc97f048a3a524 Mon Sep 17 00:00:00 2001
From: Drew Lytle <aml3ed@virginia.edu>
Date: Wed, 8 Feb 2023 16:31:38 -0500
Subject: [PATCH 7/7] Fix NavBar border styles

---
 app/components/NavBar/NavBar.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/components/NavBar/NavBar.tsx b/app/components/NavBar/NavBar.tsx
index d119e91..a7ebf60 100644
--- a/app/components/NavBar/NavBar.tsx
+++ b/app/components/NavBar/NavBar.tsx
@@ -26,9 +26,9 @@ export const NavBar: React.FC<Props> = () => {
             className={({ isActive }) =>
               `${
                 isActive
-                  ? "border-primary-500 font-medium text-primary-600"
-                  : "text-neutral-500 hover:text-primary-600 hover:opacity-80"
-              } border-b-2 border-transparent text-sm uppercase transition-all`
+                  ? " border-primary-500 font-medium text-primary-600"
+                  : "border-transparent text-neutral-500 hover:text-primary-600 hover:opacity-80"
+              } border-b-2  text-sm uppercase transition-all`
             }
           >
             Songs
@@ -38,9 +38,9 @@ export const NavBar: React.FC<Props> = () => {
             className={({ isActive }) =>
               `${
                 isActive
-                  ? "border-primary-500 font-medium text-primary-600"
-                  : "text-neutral-500 hover:text-primary-600 hover:opacity-80"
-              } border-b-2 border-transparent text-sm uppercase transition-all`
+                  ? " border-primary-500 font-medium text-primary-600"
+                  : "border-transparent text-neutral-500 hover:text-primary-600 hover:opacity-80"
+              } border-b-2 text-sm uppercase transition-all`
             }
           >
             Setlists