refactor: redux store

package.json

@@ -17,7 +17,7 @@
     "@fontsource/raleway": "^5.1.0",
     "@react-hook/resize-observer": "^2.0.2",
     "@react-spring/web": "^9.7.4",
-    "@reduxjs/toolkit": "^1.9.7",
+    "@reduxjs/toolkit": "^2.2.7",
     "avataaars": "^2.0.0",
     "classnames": "^2.5.1",
     "file-saver": "^2.0.5",

src/api/auth.ts

@@ -1,5 +1,5 @@
 import {SERVER_HTTP_URL} from "../config";
-import {AuthDto} from "../types/auth";
+import {AuthDto} from "../store/features/auth/types";
 
 export const AuthAPI = {
   /**

src/api/board.ts

@@ -1,5 +1,5 @@
 import {Color} from "constants/colors";
-import {EditBoardRequest} from "types/board";
+import {EditBoardRequest} from "store/features/board/types";
 import {SERVER_HTTP_URL} from "../config";
 
 export const BoardAPI = {

src/api/boardReaction.ts

@@ -1,6 +1,6 @@
 import {SERVER_HTTP_URL} from "config";
-import {ReactionType} from "types/reaction";
-import {BoardReactionType} from "types/boardReaction";
+import {ReactionType} from "store/features/reactions/types";
+import {BoardReactionType} from "store/features/boardReactions/types";
 
 export const BoardReactionAPI = {
   addBoardReaction: async (boardId: string, reactionType: ReactionType) => {

src/api/column.ts

@@ -1,4 +1,4 @@
-import {EditColumnRequest} from "types/column";
+import {ColumnWithoutId} from "store/features/columns/types";
 import {SERVER_HTTP_URL} from "../config";
 
 export const ColumnAPI = {
@@ -14,7 +14,7 @@ export const ColumnAPI = {
    *
    * @returns a {status, description} object
    */
-  editColumn: async (boardId: string, columnId: string, column: EditColumnRequest) => {
+  editColumn: async (boardId: string, columnId: string, column: ColumnWithoutId) => {
     try {
       const response = await fetch(`${SERVER_HTTP_URL}/boards/${boardId}/columns/${columnId}`, {
         method: "PUT",

src/api/info.ts

@@ -1,6 +1,8 @@
-import {SERVER_HTTP_URL} from "../config";
+import {SERVER_HTTP_URL} from "config";
+import {ServerInfo} from "store/features";
 
-interface ServerInformation {
+// type as received from the backend
+interface ServerInformationDto {
   anonymousLoginDisabled: boolean;
   authProvider: string[];
   serverTime: string;
@@ -21,7 +23,14 @@ export const InfoAPI = {
       const response = await fetch(`${SERVER_HTTP_URL}/info`);
 
       if (response.status === 200) {
-        return (await response.json()) as ServerInformation;
+        const info = (await response.json()) as ServerInformationDto;
+        // convert to frontend type, don't ask me why they're different in the first place though
+        return {
+          serverTime: new Date(info.serverTime).getTime(),
+          enabledAuthProvider: info.authProvider,
+          anonymousLoginDisabled: info.anonymousLoginDisabled,
+          feedbackEnabled: info.feedbackEnabled,
+        } as ServerInfo;
       }
 
       throw new Error(`responded with status code ${response.status}`);

src/api/note.ts

@@ -1,5 +1,5 @@
 import {SERVER_HTTP_URL} from "../config";
-import {EditNote, Note} from "../types/note";
+import {EditNote, Note} from "../store/features/notes/types";
 
 export const NoteAPI = {
   /**

src/api/participant.ts

@@ -1,4 +1,4 @@
-import {Participant} from "types/participant";
+import {Participant} from "store/features/participants/types";
 import {SERVER_HTTP_URL} from "../config";
 
 export const ParticipantsAPI = {

src/api/reaction.ts

@@ -1,5 +1,5 @@
 import {SERVER_HTTP_URL} from "../config";
-import {Reaction, ReactionType} from "../types/reaction";
+import {Reaction, ReactionType} from "../store/features/reactions/types";
 
 export const ReactionAPI = {
   addReaction: async (board: string, note: string, reactionType: ReactionType) => {

src/api/request.ts

@@ -1,4 +1,4 @@
-import {Request} from "types/request";
+import {Request} from "store/features/requests/types";
 import {SERVER_HTTP_URL} from "../config";
 
 export const RequestAPI = {

src/api/user.ts

@@ -1,4 +1,4 @@
-import {Auth} from "types/auth";
+import {Auth} from "store/features/auth/types";
 import {SERVER_HTTP_URL} from "../config";
 
 export const UserAPI = {

src/api/vote.ts

@@ -1,5 +1,5 @@
 import {SERVER_HTTP_URL} from "../config";
-import {Vote} from "../types/vote";
+import {Vote} from "../store/features/votes/types";
 
 export const VoteAPI = {
   /**

src/api/votings.ts

@@ -1,4 +1,4 @@
-import {CreateVotingRequest} from "types/voting";
+import {CreateVotingRequest} from "store/features/votings/types";
 import {SERVER_HTTP_URL} from "../config";
 
 export const VotingAPI = {

src/components/AccessPolicySelection/AccessPolicySelection.tsx

@@ -1,6 +1,6 @@
 import {FC, useState} from "react";
 import "./AccessPolicySelection.scss";
-import {AccessPolicy} from "types/board";
+import {AccessPolicy} from "store/features/board/types";
 import {generateRandomString} from "utils/random";
 import {useTranslation} from "react-i18next";
 import {Visible, Hidden, Duplicate, Refresh} from "components/Icon";

src/components/AccessPolicySelection/__tests__/AccessPolicySelection.test.tsx

@@ -1,6 +1,6 @@
 import {fireEvent, waitFor} from "@testing-library/react";
 import {AccessPolicySelection} from "components/AccessPolicySelection/AccessPolicySelection";
-import {AccessPolicy} from "types/board";
+import {AccessPolicy} from "store/features/board/types";
 import {render} from "testUtils";
 
 describe("AccessPolicySelection", () => {

src/components/BoardHeader/BoardHeader.tsx

@@ -1,23 +1,24 @@
 import {useState, VFC} from "react";
 import {LockClosed, Open as Globe, KeyProtected, Share} from "components/Icon";
 import {BoardUsers} from "components/BoardUsers";
-import store, {useAppSelector} from "store";
+import {useAppDispatch, useAppSelector} from "store";
 import {ScrumlrLogo} from "components/ScrumlrLogo";
 import {HeaderMenu} from "components/BoardHeader/HeaderMenu";
 import {useTranslation} from "react-i18next";
-import {Actions} from "store/action";
 import {ConfirmationDialog} from "components/ConfirmationDialog";
 import {shallowEqual} from "react-redux";
 import "./BoardHeader.scss";
 import {ShareButton} from "components/ShareButton";
 import {Tooltip} from "react-tooltip";
+import {leaveBoard} from "store/features";
 import {DEFAULT_BOARD_NAME} from "../../constants/misc";
 
 export interface BoardHeaderProps {
   currentUserIsModerator: boolean;
 }
 
 export const BoardHeader: VFC<BoardHeaderProps> = (props) => {
+  const dispatch = useAppDispatch();
   const {t} = useTranslation();
   const state = useAppSelector(
     (rootState) => ({
@@ -36,7 +37,7 @@ export const BoardHeader: VFC<BoardHeaderProps> = (props) => {
         <ConfirmationDialog
           title={t("ConfirmationDialog.returnToHomepage")}
           onAccept={() => {
-            store.dispatch(Actions.leaveBoard());
+            dispatch(leaveBoard());
             window.location.pathname = "/";
           }}
           onDecline={() => setShowConfirmationDialog(false)}

src/components/BoardHeader/HeaderMenu/BoardOptions/LockBoard.tsx

@@ -1,19 +1,20 @@
-import store, {useAppSelector} from "store";
+import {useAppDispatch, useAppSelector} from "store";
 import {useTranslation} from "react-i18next";
-import {Actions} from "store/action";
+import {editBoard} from "store/features";
 import {BoardOption} from "./BoardOption";
 import {BoardOptionButton} from "./BoardOptionButton";
 import {BoardOptionToggle} from "./BoardOptionToggle";
 import "../BoardSettings/BoardSettings.scss";
 
 export const LockBoard = () => {
+  const dispatch = useAppDispatch();
   const {t} = useTranslation();
-  const allowEditing = useAppSelector((state) => state.board.data!.isLocked);
+  const isLocked = useAppSelector((state) => state.board.data!.isLocked);
 
   return (
     <BoardOption>
-      <BoardOptionButton aria-checked={allowEditing} role="switch" label={t("BoardSettings.IsLocked")} onClick={() => store.dispatch(Actions.editBoard({isLocked: !allowEditing}))}>
-        <BoardOptionToggle active={allowEditing} />
+      <BoardOptionButton aria-checked={isLocked} role="switch" label={t("BoardSettings.IsLocked")} onClick={() => dispatch(editBoard({isLocked: !isLocked}))}>
+        <BoardOptionToggle active={isLocked} />
       </BoardOptionButton>
     </BoardOption>
   );

src/components/BoardHeader/HeaderMenu/BoardOptions/ShowAuthorOption.tsx

@@ -1,23 +1,22 @@
-import {useAppSelector} from "store";
-import {useDispatch} from "react-redux";
+import {useAppDispatch, useAppSelector} from "store";
+import {editBoard} from "store/features";
 import {useTranslation} from "react-i18next";
-import {Actions} from "store/action";
 import {BoardOption} from "./BoardOption";
 import {BoardOptionButton} from "./BoardOptionButton";
 import {BoardOptionToggle} from "./BoardOptionToggle";
 import "../BoardSettings/BoardSettings.scss";
 
 export const ShowAuthorOption = () => {
   const {t} = useTranslation();
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const showAuthors = useAppSelector((state) => state.board.data?.showAuthors);
 
   return (
     <BoardOption data-testid="author">
       <BoardOptionButton
         label={t("BoardSettings.ShowAuthorOption")}
         onClick={() => {
-          dispatch(Actions.editBoard({showAuthors: !showAuthors}));
+          dispatch(editBoard({showAuthors: !showAuthors}));
         }}
       >
         <BoardOptionToggle active={!!showAuthors} />

src/components/BoardHeader/HeaderMenu/BoardOptions/ShowHiddenColumnsOption.tsx

@@ -1,26 +1,25 @@
-import {useAppSelector} from "store";
+import {useAppDispatch, useAppSelector} from "store";
+import {setShowHiddenColumns} from "store/features";
 import {useTranslation} from "react-i18next";
-import {useDispatch} from "react-redux";
-import {Actions} from "store/action";
 import {BoardOption} from "./BoardOption";
 import {BoardOptionButton} from "./BoardOptionButton";
 import {BoardOptionToggle} from "./BoardOptionToggle";
 import "../BoardSettings/BoardSettings.scss";
 
 export const ShowHiddenColumnsOption = () => {
   const {t} = useTranslation();
-  const showHiddenColumns = useAppSelector((state) => state.participants?.self.showHiddenColumns);
-  const dispatch = useDispatch();
+  const showHiddenColumns = useAppSelector((state) => !!state.participants?.self?.showHiddenColumns);
+  const dispatch = useAppDispatch();
 
   return (
     <BoardOption data-testid="column">
       <BoardOptionButton
         label={t("BoardSettings.ShowHiddenColumnsOption")}
         onClick={() => {
-          dispatch(Actions.setShowHiddenColumns(!showHiddenColumns));
+          dispatch(setShowHiddenColumns({showHiddenColumns: !showHiddenColumns}));
         }}
       >
-        <BoardOptionToggle active={!!showHiddenColumns} />
+        <BoardOptionToggle active={showHiddenColumns} />
       </BoardOptionButton>
     </BoardOption>
   );

src/components/BoardHeader/HeaderMenu/BoardOptions/ShowOtherUsersNotesOption.tsx

@@ -1,23 +1,22 @@
-import {useAppSelector} from "store";
-import {useDispatch} from "react-redux";
+import {useAppDispatch, useAppSelector} from "store";
+import {editBoard} from "store/features";
 import {useTranslation} from "react-i18next";
-import {Actions} from "store/action";
 import {BoardOption} from "./BoardOption";
 import {BoardOptionButton} from "./BoardOptionButton";
 import {BoardOptionToggle} from "./BoardOptionToggle";
 import "../BoardSettings/BoardSettings.scss";
 
 export const ShowOtherUsersNotesOption = () => {
   const {t} = useTranslation();
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const showNotesOfOtherParticipants = useAppSelector((state) => state.board.data?.showNotesOfOtherUsers);
 
   return (
     <BoardOption data-testid="note">
       <BoardOptionButton
         label={t("BoardSettings.ShowOtherUsersNotesOption")}
         onClick={() => {
-          dispatch(Actions.editBoard({showNotesOfOtherUsers: !showNotesOfOtherParticipants}));
+          dispatch(editBoard({showNotesOfOtherUsers: !showNotesOfOtherParticipants}));
         }}
       >
         <BoardOptionToggle active={!!showNotesOfOtherParticipants} />

src/components/BoardHeader/HeaderMenu/BoardSettings/BoardSettings.tsx

@@ -1,10 +1,9 @@
 import "./BoardSettings.scss";
 import {Dispatch, SetStateAction, useState} from "react";
-import store, {useAppSelector} from "store";
-import {ApplicationState} from "types";
-import {Actions} from "store/action";
+import {ApplicationState, useAppDispatch, useAppSelector} from "store";
 import {useTranslation} from "react-i18next";
 import {DEFAULT_BOARD_NAME} from "constants/misc";
+import {editBoard} from "store/features";
 
 export type BoardSettingsProps = {
   activeEditMode: boolean;
@@ -13,14 +12,15 @@ export type BoardSettingsProps = {
 };
 
 export const BoardSettings = (props: BoardSettingsProps) => {
+  const dispatch = useAppDispatch();
   const {t} = useTranslation();
   const name = useAppSelector((state: ApplicationState) => state.board.data!.name) ?? "";
 
   const [boardName, setBoardName] = useState(name);
 
   const onSubmit = () => {
     if (props.activeEditMode && name !== boardName) {
-      store.dispatch(Actions.editBoard({name: boardName}));
+      dispatch(editBoard({name: boardName}));
     }
     props.setActiveEditMode(!props.activeEditMode);
   };

src/components/BoardHeader/__tests__/BoardHeader.test.tsx

@@ -2,7 +2,7 @@ import {render} from "testUtils";
 import {Provider} from "react-redux";
 import {BoardHeader} from "components/BoardHeader/BoardHeader";
 import getTestStore from "utils/test/getTestStore";
-import {ApplicationState} from "types";
+import {ApplicationState} from "store";
 import i18n from "i18nTest";
 
 const createBoardHeader = (overwrite?: Partial<ApplicationState>) => {
@@ -70,6 +70,7 @@ describe("Board Header", () => {
               showNotesOfOtherUsers: true,
               allowStacking: true,
               showNoteReactions: true,
+              isLocked: false,
             },
           },
         })

src/components/BoardReaction/BoardReaction.tsx

@@ -1,4 +1,4 @@
-import {BOARD_REACTION_EMOJI_MAP, BoardReactionType} from "types/boardReaction";
+import {BOARD_REACTION_EMOJI_MAP, BoardReactionType} from "store/features/boardReactions/types";
 import {memo, useEffect, useRef, useState} from "react";
 import {getRandomNumberInRange} from "utils/random";
 import {useAppSelector} from "store";
@@ -18,8 +18,8 @@ export const BoardReaction = memo((props: BoardReactionProps) => {
   const [displayOffset, setDisplayOffset] = useState<number>(-100);
   const {t} = useTranslation();
   const emoji = BOARD_REACTION_EMOJI_MAP.get(props.reaction.reactionType);
-  const me = useAppSelector((state) => state.participants!.self);
-  const others = useAppSelector((state) => state.participants!.others);
+  const me = useAppSelector((state) => state.participants!.self)!;
+  const others = useAppSelector((state) => state.participants!.others) ?? [];
   const skinTone = useAppSelector((state) => state.skinTone);
   const all = [me, ...others];
   const reactionUser = all.find((p) => p.user.id === props.reaction.user)!;

src/components/BoardReactionMenu/BoardReactionMenu.tsx

@@ -1,16 +1,15 @@
 import {ForwardedRef, forwardRef, MouseEvent} from "react";
 import {Close} from "components/Icon";
-import {ReactionType} from "types/reaction";
-import {BOARD_REACTION_EMOJI_MAP} from "types/boardReaction";
-import {Actions} from "store/action";
-import {useDispatch} from "react-redux";
+import {ReactionType} from "store/features/reactions/types";
+import {BOARD_REACTION_EMOJI_MAP} from "store/features/boardReactions/types";
 import {useHotkeys} from "react-hotkeys-hook";
-import {useAppSelector} from "store";
+import {useAppDispatch, useAppSelector} from "store";
 import {Toast} from "utils/Toast";
 import {useTranslation} from "react-i18next";
 import {useDelayedReset} from "utils/hooks/useDelayedReset";
 import {animated, useTransition} from "@react-spring/web";
 import "./BoardReactionMenu.scss";
+import {addBoardReaction, setShowBoardReactions} from "store/features";
 
 type BoardReactionMenuProps = {
   showMenu: boolean;
@@ -20,7 +19,7 @@ type BoardReactionMenuProps = {
 const REACTION_DEBOUNCE_TIME = 300; // milliseconds
 
 export const BoardReactionMenu = forwardRef((props: BoardReactionMenuProps, ref: ForwardedRef<HTMLDivElement>) => {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const {t} = useTranslation();
 
   const boardReactions = [...BOARD_REACTION_EMOJI_MAP];
@@ -37,12 +36,12 @@ export const BoardReactionMenu = forwardRef((props: BoardReactionMenuProps, ref:
       Toast.info({
         title: t("Toast.boardReactionsDisabled"),
         buttons: [t("Toast.enable")],
-        firstButtonOnClick: () => dispatch(Actions.setShowBoardReactions(true)),
+        firstButtonOnClick: () => dispatch(setShowBoardReactions(true)),
       });
     } else if (debounce) {
       // not ready yet
     } else {
-      dispatch(Actions.addBoardReaction(reaction));
+      dispatch(addBoardReaction(reaction));
       resetDebounce();
     }
   };