github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2025-08-07 19:59:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix peek overview loading state (#5698)

Browse Source
This commit is contained in:
rahulramesha
2024-09-26 13:29:34 +05:30
committed by GitHub
parent 0068ea93de
commit 6e0ece496a
5 changed files with 31 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/[archivedIssueId]/page.tsx
View File

@@ -19,7 +19,7 @@ const ArchivedIssueDetailsPage = observer(() => {
// hooks
const {
fetchIssue,
issue: { getIssueById, isFetchingIssueDetails },
issue: { getIssueById, getIsFetchingIssueDetails },
} = useIssueDetail();
const { getProjectById } = useProject();
@@ -40,7 +40,7 @@ const ArchivedIssueDetailsPage = observer(() => {
if (!issue) return <></>;
const issueLoader = !issue || isFetchingIssueDetails ? true : false;
const issueLoader = !issue || getIsFetchingIssueDetails(issue?.id) ? true : false;
return (
<>

4
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/[issueId]/page.tsx
View File

@@ -27,7 +27,7 @@ const IssueDetailsPage = observer(() => {
// store hooks
const {
fetchIssue,
issue: { getIssueById, isFetchingIssueDetails },
issue: { getIssueById, getIsFetchingIssueDetails },
} = useIssueDetail();
const { getProjectById } = useProject();
const { toggleIssueDetailSidebar, issueDetailSidebarCollapsed } = useAppTheme();
@@ -41,7 +41,7 @@ const IssueDetailsPage = observer(() => {
// derived values
const issue = getIssueById(issueId?.toString() || "") || undefined;
const project = (issue?.project_id && getProjectById(issue?.project_id)) || undefined;
const issueLoader = !issue || isFetchingIssueDetails ? true : false;
const issueLoader = !issue || getIsFetchingIssueDetails(issue?.id) ? true : false;
const pageTitle = project && issue ? `${project?.identifier}-${issue?.sequence_id} ${issue?.name}` : undefined;
useEffect(() => {

4
web/core/components/issues/peek-overview/root.tsx
View File

@@ -35,7 +35,7 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
const {
peekIssue,
setPeekIssue,
issue: { fetchIssue, isFetchingIssueDetails },
issue: { fetchIssue, getIsFetchingIssueDetails },
fetchActivities,
} = useIssueDetail();
@@ -344,7 +344,7 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
workspaceSlug={peekIssue.workspaceSlug}
projectId={peekIssue.projectId}
issueId={peekIssue.issueId}
isLoading={isFetchingIssueDetails}
isLoading={getIsFetchingIssueDetails(peekIssue.issueId)}
isError={error}
is_archived={is_archived}
disabled={!isEditable}

4
web/core/components/issues/peek-overview/view.tsx
View File

@@ -60,7 +60,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
isArchiveIssueModalOpen,
toggleDeleteIssueModal,
toggleArchiveIssueModal,
issue: { getIssueById, isLocalDBIssueDescription },
issue: { getIssueById, getIsLocalDBIssueDescription },
} = useIssueDetail();
const issue = getIssueById(issueId);
// remove peek id
@@ -69,6 +69,8 @@ export const IssueView: FC<IIssueView> = observer((props) => {
if (embedIssue) embedRemoveCurrentNotification && embedRemoveCurrentNotification();
};
const isLocalDBIssueDescription = getIsLocalDBIssueDescription(issueId);
usePeekOverviewOutsideClickDetector(
issuePeekOverviewRef,
() => {

31
web/core/store/issue/issue-details/issue.store.ts
View File

@@ -34,15 +34,15 @@ export interface IIssueStoreActions {
}
export interface IIssueStore extends IIssueStoreActions {
isFetchingIssueDetails: boolean;
isLocalDBIssueDescription: boolean;
getIsFetchingIssueDetails: (issueId: string | undefined) => boolean;
getIsLocalDBIssueDescription: (issueId: string | undefined) => boolean;
// helper methods
getIssueById: (issueId: string) => TIssue | undefined;
}
export class IssueStore implements IIssueStore {
isFetchingIssueDetails: boolean = false;
isLocalDBIssueDescription: boolean = false;
fetchingIssueDetails: string | undefined = undefined;
localDBIssueDescription: string | undefined = undefined;
// root store
rootIssueDetailStore: IIssueDetail;
// services
@@ -52,7 +52,8 @@ export class IssueStore implements IIssueStore {
constructor(rootStore: IIssueDetail) {
makeObservable(this, {
isFetchingIssueDetails: observable.ref,
fetchingIssueDetails: observable.ref,
localDBIssueDescription: observable.ref,
});
// root store
this.rootIssueDetailStore = rootStore;
@@ -62,6 +63,18 @@ export class IssueStore implements IIssueStore {
this.issueDraftService = new IssueDraftService();
}
getIsFetchingIssueDetails = computedFn((issueId: string | undefined) => {
if (!issueId) return false;
return this.fetchingIssueDetails === issueId;
});
getIsLocalDBIssueDescription = computedFn((issueId: string | undefined) => {
if (!issueId) return false;
return this.localDBIssueDescription === issueId;
});
// helper methods
getIssueById = computedFn((issueId: string) => {
if (!issueId) return undefined;
@@ -79,11 +92,11 @@ export class IssueStore implements IIssueStore {
// fetch issue from local db
issue = await persistence.getIssue(issueId);
this.isFetchingIssueDetails = true;
this.fetchingIssueDetails = issueId;
if (issue) {
this.addIssueToStore(issue);
this.isLocalDBIssueDescription = true;
this.localDBIssueDescription = issueId;
}
if (issueType === "ARCHIVED")
@@ -95,7 +108,7 @@ export class IssueStore implements IIssueStore {
if (!issue) throw new Error("Issue not found");
const issuePayload = this.addIssueToStore(issue);
this.isLocalDBIssueDescription = false;
this.localDBIssueDescription = undefined;
this.rootIssueDetailStore.rootIssueStore.issues.addIssue([issuePayload]);
@@ -173,7 +186,7 @@ export class IssueStore implements IIssueStore {
};
this.rootIssueDetailStore.rootIssueStore.issues.addIssue([issuePayload]);
this.isFetchingIssueDetails = false;
this.fetchingIssueDetails = undefined;
return issuePayload;
};