✨ join story with empty vote

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;
 }