From 74cd113fb749e78baabcbf6f8a4ac5e324a98e1f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Manuel=20Lehe=CC=81?= Date: Mon, 8 Jan 2024 14:35:44 +0100 Subject: [PATCH 01/10] feat: add conditional local storage use --- .../src/common/dialogs/JoinSessionDialog.tsx | 22 +++++----- .../frontend/src/common/utils/localStorage.ts | 21 ++++++++- .../dialogs/CreateRetroSessionDialog.tsx | 33 ++++++++++---- .../components/dialogs/UsernameInputField.tsx | 43 +++++++++++++++++++ .../src/retro/hooks/useLocalStorageName.ts | 0 5 files changed, 97 insertions(+), 22 deletions(-) create mode 100644 packages/frontend/src/retro/components/dialogs/UsernameInputField.tsx create mode 100644 packages/frontend/src/retro/hooks/useLocalStorageName.ts diff --git a/packages/frontend/src/common/dialogs/JoinSessionDialog.tsx b/packages/frontend/src/common/dialogs/JoinSessionDialog.tsx index 137eafa5..6d6063f6 100644 --- a/packages/frontend/src/common/dialogs/JoinSessionDialog.tsx +++ b/packages/frontend/src/common/dialogs/JoinSessionDialog.tsx @@ -3,7 +3,6 @@ import { Dialog, DialogActions, DialogContent, - DialogContentText, DialogTitle, useMediaQuery, useTheme, @@ -17,7 +16,6 @@ import { generateId } from "../utils/generateId"; import { useBackendAdapter } from "../adapter/backendAdapter"; import { useNamespace } from "../hooks/useNamespace"; -import { TextInput } from "../components/TextInput"; import { useErrorContext } from "../context/ErrorContext"; import { LocalStorage } from "../utils/localStorage"; import { useLocalStorage } from "../hooks/useLocalStorage"; @@ -25,6 +23,7 @@ import { CallToActionButton } from "../components/buttons/CallToActionButton"; import { useDialog } from "../hooks/useDialog"; import { useRedirect } from "../hooks/useRedirect"; import { useRoomIdFromPath } from "../hooks/useRoomIdFromPath"; +import UserNameInputField from "../../retro/components/dialogs/UsernameInputField"; interface JoinSessionDialogProps { onAddToWaitingList: ({ userId, userName }: { userId: string; userName: string }) => void; @@ -60,6 +59,8 @@ export function JoinSessionDialog({ onAddToWaitingList }: JoinSessionDialogProps setIsError(false); } + function handleStorageAllowanceChange() {} + async function handleSubmit() { const roomExists = await roomIdExists({ roomId, namespace }); if (!roomExists || !roomId) { @@ -95,18 +96,15 @@ export function JoinSessionDialog({ onAddToWaitingList }: JoinSessionDialogProps > Join Session - Please provide your name for this session - diff --git a/packages/frontend/src/common/utils/localStorage.ts b/packages/frontend/src/common/utils/localStorage.ts index 9b0d4306..c680d9bb 100644 --- a/packages/frontend/src/common/utils/localStorage.ts +++ b/packages/frontend/src/common/utils/localStorage.ts @@ -1,4 +1,5 @@ const userNameKey = "userName"; +const usernameStorePermissionKey = "userAllowsNameStorage"; function setUserName(userName: string) { localStorage.setItem(userNameKey, userName); @@ -8,4 +9,22 @@ function getUserName() { return localStorage.getItem(userNameKey) ?? ""; } -export const LocalStorage = { setUserName, getUserName }; +function removeUserName() { + localStorage.removeItem(userNameKey); +} + +function setNameStorePermission(permission: boolean) { + localStorage.setItem(usernameStorePermissionKey, String(permission)); +} + +function getNameStorePermission(): boolean { + const value = localStorage.getItem(usernameStorePermissionKey); + return value === "true"; +} +export const LocalStorage = { + setUserName, + getUserName, + removeUserName, + setNameStorePermission, + getNameStorePermission, +}; diff --git a/packages/frontend/src/retro/components/dialogs/CreateRetroSessionDialog.tsx b/packages/frontend/src/retro/components/dialogs/CreateRetroSessionDialog.tsx index b203927c..bf34c4ee 100644 --- a/packages/frontend/src/retro/components/dialogs/CreateRetroSessionDialog.tsx +++ b/packages/frontend/src/retro/components/dialogs/CreateRetroSessionDialog.tsx @@ -25,6 +25,7 @@ import { useLocalStorage } from "../../../common/hooks/useLocalStorage"; import { CallToActionButton } from "../../../common/components/buttons/CallToActionButton"; import { useDialog } from "../../../common/hooks/useDialog"; import { useRedirect } from "../../../common/hooks/useRedirect"; +import UserNameInputField from "./UsernameInputField"; export function CreateRetroSessionDialog() { const { isOpen, closeDialog } = useDialog(true); @@ -50,12 +51,14 @@ export function CreateRetroSessionDialog() { const { retroState, handleChangeRetroFormat, handleSetRetroState, handleJoinSession } = useRetroContext(); const { user, setUser } = useUserContext(); + const [isNameStorageAllowed, setIsNameStorageAllowed] = useState(false); const { setRoomId } = useRoomContext(); const theme = useTheme(); const fullScreen = useMediaQuery(theme.breakpoints.down("sm")); useLocalStorage(() => { setName(LocalStorage.getUserName()); + setIsNameStorageAllowed(LocalStorage.getNameStorePermission()); }); function handleClose() { @@ -82,13 +85,25 @@ export function CreateRetroSessionDialog() { setRoomId(roomId); handleSetRetroState({ ...retroState, title }); setUser(newUser); - LocalStorage.setUserName(name); + if (isNameStorageAllowed) { + LocalStorage.setUserName(name); + } handleJoinSession(newUser); handleChangeRetroFormat(format); redirectToRoom(roomId); handleClose(); } + function handleStorageAllowanceChange(event: React.ChangeEvent) { + if (event.target.checked) { + LocalStorage.setUserName(name); + } else { + LocalStorage.removeUserName(); + } + LocalStorage.setNameStorePermission(event.target.checked); + setIsNameStorageAllowed(event.target.checked); + } + return ( Create Retro Session - Please enter your name - - Please provide your name for this session + Please provide a name for this session void; + onChange: (event: React.ChangeEvent) => void; + isError: boolean; + storagePermissionLabel: string; + isStorageAllowed: boolean; + onStorageAllowanceChange: (event: React.ChangeEvent) => void; +} +export default function UserNameInputField({ + userName, + label, + onSubmit, + onChange, + isError, + isStorageAllowed, + storagePermissionLabel, + onStorageAllowanceChange, +}: UserNameInputFieldProps) { + return ( + <> + {label} + + } + label={storagePermissionLabel} + /> + + ); +} diff --git a/packages/frontend/src/retro/hooks/useLocalStorageName.ts b/packages/frontend/src/retro/hooks/useLocalStorageName.ts new file mode 100644 index 00000000..e69de29b From 85788355281dc095c0048c8a9fa64311cf04449a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Manuel=20Lehe=CC=81?= Date: Mon, 8 Jan 2024 15:12:25 +0100 Subject: [PATCH 02/10] feat: extract local username to hook --- .../src/common/dialogs/JoinSessionDialog.tsx | 18 +++++------ .../dialogs/CreateRetroSessionDialog.tsx | 32 ++++++------------- .../src/retro/hooks/useLocalStorageName.ts | 31 ++++++++++++++++++ 3 files changed, 49 insertions(+), 32 deletions(-) diff --git a/packages/frontend/src/common/dialogs/JoinSessionDialog.tsx b/packages/frontend/src/common/dialogs/JoinSessionDialog.tsx index 6d6063f6..e9014090 100644 --- a/packages/frontend/src/common/dialogs/JoinSessionDialog.tsx +++ b/packages/frontend/src/common/dialogs/JoinSessionDialog.tsx @@ -17,13 +17,12 @@ import { generateId } from "../utils/generateId"; import { useBackendAdapter } from "../adapter/backendAdapter"; import { useNamespace } from "../hooks/useNamespace"; import { useErrorContext } from "../context/ErrorContext"; -import { LocalStorage } from "../utils/localStorage"; -import { useLocalStorage } from "../hooks/useLocalStorage"; import { CallToActionButton } from "../components/buttons/CallToActionButton"; import { useDialog } from "../hooks/useDialog"; import { useRedirect } from "../hooks/useRedirect"; import { useRoomIdFromPath } from "../hooks/useRoomIdFromPath"; import UserNameInputField from "../../retro/components/dialogs/UsernameInputField"; +import useLocalStorageName from "../../retro/hooks/useLocalStorageName"; interface JoinSessionDialogProps { onAddToWaitingList: ({ userId, userName }: { userId: string; userName: string }) => void; @@ -39,6 +38,9 @@ export function JoinSessionDialog({ onAddToWaitingList }: JoinSessionDialogProps handleChange, isValid, } = useValidatedTextInput({ minLength: 1, maxLength: 40 }); + const { isStorageAllowed, saveNameLocally, handleAllowanceChange } = useLocalStorageName({ + setName, + }); const { redirectBackToHome, redirectToRoom } = useRedirect(); const { setError } = useErrorContext(); const { setRoomId } = useRoomContext(); @@ -49,10 +51,6 @@ export function JoinSessionDialog({ onAddToWaitingList }: JoinSessionDialogProps const namespace = useNamespace(); const { roomIdExists } = useBackendAdapter(); - useLocalStorage(() => { - setName(LocalStorage.getUserName()); - }); - function handleClose() { setName(""); closeDialog(); @@ -80,7 +78,7 @@ export function JoinSessionDialog({ onAddToWaitingList }: JoinSessionDialogProps }; setRoomId(roomId); setUser(newUser); - LocalStorage.setUserName(name); + saveNameLocally(name); onAddToWaitingList({ userId: newUser.id, userName: name }); redirectToRoom(roomId); handleClose(); @@ -102,9 +100,11 @@ export function JoinSessionDialog({ onAddToWaitingList }: JoinSessionDialogProps onSubmit={handleSubmit} onChange={handleChange} isError={isError} - isStorageAllowed={true} + isStorageAllowed={isStorageAllowed} storagePermissionLabel="Allow local username storage" - onStorageAllowanceChange={handleStorageAllowanceChange} + onStorageAllowanceChange={(event) => { + handleAllowanceChange(event.target.checked); + }} /> diff --git a/packages/frontend/src/retro/components/dialogs/CreateRetroSessionDialog.tsx b/packages/frontend/src/retro/components/dialogs/CreateRetroSessionDialog.tsx index bf34c4ee..22e3ed52 100644 --- a/packages/frontend/src/retro/components/dialogs/CreateRetroSessionDialog.tsx +++ b/packages/frontend/src/retro/components/dialogs/CreateRetroSessionDialog.tsx @@ -20,12 +20,11 @@ import { generateId } from "../../../common/utils/generateId"; import { TextInput } from "../../../common/components/TextInput"; import { useValidatedTextInput } from "../../../common/hooks/useValidatedTextInput"; import { useRoomContext } from "../../../common/context/RoomContext"; -import { LocalStorage } from "../../../common/utils/localStorage"; -import { useLocalStorage } from "../../../common/hooks/useLocalStorage"; import { CallToActionButton } from "../../../common/components/buttons/CallToActionButton"; import { useDialog } from "../../../common/hooks/useDialog"; import { useRedirect } from "../../../common/hooks/useRedirect"; import UserNameInputField from "./UsernameInputField"; +import useLocalStorageName from "../../hooks/useLocalStorageName"; export function CreateRetroSessionDialog() { const { isOpen, closeDialog } = useDialog(true); @@ -51,16 +50,13 @@ export function CreateRetroSessionDialog() { const { retroState, handleChangeRetroFormat, handleSetRetroState, handleJoinSession } = useRetroContext(); const { user, setUser } = useUserContext(); - const [isNameStorageAllowed, setIsNameStorageAllowed] = useState(false); + const { isStorageAllowed, saveNameLocally, handleAllowanceChange } = useLocalStorageName({ + setName, + }); const { setRoomId } = useRoomContext(); const theme = useTheme(); const fullScreen = useMediaQuery(theme.breakpoints.down("sm")); - useLocalStorage(() => { - setName(LocalStorage.getUserName()); - setIsNameStorageAllowed(LocalStorage.getNameStorePermission()); - }); - function handleClose() { setName(""); setTitle(""); @@ -85,25 +81,13 @@ export function CreateRetroSessionDialog() { setRoomId(roomId); handleSetRetroState({ ...retroState, title }); setUser(newUser); - if (isNameStorageAllowed) { - LocalStorage.setUserName(name); - } + saveNameLocally(name); handleJoinSession(newUser); handleChangeRetroFormat(format); redirectToRoom(roomId); handleClose(); } - function handleStorageAllowanceChange(event: React.ChangeEvent) { - if (event.target.checked) { - LocalStorage.setUserName(name); - } else { - LocalStorage.removeUserName(); - } - LocalStorage.setNameStorePermission(event.target.checked); - setIsNameStorageAllowed(event.target.checked); - } - return ( { + handleAllowanceChange(event.target.checked); + }} /> diff --git a/packages/frontend/src/retro/hooks/useLocalStorageName.ts b/packages/frontend/src/retro/hooks/useLocalStorageName.ts index e69de29b..09982eb4 100644 --- a/packages/frontend/src/retro/hooks/useLocalStorageName.ts +++ b/packages/frontend/src/retro/hooks/useLocalStorageName.ts @@ -0,0 +1,31 @@ +import { useLocalStorage } from "../../common/hooks/useLocalStorage"; +import { useState } from "react"; +import { LocalStorage } from "../../common/utils/localStorage"; + +interface useLocalStorageNameProps { + setName: (name: string) => void; +} +export default function useLocalStorageName({ setName }: useLocalStorageNameProps) { + const [isStorageAllowed, setIsStorageAllowed] = useState(false); + + useLocalStorage(() => { + setName(LocalStorage.getUserName()); + setIsStorageAllowed(LocalStorage.getNameStorePermission()); + }); + + function saveNameLocally(name: string) { + if (isStorageAllowed) { + LocalStorage.setUserName(name); + } + } + + function handleAllowanceChange(isAllowed: boolean) { + if (!isAllowed) { + LocalStorage.removeUserName(); + } + LocalStorage.setNameStorePermission(isAllowed); + setIsStorageAllowed(isAllowed); + } + + return { isStorageAllowed, saveNameLocally, handleAllowanceChange }; +} From 3331c987d7ea0fea63b044e84b22c3e4dcf229d6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Manuel=20Lehe=CC=81?= Date: Mon, 8 Jan 2024 15:12:47 +0100 Subject: [PATCH 03/10] feat: add tooltip to checkbox and label --- .../retro/components/dialogs/UsernameInputField.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/frontend/src/retro/components/dialogs/UsernameInputField.tsx b/packages/frontend/src/retro/components/dialogs/UsernameInputField.tsx index 7da86af8..e6546035 100644 --- a/packages/frontend/src/retro/components/dialogs/UsernameInputField.tsx +++ b/packages/frontend/src/retro/components/dialogs/UsernameInputField.tsx @@ -1,4 +1,4 @@ -import { Checkbox, DialogContentText, FormControlLabel } from "@mui/material"; +import { Checkbox, DialogContentText, FormControlLabel, Tooltip } from "@mui/material"; import { TextInput } from "../../../common/components/TextInput"; import React from "react"; @@ -34,10 +34,12 @@ export default function UserNameInputField({ label="Username" autoFocus /> - } - label={storagePermissionLabel} - /> + + } + label={storagePermissionLabel} + > + ); } From 362c1f12bac3f10a29c783cbc5c58d21a67e9a6f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Manuel=20Lehe=CC=81?= Date: Mon, 8 Jan 2024 15:13:21 +0100 Subject: [PATCH 04/10] fix: remove unused code --- packages/frontend/src/common/dialogs/JoinSessionDialog.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/frontend/src/common/dialogs/JoinSessionDialog.tsx b/packages/frontend/src/common/dialogs/JoinSessionDialog.tsx index e9014090..8dbccbf3 100644 --- a/packages/frontend/src/common/dialogs/JoinSessionDialog.tsx +++ b/packages/frontend/src/common/dialogs/JoinSessionDialog.tsx @@ -57,8 +57,6 @@ export function JoinSessionDialog({ onAddToWaitingList }: JoinSessionDialogProps setIsError(false); } - function handleStorageAllowanceChange() {} - async function handleSubmit() { const roomExists = await roomIdExists({ roomId, namespace }); if (!roomExists || !roomId) { From 0ced54efa296be1a0f1485e6d607395558c1f384 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Manuel=20Lehe=CC=81?= Date: Mon, 8 Jan 2024 15:16:55 +0100 Subject: [PATCH 05/10] fix: change function name --- packages/frontend/src/common/dialogs/JoinSessionDialog.tsx | 4 ++-- .../retro/components/dialogs/CreateRetroSessionDialog.tsx | 4 ++-- packages/frontend/src/retro/hooks/useLocalStorageName.ts | 6 +++--- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/frontend/src/common/dialogs/JoinSessionDialog.tsx b/packages/frontend/src/common/dialogs/JoinSessionDialog.tsx index 8dbccbf3..ad8f9597 100644 --- a/packages/frontend/src/common/dialogs/JoinSessionDialog.tsx +++ b/packages/frontend/src/common/dialogs/JoinSessionDialog.tsx @@ -38,7 +38,7 @@ export function JoinSessionDialog({ onAddToWaitingList }: JoinSessionDialogProps handleChange, isValid, } = useValidatedTextInput({ minLength: 1, maxLength: 40 }); - const { isStorageAllowed, saveNameLocally, handleAllowanceChange } = useLocalStorageName({ + const { isStorageAllowed, trySavingNameLocally, handleAllowanceChange } = useLocalStorageName({ setName, }); const { redirectBackToHome, redirectToRoom } = useRedirect(); @@ -76,7 +76,7 @@ export function JoinSessionDialog({ onAddToWaitingList }: JoinSessionDialogProps }; setRoomId(roomId); setUser(newUser); - saveNameLocally(name); + trySavingNameLocally(name); onAddToWaitingList({ userId: newUser.id, userName: name }); redirectToRoom(roomId); handleClose(); diff --git a/packages/frontend/src/retro/components/dialogs/CreateRetroSessionDialog.tsx b/packages/frontend/src/retro/components/dialogs/CreateRetroSessionDialog.tsx index 22e3ed52..e5bb2680 100644 --- a/packages/frontend/src/retro/components/dialogs/CreateRetroSessionDialog.tsx +++ b/packages/frontend/src/retro/components/dialogs/CreateRetroSessionDialog.tsx @@ -50,7 +50,7 @@ export function CreateRetroSessionDialog() { const { retroState, handleChangeRetroFormat, handleSetRetroState, handleJoinSession } = useRetroContext(); const { user, setUser } = useUserContext(); - const { isStorageAllowed, saveNameLocally, handleAllowanceChange } = useLocalStorageName({ + const { isStorageAllowed, trySavingNameLocally, handleAllowanceChange } = useLocalStorageName({ setName, }); const { setRoomId } = useRoomContext(); @@ -81,7 +81,7 @@ export function CreateRetroSessionDialog() { setRoomId(roomId); handleSetRetroState({ ...retroState, title }); setUser(newUser); - saveNameLocally(name); + trySavingNameLocally(name); handleJoinSession(newUser); handleChangeRetroFormat(format); redirectToRoom(roomId); diff --git a/packages/frontend/src/retro/hooks/useLocalStorageName.ts b/packages/frontend/src/retro/hooks/useLocalStorageName.ts index 09982eb4..82020c5a 100644 --- a/packages/frontend/src/retro/hooks/useLocalStorageName.ts +++ b/packages/frontend/src/retro/hooks/useLocalStorageName.ts @@ -1,6 +1,6 @@ -import { useLocalStorage } from "../../common/hooks/useLocalStorage"; import { useState } from "react"; import { LocalStorage } from "../../common/utils/localStorage"; +import { useLocalStorage } from "../../common/hooks/useLocalStorage"; interface useLocalStorageNameProps { setName: (name: string) => void; @@ -13,7 +13,7 @@ export default function useLocalStorageName({ setName }: useLocalStorageNameProp setIsStorageAllowed(LocalStorage.getNameStorePermission()); }); - function saveNameLocally(name: string) { + function trySavingNameLocally(name: string) { if (isStorageAllowed) { LocalStorage.setUserName(name); } @@ -27,5 +27,5 @@ export default function useLocalStorageName({ setName }: useLocalStorageNameProp setIsStorageAllowed(isAllowed); } - return { isStorageAllowed, saveNameLocally, handleAllowanceChange }; + return { isStorageAllowed, trySavingNameLocally, handleAllowanceChange }; } From b99e04fd0608ce0e4f6e5ad20692eb0c21ea69f1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Manuel=20Lehe=CC=81?= Date: Tue, 9 Jan 2024 09:14:50 +0100 Subject: [PATCH 06/10] fix: eslint rule space between anything and export --- .eslintrc.js | 2 +- packages/frontend/src/common/dialogs/Participant.tsx | 1 + packages/frontend/src/common/dialogs/WaitingUser.tsx | 1 + packages/frontend/src/common/utils/localStorage.ts | 1 + packages/frontend/src/poker/context/PokerContext.tsx | 1 + .../src/retro/components/CircularProgressWithLabel.tsx | 1 + packages/frontend/src/retro/components/TimePicker.tsx | 1 + .../src/retro/components/buttons/IncrementTimerButton.tsx | 1 + packages/frontend/src/retro/components/dialogs/TimerDialog.tsx | 1 + .../src/retro/components/dialogs/UsernameInputField.tsx | 1 + packages/frontend/src/retro/hooks/useLocalStorageName.ts | 1 + packages/frontend/src/retro/hooks/useTimedEffect.ts | 1 + packages/frontend/src/retro/types/retroActions.ts | 1 + packages/frontend/src/retro/types/retroTypes.ts | 3 +++ 14 files changed, 16 insertions(+), 1 deletion(-) diff --git a/.eslintrc.js b/.eslintrc.js index f6ec5dce..cfef84d5 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -43,7 +43,7 @@ module.exports = { { blankLine: "always", prev: "*", - next: ["interface", "type", "function"], + next: ["interface", "type", "function", "export"], }, ], "prettier/prettier": "warn", diff --git a/packages/frontend/src/common/dialogs/Participant.tsx b/packages/frontend/src/common/dialogs/Participant.tsx index 2683e67f..0befdb80 100644 --- a/packages/frontend/src/common/dialogs/Participant.tsx +++ b/packages/frontend/src/common/dialogs/Participant.tsx @@ -14,6 +14,7 @@ interface ParticipantProps { handleKickUser: (userId: string) => void; handleTransferModeratorRole: (userId: string) => void; } + export function Participant({ participant, handleKickUser, diff --git a/packages/frontend/src/common/dialogs/WaitingUser.tsx b/packages/frontend/src/common/dialogs/WaitingUser.tsx index 63565f91..871e04a5 100644 --- a/packages/frontend/src/common/dialogs/WaitingUser.tsx +++ b/packages/frontend/src/common/dialogs/WaitingUser.tsx @@ -12,6 +12,7 @@ interface WaitingUserProps { handleRejectJoinUser: (userId: string) => void; handleAcceptJoinUser: (userId: string) => void; } + export function WaitingUser({ waitingUser, handleRejectJoinUser, diff --git a/packages/frontend/src/common/utils/localStorage.ts b/packages/frontend/src/common/utils/localStorage.ts index c680d9bb..63327209 100644 --- a/packages/frontend/src/common/utils/localStorage.ts +++ b/packages/frontend/src/common/utils/localStorage.ts @@ -21,6 +21,7 @@ function getNameStorePermission(): boolean { const value = localStorage.getItem(usernameStorePermissionKey); return value === "true"; } + export const LocalStorage = { setUserName, getUserName, diff --git a/packages/frontend/src/poker/context/PokerContext.tsx b/packages/frontend/src/poker/context/PokerContext.tsx index 06ea3172..43aaa460 100644 --- a/packages/frontend/src/poker/context/PokerContext.tsx +++ b/packages/frontend/src/poker/context/PokerContext.tsx @@ -57,6 +57,7 @@ const initialState: PokerState = { }; export const PokerContext = React.createContext(undefined!); + export function PokerContextProvider(props: PokerContextProviderProps) { const [state, dispatch] = useReducer(pokerReducer, initialState); const { user } = useUserContext(); diff --git a/packages/frontend/src/retro/components/CircularProgressWithLabel.tsx b/packages/frontend/src/retro/components/CircularProgressWithLabel.tsx index 830eef1d..4a73e499 100644 --- a/packages/frontend/src/retro/components/CircularProgressWithLabel.tsx +++ b/packages/frontend/src/retro/components/CircularProgressWithLabel.tsx @@ -10,6 +10,7 @@ interface CircularProgressWithLabelProps { maxValue: number; currentValue: number; } + export function CircularProgressWithLabel({ maxValue, currentValue, diff --git a/packages/frontend/src/retro/components/TimePicker.tsx b/packages/frontend/src/retro/components/TimePicker.tsx index 6536e189..91d4dfe3 100644 --- a/packages/frontend/src/retro/components/TimePicker.tsx +++ b/packages/frontend/src/retro/components/TimePicker.tsx @@ -14,6 +14,7 @@ interface TimePickerProps { onSubmit: () => void; onTimerIncrement: (increment: number) => void; } + export function TimePicker({ minutes, seconds, diff --git a/packages/frontend/src/retro/components/buttons/IncrementTimerButton.tsx b/packages/frontend/src/retro/components/buttons/IncrementTimerButton.tsx index 4df411bc..6e107011 100644 --- a/packages/frontend/src/retro/components/buttons/IncrementTimerButton.tsx +++ b/packages/frontend/src/retro/components/buttons/IncrementTimerButton.tsx @@ -5,6 +5,7 @@ interface IncrementTimerButtonProps { onTimerIncrement: (amount: number) => void; minutesToIncrement: number; } + export default function IncrementTimerButton({ onTimerIncrement, minutesToIncrement, diff --git a/packages/frontend/src/retro/components/dialogs/TimerDialog.tsx b/packages/frontend/src/retro/components/dialogs/TimerDialog.tsx index 4901ce22..e629d4db 100644 --- a/packages/frontend/src/retro/components/dialogs/TimerDialog.tsx +++ b/packages/frontend/src/retro/components/dialogs/TimerDialog.tsx @@ -12,6 +12,7 @@ interface TimerDialogProps extends DialogProps { remainingMinutes: number; remainingSeconds: number; } + export function TimerDialog({ isOpen, close, diff --git a/packages/frontend/src/retro/components/dialogs/UsernameInputField.tsx b/packages/frontend/src/retro/components/dialogs/UsernameInputField.tsx index e6546035..8ade99be 100644 --- a/packages/frontend/src/retro/components/dialogs/UsernameInputField.tsx +++ b/packages/frontend/src/retro/components/dialogs/UsernameInputField.tsx @@ -12,6 +12,7 @@ interface UserNameInputFieldProps { isStorageAllowed: boolean; onStorageAllowanceChange: (event: React.ChangeEvent) => void; } + export default function UserNameInputField({ userName, label, diff --git a/packages/frontend/src/retro/hooks/useLocalStorageName.ts b/packages/frontend/src/retro/hooks/useLocalStorageName.ts index 82020c5a..4167b014 100644 --- a/packages/frontend/src/retro/hooks/useLocalStorageName.ts +++ b/packages/frontend/src/retro/hooks/useLocalStorageName.ts @@ -5,6 +5,7 @@ import { useLocalStorage } from "../../common/hooks/useLocalStorage"; interface useLocalStorageNameProps { setName: (name: string) => void; } + export default function useLocalStorageName({ setName }: useLocalStorageNameProps) { const [isStorageAllowed, setIsStorageAllowed] = useState(false); diff --git a/packages/frontend/src/retro/hooks/useTimedEffect.ts b/packages/frontend/src/retro/hooks/useTimedEffect.ts index 9235d7bc..902ca36b 100644 --- a/packages/frontend/src/retro/hooks/useTimedEffect.ts +++ b/packages/frontend/src/retro/hooks/useTimedEffect.ts @@ -3,6 +3,7 @@ import { useEffect, useState } from "react"; interface useTimedEffectProps { effectLength: number; } + export default function useTimedEffect({ effectLength }: useTimedEffectProps) { const [isEffectActive, setIsEffectActive] = useState(false); diff --git a/packages/frontend/src/retro/types/retroActions.ts b/packages/frontend/src/retro/types/retroActions.ts index 602ad0fb..61293cd6 100644 --- a/packages/frontend/src/retro/types/retroActions.ts +++ b/packages/frontend/src/retro/types/retroActions.ts @@ -94,6 +94,7 @@ export interface IsVotingEnabledChangedAction extends BaseAction { type: "IS_VOTING_ENABLED_CHANGED"; isEnabled: boolean; } + export interface CardVotingLimitChangedAction extends BaseAction { type: "CARD_VOTING_LIMIT_CHANGED"; limit: number; diff --git a/packages/frontend/src/retro/types/retroTypes.ts b/packages/frontend/src/retro/types/retroTypes.ts index c3d96f7b..4c2b1a3c 100644 --- a/packages/frontend/src/retro/types/retroTypes.ts +++ b/packages/frontend/src/retro/types/retroTypes.ts @@ -16,11 +16,13 @@ export interface RetroColumn { cards: RetroCard[]; isBlurred: boolean; } + export enum TimerStatus { RUNNING, PAUSED, STOPPED, } + export interface RetroState { title: string; format: string; @@ -37,4 +39,5 @@ export interface RetroState { } export type VotesByUserId = Record; + export type UserByUserId = Record; From aff20447c0d6bbc31bc23f0781285be0cf9fcc6c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Manuel=20Lehe=CC=81?= Date: Tue, 9 Jan 2024 09:55:30 +0100 Subject: [PATCH 07/10] fix: optimize props and new tooltip --- .../src/common/components/TextInput.tsx | 2 +- .../src/common/dialogs/JoinSessionDialog.tsx | 4 +- .../dialogs/CreateRetroSessionDialog.tsx | 4 +- .../components/dialogs/UsernameInputField.tsx | 41 ++++++++++++------- 4 files changed, 31 insertions(+), 20 deletions(-) diff --git a/packages/frontend/src/common/components/TextInput.tsx b/packages/frontend/src/common/components/TextInput.tsx index d298eebc..a09d6d32 100644 --- a/packages/frontend/src/common/components/TextInput.tsx +++ b/packages/frontend/src/common/components/TextInput.tsx @@ -3,7 +3,7 @@ import { TextField } from "@mui/material"; import { StandardTextFieldProps } from "@mui/material/TextField/TextField"; import { ErrorHelperText } from "./ErrorHelperText"; -interface TextInputProps extends StandardTextFieldProps { +export interface TextInputProps extends StandardTextFieldProps { onSubmit: () => void; errorHelperText?: string; } diff --git a/packages/frontend/src/common/dialogs/JoinSessionDialog.tsx b/packages/frontend/src/common/dialogs/JoinSessionDialog.tsx index ad8f9597..cf3925d9 100644 --- a/packages/frontend/src/common/dialogs/JoinSessionDialog.tsx +++ b/packages/frontend/src/common/dialogs/JoinSessionDialog.tsx @@ -94,15 +94,15 @@ export function JoinSessionDialog({ onAddToWaitingList }: JoinSessionDialogProps { handleAllowanceChange(event.target.checked); }} + autoFocus /> diff --git a/packages/frontend/src/retro/components/dialogs/CreateRetroSessionDialog.tsx b/packages/frontend/src/retro/components/dialogs/CreateRetroSessionDialog.tsx index e5bb2680..b781236c 100644 --- a/packages/frontend/src/retro/components/dialogs/CreateRetroSessionDialog.tsx +++ b/packages/frontend/src/retro/components/dialogs/CreateRetroSessionDialog.tsx @@ -101,12 +101,11 @@ export function CreateRetroSessionDialog() { { handleAllowanceChange(event.target.checked); }} @@ -121,6 +120,7 @@ export function CreateRetroSessionDialog() { error={isTitleError} id="retro-name" label="Retro Name" + autoFocus /> diff --git a/packages/frontend/src/retro/components/dialogs/UsernameInputField.tsx b/packages/frontend/src/retro/components/dialogs/UsernameInputField.tsx index 8ade99be..1f0d3efb 100644 --- a/packages/frontend/src/retro/components/dialogs/UsernameInputField.tsx +++ b/packages/frontend/src/retro/components/dialogs/UsernameInputField.tsx @@ -1,27 +1,33 @@ -import { Checkbox, DialogContentText, FormControlLabel, Tooltip } from "@mui/material"; -import { TextInput } from "../../../common/components/TextInput"; +import { Checkbox, DialogContentText, FormControlLabel, IconButton, Tooltip } from "@mui/material"; +import { TextInput, TextInputProps } from "../../../common/components/TextInput"; +import InfoIcon from "@mui/icons-material/Info"; import React from "react"; -interface UserNameInputFieldProps { +interface UserNameInputFieldProps extends TextInputProps { userName: string; - label: string; + label?: string; + textFieldLabel?: string; + storagePermissionLabel?: string; + textFieldId: string; onSubmit: () => void; onChange: (event: React.ChangeEvent) => void; isError: boolean; - storagePermissionLabel: string; isStorageAllowed: boolean; onStorageAllowanceChange: (event: React.ChangeEvent) => void; } export default function UserNameInputField({ userName, - label, + label = "Please enter your name", + storagePermissionLabel = "Remember me", + textFieldLabel = "Username", + textFieldId = "user-name", onSubmit, onChange, isError, isStorageAllowed, - storagePermissionLabel, onStorageAllowanceChange, + ...props }: UserNameInputFieldProps) { return ( <> @@ -31,15 +37,20 @@ export default function UserNameInputField({ onSubmit={onSubmit} onChange={onChange} error={isError} - id="user-name" - label="Username" - autoFocus + id={textFieldId} + label={textFieldLabel} + {...props} /> - - } - label={storagePermissionLabel} - > + + } + label={storagePermissionLabel} + sx={{ marginRight: 0 }} + /> + + + + ); From 7e85e1fc844e89c7fd1c19340c78f8587e215b8e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Manuel=20Lehe=CC=81?= Date: Tue, 9 Jan 2024 10:02:28 +0100 Subject: [PATCH 08/10] fix: removed unnecessary props and tooltip arrow --- .../src/common/dialogs/JoinSessionDialog.tsx | 4 ++-- .../dialogs/CreateRetroSessionDialog.tsx | 4 ++-- .../components/dialogs/UsernameInputField.tsx | 16 +++++++--------- 3 files changed, 11 insertions(+), 13 deletions(-) diff --git a/packages/frontend/src/common/dialogs/JoinSessionDialog.tsx b/packages/frontend/src/common/dialogs/JoinSessionDialog.tsx index cf3925d9..4b5e10f6 100644 --- a/packages/frontend/src/common/dialogs/JoinSessionDialog.tsx +++ b/packages/frontend/src/common/dialogs/JoinSessionDialog.tsx @@ -94,10 +94,10 @@ export function JoinSessionDialog({ onAddToWaitingList }: JoinSessionDialogProps { handleAllowanceChange(event.target.checked); diff --git a/packages/frontend/src/retro/components/dialogs/CreateRetroSessionDialog.tsx b/packages/frontend/src/retro/components/dialogs/CreateRetroSessionDialog.tsx index b781236c..32de1780 100644 --- a/packages/frontend/src/retro/components/dialogs/CreateRetroSessionDialog.tsx +++ b/packages/frontend/src/retro/components/dialogs/CreateRetroSessionDialog.tsx @@ -101,10 +101,10 @@ export function CreateRetroSessionDialog() { { handleAllowanceChange(event.target.checked); diff --git a/packages/frontend/src/retro/components/dialogs/UsernameInputField.tsx b/packages/frontend/src/retro/components/dialogs/UsernameInputField.tsx index 1f0d3efb..07507f61 100644 --- a/packages/frontend/src/retro/components/dialogs/UsernameInputField.tsx +++ b/packages/frontend/src/retro/components/dialogs/UsernameInputField.tsx @@ -8,10 +8,6 @@ interface UserNameInputFieldProps extends TextInputProps { label?: string; textFieldLabel?: string; storagePermissionLabel?: string; - textFieldId: string; - onSubmit: () => void; - onChange: (event: React.ChangeEvent) => void; - isError: boolean; isStorageAllowed: boolean; onStorageAllowanceChange: (event: React.ChangeEvent) => void; } @@ -21,10 +17,10 @@ export default function UserNameInputField({ label = "Please enter your name", storagePermissionLabel = "Remember me", textFieldLabel = "Username", - textFieldId = "user-name", + id, onSubmit, onChange, - isError, + error, isStorageAllowed, onStorageAllowanceChange, ...props @@ -36,8 +32,7 @@ export default function UserNameInputField({ value={userName} onSubmit={onSubmit} onChange={onChange} - error={isError} - id={textFieldId} + error={error} label={textFieldLabel} {...props} /> @@ -47,7 +42,10 @@ export default function UserNameInputField({ label={storagePermissionLabel} sx={{ marginRight: 0 }} /> - + From 1370e69afc286593667ce2d61d51615c61107d98 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Manuel=20Lehe=CC=81?= Date: Mon, 15 Jan 2024 11:13:43 +0100 Subject: [PATCH 09/10] fix: set correct autofocus & remove id --- .../src/retro/components/dialogs/CreateRetroSessionDialog.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/frontend/src/retro/components/dialogs/CreateRetroSessionDialog.tsx b/packages/frontend/src/retro/components/dialogs/CreateRetroSessionDialog.tsx index 32de1780..fe07159e 100644 --- a/packages/frontend/src/retro/components/dialogs/CreateRetroSessionDialog.tsx +++ b/packages/frontend/src/retro/components/dialogs/CreateRetroSessionDialog.tsx @@ -109,6 +109,7 @@ export function CreateRetroSessionDialog() { onStorageAllowanceChange={(event) => { handleAllowanceChange(event.target.checked); }} + autoFocus /> @@ -120,7 +121,6 @@ export function CreateRetroSessionDialog() { error={isTitleError} id="retro-name" label="Retro Name" - autoFocus /> From 98171cb49e36371dfa8ab27a2b41835b936225cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Manuel=20Lehe=CC=81?= Date: Mon, 15 Jan 2024 11:14:19 +0100 Subject: [PATCH 10/10] fix: rebuild tooltip without iconbutton --- .../components/dialogs/UsernameInputField.tsx | 30 +++++++++---------- 1 file changed, 14 insertions(+), 16 deletions(-) diff --git a/packages/frontend/src/retro/components/dialogs/UsernameInputField.tsx b/packages/frontend/src/retro/components/dialogs/UsernameInputField.tsx index 07507f61..247d9902 100644 --- a/packages/frontend/src/retro/components/dialogs/UsernameInputField.tsx +++ b/packages/frontend/src/retro/components/dialogs/UsernameInputField.tsx @@ -1,6 +1,6 @@ -import { Checkbox, DialogContentText, FormControlLabel, IconButton, Tooltip } from "@mui/material"; -import { TextInput, TextInputProps } from "../../../common/components/TextInput"; +import { Checkbox, DialogContentText, FormControlLabel, Stack, Tooltip } from "@mui/material"; import InfoIcon from "@mui/icons-material/Info"; +import { TextInput, TextInputProps } from "../../../common/components/TextInput"; import React from "react"; interface UserNameInputFieldProps extends TextInputProps { @@ -17,7 +17,6 @@ export default function UserNameInputField({ label = "Please enter your name", storagePermissionLabel = "Remember me", textFieldLabel = "Username", - id, onSubmit, onChange, error, @@ -36,20 +35,19 @@ export default function UserNameInputField({ label={textFieldLabel} {...props} /> - - } - label={storagePermissionLabel} - sx={{ marginRight: 0 }} - /> - - + + } + label={storagePermissionLabel} + sx={{ marginRight: 0 }} + /> + - - + + ); }