From f5ceeb358f1041dfa6c6f10ae3d265702680eb29 Mon Sep 17 00:00:00 2001 From: Fides Date: Wed, 22 Jan 2025 09:45:41 +0200 Subject: [PATCH] chore(frontend): add methods to handle feedback in persistent storage service --- .../PersistentStorageService.test.ts | 75 +++++++++++-------- .../PersistentStorageService.ts | 34 ++++----- .../ConversationConclusionFooter.test.tsx | 2 +- .../ConversationConclusionFooter.tsx | 8 +- .../FeedbackFormContent.tsx | 10 +-- frontend-new/yarn.lock | 2 +- 6 files changed, 69 insertions(+), 62 deletions(-) diff --git a/frontend-new/src/app/PersistentStorageService/PersistentStorageService.test.ts b/frontend-new/src/app/PersistentStorageService/PersistentStorageService.test.ts index 28e4f6cd8..9ddd6a922 100644 --- a/frontend-new/src/app/PersistentStorageService/PersistentStorageService.test.ts +++ b/frontend-new/src/app/PersistentStorageService/PersistentStorageService.test.ts @@ -242,42 +242,57 @@ describe("AuthPersistentStorage class tests", () => { }); }); - describe("getItem tests", () => { - test("should return correct item from localStorage", () => { - // GIVEN an item is stored in localStorage - const key = "testKey"; - const value = "testValue"; - localStorage.setItem(key, value); - - const retrievedValue = PersistentStorageService.getItem(localStorage, key); - - // THEN the correct value should be returned - expect(retrievedValue).toEqual(value); + describe("overall feedback tests", () => { + test("return correct previously set feedback", () => { + // GIVEN The overall feedback is stored in the session storage + const givenFeedback = [ + { + question_id: "foo", + answer: { + rating_numeric: 5, + }, + is_answered: true, + }, + ]; + PersistentStorageService.setOverallFeedback(givenFeedback); + + // WHEN The overall feedback is retrieved + const feedback = PersistentStorageService.getOverallFeedback(); + + // THEN The overall feedback should be returned + expect(feedback).toEqual(givenFeedback); }); - test("should set item in localStorage", () => { - // GIVEN a key and value - const key = "testKey"; - const value = "testValue"; + test("return empty array if overall feedback is not set", () => { + // GIVEN The overall feedback is not stored in the session storage + // Nothing set - // WHEN the item is set using setItem - PersistentStorageService.setItem(localStorage, key, value); + // WHEN The feedback is retrieved + const feedback = PersistentStorageService.getOverallFeedback(); - // THEN the item should be stored in localStorage - expect(localStorage.getItem(key)).toEqual(value); + // THEN An empty array should be returned + expect(feedback).toEqual([]); }); - test("should remove item from localStorage", () => { - // GIVEN an item is stored in localStorage - const key = "testKey"; - const value = "testValue"; - localStorage.setItem(key, value); - - // WHEN the item is removed using removeItem - PersistentStorageService.removeItem(localStorage, key); - - // THEN the item should be removed from localStorage - expect(localStorage.getItem(key)).toBeNull(); + test("clear overall feedback", () => { + // GIVEN The overall feedback is stored in the session storage + const givenFeedback = [ + { + question_id: "foo", + answer: { + rating_numeric: 5, + }, + is_answered: true, + }, + ]; + PersistentStorageService.setOverallFeedback(givenFeedback); + + // WHEN The overall feedback is cleared + PersistentStorageService.clearOverallFeedback(); + + // THEN The overall feedback should be cleared (empty array) + const feedback = PersistentStorageService.getOverallFeedback(); + expect(feedback).toEqual([]); }); }); diff --git a/frontend-new/src/app/PersistentStorageService/PersistentStorageService.ts b/frontend-new/src/app/PersistentStorageService/PersistentStorageService.ts index a3239f35f..1a3fd26cb 100644 --- a/frontend-new/src/app/PersistentStorageService/PersistentStorageService.ts +++ b/frontend-new/src/app/PersistentStorageService/PersistentStorageService.ts @@ -1,5 +1,6 @@ import { Invitation } from "src/auth/services/invitationsService/invitations.types"; -import { StoredPersonalInfo } from "../../experiences/experiencesDrawer/experienceService/experiences.types"; +import { StoredPersonalInfo } from "src/experiences/experiencesDrawer/experienceService/experiences.types"; +import { FeedbackItem } from "src/feedback/overallFeedback/overallFeedbackService/OverallFeedback.service.types"; const PERSISTENT_STORAGE_VERSION = "0.0.1"; export const TOKEN_KEY = `token_${PERSISTENT_STORAGE_VERSION}`; @@ -10,6 +11,8 @@ export const LOGIN_METHOD_KEY = `login_method_${PERSISTENT_STORAGE_VERSION}`; export const PERSONAL_INFO_KEY = `personal_info_${PERSISTENT_STORAGE_VERSION}`; +export const OVERALL_FEEDBACK_KEY = `overall_feedback_${PERSISTENT_STORAGE_VERSION}`; + /** * This class is used to store the tokens in the session storage. * eg: refresh token @@ -109,32 +112,29 @@ export class PersistentStorageService { static clearPersonalInfo(): void { this.storage.removeItem(PERSONAL_INFO_KEY); } + /** - * Returns the item from the storage - * @returns string | null - The item from the storage - * + * Returns the overall feedback from the storage + * @returns FeedbackItem[] - The feedback */ - static getItem(storage: Storage, key: string): string | null { - return storage.getItem(key); + static getOverallFeedback(): FeedbackItem[] { + const item = this.storage.getItem(OVERALL_FEEDBACK_KEY); + return item ? JSON.parse(item) : []; } /** - * Sets an item in the specified storage. - * @param {Storage} storage - The storage object (localStorage or sessionStorage). - * @param {string} key - The key of the item to remove. - * @param {string} value - The value of the item to set. + * Sets the overall feedback in the storage + * @param feedback */ - static setItem(storage: Storage, key: string, value: string): void { - storage.setItem(key, value); + static setOverallFeedback(feedback: FeedbackItem[]): void { + this.storage.setItem(OVERALL_FEEDBACK_KEY, JSON.stringify(feedback)); } /** - * Removes an item from the specified storage. - * @param {Storage} storage - The storage object (localStorage or sessionStorage). - * @param {string} key - The key of the item to remove. + * Clears the overall feedback from the storage */ - static removeItem(storage: Storage, key: string): void { - storage.removeItem(key); + static clearOverallFeedback(): void { + this.storage.removeItem(OVERALL_FEEDBACK_KEY); } /** diff --git a/frontend-new/src/chat/chatMessage/conversationConclusionChatMessage/conversationConclusionFooter/ConversationConclusionFooter.test.tsx b/frontend-new/src/chat/chatMessage/conversationConclusionChatMessage/conversationConclusionFooter/ConversationConclusionFooter.test.tsx index b273fda8a..cac2b7f10 100644 --- a/frontend-new/src/chat/chatMessage/conversationConclusionChatMessage/conversationConclusionFooter/ConversationConclusionFooter.test.tsx +++ b/frontend-new/src/chat/chatMessage/conversationConclusionChatMessage/conversationConclusionFooter/ConversationConclusionFooter.test.tsx @@ -20,7 +20,7 @@ jest.mock("src/app/PersistentStorageService/PersistentStorageService", () => { return { __esModule: true, PersistentStorageService: { - getItem: jest.fn().mockReturnValue(JSON.stringify([mockUserFeedback])), + getOverallFeedback: () => [mockUserFeedback], }, }; }); diff --git a/frontend-new/src/chat/chatMessage/conversationConclusionChatMessage/conversationConclusionFooter/ConversationConclusionFooter.tsx b/frontend-new/src/chat/chatMessage/conversationConclusionChatMessage/conversationConclusionFooter/ConversationConclusionFooter.tsx index c66aac5ee..f50e823f6 100644 --- a/frontend-new/src/chat/chatMessage/conversationConclusionChatMessage/conversationConclusionFooter/ConversationConclusionFooter.tsx +++ b/frontend-new/src/chat/chatMessage/conversationConclusionChatMessage/conversationConclusionFooter/ConversationConclusionFooter.tsx @@ -2,10 +2,6 @@ import React, { useMemo } from "react"; import { Box } from "@mui/material"; import PrimaryButton from "src/theme/PrimaryButton/PrimaryButton"; import { PersistentStorageService } from "src/app/PersistentStorageService/PersistentStorageService"; -import { - FEEDBACK_FORM_ANSWERS_KEY, - STORAGE, -} from "src/feedback/overallFeedback/feedbackForm/components/feedbackFormContent/FeedbackFormContent"; interface FeedbackFormButtonProps { notifyOnFeedbackFormOpened: () => void; @@ -20,8 +16,8 @@ export const DATA_TEST_ID = { const ConversationConclusionFooter: React.FC = ({ notifyOnFeedbackFormOpened }) => { const hasSavedFeedback = useMemo(() => { - const formAnswers = PersistentStorageService.getItem(STORAGE, FEEDBACK_FORM_ANSWERS_KEY); - return !!formAnswers; + const formAnswers = PersistentStorageService.getOverallFeedback(); + return formAnswers.length > 0; }, []); return ( diff --git a/frontend-new/src/feedback/overallFeedback/feedbackForm/components/feedbackFormContent/FeedbackFormContent.tsx b/frontend-new/src/feedback/overallFeedback/feedbackForm/components/feedbackFormContent/FeedbackFormContent.tsx index 2fa5ee854..1a3cdd889 100644 --- a/frontend-new/src/feedback/overallFeedback/feedbackForm/components/feedbackFormContent/FeedbackFormContent.tsx +++ b/frontend-new/src/feedback/overallFeedback/feedbackForm/components/feedbackFormContent/FeedbackFormContent.tsx @@ -27,16 +27,12 @@ export const DATA_TEST_ID = { FEEDBACK_FORM_BACK_BUTTON: `feedback-form-back-button-${uniqueId}`, }; -export const STORAGE = PersistentStorageService.storage; -export const FEEDBACK_FORM_ANSWERS_KEY = "userFeedbackResponses"; - const FeedbackFormContent: React.FC = ({ notifySubmit }) => { const theme = useTheme(); const isSmallMobile = useMediaQuery((theme: Theme) => theme.breakpoints.down("sm")); const [activeStep, setActiveStep] = React.useState(0); const [answers, setAnswers] = useState(() => { - const savedAnswers = PersistentStorageService.getItem(STORAGE, FEEDBACK_FORM_ANSWERS_KEY); - return savedAnswers ? JSON.parse(savedAnswers) : []; + return PersistentStorageService.getOverallFeedback(); }); const maxSteps = feedbackFormContentSteps.length; @@ -44,7 +40,7 @@ const FeedbackFormContent: React.FC = ({ notifySubmit const handleNext = () => { if (activeStep === maxSteps - 1) { notifySubmit(answers); - PersistentStorageService.removeItem(STORAGE, FEEDBACK_FORM_ANSWERS_KEY); + PersistentStorageService.clearOverallFeedback(); setAnswers([]); } else { setActiveStep((prev) => prev + 1); @@ -68,7 +64,7 @@ const FeedbackFormContent: React.FC = ({ notifySubmit } // Save updated answers to persistent storage - PersistentStorageService.setItem(STORAGE, FEEDBACK_FORM_ANSWERS_KEY, JSON.stringify(updatedAnswers)); + PersistentStorageService.setOverallFeedback(updatedAnswers); return updatedAnswers; }); diff --git a/frontend-new/yarn.lock b/frontend-new/yarn.lock index 19bc1291e..babead7e5 100644 --- a/frontend-new/yarn.lock +++ b/frontend-new/yarn.lock @@ -12901,7 +12901,7 @@ playwright-core@>=1.2.0: resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.44.1.tgz#53ec975503b763af6fc1a7aa995f34bc09ff447c" integrity sha512-wh0JWtYTrhv1+OSsLPgFzGzt67Y7BE/ZS3jEqgGBlp2ppp1ZDj8c+9IARNW4dwf1poq5MgHreEM2KV/GuR4cFA== -playwright@^1.14.0, playwright@^1.49.0: +playwright@^1.14.0, playwright@^1.49.1: version "1.49.1" resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.49.1.tgz#830266dbca3008022afa7b4783565db9944ded7c" integrity sha512-VYL8zLoNTBxVOrJBbDuRgDWa3i+mfQgDTrL8Ah9QXZ7ax4Dsj0MSq5bYgytRnDVVe+njoKnfsYkH3HzqVj5UZA==