+ {/* Modal for Adding Rooms */}
+
+
+ );
+}
diff --git a/app/routes/room.$roomId.tsx b/app/routes/room.$roomId.tsx
new file mode 100644
index 0000000..16db1a7
--- /dev/null
+++ b/app/routes/room.$roomId.tsx
@@ -0,0 +1,456 @@
+import { getAuth } from "@clerk/remix/ssr.server";
+import { LoaderFunction, redirect } from "@remix-run/node";
+import { Link, useParams } from "@remix-run/react";
+import {
+ CheckCircleIcon,
+ CopyIcon,
+ CrownIcon,
+ DownloadIcon,
+ EyeIcon,
+ EyeOffIcon,
+ HourglassIcon,
+ RefreshCwIcon,
+ SaveIcon,
+ ShieldIcon,
+ StarIcon,
+} from "lucide-react";
+import { useEffect, useState } from "react";
+import LoadingIndicator from "~/components/LoadingIndicator";
+import { useEventSource } from "remix-utils/sse/react";
+import { PresenceItem, RoomResponse, VoteResponse } from "~/services/types";
+import { isAdmin, jsonToCsv } from "~/services/helpers";
+import { useUser } from "@clerk/remix";
+
+export const loader: LoaderFunction = async (args) => {
+ const { userId } = await getAuth(args);
+
+ if (!userId) {
+ return redirect("/sign-in");
+ }
+ return {};
+};
+
+export default function Room() {
+ const { user } = useUser();
+ const params = useParams();
+ const roomId = params.roomId;
+
+ let roomFromDb = useEventSource(`/api/room/get/${roomId}`, {
+ event: `room-${params.roomId}`,
+ });
+
+ let votesFromDb = useEventSource(`/api/votes/get/${roomId}`, {
+ event: `votes-${params.roomId}`,
+ });
+
+ let presenceData = useEventSource(`/api/room/presence/get/${roomId}`, {
+ event: `${user?.id}-${params.roomId}`,
+ });
+
+ let roomFromDbParsed = JSON.parse(roomFromDb!) as RoomResponse | undefined;
+ let votesFromDbParsed = JSON.parse(votesFromDb!) as VoteResponse | undefined;
+ let presenceDateParsed = JSON.parse(presenceData!) as
+ | PresenceItem[]
+ | undefined;
+
+ const [storyNameText, setStoryNameText] = useState
+
+
+ {roomsFromDbParsed && roomsFromDbParsed.length > 0 && (
+
+
+
+
+ Create a new room!
+ +
+
+ {
+ setRoomName(event.target.value);
+ }}
+ />
+
+
+
+ {roomName.length > 0 && (
+
+ )}
+
+
+
+ {/* head */}
+
+
+
+ )}
+
+
+ {!roomsFromDbParsed && | Room Name | +Actions | +
|---|---|
| + {room.roomName} + | +
+
+ |
+
{matchedVote.value}
;
+ } else {
+ return
+
+ ) : (
+
+ {roomFromDbParsed.roomName}
+
+
+
+ {roomFromDb && (
+ ID:
+ {roomFromDbParsed.id}
+
+
+
+
+ )}
+
+ {!!roomFromDbParsed &&
+ (roomFromDbParsed.userId === user?.id ||
+ isAdmin(user?.publicMetadata)) && (
+ <>
+
+
+ + Story: {roomFromDbParsed.storyName} +
+ +-
+ {presenceData &&
+ presenceDateParsed
+ ?.filter(
+ (value, index, self) =>
+ index ===
+ self.findIndex(
+ (presenceItem) => presenceItem.userId === value.userId
+ )
+ )
+ .map((presenceItem) => {
+ return (
+
-
+ ++ +
+
+ {presenceItem.userFullName}{" "} + {presenceItem.isAdmin && ( + +
+ + {roomFromDb && + votesFromDb && + voteString( + roomFromDbParsed?.visible!, + votesFromDbParsed, + presenceItem + )} ++ + )}{" "} + {presenceItem.isVIP && ( + + + + )}{" "} + {presenceItem.userId === + roomFromDbParsed?.userId && ( + + + + )} + {" : "} +
+ );
+ })}
+
+ {roomFromDbParsed.scale?.split(",").map((scaleItem, index) => {
+ return (
+
+ );
+ })}
+
+
+
+
+ )}
+
+
+ Room Settings
+ + + + { + setRoomScale(event.target.value); + }} + /> + + + + { + setStoryNameText(event.target.value); + }} + /> + +
+
+
+
+
+
+
+
+
+
+ {votesFromDb &&
+ (roomFromDbParsed?.logs.length > 0 ||
+ votesFromDb.length > 0) && (
+
+
+
+ )}
+ 4ī¸âŖ0ī¸âŖ4ī¸âŖ
++ Oops! This room does not appear to exist, or may have been deleted! đĸ +
+ + Back to Home + + + ); + } +} diff --git a/app/routes/sign-in.$.tsx b/app/routes/sign-in.$.tsx new file mode 100644 index 0000000..0421a36 --- /dev/null +++ b/app/routes/sign-in.$.tsx @@ -0,0 +1,10 @@ +import { SignIn } from "@clerk/remix"; + +export default function SignInPage() { + return ( +
+
+ );
+}
diff --git a/app/routes/sign-up.$.tsx b/app/routes/sign-up.$.tsx
new file mode 100644
index 0000000..9a9d777
--- /dev/null
+++ b/app/routes/sign-up.$.tsx
@@ -0,0 +1,10 @@
+import { SignUp } from "@clerk/remix";
+
+export default function SignUpPage() {
+ return (
+ Sign In route
+
+
+ );
+}
diff --git a/app/services/db.server.ts b/app/services/db.server.ts
new file mode 100644
index 0000000..5f38aae
--- /dev/null
+++ b/app/services/db.server.ts
@@ -0,0 +1,10 @@
+import { drizzle } from "drizzle-orm/libsql";
+import { createClient } from "@libsql/client";
+import * as schema from "./schema";
+
+const client = createClient({
+ url: process.env.DATABASE_URL!,
+ authToken: process.env.DATABASE_AUTH_TOKEN!,
+});
+
+export const db = drizzle(client, { schema });
diff --git a/app/services/emitter.server.ts b/app/services/emitter.server.ts
new file mode 100644
index 0000000..27baefc
--- /dev/null
+++ b/app/services/emitter.server.ts
@@ -0,0 +1,18 @@
+import { EventEmitter } from "events";
+
+let emitter: EventEmitter;
+
+declare global {
+ var __emitter: EventEmitter | undefined;
+}
+
+if (process.env.NODE_ENV === "production") {
+ emitter = new EventEmitter();
+} else {
+ if (!global.__emitter) {
+ global.__emitter = new EventEmitter();
+ }
+ emitter = global.__emitter;
+}
+
+export { emitter };
diff --git a/app/services/helpers.ts b/app/services/helpers.ts
new file mode 100644
index 0000000..937ed6e
--- /dev/null
+++ b/app/services/helpers.ts
@@ -0,0 +1,47 @@
+import { json2csv } from "csv42";
+
+export const jsonToCsv = (jsonObject: Array