Skip to content

Commit

Permalink
fix: debounce save func for answer
Browse files Browse the repository at this point in the history
  • Loading branch information
swouf committed May 27, 2024
1 parent 62d4e1b commit 9a8d145
Show file tree
Hide file tree
Showing 7 changed files with 100 additions and 77 deletions.
2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
"@types/node": "20.12.12",
"@types/react-dom": "18.2.25",
"i18next": "23.11.5",
"lodash.debounce": "4.0.8",
"lodash.isequal": "4.5.0",
"lodash.sortby": "4.7.0",
"lodash.uniqby": "4.7.0",
Expand Down Expand Up @@ -62,6 +63,7 @@
"@cypress/code-coverage": "3.12.39",
"@trivago/prettier-plugin-sort-imports": "4.3.0",
"@types/i18n": "0.13.12",
"@types/lodash.debounce": "^4",
"@types/lodash.isequal": "^4",
"@types/lodash.sortby": "^4",
"@types/lodash.uniqby": "^4",
Expand Down
130 changes: 65 additions & 65 deletions src/hooks/useUserAnswers.ts
Original file line number Diff line number Diff line change
@@ -1,74 +1,74 @@
import { useEffect, useMemo, useState } from 'react';
// import { useEffect, useMemo, useState } from 'react';

import { useLocalContext } from '@graasp/apps-query-client';
import { PermissionLevel, PermissionLevelCompare } from '@graasp/sdk';
// import { useLocalContext } from '@graasp/apps-query-client';
// import { PermissionLevel, PermissionLevelCompare } from '@graasp/sdk';

import {
AppDataType,
UserAnswerAppData,
getDefaultUserAnswerAppData,
} from '@/config/appData';
import { hooks, mutations } from '@/config/queryClient';
import { UserAnswer } from '@/interfaces/userAnswer';
// import {
// AppDataType,
// UserAnswerAppData,
// getDefaultUserAnswerAppData,
// } from '@/config/appData';
// import { hooks, mutations } from '@/config/queryClient';
// import { UserAnswer } from '@/interfaces/userAnswer';

const useUserAnswers = (): {
userAnswer?: UserAnswer;
submitAnswer: (userAnswer: UserAnswer) => void;
deleteAnswer: (id?: UserAnswerAppData['id']) => void;
allAnswersAppData?: UserAnswerAppData[];
} => {
const { data, isSuccess } = hooks.useAppData();
const [userAnswerAppData, setUserAnswerData] = useState<UserAnswerAppData>();
const [allAnswersAppData, setAllAnswersAppData] =
useState<UserAnswerAppData[]>();
const { mutate: postAppData } = mutations.usePostAppData();
const { mutate: patchAppData } = mutations.usePatchAppData();
const { mutate: deleteAppData } = mutations.useDeleteAppData();
const { permission } = useLocalContext();
// const useUserAnswers = (): {
// userAnswer?: UserAnswer;
// submitAnswer: (userAnswer: UserAnswer) => void;
// deleteAnswer: (id?: UserAnswerAppData['id']) => void;
// allAnswersAppData?: UserAnswerAppData[];
// } => {
// const { data, isSuccess } = hooks.useAppData();
// const [userAnswerAppData, setUserAnswerData] = useState<UserAnswerAppData>();
// const [allAnswersAppData, setAllAnswersAppData] =
// useState<UserAnswerAppData[]>();
// const { mutate: postAppData } = mutations.usePostAppData();
// const { mutate: patchAppData } = mutations.usePatchAppData();
// const { mutate: deleteAppData } = mutations.useDeleteAppData();
// const { permission } = useLocalContext();

const isAdmin = useMemo(
() => PermissionLevelCompare.gte(permission, PermissionLevel.Admin),
[permission],
);
// const isAdmin = useMemo(
// () => PermissionLevelCompare.gte(permission, PermissionLevel.Admin),
// [permission],
// );

const { memberId } = useLocalContext();
// const { memberId } = useLocalContext();

useEffect(() => {
if (isSuccess) {
const allAns = data.filter(
(d) => d.type === AppDataType.UserAnswer,
) as UserAnswerAppData[];
setAllAnswersAppData(allAns);
setUserAnswerData(
allAns.find((d) => d.member.id === memberId) as UserAnswerAppData,
);
}
}, [isSuccess, data, memberId]);
// useEffect(() => {
// if (isSuccess) {
// const allAns = data.filter(
// (d) => d.type === AppDataType.UserAnswer,
// ) as UserAnswerAppData[];
// setAllAnswersAppData(allAns);
// setUserAnswerData(
// allAns.find((d) => d.member.id === memberId) as UserAnswerAppData,
// );
// }
// }, [isSuccess, data, memberId]);

const submitAnswer = (userAnswer: UserAnswer): void => {
if (userAnswerAppData?.id) {
patchAppData({
...userAnswerAppData,
data: userAnswer,
});
} else {
postAppData(getDefaultUserAnswerAppData(userAnswer));
}
};
// const submitAnswer = (userAnswer: UserAnswer): void => {
// if (userAnswerAppData?.id) {
// patchAppData({
// ...userAnswerAppData,
// data: userAnswer,
// });
// } else {
// postAppData(getDefaultUserAnswerAppData(userAnswer));
// }
// };

const deleteAnswer = (id?: UserAnswerAppData['id']): void => {
if (id) {
deleteAppData({ id });
} else if (userAnswerAppData) {
deleteAppData({ id: userAnswerAppData?.id });
}
};
return {
userAnswer: userAnswerAppData?.data,
submitAnswer,
allAnswersAppData: isAdmin ? allAnswersAppData : undefined,
deleteAnswer,
};
};
// const deleteAnswer = (id?: UserAnswerAppData['id']): void => {
// if (id) {
// deleteAppData({ id });
// } else if (userAnswerAppData) {
// deleteAppData({ id: userAnswerAppData?.id });
// }
// };
// return {
// userAnswer: userAnswerAppData?.data,
// submitAnswer,
// allAnswersAppData: isAdmin ? allAnswersAppData : undefined,
// deleteAnswer,
// };
// };

export default useUserAnswers;
// export default useUserAnswers;
3 changes: 1 addition & 2 deletions src/modules/answers/AnswersView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,7 @@ import Typography from '@mui/material/Typography';
import sortBy from 'lodash.sortby';
import uniqBy from 'lodash.uniqby';

import useUserAnswers from '@/hooks/useUserAnswers';

import useUserAnswers from '../context/UserAnswersContext';
import UserAnswerRow from './UserAnswerRow';

const AnswersView: FC = () => {
Expand Down
17 changes: 13 additions & 4 deletions src/modules/context/UserAnswersContext.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,14 @@ import {
useContext,
useEffect,
useMemo,
useRef,
useState,
} from 'react';

import { useLocalContext } from '@graasp/apps-query-client';
import { AppData, PermissionLevel, PermissionLevelCompare } from '@graasp/sdk';

import debounce from 'lodash.debounce';
import sortBy from 'lodash.sortby';

import {
Expand Down Expand Up @@ -50,6 +52,8 @@ export const UserAnswersProvider: FC<{
useState<UserAnswerAppData>();
const [allAnswersAppData, setAllAnswersAppData] =
useState<UserAnswerAppData[]>();

const cachePayload = useRef<UserAnswer>();
const { mutate: postAppData } = mutations.usePostAppData();
const { mutate: patchAppData } = mutations.usePatchAppData();
const { mutate: deleteAppData } = mutations.useDeleteAppData();
Expand Down Expand Up @@ -86,10 +90,15 @@ export const UserAnswersProvider: FC<{
: UserAnswerStatus.Saved,
};
if (userAnswerAppData?.id) {
patchAppData({
...userAnswerAppData,
data: payloadData,
});
cachePayload.current = payloadData;
debounce(
() =>
patchAppData({
...userAnswerAppData,
data: cachePayload.current,
}),
500,
);
} else {
postAppData(getDefaultUserAnswerAppData(payloadData));
}
Expand Down
7 changes: 6 additions & 1 deletion src/modules/main/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { DEFAULT_LANG } from '@/config/constants';

import i18n from '../../config/i18n';
import { SettingsProvider } from '../context/SettingsContext';
import { UserAnswersProvider } from '../context/UserAnswersContext';
import BuilderView from './BuilderView';
import PlayerView from './PlayerView';

Expand All @@ -32,7 +33,11 @@ const App = (): JSX.Element => {
}
};

return <SettingsProvider>{renderContent()}</SettingsProvider>;
return (
<SettingsProvider>
<UserAnswersProvider>{renderContent()}</UserAnswersProvider>
</SettingsProvider>
);
};

export default App;
5 changes: 1 addition & 4 deletions src/modules/main/PlayerView.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,10 @@
import { PLAYER_VIEW_CY } from '@/config/selectors';

import { UserAnswersProvider } from '../context/UserAnswersContext';
import QuestionView from '../question-view/QuestionView';

const PlayerView = (): JSX.Element => (
<div data-cy={PLAYER_VIEW_CY}>
<UserAnswersProvider>
<QuestionView />
</UserAnswersProvider>
<QuestionView />
</div>
);
export default PlayerView;
13 changes: 12 additions & 1 deletion yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -3932,6 +3932,15 @@ __metadata:
languageName: node
linkType: hard

"@types/lodash.debounce@npm:^4":
version: 4.0.9
resolution: "@types/lodash.debounce@npm:4.0.9"
dependencies:
"@types/lodash": "npm:*"
checksum: 10/8183a152e01928e3b97ca773f6ae6038b8695e76493ba8bf6b743ec143948a62294fbc9d49fa4a78b52265b3ba4892ef57534e0c13d04aa0f111671b5a944feb
languageName: node
linkType: hard

"@types/lodash.isequal@npm:^4":
version: 4.5.8
resolution: "@types/lodash.isequal@npm:4.5.8"
Expand Down Expand Up @@ -8219,6 +8228,7 @@ __metadata:
"@tanstack/react-query-devtools": "npm:4.36.1"
"@trivago/prettier-plugin-sort-imports": "npm:4.3.0"
"@types/i18n": "npm:0.13.12"
"@types/lodash.debounce": "npm:^4"
"@types/lodash.isequal": "npm:^4"
"@types/lodash.sortby": "npm:^4"
"@types/lodash.uniqby": "npm:^4"
Expand Down Expand Up @@ -8246,6 +8256,7 @@ __metadata:
eslint-plugin-react-hooks: "npm:4.6.2"
husky: "npm:8.0.3"
i18next: "npm:23.11.5"
lodash.debounce: "npm:4.0.8"
lodash.isequal: "npm:4.5.0"
lodash.sortby: "npm:4.7.0"
lodash.uniqby: "npm:4.7.0"
Expand Down Expand Up @@ -9667,7 +9678,7 @@ __metadata:
languageName: node
linkType: hard

"lodash.debounce@npm:^4.0.8":
"lodash.debounce@npm:4.0.8, lodash.debounce@npm:^4.0.8":
version: 4.0.8
resolution: "lodash.debounce@npm:4.0.8"
checksum: 10/cd0b2819786e6e80cb9f5cda26b1a8fc073daaf04e48d4cb462fa4663ec9adb3a5387aa22d7129e48eed1afa05b482e2a6b79bfc99b86886364449500cbb00fd
Expand Down

0 comments on commit 9a8d145

Please sign in to comment.