forked from github/plane
chore: store fixes
This commit is contained in:
sriram veeraghanta
parent
2dcaccd4ec
commit
9b41b5baf5
@ -26,110 +26,121 @@ type Props = {
|
||||
|
||||
export type TPeekOverviewModes = "side" | "modal" | "full";
|
||||
|
||||
export const IssuePeekOverview: React.FC<Props> = observer(
|
||||
({ handleMutation, projectId, readOnly, workspaceSlug }) => {
|
||||
const [isSidePeekOpen, setIsSidePeekOpen] = useState(false);
|
||||
const [isModalPeekOpen, setIsModalPeekOpen] = useState(false);
|
||||
const [peekOverviewMode, setPeekOverviewMode] = useState<TPeekOverviewModes>("side");
|
||||
const [deleteIssueModal, setDeleteIssueModal] = useState(false);
|
||||
export const IssuePeekOverview: React.FC<Props> = observer(({ handleMutation, projectId, readOnly, workspaceSlug }) => {
|
||||
const [isSidePeekOpen, setIsSidePeekOpen] = useState(false);
|
||||
const [isModalPeekOpen, setIsModalPeekOpen] = useState(false);
|
||||
const [peekOverviewMode, setPeekOverviewMode] = useState<TPeekOverviewModes>("side");
|
||||
const [deleteIssueModal, setDeleteIssueModal] = useState(false);
|
||||
|
||||
const router = useRouter();
|
||||
const { peekIssue } = router.query;
|
||||
const router = useRouter();
|
||||
const { peekIssue } = router.query;
|
||||
|
||||
const { issues: issuesStore } = useMobxStore();
|
||||
const { deleteIssue, getIssueById, issues, updateIssue } = issuesStore;
|
||||
const { issueDetail: issueDetailStore } = useMobxStore();
|
||||
const { deleteIssue, getIssueById, issues, updateIssue } = issueDetailStore;
|
||||
|
||||
const issue = issues[peekIssue?.toString() ?? ""];
|
||||
const issue = issues[peekIssue?.toString() ?? ""];
|
||||
|
||||
const { user } = useUser();
|
||||
const { user } = useUser();
|
||||
|
||||
const handleClose = () => {
|
||||
const { query } = router;
|
||||
delete query.peekIssue;
|
||||
const handleClose = () => {
|
||||
const { query } = router;
|
||||
delete query.peekIssue;
|
||||
|
||||
router.push({
|
||||
pathname: router.pathname,
|
||||
query: { ...query },
|
||||
});
|
||||
};
|
||||
router.push({
|
||||
pathname: router.pathname,
|
||||
query: { ...query },
|
||||
});
|
||||
};
|
||||
|
||||
const handleUpdateIssue = async (formData: Partial<IIssue>) => {
|
||||
if (!issue || !user) return;
|
||||
const handleUpdateIssue = async (formData: Partial<IIssue>) => {
|
||||
if (!issue || !user) return;
|
||||
|
||||
await updateIssue(workspaceSlug, projectId, issue.id, formData, user);
|
||||
mutate(PROJECT_ISSUES_ACTIVITY(issue.id));
|
||||
handleMutation();
|
||||
};
|
||||
await updateIssue(workspaceSlug, projectId, issue.id, formData, user);
|
||||
mutate(PROJECT_ISSUES_ACTIVITY(issue.id));
|
||||
handleMutation();
|
||||
};
|
||||
|
||||
const handleDeleteIssue = async () => {
|
||||
if (!issue || !user) return;
|
||||
const handleDeleteIssue = async () => {
|
||||
if (!issue || !user) return;
|
||||
|
||||
await deleteIssue(workspaceSlug, projectId, issue.id, user);
|
||||
handleMutation();
|
||||
await deleteIssue(workspaceSlug, projectId, issue.id, user);
|
||||
handleMutation();
|
||||
|
||||
handleClose();
|
||||
};
|
||||
handleClose();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!peekIssue) return;
|
||||
useEffect(() => {
|
||||
if (!peekIssue) return;
|
||||
|
||||
getIssueById(workspaceSlug, projectId, peekIssue.toString());
|
||||
}, [getIssueById, peekIssue, projectId, workspaceSlug]);
|
||||
getIssueById(workspaceSlug, projectId, peekIssue.toString());
|
||||
}, [getIssueById, peekIssue, projectId, workspaceSlug]);
|
||||
|
||||
useEffect(() => {
|
||||
if (peekIssue) {
|
||||
if (peekOverviewMode === "side") {
|
||||
setIsSidePeekOpen(true);
|
||||
setIsModalPeekOpen(false);
|
||||
} else {
|
||||
setIsModalPeekOpen(true);
|
||||
setIsSidePeekOpen(false);
|
||||
}
|
||||
} else {
|
||||
setIsSidePeekOpen(false);
|
||||
useEffect(() => {
|
||||
if (peekIssue) {
|
||||
if (peekOverviewMode === "side") {
|
||||
setIsSidePeekOpen(true);
|
||||
setIsModalPeekOpen(false);
|
||||
} else {
|
||||
setIsModalPeekOpen(true);
|
||||
setIsSidePeekOpen(false);
|
||||
}
|
||||
}, [peekIssue, peekOverviewMode]);
|
||||
} else {
|
||||
setIsSidePeekOpen(false);
|
||||
setIsModalPeekOpen(false);
|
||||
}
|
||||
}, [peekIssue, peekOverviewMode]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<DeleteIssueModal
|
||||
isOpen={deleteIssueModal}
|
||||
handleClose={() => setDeleteIssueModal(false)}
|
||||
data={issue ? { ...issue } : null}
|
||||
onSubmit={handleDeleteIssue}
|
||||
user={user}
|
||||
/>
|
||||
<Transition.Root appear show={isSidePeekOpen} as={React.Fragment}>
|
||||
<Dialog as="div" className="relative z-20" onClose={handleClose}>
|
||||
<div className="fixed inset-0 z-20 h-full w-full overflow-y-auto">
|
||||
<Transition.Child
|
||||
as={React.Fragment}
|
||||
enter="transition-transform duration-300"
|
||||
enterFrom="translate-x-full"
|
||||
enterTo="translate-x-0"
|
||||
leave="transition-transform duration-200"
|
||||
leaveFrom="translate-x-0"
|
||||
leaveTo="translate-x-full"
|
||||
>
|
||||
<Dialog.Panel className="fixed z-20 bg-custom-background-100 top-0 right-0 h-full w-1/2 shadow-custom-shadow-md">
|
||||
<SidePeekView
|
||||
handleClose={handleClose}
|
||||
handleDeleteIssue={() => setDeleteIssueModal(true)}
|
||||
handleUpdateIssue={handleUpdateIssue}
|
||||
issue={issue}
|
||||
mode={peekOverviewMode}
|
||||
readOnly={readOnly}
|
||||
setMode={(mode) => setPeekOverviewMode(mode)}
|
||||
workspaceSlug={workspaceSlug}
|
||||
/>
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition.Root>
|
||||
<Transition.Root appear show={isModalPeekOpen} as={React.Fragment}>
|
||||
<Dialog as="div" className="relative z-20" onClose={handleClose}>
|
||||
return (
|
||||
<>
|
||||
<DeleteIssueModal
|
||||
isOpen={deleteIssueModal}
|
||||
handleClose={() => setDeleteIssueModal(false)}
|
||||
data={issue ? { ...issue } : null}
|
||||
onSubmit={handleDeleteIssue}
|
||||
user={user}
|
||||
/>
|
||||
<Transition.Root appear show={isSidePeekOpen} as={React.Fragment}>
|
||||
<Dialog as="div" className="relative z-20" onClose={handleClose}>
|
||||
<div className="fixed inset-0 z-20 h-full w-full overflow-y-auto">
|
||||
<Transition.Child
|
||||
as={React.Fragment}
|
||||
enter="transition-transform duration-300"
|
||||
enterFrom="translate-x-full"
|
||||
enterTo="translate-x-0"
|
||||
leave="transition-transform duration-200"
|
||||
leaveFrom="translate-x-0"
|
||||
leaveTo="translate-x-full"
|
||||
>
|
||||
<Dialog.Panel className="fixed z-20 bg-custom-background-100 top-0 right-0 h-full w-1/2 shadow-custom-shadow-md">
|
||||
<SidePeekView
|
||||
handleClose={handleClose}
|
||||
handleDeleteIssue={() => setDeleteIssueModal(true)}
|
||||
handleUpdateIssue={handleUpdateIssue}
|
||||
issue={issue}
|
||||
mode={peekOverviewMode}
|
||||
readOnly={readOnly}
|
||||
setMode={(mode) => setPeekOverviewMode(mode)}
|
||||
workspaceSlug={workspaceSlug}
|
||||
/>
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition.Root>
|
||||
<Transition.Root appear show={isModalPeekOpen} as={React.Fragment}>
|
||||
<Dialog as="div" className="relative z-20" onClose={handleClose}>
|
||||
<Transition.Child
|
||||
as={React.Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
|
||||
</Transition.Child>
|
||||
<div className="fixed inset-0 z-20 h-full w-full overflow-y-auto">
|
||||
<Transition.Child
|
||||
as={React.Fragment}
|
||||
enter="ease-out duration-300"
|
||||
@ -139,55 +150,42 @@ export const IssuePeekOverview: React.FC<Props> = observer(
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
|
||||
<Dialog.Panel>
|
||||
<div
|
||||
className={`fixed z-20 bg-custom-background-100 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-lg shadow-custom-shadow-xl transition-all duration-300 ${
|
||||
peekOverviewMode === "modal" ? "h-[70%] w-3/5" : "h-[95%] w-[95%]"
|
||||
}`}
|
||||
>
|
||||
{peekOverviewMode === "modal" && (
|
||||
<SidePeekView
|
||||
handleClose={handleClose}
|
||||
handleDeleteIssue={() => setDeleteIssueModal(true)}
|
||||
handleUpdateIssue={handleUpdateIssue}
|
||||
issue={issue}
|
||||
mode={peekOverviewMode}
|
||||
readOnly={readOnly}
|
||||
setMode={(mode) => setPeekOverviewMode(mode)}
|
||||
workspaceSlug={workspaceSlug}
|
||||
/>
|
||||
)}
|
||||
{peekOverviewMode === "full" && (
|
||||
<FullScreenPeekView
|
||||
handleClose={handleClose}
|
||||
handleDeleteIssue={() => setDeleteIssueModal(true)}
|
||||
handleUpdateIssue={handleUpdateIssue}
|
||||
issue={issue}
|
||||
mode={peekOverviewMode}
|
||||
readOnly={readOnly}
|
||||
setMode={(mode) => setPeekOverviewMode(mode)}
|
||||
workspaceSlug={workspaceSlug}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
<div className="fixed inset-0 z-20 h-full w-full overflow-y-auto">
|
||||
<Transition.Child
|
||||
as={React.Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Dialog.Panel>
|
||||
<div
|
||||
className={`fixed z-20 bg-custom-background-100 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-lg shadow-custom-shadow-xl transition-all duration-300 ${
|
||||
peekOverviewMode === "modal" ? "h-[70%] w-3/5" : "h-[95%] w-[95%]"
|
||||
}`}
|
||||
>
|
||||
{peekOverviewMode === "modal" && (
|
||||
<SidePeekView
|
||||
handleClose={handleClose}
|
||||
handleDeleteIssue={() => setDeleteIssueModal(true)}
|
||||
handleUpdateIssue={handleUpdateIssue}
|
||||
issue={issue}
|
||||
mode={peekOverviewMode}
|
||||
readOnly={readOnly}
|
||||
setMode={(mode) => setPeekOverviewMode(mode)}
|
||||
workspaceSlug={workspaceSlug}
|
||||
/>
|
||||
)}
|
||||
{peekOverviewMode === "full" && (
|
||||
<FullScreenPeekView
|
||||
handleClose={handleClose}
|
||||
handleDeleteIssue={() => setDeleteIssueModal(true)}
|
||||
handleUpdateIssue={handleUpdateIssue}
|
||||
issue={issue}
|
||||
mode={peekOverviewMode}
|
||||
readOnly={readOnly}
|
||||
setMode={(mode) => setPeekOverviewMode(mode)}
|
||||
workspaceSlug={workspaceSlug}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition.Root>
|
||||
</>
|
||||
);
|
||||
}
|
||||
);
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition.Root>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
@ -3,57 +3,43 @@ import { observable, action, makeObservable, runInAction } from "mobx";
|
||||
import { RootStore } from "./root";
|
||||
// services
|
||||
import { IssueService } from "services/issue.service";
|
||||
import { IIssue } from "types";
|
||||
|
||||
export type IPeekMode = "side" | "modal" | "full";
|
||||
|
||||
export interface IIssueViewDetailStore {
|
||||
export interface IIssueDetailStore {
|
||||
loader: boolean;
|
||||
error: any | null;
|
||||
|
||||
peekId: string | null;
|
||||
peekMode: IPeekMode | null;
|
||||
|
||||
issue_detail: {
|
||||
workspace: {
|
||||
[key: string]: {
|
||||
issues: {
|
||||
[key: string]: any;
|
||||
};
|
||||
};
|
||||
};
|
||||
issues: {
|
||||
[key: string]: IIssue;
|
||||
};
|
||||
|
||||
setPeekId: (issueId: string | null) => void;
|
||||
setPeekMode: (issueId: IPeekMode | null) => void;
|
||||
|
||||
// fetch issue details
|
||||
fetchIssueDetailsAsync: (workspaceId: string, projectId: string, issueId: string) => void;
|
||||
fetchIssueDetails: (workspaceId: string, projectId: string, issueId: string) => void;
|
||||
// creating issue
|
||||
createIssueAsync: (workspaceId: string, projectId: string, issueId: string, data: any) => void;
|
||||
createIssue: (workspaceId: string, projectId: string, issueId: string, data: any) => void;
|
||||
// updating issue
|
||||
updateIssueAsync: (workspaceId: string, projectId: string, issueId: string, data: any) => void;
|
||||
updateIssue: (workspaceId: string, projectId: string, issueId: string, data: any) => void;
|
||||
// deleting issue
|
||||
deleteIssueAsync: (workspaceId: string, projectId: string, issueId: string) => void;
|
||||
deleteIssue: (workspaceId: string, projectId: string, issueId: string) => void;
|
||||
}
|
||||
|
||||
class IssueViewDetailStore implements IIssueViewDetailStore {
|
||||
class IssueDetailStore implements IIssueDetailStore {
|
||||
loader: boolean = false;
|
||||
error: any | null = null;
|
||||
|
||||
peekId: string | null = null;
|
||||
peekMode: IPeekMode | null = null;
|
||||
|
||||
issue_detail: {
|
||||
workspace: {
|
||||
[key: string]: {
|
||||
issues: {
|
||||
[key: string]: any;
|
||||
};
|
||||
};
|
||||
};
|
||||
} = {
|
||||
workspace: {},
|
||||
};
|
||||
issues: {
|
||||
[key: string]: IIssue;
|
||||
} = {};
|
||||
|
||||
// root store
|
||||
rootStore;
|
||||
@ -63,20 +49,21 @@ class IssueViewDetailStore implements IIssueViewDetailStore {
|
||||
constructor(_rootStore: RootStore) {
|
||||
makeObservable(this, {
|
||||
// observable
|
||||
loader: observable,
|
||||
error: observable,
|
||||
loader: observable.ref,
|
||||
error: observable.ref,
|
||||
|
||||
peekId: observable,
|
||||
peekMode: observable,
|
||||
issue_detail: observable,
|
||||
peekId: observable.ref,
|
||||
peekMode: observable.ref,
|
||||
|
||||
issues: observable.ref,
|
||||
|
||||
setPeekId: action,
|
||||
setPeekMode: action,
|
||||
|
||||
fetchIssueDetailsAsync: action,
|
||||
createIssueAsync: action,
|
||||
updateIssueAsync: action,
|
||||
deleteIssueAsync: action,
|
||||
fetchIssueDetails: action,
|
||||
createIssue: action,
|
||||
updateIssue: action,
|
||||
deleteIssue: action,
|
||||
});
|
||||
|
||||
this.rootStore = _rootStore;
|
||||
@ -84,20 +71,22 @@ class IssueViewDetailStore implements IIssueViewDetailStore {
|
||||
}
|
||||
|
||||
setPeekId = (issueId: string | null) => (this.peekId = issueId);
|
||||
|
||||
setPeekMode = (mode: IPeekMode | null) => (this.peekMode = mode);
|
||||
|
||||
fetchIssueDetailsAsync = async (workspaceId: string, projectId: string, issueId: string) => {
|
||||
fetchIssueDetails = async (workspaceId: string, projectId: string, issueId: string) => {
|
||||
try {
|
||||
this.loader = true;
|
||||
this.error = null;
|
||||
|
||||
console.log("workspaceId", workspaceId);
|
||||
console.log("projectId", projectId);
|
||||
console.log("issueId", issueId);
|
||||
const issueDetailsResponse = await this.issueService.retrieve(workspaceId, projectId, issueId);
|
||||
|
||||
runInAction(() => {
|
||||
this.loader = false;
|
||||
this.error = null;
|
||||
this.issues = {
|
||||
[issueId]: issueDetailsResponse,
|
||||
};
|
||||
});
|
||||
} catch (error) {
|
||||
console.log("error in fetching issue details", error);
|
||||
@ -107,7 +96,7 @@ class IssueViewDetailStore implements IIssueViewDetailStore {
|
||||
}
|
||||
};
|
||||
|
||||
createIssueAsync = async (workspaceId: string, projectId: string, issueId: string, data: any) => {
|
||||
createIssue = async (workspaceId: string, projectId: string, issueId: string, data: any) => {
|
||||
try {
|
||||
this.loader = true;
|
||||
this.error = null;
|
||||
@ -129,12 +118,12 @@ class IssueViewDetailStore implements IIssueViewDetailStore {
|
||||
}
|
||||
};
|
||||
|
||||
updateIssueAsync = async (workspaceId: string, projectId: string, issueId: string, data: any) => {
|
||||
updateIssue = async (workspaceId: string, projectId: string, issueId: string, data: any) => {
|
||||
try {
|
||||
this.loader = true;
|
||||
this.error = null;
|
||||
|
||||
const filteredParams = this.rootStore.issueFilters.getComputedFilters(
|
||||
const filteredParams = this.rootStore.issueFilter.getComputedFilters(
|
||||
workspaceId,
|
||||
projectId,
|
||||
null,
|
||||
@ -161,7 +150,7 @@ class IssueViewDetailStore implements IIssueViewDetailStore {
|
||||
}
|
||||
};
|
||||
|
||||
deleteIssueAsync = async (workspaceId: string, projectId: string, issueId: string) => {
|
||||
deleteIssue = async (workspaceId: string, projectId: string, issueId: string) => {
|
||||
try {
|
||||
this.loader = true;
|
||||
this.error = null;
|
||||
@ -183,4 +172,4 @@ class IssueViewDetailStore implements IIssueViewDetailStore {
|
||||
};
|
||||
}
|
||||
|
||||
export default IssueViewDetailStore;
|
||||
export default IssueDetailStore;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user