setlist and songUpdates

app/components/forms/song/SongForm.tsx

@@ -60,6 +60,26 @@ const SongForm = forwardRef<
           </div>
         ))}
       </div>
+      <label>
+        <h2>Additional Information</h2>
+        <label>
+          Runtime in seconds
+          <Input
+            name="runtime"
+            defaultValue={song.runtime}
+            type="number"
+            title="RunTime (seconds)"
+            aria-label="RunTime in seconds"
+            className="text-xl w-full bg-inherit py-1 outline-none hover:cursor-text resize-none"
+          />
+        </label>
+        <Textarea
+          name="notes"
+          placeholder="Notes"
+          defaultValue={song.notes}
+          className="text-xl w-full bg-inherit py-1 outline-none hover:cursor-text resize-none"
+        />
+      </label>
       {/* <button
           type="submit"
           className="bg-stone-200 px-5 py-2 rounded-md text-stone-800 mt-4"

app/db/setlist.db.ts

@@ -23,8 +23,21 @@ export async function getSetlists() {
   });
 }
 
+export async function getSetlistsByUserId(userId: number) {
+  return await prisma.setlist.findMany({
+    where: { authorId: userId },
+    include: {
+      songs: {
+        select: {
+          id: true,
+        },
+      },
+    },
+  });
+}
+
 export async function createSetlist(
-  data?: Pick<Setlist, "name" | "description">
+  data?: Pick<Setlist, "name" | "description" | "authorId">
 ) {
   return await prisma.setlist.create({
     data: { ...data },

app/db/song.db.ts

@@ -24,8 +24,13 @@ export async function getSong({ id }: Pick<Song, "id">) {
   });
 }
 
-export async function getSongs() {
-  return await prisma.song.findMany();
+/**
+ * Gets the songs of the currently logged in user
+ * @param userId
+ * @returns
+ */
+export async function getUserSongs(userId: number) {
+  return await prisma.song.findMany({ where: { authorId: userId } });
 }
 
 export async function createSong({ authorId }: Pick<Song, "authorId">) {
@@ -44,7 +49,7 @@ export async function updateSong({
   data,
 }: {
   id: Song["id"];
-  data: Pick<Song, "title" | "attribution" | "stanzas">;
+  data: Pick<Song, "title" | "attribution" | "stanzas" | "runtime" | "notes">;
 }) {
   return await prisma.song.update({ where: { id: +id }, data });
 }

app/helpers/formatTime.test.ts

@@ -0,0 +1,31 @@
+import formatTime from "./formatTime";
+
+describe("Time ago tests", () => {
+  test("less than 1m ago", () => {
+    expect(
+      formatTime({
+        time: new Date() - 1,
+      })
+    ).toStrictEqual("a few seconds ago");
+  });
+});
+
+describe("additional format testing", () => {
+  test("full date", () => {
+    expect(
+      formatTime({
+        time: "2020-04-06T18:19:00.000Z",
+        fullDate: true,
+      })
+    ).toStrictEqual("April 6, 2020");
+  });
+  test("full date and time", () => {
+    expect(
+      formatTime({
+        time: "2020-04-06T18:19:00.000Z",
+        fullDate: true,
+        withTime: true,
+      })
+    ).toStrictEqual("April 6, 2020 2:19 PM");
+  });
+});

app/helpers/formatTime.ts

@@ -0,0 +1,36 @@
+import moment from "moment";
+
+/**
+ * Implements Moment.js for formatting dates
+ * https://momentjs.com/docs/#/displaying/fromnow/
+ *
+ * @param {{time:Date}} param0 input parameters
+ */
+const formatTime = ({
+  time = "",
+  fullDate = false,
+  withTime = false,
+  ago = true,
+}) => {
+  if (fullDate) {
+    let format = "LL";
+    if (withTime) {
+      format += "L";
+    }
+    return moment(time).format(format);
+  }
+  return moment(time).fromNow(!ago);
+};
+
+export default formatTime;
+
+/**
+ * formats the runtime in seconds to US-EN format.
+ */
+export const formatRunTime = (runtime: number) => {
+  if (runtime < 60) return `${runtime} sec.`;
+  let min = runtime / 60;
+  min = ~~min;
+  const remSec = runtime % 60;
+  return `${min} min. ${remSec} sec.`;
+};

app/routes/__app/setlists/index.tsx

@@ -1,13 +1,17 @@
 import type { Setlist } from "@prisma/client";
 import { Link } from "@remix-run/react";
+import type { LoaderArgs } from "@remix-run/node";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { Button } from "~/components/Button";
 import { Search } from "~/components/Search";
-import { getSetlists } from "~/db/setlist.db";
 import { useSearch } from "~/lib/useSearch";
+import { requireAuthentication } from "~/utils/auth.server";
+import { getSetlistsByUserId } from "~/db/setlist.db";
 
-export async function loader() {
-  const setlists = await getSetlists();
+export async function loader({ request }: LoaderArgs) {
+  const user = await requireAuthentication(request);
+
+  const setlists = await getSetlistsByUserId(user.id);
   return typedjson({
     setlists,
   });

app/routes/__app/setlists/new.tsx

@@ -3,15 +3,19 @@ import { redirect } from "@remix-run/node";
 import { typedjson } from "remix-typedjson";
 import { createSetlist, setQRCode } from "~/db/setlist.db";
 import { formDataToJson } from "~/helpers/formDataToJson";
+import { currentAuthedUser } from "~/utils/auth.server";
 
 export async function action({ request }: ActionArgs) {
+  const user = await currentAuthedUser(request);
+  if (!user) return redirect("/");
   const formData = formDataToJson(await request.formData());
   if (!formData.name) return;
 
   try {
     const setlist = await createSetlist({
       name: formData.name as string,
       description: formData?.description as string,
+      authorId: user.id as number,
     });
     await setQRCode(setlist, request);
     return redirect(`/setlists`);

app/routes/__app/songs/$id/edit.tsx

@@ -94,18 +94,17 @@ export async function action({ request }: ActionArgs) {
   const formDataAsJson = formDataToJson(
     await request.formData()
   ) as unknown as ISong;
-  const id = formDataAsJson.id;
-  const title = formDataAsJson.title;
-  const attribution = formDataAsJson.attribution;
+  const { notes, runtime, title, attribution, id } = formDataAsJson;
   const stanzas = JSON.stringify(formDataAsJson.stanzas);
-
   try {
     const updatedSong = await updateSong({
       id,
       data: {
         title,
         attribution,
         stanzas,
+        notes,
+        runtime: +runtime,
       },
     });
     return typedjson({ ...updatedSong });

app/routes/__app/songs/$id/index.tsx

@@ -4,6 +4,7 @@ import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { Button } from "~/components/Button";
 import { Stanza } from "~/components/Stanza";
 import { getSong } from "~/db/song.db";
+import { formatRunTime } from "~/helpers/formatTime";
 
 export async function loader({ params }: LoaderArgs) {
   if (!params.id) throw new Response("Not Found", { status: 404 });
@@ -19,7 +20,7 @@ export async function loader({ params }: LoaderArgs) {
 
 export default function () {
   const { song } = useTypedLoaderData<typeof loader>();
-  console.log(song.stanzas);
+
   return (
     <div className="max-w-xl mx-auto space-y-2">
       <div className="flex items-center">
@@ -87,12 +88,27 @@ export default function () {
             <p className="text-xl w-full bg-inherit py-1 outline-none hover:cursor-text resize-none text-stone-500">
               {song.attribution}
             </p>
+            <p className="text-xl w-full bg-inherit py-1 outline-none hover:cursor-text resize-none text-stone-500">
+              Run Time: {formatRunTime(song.runtime)}
+            </p>
           </div>
           <div className="space-y-7">
             {song.stanzas.map((stanza) => (
               <Stanza stanza={stanza} key={stanza.id} />
             ))}
           </div>
+          <div>
+            <h2>Notes</h2>
+            <p className="text-xl w-full bg-inherit py-1 outline-none hover:cursor-text resize-none text-stone-500">
+              {song.notes}
+            </p>
+            {/* <h2>Public domain status</h2>
+            <p className="text-xl w-full bg-inherit py-1 outline-none hover:cursor-text resize-none text-stone-500">
+              {song.claimedPublicDomain
+                ? "This song is considered in the public domain"
+                : "This song is not part of the public domain. Contact the writer, label, composer for use rights."}
+            </p> */}
+          </div>
         </div>
       </div>
     </div>

app/routes/__app/songs/index.tsx

@@ -5,14 +5,13 @@ import { Form, Link } from "@remix-run/react";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { Button } from "~/components/Button";
 import { Search } from "~/components/Search";
-import { getSongs } from "~/db/song.db";
+import { getUserSongs } from "~/db/song.db";
 import { useSearch } from "~/lib/useSearch";
 import { requireAuthentication } from "~/utils/auth.server";
 
 export async function loader({ request }: LoaderArgs) {
   const user = await requireAuthentication(request);
-  console.log(user);
-  return typedjson({ songs: await getSongs() });
+  return typedjson({ songs: await getUserSongs(user.id) });
 }
 
 export default function SongsIndex() {

package.json

@@ -10,6 +10,7 @@
     "db:deploy": "npx prisma migrate deploy",
     "db:push": "npx prisma db push",
     "db:reset": "rm -r prisma/data.db && npm run db:push",
+    "db:hard-refresh": "rm -r prisma/data.db && npm run db:push && npm run db:seed",
     "db:seed": "npx prisma db seed",
     "db:studio": "npx prisma studio -p 7777 --browser none",
     "dev": "concurrently \"npm run dev:css\" \"remix dev\"",
@@ -40,6 +41,7 @@
     "debounce": "^1.2.1",
     "dotenv-cli": "^6.0.0",
     "fuse.js": "^6.6.2",
+    "moment": "^2.28.0",
     "qrcode": "^1.5.1",
     "qs": "^6.11.0",
     "react": "^18.2.0",