Implemented data reset on account switch, fixed jumping after reload between quiz list and create new quiz, and resolved type error.

This commit is contained in:
aleksandr-raw 2024-03-28 17:43:41 +04:00
parent fe39bc1b32
commit e8a3ca6e84
3 changed files with 28 additions and 18 deletions

@ -1,4 +1,5 @@
import { Suspense, lazy } from "react";
import type { SuspenseProps } from "react";
import { lazy, Suspense, useEffect, useLayoutEffect, useRef } from "react";
import { lazily } from "react-lazily";
import ContactFormModal from "@ui_kit/ContactForm";
import dayjs from "dayjs";
@ -6,29 +7,30 @@ import "dayjs/locale/ru";
import SigninDialog from "./pages/auth/Signin";
import SignupDialog from "./pages/auth/Signup";
import {
Navigate,
Route,
Routes,
useLocation,
useNavigate,
Navigate,
} from "react-router-dom";
import "./index.css";
import Landing from "./pages/Landing/Landing";
import Main from "./pages/main";
import {
clearAuthToken,
getMessageFromFetchError,
useUserFetcher,
UserAccount,
makeRequest,
devlog,
createUserAccount,
devlog,
getMessageFromFetchError,
makeRequest,
UserAccount,
useUserFetcher,
} from "@frontend/kitui";
import type { OriginalUserAccount } from "@root/user";
import {
clearUserData,
setCustomerAccount,
setUser,
setUserAccount,
setCustomerAccount,
useUserStore,
} from "@root/user";
import { enqueueSnackbar } from "notistack";
@ -38,13 +40,9 @@ import FloatingSupportChat from "@ui_kit/FloatingSupportChat";
import { Restore } from "./pages/auth/Restore";
import { isAxiosError } from "axios";
import { useEffect, useLayoutEffect, useRef } from "react";
import RecoverPassword from "./pages/auth/RecoverPassword";
import OutdatedLink from "./pages/auth/OutdatedLink";
import type { OriginalUserAccount } from "@root/user";
import type { SuspenseProps } from "react";
import { clearQuizData } from "@root/quizes/store";
const MyQuizzesFull = lazy(() => import("./pages/createQuize/MyQuizzesFull"));
const ViewPage = lazy(() => import("./pages/ViewPublicationPage"));
@ -139,6 +137,10 @@ export default function App() {
const location = useLocation();
const navigate = useNavigate();
useEffect(() => {
return clearQuizData();
}, [userId]);
useUserFetcher({
url: process.env.REACT_APP_DOMAIN + `/user/${userId}`,
userId,

@ -31,7 +31,7 @@ export default function MyQuizzesFull({
outerContainerSx: sx,
children,
}: Props) {
const { quizes } = useQuizes();
const { quizes, isValidating } = useQuizes();
const navigate = useNavigate();
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(500));
@ -40,6 +40,10 @@ export default function MyQuizzesFull({
copyQuiz(value);
};
if (isValidating) {
return <HeaderFull isRequest={false} />;
}
return (
<>
<HeaderFull isRequest={false} />
@ -100,10 +104,12 @@ export default function MyQuizzesFull({
applicationCount={quiz.passed_count}
conversionPercent={
quiz.session_count
? (
(quiz.passed_count / quiz.session_count) *
100
).toFixed(1)
? parseFloat(
(
(quiz.passed_count / quiz.session_count) *
100
).toFixed(1),
)
: 0
}
onClickCopy={onClickCopy}

@ -30,3 +30,5 @@ export const useQuizStore = create<QuizStore>()(
},
),
);
export const clearQuizData = () => useQuizStore.setState({ ...initialState });