Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: command paletter mobx implementation #2465

Merged
merged 2 commits into from
Oct 17, 2023
Merged

fix: command paletter mobx implementation #2465

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
91bd410
fix: command palette changes
sriramveeraghanta Oct 17, 2023
bc9f0ba
fix: merge conflicts resolved
sriramveeraghanta Oct 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 31 additions & 35 deletions web/components/command-palette/command-k.tsx → ...ponents/command-palette/command-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,7 @@
import React, { useCallback, useEffect, useState } from "react";

import { useRouter } from "next/router";

import useSWR, { mutate } from "swr";

// cmdk
import { Command } from "cmdk";
// headless ui
import { Dialog, Transition } from "@headlessui/react";
// services
import { WorkspaceService } from "services/workspace.service";
Expand Down Expand Up @@ -60,16 +55,20 @@ import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
type Props = {
deleteIssue: () => void;
isPaletteOpen: boolean;
setIsPaletteOpen: React.Dispatch<React.SetStateAction<boolean>>;
closePalette: () => void;
};

// services
const workspaceService = new WorkspaceService();
const issueService = new IssueService();

export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPaletteOpen }) => {
export const CommandModal: React.FC<Props> = (props) => {
const { deleteIssue, isPaletteOpen, closePalette } = props;
// router
const router = useRouter();
const { workspaceSlug, projectId, issueId } = router.query;
// states
const [placeholder, setPlaceholder] = useState("Type a command or search...");

const [resultsCount, setResultsCount] = useState(0);
const [isLoading, setIsLoading] = useState(false);
const [isSearching, setIsSearching] = useState(false);
Expand All @@ -86,15 +85,12 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
},
});
const [isWorkspaceLevel, setIsWorkspaceLevel] = useState(false);

const [pages, setPages] = useState<string[]>([]);

const page = pages[pages.length - 1];

const debouncedSearchTerm = useDebounce(searchTerm, 500);

const router = useRouter();
const { workspaceSlug, projectId, issueId } = router.query;

const { setToastAlert } = useToast();

const { user } = useUser();
Expand Down Expand Up @@ -141,7 +137,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
const handleIssueAssignees = (assignee: string) => {
if (!issueDetails) return;

setIsPaletteOpen(false);
closePalette();
const updatedAssignees = issueDetails.assignees ?? [];

if (updatedAssignees.includes(assignee)) {
Expand All @@ -153,12 +149,12 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
};

const redirect = (path: string) => {
setIsPaletteOpen(false);
closePalette();
router.push(path);
};

const createNewWorkspace = () => {
setIsPaletteOpen(false);
closePalette();
router.push("/create-workspace");
};

Expand Down Expand Up @@ -236,7 +232,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
}}
as={React.Fragment}
>
<Dialog as="div" className="relative z-30" onClose={() => setIsPaletteOpen(false)}>
<Dialog as="div" className="relative z-30" onClose={() => closePalette()}>
<Transition.Child
as={React.Fragment}
enter="ease-out duration-300"
Expand Down Expand Up @@ -269,7 +265,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
// when search is empty and page is undefined
// when user tries to close the modal with esc
if (e.key === "Escape" && !page && !searchTerm) {
setIsPaletteOpen(false);
closePalette();
}
// Escape goes to previous page
// Backspace goes to previous page when search is empty
Expand Down Expand Up @@ -365,7 +361,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
<Command.Item
key={item.id}
onSelect={() => {
setIsPaletteOpen(false);
closePalette();
router.push(currentSection.path(item));
}}
value={`${key}-${item?.name}`}
Expand All @@ -388,7 +384,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
<Command.Group heading="Issue actions">
<Command.Item
onSelect={() => {
setIsPaletteOpen(false);
closePalette();
setPlaceholder("Change state...");
setSearchTerm("");
setPages([...pages, "change-issue-state"]);
Expand Down Expand Up @@ -455,7 +451,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
</Command.Item>
<Command.Item
onSelect={() => {
setIsPaletteOpen(false);
closePalette();
copyIssueUrlToClipboard();
}}
className="focus:outline-none"
Expand All @@ -470,7 +466,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
<Command.Group heading="Issue">
<Command.Item
onSelect={() => {
setIsPaletteOpen(false);
closePalette();
const e = new KeyboardEvent("keydown", {
key: "c",
});
Expand All @@ -490,7 +486,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
<Command.Group heading="Project">
<Command.Item
onSelect={() => {
setIsPaletteOpen(false);
closePalette();
const e = new KeyboardEvent("keydown", {
key: "p",
});
Expand All @@ -512,7 +508,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
<Command.Group heading="Cycle">
<Command.Item
onSelect={() => {
setIsPaletteOpen(false);
closePalette();
const e = new KeyboardEvent("keydown", {
key: "q",
});
Expand All @@ -530,7 +526,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
<Command.Group heading="Module">
<Command.Item
onSelect={() => {
setIsPaletteOpen(false);
closePalette();
const e = new KeyboardEvent("keydown", {
key: "m",
});
Expand All @@ -548,7 +544,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
<Command.Group heading="View">
<Command.Item
onSelect={() => {
setIsPaletteOpen(false);
closePalette();
const e = new KeyboardEvent("keydown", {
key: "v",
});
Expand All @@ -566,7 +562,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
<Command.Group heading="Page">
<Command.Item
onSelect={() => {
setIsPaletteOpen(false);
closePalette();
const e = new KeyboardEvent("keydown", {
key: "d",
});
Expand Down Expand Up @@ -623,7 +619,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
<Command.Group heading="Help">
<Command.Item
onSelect={() => {
setIsPaletteOpen(false);
closePalette();
const e = new KeyboardEvent("keydown", {
key: "h",
});
Expand All @@ -638,7 +634,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
</Command.Item>
<Command.Item
onSelect={() => {
setIsPaletteOpen(false);
closePalette();
window.open("https://docs.plane.so/", "_blank");
}}
className="focus:outline-none"
Expand All @@ -650,7 +646,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
</Command.Item>
<Command.Item
onSelect={() => {
setIsPaletteOpen(false);
closePalette();
window.open("https://discord.com/invite/A92xrEGCge", "_blank");
}}
className="focus:outline-none"
Expand All @@ -662,7 +658,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
</Command.Item>
<Command.Item
onSelect={() => {
setIsPaletteOpen(false);
closePalette();
window.open("https://github.com/makeplane/plane/issues/new/choose", "_blank");
}}
className="focus:outline-none"
Expand All @@ -674,7 +670,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
</Command.Item>
<Command.Item
onSelect={() => {
setIsPaletteOpen(false);
closePalette();
(window as any).$crisp.push(["do", "chat:open"]);
}}
className="focus:outline-none"
Expand Down Expand Up @@ -747,15 +743,15 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
</>
)}
{page === "change-issue-state" && issueDetails && (
<ChangeIssueState issue={issueDetails} setIsPaletteOpen={setIsPaletteOpen} user={user} />
<ChangeIssueState issue={issueDetails} setIsPaletteOpen={closePalette} user={user} />
)}
{page === "change-issue-priority" && issueDetails && (
<ChangeIssuePriority issue={issueDetails} setIsPaletteOpen={setIsPaletteOpen} user={user} />
<ChangeIssuePriority issue={issueDetails} setIsPaletteOpen={closePalette} user={user} />
)}
{page === "change-issue-assignee" && issueDetails && (
<ChangeIssueAssignee issue={issueDetails} setIsPaletteOpen={setIsPaletteOpen} user={user} />
<ChangeIssueAssignee issue={issueDetails} setIsPaletteOpen={closePalette} user={user} />
)}
{page === "change-interface-theme" && <ChangeInterfaceTheme setIsPaletteOpen={setIsPaletteOpen} />}
{page === "change-interface-theme" && <ChangeInterfaceTheme setIsPaletteOpen={closePalette} />}
</Command.List>
</Command>
</Dialog.Panel>
Expand Down
Loading