aykhans/slash-e
1
0
Fork 0
mirror of https://github.com/aykhans/slash-e.git synced 2025-07-06 21:22:36 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

chore: use shortcut v2 api

Browse Source
This commit is contained in:
Steven
2023-11-21 23:33:34 +08:00
parent c449669793
commit 61b167ef66
32 changed files with 515 additions and 724 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,12 +1,16 @@
import { Tooltip } from "@mui/joy";
import classNames from "classnames";
import copy from "copy-to-clipboard";
import { useState } from "react";
import { useEffect, useState } from "react";
import toast from "react-hot-toast";
import { useTranslation } from "react-i18next";
import { useLoaderData } from "react-router-dom";
import { useParams } from "react-router-dom";
import useLoading from "@/hooks/useLoading";
import useNavigateTo from "@/hooks/useNavigateTo";
import useShortcutStore from "@/stores/v1/shortcut";
import { Shortcut } from "@/types/proto/api/v2/shortcut_service";
import { Role } from "@/types/proto/api/v2/user_service";
import { convertVisibilityFromPb } from "@/utils/visibility";
import { showCommonDialog } from "../components/Alert";
import AnalyticsView from "../components/AnalyticsView";
import CreateShortcutDrawer from "../components/CreateShortcutDrawer";
@ -15,7 +19,6 @@ import Icon from "../components/Icon";
import VisibilityIcon from "../components/VisibilityIcon";
import Dropdown from "../components/common/Dropdown";
import { absolutifyLink, getFaviconWithGoogleS2 } from "../helpers/utils";
import { shortcutService } from "../services";
import useUserStore from "../stores/v1/user";
interface State {
@ -24,18 +27,35 @@ interface State {
const ShortcutDetail = () => {
const { t } = useTranslation();
const params = useParams();
const navigateTo = useNavigateTo();
const shortcutId = (useLoaderData() as Shortcut).id;
const shortcut = shortcutService.getShortcutById(shortcutId) as Shortcut;
const shortcutId = Number(params.shortcutId);
const shortcutStore = useShortcutStore();
const userStore = useUserStore();
const shortcut = shortcutStore.getShortcutById(shortcutId);
const currentUser = useUserStore().getCurrentUser();
const [state, setState] = useState<State>({
showEditDrawer: false,
});
const [showQRCodeDialog, setShowQRCodeDialog] = useState<boolean>(false);
const loadingState = useLoading(true);
const creator = userStore.getUserById(shortcut.creatorId);
const havePermission = currentUser.role === Role.ADMIN || shortcut.creatorId === currentUser.id;
const shortcutLink = absolutifyLink(`/s/${shortcut.name}`);
const favicon = getFaviconWithGoogleS2(shortcut.link);
useEffect(() => {
(async () => {
const shortcut = await shortcutStore.getOrFetchShortcutById(shortcutId);
await userStore.getOrFetchUserById(shortcut.creatorId);
loadingState.setFinish();
})();
}, [shortcutId]);
if (loadingState.isLoading) {
return null;
}
const handleCopyButtonClick = () => {
copy(shortcutLink);
toast.success("Shortcut link copied to clipboard.");
@ -47,7 +67,7 @@ const ShortcutDetail = () => {
content: `Are you sure to delete shortcut \`${shortcut.name}\`? You cannot undo this action.`,
style: "danger",
onConfirm: async () => {
await shortcutService.deleteShortcutById(shortcut.id);
await shortcutStore.deleteShortcut(shortcut.id);
navigateTo("/", {
replace: true,
});
@ -151,19 +171,24 @@ const ShortcutDetail = () => {
<Tooltip title="Creator" variant="solid" placement="top" arrow>
<div className="w-auto px-2 leading-6 flex flex-row justify-start items-center border rounded-full text-gray-500 text-sm dark:border-zinc-800">
<Icon.User className="w-4 h-auto mr-1" />
<span className="max-w-[4rem] sm:max-w-[6rem] truncate">{shortcut.creator.nickname}</span>
<span className="max-w-[4rem] sm:max-w-[6rem] truncate">{creator.nickname}</span>
</div>
</Tooltip>
<Tooltip title={t(`shortcut.visibility.${shortcut.visibility.toLowerCase()}.description`)} variant="solid" placement="top" arrow>
<Tooltip
title={t(`shortcut.visibility.${convertVisibilityFromPb(shortcut.visibility).toLowerCase()}.description`)}
variant="solid"
placement="top"
arrow
>
<div className="w-auto px-2 leading-6 flex flex-row justify-start items-center border rounded-full text-gray-500 text-sm dark:border-zinc-800">
<VisibilityIcon className="w-4 h-auto mr-1" visibility={shortcut.visibility} />
{t(`shortcut.visibility.${shortcut.visibility.toLowerCase()}.self`)}
{t(`shortcut.visibility.${convertVisibilityFromPb(shortcut.visibility).toLowerCase()}.self`)}
</div>
</Tooltip>
<Tooltip title="View count" variant="solid" placement="top" arrow>
<div className="w-auto px-2 leading-6 flex flex-row justify-start items-center border rounded-full text-gray-500 text-sm dark:border-zinc-800">
<Icon.BarChart2 className="w-4 h-auto mr-1" />
{shortcut.view} visits
{shortcut.viewCount} visits
</div>
</Tooltip>
</div>