aykhans/slash-e
1
0
Fork 0
mirror of https://github.com/aykhans/slash-e.git synced 2025-04-18 05:05:29 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

chore: use drawer instead of dialog

Browse Source
This commit is contained in:
Steven 2023-11-15 22:14:36 +08:00
parent 30d9dd04bb
commit 2296eb96ef
12 changed files with 105 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/web/src/components/CollectionView.tsx
View File

@ -11,7 +11,7 @@ import { useAppSelector } from "@/stores";
import useCollectionStore from "@/stores/v1/collection"; import useCollectionStore from "@/stores/v1/collection";
import { Collection } from "@/types/proto/api/v2/collection_service"; import { Collection } from "@/types/proto/api/v2/collection_service";
import { showCommonDialog } from "./Alert"; import { showCommonDialog } from "./Alert";
import CreateCollectionDialog from "./CreateCollectionDialog"; import CreateCollectionDialog from "./CreateCollectionDrawer";
import Icon from "./Icon"; import Icon from "./Icon";
import ShortcutView from "./ShortcutView"; import ShortcutView from "./ShortcutView";
import Dropdown from "./common/Dropdown"; import Dropdown from "./common/Dropdown";

43
frontend/web/src/components/CreateCollectionDialog.tsx → frontend/web/src/components/CreateCollectionDrawer.tsx
View File

@ -1,4 +1,4 @@
import { Button, Input, Modal, ModalDialog, Radio, RadioGroup } from "@mui/joy"; import { Button, DialogActions, DialogContent, DialogTitle, Drawer, Input, ModalClose, Radio, RadioGroup } from "@mui/joy";
import { isUndefined } from "lodash-es"; import { isUndefined } from "lodash-es";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { toast } from "react-hot-toast"; import { toast } from "react-hot-toast";
@ -22,7 +22,7 @@ interface State {
collectionCreate: Collection; collectionCreate: Collection;
} }
const CreateCollectionDialog: React.FC<Props> = (props: Props) => { const CreateCollectionDrawer: React.FC<Props> = (props: Props) => {
const { onClose, onConfirm, collectionId } = props; const { onClose, onConfirm, collectionId } = props;
const { t } = useTranslation(); const { t } = useTranslation();
const collectionStore = useCollectionStore(); const collectionStore = useCollectionStore();
@ -141,15 +141,11 @@ const CreateCollectionDialog: React.FC<Props> = (props: Props) => {
}; };
return ( return (
<Modal open={true}> <Drawer anchor="right" open={true} onClose={onClose}>
<ModalDialog> <DialogTitle>{isCreating ? "Create Collection" : "Edit Collection"}</DialogTitle>
<div className="w-full flex flex-row justify-between items-center"> <ModalClose />
<span className="text-lg font-medium">{isCreating ? "Create Collection" : "Edit Collection"}</span> <DialogContent className="max-w-full sm:max-w-sm">
<Button variant="plain" onClick={onClose}> <div className="overflow-y-auto w-full mt-2 px-3">
<Icon.X className="w-5 h-auto text-gray-600" />
</Button>
</div>
<div className="overflow-y-auto overflow-x-hidden w-80 sm:w-96 max-w-full">
<div className="w-full flex flex-col justify-start items-start mb-3"> <div className="w-full flex flex-col justify-start items-start mb-3">
<span className="mb-2"> <span className="mb-2">
Name <span className="text-red-600">*</span> Name <span className="text-red-600">*</span>
@ -241,19 +237,20 @@ const CreateCollectionDialog: React.FC<Props> = (props: Props) => {
)} )}
</div> </div>
</div> </div>
<div className="w-full flex flex-row justify-end items-center mt-4 space-x-2">
<Button color="neutral" variant="plain" disabled={requestState.isLoading} loading={requestState.isLoading} onClick={onClose}>
{t("common.cancel")}
</Button>
<Button color="primary" disabled={requestState.isLoading} loading={requestState.isLoading} onClick={handleSaveBtnClick}>
{t("common.save")}
</Button>
</div>
</div> </div>
</ModalDialog> </DialogContent>
</Modal> <DialogActions>
<div className="w-full flex flex-row justify-end items-center px-3 pb-4 space-x-2">
<Button color="neutral" variant="plain" disabled={requestState.isLoading} loading={requestState.isLoading} onClick={onClose}>
{t("common.cancel")}
</Button>
<Button color="primary" disabled={requestState.isLoading} loading={requestState.isLoading} onClick={handleSaveBtnClick}>
{t("common.save")}
</Button>
</div>
</DialogActions>
</Drawer>
); );
}; };
export default CreateCollectionDialog; export default CreateCollectionDrawer;

55
frontend/web/src/components/CreateShortcutDialog.tsx → frontend/web/src/components/CreateShortcutDrawer.tsx
View File

@ -1,4 +1,16 @@
import { Button, Divider, Input, Modal, ModalDialog, Radio, RadioGroup, Textarea } from "@mui/joy"; import {
Button,
DialogActions,
DialogContent,
DialogTitle,
Divider,
Drawer,
Input,
ModalClose,
Radio,
RadioGroup,
Textarea,
} from "@mui/joy";
import classnames from "classnames"; import classnames from "classnames";
import { isUndefined, uniq } from "lodash-es"; import { isUndefined, uniq } from "lodash-es";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
@ -22,7 +34,7 @@ interface State {
const visibilities: Visibility[] = ["PRIVATE", "WORKSPACE", "PUBLIC"]; const visibilities: Visibility[] = ["PRIVATE", "WORKSPACE", "PUBLIC"];
const CreateShortcutDialog: React.FC<Props> = (props: Props) => { const CreateShortcutDrawer: React.FC<Props> = (props: Props) => {
const { onClose, onConfirm, shortcutId, initialShortcut } = props; const { onClose, onConfirm, shortcutId, initialShortcut } = props;
const { t } = useTranslation(); const { t } = useTranslation();
const { shortcutList } = useAppSelector((state) => state.shortcut); const { shortcutList } = useAppSelector((state) => state.shortcut);
@ -199,15 +211,11 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
}; };
return ( return (
<Modal open={true}> <Drawer anchor="right" open={true} onClose={onClose}>
<ModalDialog> <DialogTitle>{isCreating ? "Create Shortcut" : "Edit Shortcut"}</DialogTitle>
<div className="flex flex-row justify-between items-center w-80 sm:w-96"> <ModalClose />
<span className="text-lg font-medium">{isCreating ? "Create Shortcut" : "Edit Shortcut"}</span> <DialogContent className="max-w-full sm:max-w-sm">
<Button variant="plain" onClick={onClose}> <div className="overflow-y-auto w-full mt-2 px-3">
<Icon.X className="w-5 h-auto text-gray-600" />
</Button>
</div>
<div className="overflow-y-auto overflow-x-hidden">
<div className="w-full flex flex-col justify-start items-start mb-3"> <div className="w-full flex flex-col justify-start items-start mb-3">
<span className="mb-2"> <span className="mb-2">
Name <span className="text-red-600">*</span> Name <span className="text-red-600">*</span>
@ -362,19 +370,20 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
</div> </div>
)} )}
</div> </div>
<div className="w-full flex flex-row justify-end items-center mt-4 space-x-2">
<Button color="neutral" variant="plain" disabled={requestState.isLoading} loading={requestState.isLoading} onClick={onClose}>
{t("common.cancel")}
</Button>
<Button color="primary" disabled={requestState.isLoading} loading={requestState.isLoading} onClick={handleSaveBtnClick}>
{t("common.save")}
</Button>
</div>
</div> </div>
</ModalDialog> </DialogContent>
</Modal> <DialogActions>
<div className="w-full flex flex-row justify-end items-center px-3 pb-4 space-x-2">
<Button color="neutral" variant="plain" disabled={requestState.isLoading} loading={requestState.isLoading} onClick={onClose}>
{t("common.cancel")}
</Button>
<Button color="primary" disabled={requestState.isLoading} loading={requestState.isLoading} onClick={handleSaveBtnClick}>
{t("common.save")}
</Button>
</div>
</DialogActions>
</Drawer>
); );
}; };
export default CreateShortcutDialog; export default CreateShortcutDrawer;

14
frontend/web/src/components/ShortcutActionsDropdown.tsx
View File

@ -4,7 +4,7 @@ import useNavigateTo from "@/hooks/useNavigateTo";
import { shortcutService } from "../services"; import { shortcutService } from "../services";
import useUserStore from "../stores/v1/user"; import useUserStore from "../stores/v1/user";
import { showCommonDialog } from "./Alert"; import { showCommonDialog } from "./Alert";
import CreateShortcutDialog from "./CreateShortcutDialog"; import CreateShortcutDrawer from "./CreateShortcutDrawer";
import GenerateQRCodeDialog from "./GenerateQRCodeDialog"; import GenerateQRCodeDialog from "./GenerateQRCodeDialog";
import Icon from "./Icon"; import Icon from "./Icon";
import Dropdown from "./common/Dropdown"; import Dropdown from "./common/Dropdown";
@ -18,7 +18,7 @@ const ShortcutActionsDropdown = (props: Props) => {
const { t } = useTranslation(); const { t } = useTranslation();
const navigateTo = useNavigateTo(); const navigateTo = useNavigateTo();
const currentUser = useUserStore().getCurrentUser(); const currentUser = useUserStore().getCurrentUser();
const [showEditDialog, setShowEditDialog] = useState<boolean>(false); const [showEditDrawer, setShowEditDrawer] = useState<boolean>(false);
const [showQRCodeDialog, setShowQRCodeDialog] = useState<boolean>(false); const [showQRCodeDialog, setShowQRCodeDialog] = useState<boolean>(false);
const havePermission = currentUser.role === "ADMIN" || shortcut.creatorId === currentUser.id; const havePermission = currentUser.role === "ADMIN" || shortcut.creatorId === currentUser.id;
@ -46,7 +46,7 @@ const ShortcutActionsDropdown = (props: Props) => {
{havePermission && ( {havePermission && (
<button <button
className="w-full px-2 flex flex-row justify-start items-center text-left leading-8 cursor-pointer rounded hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60 dark:hover:bg-zinc-800" className="w-full px-2 flex flex-row justify-start items-center text-left leading-8 cursor-pointer rounded hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60 dark:hover:bg-zinc-800"
onClick={() => setShowEditDialog(true)} onClick={() => setShowEditDrawer(true)}
> >
<Icon.Edit className="w-4 h-auto mr-2" /> {t("common.edit")} <Icon.Edit className="w-4 h-auto mr-2" /> {t("common.edit")}
</button> </button>
@ -77,11 +77,11 @@ const ShortcutActionsDropdown = (props: Props) => {
} }
></Dropdown> ></Dropdown>
{showEditDialog && ( {showEditDrawer && (
<CreateShortcutDialog <CreateShortcutDrawer
shortcutId={shortcut.id} shortcutId={shortcut.id}
onClose={() => setShowEditDialog(false)} onClose={() => setShowEditDrawer(false)}
onConfirm={() => setShowEditDialog(false)} onConfirm={() => setShowEditDrawer(false)}
/> />
)} )}

5
frontend/web/src/components/ShortcutsContainer.tsx
View File

@ -1,5 +1,5 @@
import classNames from "classnames"; import classNames from "classnames";
import { absolutifyLink } from "@/helpers/utils"; import useNavigateTo from "@/hooks/useNavigateTo";
import useViewStore from "../stores/v1/view"; import useViewStore from "../stores/v1/view";
import ShortcutCard from "./ShortcutCard"; import ShortcutCard from "./ShortcutCard";
import ShortcutView from "./ShortcutView"; import ShortcutView from "./ShortcutView";
@ -10,12 +10,13 @@ interface Props {
const ShortcutsContainer: React.FC<Props> = (props: Props) => { const ShortcutsContainer: React.FC<Props> = (props: Props) => {
const { shortcutList } = props; const { shortcutList } = props;
const navigateTo = useNavigateTo();
const viewStore = useViewStore(); const viewStore = useViewStore();
const displayStyle = viewStore.displayStyle || "full"; const displayStyle = viewStore.displayStyle || "full";
const ShortcutItemView = viewStore.displayStyle === "compact" ? ShortcutView : ShortcutCard; const ShortcutItemView = viewStore.displayStyle === "compact" ? ShortcutView : ShortcutCard;
const handleShortcutClick = (shortcut: Shortcut) => { const handleShortcutClick = (shortcut: Shortcut) => {
window.open(absolutifyLink(`/s/${shortcut.name}`)); navigateTo(`/shortcut/${shortcut.id}`);
}; };
return ( return (

2
frontend/web/src/components/ViewSetting.tsx
View File

@ -18,7 +18,7 @@ const ViewSetting = () => {
<Icon.Settings2 className="w-4 h-auto text-gray-500" /> <Icon.Settings2 className="w-4 h-auto text-gray-500" />
</button> </button>
} }
actionsClassName="!mt-3 !-right-2" actionsClassName="!mt-3 !right-[unset] -left-24 -ml-2"
actions={ actions={
<div className="w-52 p-2 gap-2 flex flex-col justify-start items-start" onClick={(e) => e.stopPropagation()}> <div className="w-52 p-2 gap-2 flex flex-col justify-start items-start" onClick={(e) => e.stopPropagation()}>
<div className="w-full flex flex-row justify-between items-center"> <div className="w-full flex flex-row justify-between items-center">

3
frontend/web/src/css/joy-ui.css Normal file
View File

@ -0,0 +1,3 @@
.MuiDrawer-content {
@apply !w-auto;
}

1
frontend/web/src/main.tsx
View File

@ -4,6 +4,7 @@ import { Toaster } from "react-hot-toast";
import { Provider } from "react-redux"; import { Provider } from "react-redux";
import { RouterProvider } from "react-router-dom"; import { RouterProvider } from "react-router-dom";
import "./css/index.css"; import "./css/index.css";
import "./css/joy-ui.css";
import "./i18n"; import "./i18n";
import router from "./routers"; import router from "./routers";
import store from "./stores"; import store from "./stores";

21
frontend/web/src/pages/CollectionDashboard.tsx
View File

@ -2,7 +2,7 @@ import { Button } from "@mui/joy";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import CollectionView from "@/components/CollectionView"; import CollectionView from "@/components/CollectionView";
import CreateCollectionDialog from "@/components/CreateCollectionDialog"; import CreateCollectionDrawer from "@/components/CreateCollectionDrawer";
import { shortcutService } from "@/services"; import { shortcutService } from "@/services";
import useCollectionStore from "@/stores/v1/collection"; import useCollectionStore from "@/stores/v1/collection";
import FilterView from "../components/FilterView"; import FilterView from "../components/FilterView";
@ -10,7 +10,7 @@ import Icon from "../components/Icon";
import useLoading from "../hooks/useLoading"; import useLoading from "../hooks/useLoading";
interface State { interface State {
showCreateCollectionDialog: boolean; showCreateCollectionDrawer: boolean;
} }
const CollectionDashboard: React.FC = () => { const CollectionDashboard: React.FC = () => {
@ -19,7 +19,7 @@ const CollectionDashboard: React.FC = () => {
const collectionStore = useCollectionStore(); const collectionStore = useCollectionStore();
const collections = collectionStore.getCollectionList(); const collections = collectionStore.getCollectionList();
const [state, setState] = useState<State>({ const [state, setState] = useState<State>({
showCreateCollectionDialog: false, showCreateCollectionDrawer: false,
}); });
useEffect(() => { useEffect(() => {
@ -28,10 +28,10 @@ const CollectionDashboard: React.FC = () => {
}); });
}, []); }, []);
const setShowCreateCollectionDialog = (show: boolean) => { const setShowCreateCollectionDrawer = (show: boolean) => {
setState({ setState({
...state, ...state,
showCreateCollectionDialog: show, showCreateCollectionDrawer: show,
}); });
}; };
@ -52,8 +52,9 @@ const CollectionDashboard: React.FC = () => {
</div> </div>
</div> </div>
<div className="w-full flex flex-row justify-between items-center mb-4"> <div className="w-full flex flex-row justify-between items-center mb-4">
<div></div>
<div className="flex flex-row justify-start items-center"> <div className="flex flex-row justify-start items-center">
<Button className="hover:shadow" variant="soft" size="sm" onClick={() => setShowCreateCollectionDialog(true)}> <Button className="hover:shadow" variant="soft" size="sm" onClick={() => setShowCreateCollectionDrawer(true)}>
<Icon.Plus className="w-5 h-auto" /> <Icon.Plus className="w-5 h-auto" />
<span className="ml-0.5">{t("common.create")}</span> <span className="ml-0.5">{t("common.create")}</span>
</Button> </Button>
@ -79,10 +80,10 @@ const CollectionDashboard: React.FC = () => {
)} )}
</div> </div>
{state.showCreateCollectionDialog && ( {state.showCreateCollectionDrawer && (
<CreateCollectionDialog <CreateCollectionDrawer
onClose={() => setShowCreateCollectionDialog(false)} onClose={() => setShowCreateCollectionDrawer(false)}
onConfirm={() => setShowCreateCollectionDialog(false)} onConfirm={() => setShowCreateCollectionDrawer(false)}
/> />
)} )}
</> </>

28
frontend/web/src/pages/Home.tsx
View File

@ -1,7 +1,7 @@
import { Button, Input } from "@mui/joy"; import { Button, Input } from "@mui/joy";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import CreateShortcutDialog from "../components/CreateShortcutDialog"; import CreateShortcutDrawer from "../components/CreateShortcutDrawer";
import FilterView from "../components/FilterView"; import FilterView from "../components/FilterView";
import Icon from "../components/Icon"; import Icon from "../components/Icon";
import ShortcutsContainer from "../components/ShortcutsContainer"; import ShortcutsContainer from "../components/ShortcutsContainer";
@ -14,7 +14,7 @@ import useUserStore from "../stores/v1/user";
import useViewStore, { getFilteredShortcutList, getOrderedShortcutList } from "../stores/v1/view"; import useViewStore, { getFilteredShortcutList, getOrderedShortcutList } from "../stores/v1/view";
interface State { interface State {
showCreateShortcutDialog: boolean; showCreateShortcutDrawer: boolean;
} }
const Home: React.FC = () => { const Home: React.FC = () => {
@ -24,7 +24,7 @@ const Home: React.FC = () => {
const viewStore = useViewStore(); const viewStore = useViewStore();
const { shortcutList } = useAppSelector((state) => state.shortcut); const { shortcutList } = useAppSelector((state) => state.shortcut);
const [state, setState] = useState<State>({ const [state, setState] = useState<State>({
showCreateShortcutDialog: false, showCreateShortcutDrawer: false,
}); });
const filter = viewStore.filter; const filter = viewStore.filter;
const filteredShortcutList = getFilteredShortcutList(shortcutList, filter, currentUser); const filteredShortcutList = getFilteredShortcutList(shortcutList, filter, currentUser);
@ -36,10 +36,10 @@ const Home: React.FC = () => {
}); });
}, []); }, []);
const setShowCreateShortcutDialog = (show: boolean) => { const setShowCreateShortcutDrawer = (show: boolean) => {
setState({ setState({
...state, ...state,
showCreateShortcutDialog: show, showCreateShortcutDrawer: show,
}); });
}; };
@ -49,14 +49,8 @@ const Home: React.FC = () => {
<ShortcutsNavigator /> <ShortcutsNavigator />
<div className="w-full flex flex-row justify-between items-center mb-4"> <div className="w-full flex flex-row justify-between items-center mb-4">
<div className="flex flex-row justify-start items-center"> <div className="flex flex-row justify-start items-center">
<Button className="hover:shadow" variant="soft" size="sm" onClick={() => setShowCreateShortcutDialog(true)}>
<Icon.Plus className="w-5 h-auto" />
<span className="hidden sm:block ml-0.5">{t("common.create")}</span>
</Button>
</div>
<div className="flex flex-row justify-end items-center">
<Input <Input
className="w-32 ml-2" className="w-32 mr-2"
type="text" type="text"
size="sm" size="sm"
placeholder={t("common.search")} placeholder={t("common.search")}
@ -66,6 +60,12 @@ const Home: React.FC = () => {
onChange={(e) => viewStore.setFilter({ search: e.target.value })} onChange={(e) => viewStore.setFilter({ search: e.target.value })}
/> />
</div> </div>
<div className="flex flex-row justify-end items-center">
<Button className="hover:shadow" variant="soft" size="sm" onClick={() => setShowCreateShortcutDrawer(true)}>
<Icon.Plus className="w-5 h-auto" />
<span className="hidden sm:block ml-0.5">{t("common.create")}</span>
</Button>
</div>
</div> </div>
<FilterView /> <FilterView />
{loadingState.isLoading ? ( {loadingState.isLoading ? (
@ -83,8 +83,8 @@ const Home: React.FC = () => {
)} )}
</div> </div>
{state.showCreateShortcutDialog && ( {state.showCreateShortcutDrawer && (
<CreateShortcutDialog onClose={() => setShowCreateShortcutDialog(false)} onConfirm={() => setShowCreateShortcutDialog(false)} /> <CreateShortcutDrawer onClose={() => setShowCreateShortcutDrawer(false)} onConfirm={() => setShowCreateShortcutDrawer(false)} />
)} )}
</> </>
); );

58
frontend/web/src/pages/NotFound.tsx
View File

@ -1,61 +1,13 @@
import { Button } from "@mui/joy";
import { useEffect, useState } from "react";
import { useLocation } from "react-router-dom";
import CreateShortcutDialog from "@/components/CreateShortcutDialog";
import Icon from "@/components/Icon"; import Icon from "@/components/Icon";
import useNavigateTo from "@/hooks/useNavigateTo";
import useUserStore from "@/stores/v1/user";
interface State {
showCreateShortcutButton: boolean;
}
const NotFound = () => { const NotFound = () => {
const location = useLocation();
const navigateTo = useNavigateTo();
const currentUser = useUserStore().getCurrentUser();
const [state, setState] = useState<State>({
showCreateShortcutButton: false,
});
const [showCreateShortcutDialog, setShowCreateShortcutDialog] = useState(false);
const params = new URLSearchParams(location.search);
useEffect(() => {
const shortcut = params.get("shortcut");
if (currentUser && shortcut) {
setState({
...state,
showCreateShortcutButton: true,
});
}
}, []);
return ( return (
<> <div className="w-full h-full overflow-y-auto overflow-x-hidden bg-zinc-100 dark:bg-zinc-800">
<div className="w-full h-full overflow-y-auto overflow-x-hidden bg-zinc-100 dark:bg-zinc-800"> <div className="w-full h-full flex flex-col justify-center items-center">
<div className="w-full h-full flex flex-col justify-center items-center"> <Icon.Meh strokeWidth={1} className="w-20 h-auto opacity-80 dark:text-gray-300" />
<Icon.Meh strokeWidth={1} className="w-20 h-auto opacity-80 dark:text-gray-300" /> <p className="mt-4 mb-8 text-4xl font-mono dark:text-gray-300">404</p>
<p className="mt-4 mb-8 text-4xl font-mono dark:text-gray-300">404</p>
{state.showCreateShortcutButton && (
<Button
variant="outlined"
startDecorator={<Icon.Plus className="w-5 h-auto" />}
onClick={() => setShowCreateShortcutDialog(true)}
>
Create shortcut
</Button>
)}
</div>
</div> </div>
</div>
{showCreateShortcutDialog && (
<CreateShortcutDialog
initialShortcut={{ name: params.get("shortcut") || "" }}
onClose={() => setShowCreateShortcutDialog(false)}
onConfirm={() => navigateTo("/")}
/>
)}
</>
); );
}; };

14
frontend/web/src/pages/ShortcutDetail.tsx
View File

@ -8,7 +8,7 @@ import { useLoaderData } from "react-router-dom";
import useNavigateTo from "@/hooks/useNavigateTo"; import useNavigateTo from "@/hooks/useNavigateTo";
import { showCommonDialog } from "../components/Alert"; import { showCommonDialog } from "../components/Alert";
import AnalyticsView from "../components/AnalyticsView"; import AnalyticsView from "../components/AnalyticsView";
import CreateShortcutDialog from "../components/CreateShortcutDialog"; import CreateShortcutDrawer from "../components/CreateShortcutDrawer";
import GenerateQRCodeDialog from "../components/GenerateQRCodeDialog"; import GenerateQRCodeDialog from "../components/GenerateQRCodeDialog";
import Icon from "../components/Icon"; import Icon from "../components/Icon";
import VisibilityIcon from "../components/VisibilityIcon"; import VisibilityIcon from "../components/VisibilityIcon";
@ -18,7 +18,7 @@ import { shortcutService } from "../services";
import useUserStore from "../stores/v1/user"; import useUserStore from "../stores/v1/user";
interface State { interface State {
showEditModal: boolean; showEditDrawer: boolean;
} }
const ShortcutDetail = () => { const ShortcutDetail = () => {
@ -28,7 +28,7 @@ const ShortcutDetail = () => {
const shortcut = shortcutService.getShortcutById(shortcutId) as Shortcut; const shortcut = shortcutService.getShortcutById(shortcutId) as Shortcut;
const currentUser = useUserStore().getCurrentUser(); const currentUser = useUserStore().getCurrentUser();
const [state, setState] = useState<State>({ const [state, setState] = useState<State>({
showEditModal: false, showEditDrawer: false,
}); });
const [showQRCodeDialog, setShowQRCodeDialog] = useState<boolean>(false); const [showQRCodeDialog, setShowQRCodeDialog] = useState<boolean>(false);
const havePermission = currentUser.role === "ADMIN" || shortcut.creatorId === currentUser.id; const havePermission = currentUser.role === "ADMIN" || shortcut.creatorId === currentUser.id;
@ -116,7 +116,7 @@ const ShortcutDetail = () => {
onClick={() => { onClick={() => {
setState({ setState({
...state, ...state,
showEditModal: true, showEditDrawer: true,
}); });
}} }}
> >
@ -178,13 +178,13 @@ const ShortcutDetail = () => {
{showQRCodeDialog && <GenerateQRCodeDialog shortcut={shortcut} onClose={() => setShowQRCodeDialog(false)} />} {showQRCodeDialog && <GenerateQRCodeDialog shortcut={shortcut} onClose={() => setShowQRCodeDialog(false)} />}
{state.showEditModal && ( {state.showEditDrawer && (
<CreateShortcutDialog <CreateShortcutDrawer
shortcutId={shortcut.id} shortcutId={shortcut.id}
onClose={() => onClose={() =>
setState({ setState({
...state, ...state,
showEditModal: false, showEditDrawer: false,
}) })
} }
/> />