Simplify updates (WIP)

backend/src/common/actions.ts

@@ -15,6 +15,7 @@ const actions = {
   EDIT_OPTIONS: 'retrospected/session/options/edit',
   EDIT_COLUMNS: 'retrospected/session/columns/edit',
   SAVE_TEMPLATE: 'retrospected/session/template/save',
+  SAVE_SESSION_SETTINGS: 'retrospected/session/settings/save',
   LOCK_SESSION: 'retrospected/session/lock',
   REQUEST_BOARD: 'retrospected/session/request',
   USER_READY: 'retrospected/user-ready',
@@ -34,6 +35,7 @@ const actions = {
   RECEIVE_BOARD: 'retrospected/posts/receive-all',
   RECEIVE_OPTIONS: 'retrospected/session/options/receive',
   RECEIVE_COLUMNS: 'retrospected/session/columns/receive',
+  RECEIVE_SESSION_SETTINGS: 'retrospected/session/settings/receive',
   RECEIVE_CLIENT_LIST: 'retrospected/session/receive/client-list',
   RECEIVE_SESSION_NAME: 'retrospected/session/receive/rename',
   RECEIVE_LOCK_SESSION: 'retrospected/session/receive/lock',

backend/src/common/types.ts

@@ -1,16 +1,19 @@
-export interface Session extends PostContainer, Entity {
+export interface SessionSettings {
   name: string | null;
+  moderator: User;
+  options: SessionOptions;
+  columns: ColumnDefinition[];
+  locked: boolean;
+  timer: Date | null;
+}
+
+export interface Session extends SessionSettings, PostContainer, Entity {
   posts: Post[];
   groups: PostGroup[];
-  columns: ColumnDefinition[];
   messages: Message[];
-  options: SessionOptions;
   encrypted: string | null;
-  locked: boolean;
   createdBy: User;
-  moderator: User;
   ready: string[];
-  timer: Date | null;
   demo: boolean;
 }
 
@@ -212,6 +215,7 @@ export type TrackingEvent =
   | 'home/load-previous'
   | 'game/session/edit-options'
   | 'game/session/edit-columns'
+  | 'game/session/save-options'
   | 'game/session/reset'
   | 'game/session/disconnect'
   | 'game/session/unexpected-disconnection'

backend/src/common/ws.ts

@@ -2,6 +2,7 @@ import {
   ColumnDefinition,
   Post,
   PostGroup,
+  Session,
   SessionOptions,
   User,
   VoteExtract,
@@ -63,6 +64,11 @@ export interface WsSaveTemplatePayload {
   options: SessionOptions;
 }
 
+export interface WsSaveSessionSettingsPayload {
+  session: Session;
+  saveAsTemplate: boolean;
+}
+
 export interface WsUserReadyPayload {
   userId: string;
   ready: boolean;

frontend/src/common/actions.ts

@@ -15,6 +15,7 @@ const actions = {
   EDIT_OPTIONS: 'retrospected/session/options/edit',
   EDIT_COLUMNS: 'retrospected/session/columns/edit',
   SAVE_TEMPLATE: 'retrospected/session/template/save',
+  SAVE_SESSION_SETTINGS: 'retrospected/session/settings/save',
   LOCK_SESSION: 'retrospected/session/lock',
   REQUEST_BOARD: 'retrospected/session/request',
   USER_READY: 'retrospected/user-ready',
@@ -34,6 +35,7 @@ const actions = {
   RECEIVE_BOARD: 'retrospected/posts/receive-all',
   RECEIVE_OPTIONS: 'retrospected/session/options/receive',
   RECEIVE_COLUMNS: 'retrospected/session/columns/receive',
+  RECEIVE_SESSION_SETTINGS: 'retrospected/session/settings/receive',
   RECEIVE_CLIENT_LIST: 'retrospected/session/receive/client-list',
   RECEIVE_SESSION_NAME: 'retrospected/session/receive/rename',
   RECEIVE_LOCK_SESSION: 'retrospected/session/receive/lock',

frontend/src/common/types.ts

@@ -1,16 +1,19 @@
-export interface Session extends PostContainer, Entity {
+export interface SessionSettings {
   name: string | null;
+  moderator: User;
+  options: SessionOptions;
+  columns: ColumnDefinition[];
+  locked: boolean;
+  timer: Date | null;
+}
+
+export interface Session extends SessionSettings, PostContainer, Entity {
   posts: Post[];
   groups: PostGroup[];
-  columns: ColumnDefinition[];
   messages: Message[];
-  options: SessionOptions;
   encrypted: string | null;
-  locked: boolean;
   createdBy: User;
-  moderator: User;
   ready: string[];
-  timer: Date | null;
   demo: boolean;
 }
 
@@ -212,6 +215,7 @@ export type TrackingEvent =
   | 'home/load-previous'
   | 'game/session/edit-options'
   | 'game/session/edit-columns'
+  | 'game/session/save-options'
   | 'game/session/reset'
   | 'game/session/disconnect'
   | 'game/session/unexpected-disconnection'

frontend/src/common/ws.ts

@@ -2,6 +2,7 @@ import {
   ColumnDefinition,
   Post,
   PostGroup,
+  Session,
   SessionOptions,
   User,
   VoteExtract,
@@ -63,6 +64,11 @@ export interface WsSaveTemplatePayload {
   options: SessionOptions;
 }
 
+export interface WsSaveSessionSettingsPayload {
+  session: Session;
+  saveAsTemplate: boolean;
+}
+
 export interface WsUserReadyPayload {
   userId: string;
   ready: boolean;

frontend/src/views/Game.tsx

@@ -70,6 +70,7 @@ function GamePage() {
     onRenameSession,
     onEditOptions,
     onEditColumns,
+    onChangeSession,
     onSaveTemplate,
     onLockSession,
     onUserReady,
@@ -203,6 +204,7 @@ function GamePage() {
                 onEditColumns={onEditColumns}
                 onSaveTemplate={onSaveTemplate}
                 onLockSession={onLockSession}
+                onChangeSession={onChangeSession}
               />
             }
           />

frontend/src/views/game/board/Board.tsx

@@ -1,6 +1,12 @@
 import { useCallback } from 'react';
 import styled from '@emotion/styled';
-import { Post, PostGroup, SessionOptions, ColumnDefinition } from 'common';
+import {
+  Post,
+  PostGroup,
+  SessionOptions,
+  ColumnDefinition,
+  Session,
+} from 'common';
 import {
   DragDropContext,
   DropResult,
@@ -44,6 +50,7 @@ interface GameModeProps {
   onDeleteGroup: (group: PostGroup) => void;
   onEditOptions: (options: SessionOptions) => void;
   onEditColumns: (columns: ColumnDefinition[]) => void;
+  onChangeSession: (session: Session, saveAsTemplate: boolean) => void;
   onSaveTemplate: (
     options: SessionOptions,
     columns: ColumnDefinition[]
@@ -87,6 +94,7 @@ function GameMode({
   onEditOptions,
   onEditColumns,
   onSaveTemplate,
+  onChangeSession,
   onLockSession,
   columns,
   options,
@@ -140,9 +148,7 @@ function GameMode({
         </ClosableAlert>
       ) : null}
       <BoardHeader
-        onEditColumns={onEditColumns}
-        onEditOptions={onEditOptions}
-        onSaveTemplate={onSaveTemplate}
+        onChangeSession={onChangeSession}
         onLockSession={onLockSession}
         onRenameSession={onRenameSession}
       />

frontend/src/views/game/board/header/BoardHeader.tsx

@@ -1,6 +1,6 @@
 import { memo, useCallback } from 'react';
 import styled from '@emotion/styled';
-import { SessionOptions, ColumnDefinition } from 'common';
+import { SessionOptions, Session, SessionSettings } from 'common';
 import Typography from '@mui/material/Typography';
 import { makeStyles } from '@mui/styles';
 import { useTranslation } from 'react-i18next';
@@ -27,12 +27,7 @@ import ClosableAlert from 'components/ClosableAlert';
 
 interface BoardHeaderProps {
   onRenameSession: (name: string) => void;
-  onEditOptions: (options: SessionOptions) => void;
-  onEditColumns: (columns: ColumnDefinition[]) => void;
-  onSaveTemplate: (
-    options: SessionOptions,
-    columns: ColumnDefinition[]
-  ) => void;
+  onChangeSession: (session: SessionSettings, saveAsTemplate: boolean) => void;
   onLockSession: (locked: boolean) => void;
 }
 
@@ -46,9 +41,7 @@ const useStyles = makeStyles({
 });
 
 function BoardHeader({
-  onEditOptions,
-  onEditColumns,
-  onSaveTemplate,
+  onChangeSession,
   onLockSession,
   onRenameSession,
 }: BoardHeaderProps) {
@@ -74,9 +67,9 @@ function BoardHeader({
         ...session.options,
         blurCards: false,
       };
-      onEditOptions(modifiedOptions);
+      onChangeSession({ ...session, options: modifiedOptions }, false);
     }
-  }, [onEditOptions, session]);
+  }, [onChangeSession, session]);
 
   const handleRenameSession = useCallback(
     (name: string) => {
@@ -130,11 +123,7 @@ function BoardHeader({
         <LeftOptions>
           {canReveal ? <RevealButton onClick={handleReveal} /> : null}
           {canModifyOptions ? (
-            <ModifyOptions
-              onEditOptions={onEditOptions}
-              onEditColumns={onEditColumns}
-              onSaveTemplate={onSaveTemplate}
-            />
+            <ModifyOptions onChange={onChangeSession} session={session} />
           ) : null}
         </LeftOptions>
         <Title>

frontend/src/views/game/board/header/ModifyOptions.tsx

@@ -1,31 +1,21 @@
 import { useState, useCallback } from 'react';
 import Button from '@mui/material/Button';
 import SessionEditor from '../../../session-editor/SessionEditor';
-import { SessionOptions, ColumnDefinition, Session } from 'common';
-import { toColumnDefinitions } from '../../../../state/columns';
+import { Session } from 'common';
 import { trackEvent } from '../../../../track';
 import { Settings } from '@mui/icons-material';
 import { useTranslation } from 'react-i18next';
-import useSession from '../../useSession';
 import { IconButton, useMediaQuery } from '@mui/material';
 
 interface ModifyOptionsProps {
-  onEditOptions: (options: SessionOptions) => void;
-  onEditColumns: (columns: ColumnDefinition[]) => void;
-  onSaveTemplate: (
-    options: SessionOptions,
-    columns: ColumnDefinition[]
-  ) => void;
+  session: Session;
+  onChange: (session: Session, saveAsTemplate: boolean) => void;
 }
 
-function ModifyOptions({
-  onEditOptions,
-  onEditColumns,
-  onSaveTemplate,
-}: ModifyOptionsProps) {
+function ModifyOptions({ session, onChange }: ModifyOptionsProps) {
   const { t } = useTranslation();
   const [open, setOpen] = useState(false);
-  const { session } = useSession();
+
   const small = useMediaQuery('(max-width: 500px)');
 
   const handleChange = useCallback(
@@ -34,21 +24,23 @@ function ModifyOptions({
       if (!session) {
         return;
       }
-      const { options, columns } = session;
-      if (options !== modifiedSession.options) {
-        onEditOptions(modifiedSession.options);
-        trackEvent('game/session/edit-options');
-      }
-      if (columns !== modifiedSession.columns) {
-        onEditColumns(toColumnDefinitions(modifiedSession.columns));
-        trackEvent('game/session/edit-columns');
-      }
-      if (saveAsTemplate) {
-        onSaveTemplate(modifiedSession.options, modifiedSession.columns);
-        trackEvent('custom-modal/template/set-defaut');
-      }
+      trackEvent('game/session/save-options');
+      onChange(modifiedSession, saveAsTemplate);
+      // const { options, columns } = session;
+      // if (options !== modifiedSession.options) {
+      //   onEditOptions(modifiedSession.options);
+      //   trackEvent('game/session/edit-options');
+      // }
+      // if (columns !== modifiedSession.columns) {
+      //   onEditColumns(toColumnDefinitions(modifiedSession.columns));
+      //   trackEvent('game/session/edit-columns');
+      // }
+      // if (saveAsTemplate) {
+      //   onSaveTemplate(modifiedSession.options, modifiedSession.columns);
+      //   trackEvent('custom-modal/template/set-defaut');
+      // }
     },
-    [onEditOptions, onEditColumns, onSaveTemplate, session]
+    [onChange, session]
   );
 
   if (!session) {

frontend/src/views/game/useGame.ts

@@ -26,6 +26,7 @@ import {
   WsCancelVotesPayload,
   WsReceiveCancelVotesPayload,
   WsReceiveTimerStartPayload,
+  WsSaveSessionSettingsPayload,
 } from 'common';
 import { v4 } from 'uuid';
 import find from 'lodash/find';
@@ -131,6 +132,7 @@ function useGame(sessionId: string) {
     resetSession,
     editOptions,
     editColumns,
+    editSessionSettings,
     lockSession,
     userReady,
     cancelVotes,
@@ -767,6 +769,20 @@ function useGame(sessionId: string) {
     [send, editColumns]
   );
 
+  const onChangeSession = useCallback(
+    (session: Session, saveAsTemplate: boolean) => {
+      if (send) {
+        editSessionSettings(session);
+        send<WsSaveSessionSettingsPayload>(Actions.SAVE_SESSION_SETTINGS, {
+          session,
+          saveAsTemplate,
+        });
+        trackAction(Actions.SAVE_SESSION_SETTINGS);
+      }
+    },
+    [send, editSessionSettings]
+  );
+
   const onSaveTemplate = useCallback(
     (options: SessionOptions, columns: ColumnDefinition[]) => {
       if (send) {
@@ -832,6 +848,7 @@ function useGame(sessionId: string) {
     onRenameSession,
     onEditOptions,
     onEditColumns,
+    onChangeSession,
     onSaveTemplate,
     onLockSession,
     reconnect,