✨ join story with empty vote

Author: haliphax

src/back-end/routes.ts

@@ -1,11 +1,13 @@
 import { Application } from "express";
 import glitchWebhook from "./routes/glitch-webhook";
 import { storySSE } from "./routes/story/events";
+import join from "./routes/story/join";
 import reveal from "./routes/story/reveal";
 import vote from "./routes/story/vote";
 
 const routes = async (app: Application) => {
 	glitchWebhook(app);
+	join(app);
 	reveal(app);
 	storySSE(app);
 	vote(app);

src/back-end/routes/story/join.ts

@@ -0,0 +1,40 @@
+import { Application } from "express";
+import { remult } from "remult";
+import { Story } from "../../../models/story";
+import server from "../../server";
+import { updateStory } from "./events";
+
+const join = (app: Application) =>
+	app.post("/story/:story/join", server.withRemult, async (r, s) => {
+		if (!remult.user) {
+			s.sendStatus(403);
+			return;
+		}
+
+		const storyId = r.params.story;
+		const story = await remult.repo(Story).findId(storyId);
+
+		console.log(`User ${remult.user.id} joining ${storyId}`);
+
+		if (!story._votes?.find((v) => v.participant.id === remult.user?.id)) {
+			if (!story._votes) story._votes = [];
+
+			story._votes.push({
+				participant: r.body,
+				vote: null,
+			});
+
+			await remult.repo(Story).update(story.id, story);
+		}
+
+		const updatedStory = await remult.repo(Story).findId(storyId);
+
+		if (!updatedStory) {
+			throw new Error("No story");
+		}
+
+		updateStory(updatedStory);
+		s.sendStatus(201);
+	});
+
+export default join;

src/back-end/routes/story/reveal.ts

@@ -12,13 +12,13 @@ const reveal = (app: Application) =>
 		await remult.repo(Story).update(story, { revealed: true });
 		s.sendStatus(202);
 
-		const storyObject = await remult.repo(Story).findId(story);
+		const updatedStory = await remult.repo(Story).findId(story);
 
-		if (!storyObject) {
+		if (!updatedStory) {
 			throw new Error("No story");
 		}
 
-		updateStory(storyObject);
+		updateStory(updatedStory);
 	});
 
 export default reveal;

src/front-end/scripts/components/estimate.vue

@@ -36,6 +36,8 @@ const Estimate = defineComponent({
 			const votes = new Map<string, number>();
 
 			store.state.story.story.votes?.map((v: Vote) => {
+				if (v.vote === null) return;
+
 				const value = v.vote.toString();
 
 				if (!votes.has(value)) votes.set(value, 0);
@@ -66,7 +68,7 @@ const Estimate = defineComponent({
 					return {
 						participant: {
 							id: this.$store.state.session.id,
-							name: this.$store.state.session.userName,
+							name: this.$store.state.session.name,
 						},
 						vote: option,
 					} as Vote;

src/front-end/scripts/components/participants.vue

@@ -22,7 +22,9 @@ export default Participants;
 					</span>
 				</span>
 				<span class="value">
-					<span>{{ v.vote }}</span>
+					<span :title="!v.vote ? 'Waiting' : 'Voted'">
+						{{ v.vote ?? "⏱️" }}
+					</span>
 				</span>
 			</li>
 		</ul>

src/front-end/scripts/store/session.ts

@@ -8,7 +8,7 @@ const SESSION_PREFIX = `${LOCALSTORAGE_GLOBAL_PREFIX}session.`;
 const keys = {
 	darkMode: `${SESSION_PREFIX}darkMode`,
 	sessionId: `${SESSION_PREFIX}sessionId`,
-	userName: `${SESSION_PREFIX}userName`,
+	name: `${SESSION_PREFIX}name`,
 };
 
 const session: Module<SessionState, StoreState> = {
@@ -17,9 +17,9 @@ const session: Module<SessionState, StoreState> = {
 			state.settings.darkMode = payload;
 			localStorage.setItem(keys.darkMode, payload.toString());
 		},
-		"session.settings.userName"(state, payload: string) {
-			state.userName = payload;
-			localStorage.setItem(keys.userName, payload);
+		"session.settings.name"(state, payload: string) {
+			state.name = payload;
+			localStorage.setItem(keys.name, payload);
 		},
 	},
 	state() {
@@ -32,7 +32,7 @@ const session: Module<SessionState, StoreState> = {
 
 		return {
 			id: sessionId,
-			userName: localStorage.getItem(keys.userName) ?? "User",
+			name: localStorage.getItem(keys.name) ?? "User",
 			settings: {
 				darkMode: JSON.parse(localStorage.getItem(keys.darkMode) ?? "false"),
 			},

src/front-end/scripts/store/story.ts

@@ -8,14 +8,27 @@ import { StoreState, StoryState } from "./types";
 
 const story: Module<StoryState | Promise<StoryState>, StoreState> = {
 	actions: {
+		async "story.join"(ctx) {
+			const storyId = router.currentRoute.value.params.story as string;
+
+			await fetch(`${ROOT_URI}story/${storyId}/join`, {
+				body: JSON.stringify(ctx.rootState.session),
+				headers: { "Content-Type": "application/json" },
+				method: "POST",
+			});
+		},
 		async "story.load"(ctx) {
+			const firstLoad = !(ctx.state as StoryState).events;
+
+			if (firstLoad) await ctx.dispatch("story.join");
+
 			const story = await remult
 				.repo(Story)
 				.findId(router.currentRoute.value.params.story as string, {
 					useCache: false,
 				});
 
-			if (!(ctx.state as StoryState).events) {
+			if (firstLoad) {
 				const events = new EventSource(`${ROOT_URI}story/${story.id}/events`);
 
 				events.addEventListener("message", () => {

src/front-end/scripts/store/types.ts

@@ -6,7 +6,7 @@ export type SessionSettings = {
 
 export type SessionState = {
 	id: string;
-	userName: string;
+	name: string;
 	settings: SessionSettings;
 };
 

src/models/story.ts

@@ -31,7 +31,7 @@ export class Story {
 				return {
 					...v,
 					participant: { ...v.participant, id: "" },
-					vote: s.revealed ? v.vote : "?",
+					vote: s.revealed ? v.vote : v.vote ? "❓" : null,
 				};
 			});
 		};

src/models/vote.ts

@@ -6,5 +6,5 @@ export class Vote {
 	participant!: Participant;
 
 	@Fields.string()
-	vote!: string;
+	vote: string | null = null;
 }