fix: data loading after login fixed
This commit is contained in:
@@ -1,27 +1,17 @@
|
|||||||
import { modals } from "@mantine/modals";
|
import { modals } from "@mantine/modals";
|
||||||
import { Flex } from "@mantine/core";
|
import { Flex } from "@mantine/core";
|
||||||
import { DropResult } from "@hello-pangea/dnd";
|
import { DropResult } from "@hello-pangea/dnd";
|
||||||
import { useEffect, useState } from "react";
|
|
||||||
import { CardGroupService, CardService, CardSummary, CardSummaryReorderRequest } from "../../../../../client";
|
import { CardGroupService, CardService, CardSummary, CardSummaryReorderRequest } from "../../../../../client";
|
||||||
import { notifications } from "../../../../../shared/lib/notifications.ts";
|
import { notifications } from "../../../../../shared/lib/notifications.ts";
|
||||||
import { dateWithoutTimezone } from "../../../../../shared/lib/date.ts";
|
import { dateWithoutTimezone } from "../../../../../shared/lib/date.ts";
|
||||||
|
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
summariesRaw: CardSummary[];
|
summaries: CardSummary[];
|
||||||
refetchSummaries: () => void;
|
refetchSummaries: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
const useCardsDnd = ({
|
const useCardsDnd = ({ summaries, refetchSummaries }: Props) => {
|
||||||
summariesRaw,
|
|
||||||
refetchSummaries,
|
|
||||||
}: Props) => {
|
|
||||||
const [summaries, setSummaries] = useState(summariesRaw);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setSummaries(summariesRaw);
|
|
||||||
}, [summariesRaw]);
|
|
||||||
|
|
||||||
const recalculate = async (cardId: number) => {
|
const recalculate = async (cardId: number) => {
|
||||||
return CardService.recalculateCardPrice({
|
return CardService.recalculateCardPrice({
|
||||||
requestBody: {
|
requestBody: {
|
||||||
@@ -203,7 +193,6 @@ const useCardsDnd = ({
|
|||||||
};
|
};
|
||||||
|
|
||||||
return {
|
return {
|
||||||
summaries,
|
|
||||||
onCardDragEnd,
|
onCardDragEnd,
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
|
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
|
||||||
import { jwtDecode, JwtPayload as JwtPayloadBase } from "jwt-decode";
|
import { jwtDecode, JwtPayload as JwtPayloadBase } from "jwt-decode";
|
||||||
|
import { OpenAPI } from "../client";
|
||||||
|
|
||||||
interface AuthState {
|
interface AuthState {
|
||||||
isAuthorized: boolean;
|
isAuthorized: boolean;
|
||||||
@@ -38,6 +39,7 @@ const authSlice = createSlice({
|
|||||||
const { sub, role } = jwtDecode<JwtPayload>(
|
const { sub, role } = jwtDecode<JwtPayload>(
|
||||||
action.payload.accessToken,
|
action.payload.accessToken,
|
||||||
);
|
);
|
||||||
|
OpenAPI.TOKEN = action.payload.accessToken;
|
||||||
state.accessToken = action.payload.accessToken;
|
state.accessToken = action.payload.accessToken;
|
||||||
state.isAuthorized = true;
|
state.isAuthorized = true;
|
||||||
state.role = role;
|
state.role = role;
|
||||||
|
|||||||
@@ -1,9 +1,12 @@
|
|||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { type FullProjectSchema, ProjectService } from "../client";
|
import { type FullProjectSchema, ProjectService } from "../client";
|
||||||
|
import { useSelector } from "react-redux";
|
||||||
|
import { RootState } from "../redux/store.ts";
|
||||||
|
|
||||||
|
|
||||||
const useProjects = () => {
|
const useProjects = () => {
|
||||||
const [projects, setProjects] = useState<FullProjectSchema[]>([]);
|
const [projects, setProjects] = useState<FullProjectSchema[]>([]);
|
||||||
|
const authState = useSelector((state: RootState) => state.auth);
|
||||||
|
|
||||||
const refetchProjects = () => {
|
const refetchProjects = () => {
|
||||||
ProjectService.getProjects()
|
ProjectService.getProjects()
|
||||||
@@ -14,8 +17,10 @@ const useProjects = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
refetchProjects();
|
if (authState.isAuthorized) {
|
||||||
}, []);
|
refetchProjects();
|
||||||
|
}
|
||||||
|
}, [authState.isAuthorized]);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
projects,
|
projects,
|
||||||
|
|||||||
@@ -1,19 +1,27 @@
|
|||||||
import { useParams } from "@tanstack/react-router";
|
import { useParams } from "@tanstack/react-router";
|
||||||
import { CardPageContextProvider, useCardPageContext } from "../../CardsPage/contexts/CardPageContext.tsx";
|
import { CardPageContextProvider, useCardPageContext } from "../../CardsPage/contexts/CardPageContext.tsx";
|
||||||
import ProductAndServiceTab from "../../../modules/cardModules/cardEditorTabs/ProductAndServiceTab/ProductAndServiceTab.tsx";
|
import ProductAndServiceTab
|
||||||
|
from "../../../modules/cardModules/cardEditorTabs/ProductAndServiceTab/ProductAndServiceTab.tsx";
|
||||||
import React, { FC, useEffect } from "react";
|
import React, { FC, useEffect } from "react";
|
||||||
import { CardService } from "../../../client";
|
import { CardService } from "../../../client";
|
||||||
|
import { useSelector } from "react-redux";
|
||||||
|
import { RootState } from "../../../redux/store.ts";
|
||||||
|
|
||||||
export type Props = {
|
export type Props = {
|
||||||
cardId: number;
|
cardId: number;
|
||||||
};
|
};
|
||||||
const CardPageContent: FC<Props> = ({ cardId }) => {
|
const CardPageContent: FC<Props> = ({ cardId }) => {
|
||||||
const { setSelectedCard } = useCardPageContext();
|
const { setSelectedCard } = useCardPageContext();
|
||||||
|
const authState = useSelector((state: RootState) => state.auth);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
CardService.getCardById({ cardId }).then(card => {
|
if (authState.isAuthorized) {
|
||||||
setSelectedCard(card);
|
CardService.getCardById({ cardId }).then(card => {
|
||||||
});
|
setSelectedCard(card);
|
||||||
}, []);
|
});
|
||||||
|
}
|
||||||
|
}, [authState.isAuthorized]);
|
||||||
|
|
||||||
return <ProductAndServiceTab />;
|
return <ProductAndServiceTab />;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -17,21 +17,20 @@ type DndContextState = {
|
|||||||
const DndContext = createContext<DndContextState | undefined>(undefined);
|
const DndContext = createContext<DndContextState | undefined>(undefined);
|
||||||
|
|
||||||
type DndContextProps = {
|
type DndContextProps = {
|
||||||
summariesRaw: CardSummary[];
|
summaries: CardSummary[];
|
||||||
refetchSummaries: () => void;
|
refetchSummaries: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
const useDndContextState = ({
|
const useDndContextState = ({
|
||||||
summariesRaw,
|
summaries,
|
||||||
refetchSummaries,
|
refetchSummaries,
|
||||||
}: DndContextProps) => {
|
}: DndContextProps) => {
|
||||||
const [dragState, setDragState] = useState<DragState>(DragState.DRAG_ENDED);
|
const [dragState, setDragState] = useState<DragState>(DragState.DRAG_ENDED);
|
||||||
|
|
||||||
const {
|
const {
|
||||||
summaries,
|
|
||||||
onCardDragEnd,
|
onCardDragEnd,
|
||||||
} = useCardsDnd({
|
} = useCardsDnd({
|
||||||
summariesRaw,
|
summaries,
|
||||||
refetchSummaries,
|
refetchSummaries,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -17,17 +17,22 @@ import ProjectEditDrawer from "../drawers/ProjectEditDrawer/ProjectEditDrawer.ts
|
|||||||
import Boards from "../../../components/Dnd/Boards/Boards/Boards.tsx";
|
import Boards from "../../../components/Dnd/Boards/Boards/Boards.tsx";
|
||||||
import { DndContextProvider } from "../contexts/DndContext.tsx";
|
import { DndContextProvider } from "../contexts/DndContext.tsx";
|
||||||
import useCardSummaries from "../hooks/useCardSummaries.tsx";
|
import useCardSummaries from "../hooks/useCardSummaries.tsx";
|
||||||
|
import { useSelector } from "react-redux";
|
||||||
|
import { RootState } from "../../../redux/store.ts";
|
||||||
|
|
||||||
export const CardsPage: FC = () => {
|
export const CardsPage: FC = () => {
|
||||||
const { form } = useCardsTableForm();
|
const { form } = useCardsTableForm();
|
||||||
const { dealId } = useParams({ strict: false });
|
const { dealId } = useParams({ strict: false });
|
||||||
const { summaries, fetchSummaries } = useCardSummaries({ full: false });
|
const { summaries, fetchSummaries } = useCardSummaries({ full: false });
|
||||||
|
const authState = useSelector((state: RootState) => state.auth);
|
||||||
|
|
||||||
const [displayMode, setDisplayMode] = useState<DisplayMode>(DisplayMode.BOARD);
|
const [displayMode, setDisplayMode] = useState<DisplayMode>(DisplayMode.BOARD);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
fetchSummaries();
|
if (authState.isAuthorized) {
|
||||||
}, []);
|
fetchSummaries();
|
||||||
|
}
|
||||||
|
}, [authState.isAuthorized]);
|
||||||
|
|
||||||
const tableBody = useMemo(() => {
|
const tableBody = useMemo(() => {
|
||||||
return (
|
return (
|
||||||
@@ -38,7 +43,7 @@ export const CardsPage: FC = () => {
|
|||||||
const boardsBody = useMemo(() => {
|
const boardsBody = useMemo(() => {
|
||||||
return (
|
return (
|
||||||
<DndContextProvider
|
<DndContextProvider
|
||||||
summariesRaw={summaries}
|
summaries={summaries}
|
||||||
refetchSummaries={fetchSummaries}
|
refetchSummaries={fetchSummaries}
|
||||||
>
|
>
|
||||||
<Boards />
|
<Boards />
|
||||||
|
|||||||
Reference in New Issue
Block a user