✨ remember vote and properly store session id

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

@@ -1,8 +1,8 @@
 <script lang="ts">
 import { defineComponent } from "vue";
-import { votePayload } from "../types";
 import PieChart from "./piechart.vue";
 import store from "../store";
+import Vote from "../../../models/vote";
 
 const FIBONACCI = ["0", "0.5", "1", "2", "3", "5", "8", "13", "💬"] as const;
 const TSHIRTS = ["XS", "S", "M", "L", "XL", "💬"] as const;
@@ -25,6 +25,9 @@ const Estimate = defineComponent({
  components: {
  PieChart,
  },
+ data(): pointsData {
+ return { mode: mode.Fibonacci };
+ },
  computed: {
  options(): Readonly<Array<string>> {
  return modeMap[this.mode as mode];
@@ -39,7 +42,7 @@ const Estimate = defineComponent({
 
  if (!votes.has(value)) votes.set(value, 0);
 
- votes.set(value, votes.get(value)! + 1);
+ votes.set(value, (votes.get(value) ?? 0) + 1);
  });
 
  return votes;
@@ -52,9 +55,6 @@ const Estimate = defineComponent({
  );
  },
  },
- data(): pointsData {
- return { mode: mode.Fibonacci };
- },
  methods: {
  classes(option: string) {
  const classes = [];
@@ -64,10 +64,19 @@ const Estimate = defineComponent({
  return classes;
  },
  vote(option: string) {
- const payload: votePayload = {
- person: store.state.session.id,
- vote: option,
- };
+ const payload: Vote =
+ this.you ??
+ (() => {
+ const v = new Vote();
+ v.participantId = this.$store.state.session.id;
+
+ if (this.$store.state.story.story?.id) {
+ v.storyId = this.$store.state.story.story.id;
+ }
+
+ return v;
+ })();
+ payload.vote = option;
  store.dispatch("story.vote", payload);
  },
  },
@@ -79,9 +88,9 @@ export default Estimate;
 <template>
  <div aria-live="polite">
  <h2>Estimate</h2>
- <ul class="unstyled grid" v-if="!$store.state.story.revealed">
- <li v-for="option in options">
- <button @click="vote(option)" :class="classes(option)">
+ <ul v-if="!$store.state.story.revealed" class="unstyled grid">
+ <li v-for="option in options" :key="option">
+ <button :class="classes(option)" @click="vote(option)">
  {{ option }}
  </button>
  </li>

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

@@ -7,6 +7,7 @@ const SESSION_PREFIX = `${LOCALSTORAGE_GLOBAL_PREFIX}session.`;
 
 const keys = {
  darkMode: `${SESSION_PREFIX}darkMode`,
+ sessionId: `${SESSION_PREFIX}sessionId`,
 };
 
 const session: Module<sessionState, storeState> = {
@@ -17,8 +18,15 @@ const session: Module<sessionState, storeState> = {
  },
  },
  state() {
+ let sessionId = localStorage.getItem(keys.sessionId);
+
+ if (!sessionId) {
+ sessionId = v4();
+ localStorage.setItem(keys.sessionId, sessionId);
+ }
+
  return {
- id: v4(),
+ id: sessionId,
  settings: {
  darkMode: JSON.parse(localStorage.getItem(keys.darkMode) ?? "false"),
  },

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

@@ -3,7 +3,7 @@ import Story from "../../../../models/story";
 import Vote from "../../../../models/vote";
 import remult from "../../remult";
 import router from "../../router";
-import { storeState, storyState, votePayload } from "../../types";
+import { storeState, storyState } from "../../types";
 
 const story: Module<storyState | Promise<storyState>, storeState> = {
  actions: {
@@ -17,15 +17,16 @@ const story: Module<storyState | Promise<storyState>, storeState> = {
  "story.reveal"(ctx) {
  ctx.commit("story.revealed", true);
  },
- async "story.vote"(ctx, payload: votePayload) {
+ async "story.vote"(ctx, payload: Vote) {
+ if (!(ctx.state as storyState).story) {
+ return;
+ }
+
  await remult
  .repo(Vote)
- .insert({
- storyId: (ctx.state as storyState).story?.id,
- participantId: payload.person,
- vote: payload.vote,
- })
- .then((v) => (ctx.state as storyState).story?.votes.push(v));
+ .save(payload)
+ .then((vote) => remult.repo(Story).findId(vote.storyId ?? ""))
+ .then((story) => ctx.commit("story", story));
  },
  },
  mutations: {

src/front-end/scripts/types.ts

@@ -18,8 +18,3 @@ export type storyState = {
  revealed: boolean;
  story: Story | null;
 };
-
-export type votePayload = {
- person: string;
- vote: string;
-};