mirror of
https://github.com/aykhans/slash-e.git
synced 2025-04-21 14:19:26 +00:00
feat: add shortcut detail page
This commit is contained in:
Steven
parent
23d84299e4
commit
74200f468c
@ -3,6 +3,7 @@ import copy from "copy-to-clipboard";
|
||||
import { useEffect, useState } from "react";
|
||||
import toast from "react-hot-toast";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Link } from "react-router-dom";
|
||||
import { absolutifyLink } from "../helpers/utils";
|
||||
import { shortcutService } from "../services";
|
||||
import useFaviconStore from "../stores/v1/favicon";
|
||||
@ -31,7 +32,6 @@ const ShortcutView = (props: Props) => {
|
||||
const [showAnalyticsDialog, setShowAnalyticsDialog] = useState<boolean>(false);
|
||||
const havePermission = currentUser.role === "ADMIN" || shortcut.creatorId === currentUser.id;
|
||||
const shortcutLink = absolutifyLink(`/s/${shortcut.name}`);
|
||||
const compactStyle = viewStore.layout === "grid";
|
||||
|
||||
useEffect(() => {
|
||||
faviconStore.getOrFetchUrlFavicon(shortcut.link).then((url) => {
|
||||
@ -62,13 +62,15 @@ const ShortcutView = (props: Props) => {
|
||||
<div className="w-full flex flex-col justify-start items-start border px-4 py-3 rounded-lg hover:shadow">
|
||||
<div className="w-full flex flex-row justify-between items-center">
|
||||
<div className="group flex flex-row justify-start items-center pr-2 mr-1 shrink-0">
|
||||
<div className="w-6 h-6 mr-1 flex justify-center items-center overflow-clip">
|
||||
<Link to={`/shortcut/${shortcut.id}`} className="w-8 h-8 mr-1 flex justify-center items-center overflow-clip">
|
||||
{favicon ? (
|
||||
<img className="w-full h-auto rounded-full" src={favicon} decoding="async" loading="lazy" />
|
||||
) : (
|
||||
<Icon.CircleSlash className="w-6 h-auto text-gray-400" />
|
||||
<Icon.CircleSlash className="w-8 h-auto text-gray-400" />
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
<div className="flex flex-col justify-start items-start">
|
||||
<div className="flex flex-row justify-start items-center">
|
||||
<a
|
||||
className="flex flex-row px-1 mr-1 justify-start items-center cursor-pointer rounded-md hover:bg-gray-100 hover:shadow"
|
||||
target="_blank"
|
||||
@ -97,6 +99,11 @@ const ShortcutView = (props: Props) => {
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<a className="ml-1 text-sm max-w-[16rem] truncate text-gray-400 hover:underline" href={shortcut.link} target="_blank">
|
||||
{shortcut.link}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-row justify-end items-center space-x-2">
|
||||
{havePermission && (
|
||||
<Dropdown
|
||||
@ -129,21 +136,6 @@ const ShortcutView = (props: Props) => {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{shortcut.description && !compactStyle && <p className="w-full break-all mt-1 text-gray-400 text-sm">{shortcut.description}</p>}
|
||||
<div className="mt-2 flex flex-row justify-start items-start flex-wrap gap-2">
|
||||
{shortcut.tags.map((tag) => {
|
||||
return (
|
||||
<span
|
||||
key={tag}
|
||||
className="max-w-[8rem] truncate text-gray-400 text-sm font-mono leading-4 cursor-pointer hover:text-gray-600"
|
||||
onClick={() => viewStore.setFilter({ tag: tag })}
|
||||
>
|
||||
#{tag}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
{shortcut.tags.length === 0 && <span className="text-gray-400 text-sm font-mono leading-4 italic">No tags</span>}
|
||||
</div>
|
||||
<div className="w-full flex mt-2 gap-2">
|
||||
<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">
|
||||
|
||||
@ -55,6 +55,10 @@ export function getShortcutList(shortcutFind?: ShortcutFind) {
|
||||
return axios.get<Shortcut[]>(`/api/v1/shortcut?${queryList.join("&")}`);
|
||||
}
|
||||
|
||||
export function getShortcutById(id: number) {
|
||||
return axios.get<Shortcut>(`/api/v1/shortcut/${id}`);
|
||||
}
|
||||
|
||||
export function createShortcut(shortcutCreate: ShortcutCreate) {
|
||||
return axios.post<Shortcut>("/api/v1/shortcut", shortcutCreate);
|
||||
}
|
||||
|
||||
191
web/src/pages/ShortcutDetail.tsx
Normal file
191
web/src/pages/ShortcutDetail.tsx
Normal file
@ -0,0 +1,191 @@
|
||||
import { Tooltip } from "@mui/joy";
|
||||
import copy from "copy-to-clipboard";
|
||||
import { useEffect, useState } from "react";
|
||||
import toast from "react-hot-toast";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useLoaderData } from "react-router-dom";
|
||||
import { showCommonDialog } from "../components/Alert";
|
||||
import AnalyticsDialog from "../components/AnalyticsDialog";
|
||||
import Dropdown from "../components/common/Dropdown";
|
||||
import CreateShortcutDialog from "../components/CreateShortcutDialog";
|
||||
import GenerateQRCodeDialog from "../components/GenerateQRCodeDialog";
|
||||
import Icon from "../components/Icon";
|
||||
import VisibilityIcon from "../components/VisibilityIcon";
|
||||
import { absolutifyLink } from "../helpers/utils";
|
||||
import { shortcutService } from "../services";
|
||||
import useFaviconStore from "../stores/v1/favicon";
|
||||
import useUserStore from "../stores/v1/user";
|
||||
|
||||
interface State {
|
||||
showEditModal: boolean;
|
||||
}
|
||||
|
||||
const ShortcutDetail = () => {
|
||||
const { t } = useTranslation();
|
||||
const shortcutId = (useLoaderData() as Shortcut).id;
|
||||
const shortcut = shortcutService.getShortcutById(shortcutId) as Shortcut;
|
||||
const currentUser = useUserStore().getCurrentUser();
|
||||
const faviconStore = useFaviconStore();
|
||||
const [state, setState] = useState<State>({
|
||||
showEditModal: false,
|
||||
});
|
||||
const [favicon, setFavicon] = useState<string | undefined>(undefined);
|
||||
const [showQRCodeDialog, setShowQRCodeDialog] = useState<boolean>(false);
|
||||
const [showAnalyticsDialog, setShowAnalyticsDialog] = useState<boolean>(false);
|
||||
const havePermission = currentUser.role === "ADMIN" || shortcut.creatorId === currentUser.id;
|
||||
const shortcutLink = absolutifyLink(`/s/${shortcut.name}`);
|
||||
|
||||
useEffect(() => {
|
||||
faviconStore.getOrFetchUrlFavicon(shortcut.link).then((url) => {
|
||||
if (url) {
|
||||
setFavicon(url);
|
||||
}
|
||||
});
|
||||
}, [shortcut.link]);
|
||||
|
||||
const handleCopyButtonClick = () => {
|
||||
copy(shortcutLink);
|
||||
toast.success("Shortcut link copied to clipboard.");
|
||||
};
|
||||
|
||||
const handleDeleteShortcutButtonClick = (shortcut: Shortcut) => {
|
||||
showCommonDialog({
|
||||
title: "Delete Shortcut",
|
||||
content: `Are you sure to delete shortcut \`${shortcut.name}\`? You cannot undo this action.`,
|
||||
style: "danger",
|
||||
onConfirm: async () => {
|
||||
await shortcutService.deleteShortcutById(shortcut.id);
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="mx-auto max-w-6xl w-full px-3 pt-4 pb-6 flex flex-col justify-start items-start">
|
||||
<div className="mt-8 w-12 h-12 flex justify-center items-center overflow-clip">
|
||||
{favicon ? (
|
||||
<img className="w-full h-auto rounded-full" src={favicon} decoding="async" loading="lazy" />
|
||||
) : (
|
||||
<Icon.CircleSlash className="w-6 h-auto text-gray-400" />
|
||||
)}
|
||||
</div>
|
||||
<a
|
||||
className="mt-4 text-2xl flex flex-row px-1 mr-1 justify-start items-center cursor-pointer rounded-md hover:bg-gray-100 hover:shadow"
|
||||
target="_blank"
|
||||
href={shortcutLink}
|
||||
>
|
||||
<span className="text-gray-400">s/</span>
|
||||
<span className="max-w-[14rem] truncate">{shortcut.name}</span>
|
||||
<span className="hidden group-hover:block ml-1 cursor-pointer">
|
||||
<Icon.ExternalLink className="w-4 h-auto text-gray-600" />
|
||||
</span>
|
||||
</a>
|
||||
<div className="mt-2 w-full flex flex-row justify-normal items-center space-x-2">
|
||||
<Tooltip title="Copy" variant="solid" placement="top" arrow>
|
||||
<button
|
||||
className="w-8 h-8 cursor-pointer border rounded-full text-gray-500 hover:bg-gray-100 hover:shadow"
|
||||
onClick={() => handleCopyButtonClick()}
|
||||
>
|
||||
<Icon.Clipboard className="w-4 h-auto mx-auto" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
<Tooltip title="QR Code" variant="solid" placement="top" arrow>
|
||||
<button
|
||||
className="w-8 h-8 cursor-pointer border rounded-full text-gray-500 hover:bg-gray-100 hover:shadow"
|
||||
onClick={() => setShowQRCodeDialog(true)}
|
||||
>
|
||||
<Icon.QrCode className="w-4 h-auto mx-auto" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
{havePermission && (
|
||||
<Dropdown
|
||||
className="w-8 h-8 flex justify-center items-center border cursor-pointer rounded-full hover:bg-gray-100 hover:shadow"
|
||||
actionsClassName="!w-32 !-right-24"
|
||||
actions={
|
||||
<>
|
||||
<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"
|
||||
onClick={() => {
|
||||
setState({
|
||||
...state,
|
||||
showEditModal: true,
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Icon.Edit className="w-4 h-auto mr-2" /> Edit
|
||||
</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"
|
||||
onClick={() => setShowAnalyticsDialog(true)}
|
||||
>
|
||||
<Icon.BarChart2 className="w-4 h-auto mr-2" /> Analytics
|
||||
</button>
|
||||
<button
|
||||
className="w-full px-2 flex flex-row justify-start items-center text-left leading-8 cursor-pointer rounded text-red-600 hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
|
||||
onClick={() => {
|
||||
handleDeleteShortcutButtonClick(shortcut);
|
||||
}}
|
||||
>
|
||||
<Icon.Trash className="w-4 h-auto mr-2" /> Delete
|
||||
</button>
|
||||
</>
|
||||
}
|
||||
></Dropdown>
|
||||
)}
|
||||
</div>
|
||||
{shortcut.description && <p className="w-full break-all mt-2 text-gray-400 text-sm">{shortcut.description}</p>}
|
||||
<div className="mt-4 ml-1 flex flex-row justify-start items-start flex-wrap gap-2">
|
||||
{shortcut.tags.map((tag) => {
|
||||
return (
|
||||
<span key={tag} className="max-w-[8rem] truncate text-gray-400 text font-mono leading-4 cursor-pointer hover:text-gray-600">
|
||||
#{tag}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
{shortcut.tags.length === 0 && <span className="text-gray-400 text-sm font-mono leading-4 italic">No tags</span>}
|
||||
</div>
|
||||
<div className="w-full flex mt-4 gap-2">
|
||||
<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">
|
||||
<Icon.User className="w-4 h-auto mr-1" />
|
||||
<span className="max-w-[4rem] sm:max-w-[6rem] truncate">{shortcut.creator.nickname}</span>
|
||||
</div>
|
||||
</Tooltip>
|
||||
<Tooltip title={t(`shortcut.visibility.${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 cursor-pointer text-gray-500 text-sm">
|
||||
<VisibilityIcon className="w-4 h-auto mr-1" visibility={shortcut.visibility} />
|
||||
{t(`shortcut.visibility.${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 cursor-pointer text-gray-500 text-sm"
|
||||
onClick={() => setShowAnalyticsDialog(true)}
|
||||
>
|
||||
<Icon.BarChart2 className="w-4 h-auto mr-1" />
|
||||
{shortcut.view} visits
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showQRCodeDialog && <GenerateQRCodeDialog shortcut={shortcut} onClose={() => setShowQRCodeDialog(false)} />}
|
||||
|
||||
{state.showEditModal && (
|
||||
<CreateShortcutDialog
|
||||
shortcutId={shortcut.id}
|
||||
onClose={() =>
|
||||
setState({
|
||||
...state,
|
||||
showEditModal: false,
|
||||
})
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
{showAnalyticsDialog && <AnalyticsDialog shortcutId={shortcut.id} onClose={() => setShowAnalyticsDialog(false)} />}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ShortcutDetail;
|
||||
@ -3,8 +3,10 @@ import App from "../App";
|
||||
import Root from "../layouts/Root";
|
||||
import Home from "../pages/Home";
|
||||
import Setting from "../pages/Setting";
|
||||
import ShortcutDetail from "../pages/ShortcutDetail";
|
||||
import SignIn from "../pages/SignIn";
|
||||
import SignUp from "../pages/SignUp";
|
||||
import { shortcutService } from "../services";
|
||||
|
||||
const router = createBrowserRouter([
|
||||
{
|
||||
@ -27,6 +29,14 @@ const router = createBrowserRouter([
|
||||
path: "",
|
||||
element: <Home />,
|
||||
},
|
||||
{
|
||||
path: "/shortcut/:shortcutId",
|
||||
element: <ShortcutDetail />,
|
||||
loader: async ({ params }) => {
|
||||
const shortcut = await shortcutService.getOrFetchShortcutById(Number(params.shortcutId));
|
||||
return shortcut;
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/setting",
|
||||
element: <Setting />,
|
||||
|
||||
@ -29,13 +29,25 @@ const shortcutService = {
|
||||
},
|
||||
|
||||
getShortcutById: (id: ShortcutId) => {
|
||||
for (const s of shortcutService.getState().shortcutList) {
|
||||
if (s.id === id) {
|
||||
return s;
|
||||
for (const shortcut of shortcutService.getState().shortcutList) {
|
||||
if (shortcut.id === id) {
|
||||
return shortcut;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
},
|
||||
|
||||
getOrFetchShortcutById: async (id: ShortcutId) => {
|
||||
for (const shortcut of shortcutService.getState().shortcutList) {
|
||||
if (shortcut.id === id) {
|
||||
return shortcut;
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
const data = (await api.getShortcutById(id)).data;
|
||||
const shortcut = convertResponseModelShortcut(data);
|
||||
store.dispatch(createShortcut(shortcut));
|
||||
return shortcut;
|
||||
},
|
||||
|
||||
createShortcut: async (shortcutCreate: ShortcutCreate) => {
|
||||
|
||||
38
web/src/stores/v1/shortcut.ts
Normal file
38
web/src/stores/v1/shortcut.ts
Normal file
@ -0,0 +1,38 @@
|
||||
import { create } from "zustand";
|
||||
import * as api from "../../helpers/api";
|
||||
|
||||
const convertResponseModelShortcut = (shortcut: Shortcut): Shortcut => {
|
||||
return {
|
||||
...shortcut,
|
||||
createdTs: shortcut.createdTs * 1000,
|
||||
updatedTs: shortcut.updatedTs * 1000,
|
||||
};
|
||||
};
|
||||
|
||||
interface ShortcutState {
|
||||
shortcutMapById: Record<ShortcutId, Shortcut>;
|
||||
getOrFetchShortcutById: (id: ShortcutId) => Promise<Shortcut>;
|
||||
getShortcutById: (id: ShortcutId) => Shortcut;
|
||||
}
|
||||
|
||||
const useShortcutStore = create<ShortcutState>()((set, get) => ({
|
||||
shortcutMapById: {},
|
||||
getOrFetchShortcutById: async (id: ShortcutId) => {
|
||||
const shortcutMap = get().shortcutMapById;
|
||||
if (shortcutMap[id]) {
|
||||
return shortcutMap[id] as Shortcut;
|
||||
}
|
||||
|
||||
const { data } = await api.getShortcutById(id);
|
||||
const shortcut = convertResponseModelShortcut(data);
|
||||
shortcutMap[id] = shortcut;
|
||||
set(shortcutMap);
|
||||
return shortcut;
|
||||
},
|
||||
getShortcutById: (id: ShortcutId) => {
|
||||
const shortcutMap = get().shortcutMapById;
|
||||
return shortcutMap[id] as Shortcut;
|
||||
},
|
||||
}));
|
||||
|
||||
export default useShortcutStore;
|
||||
Loading…
x
Reference in New Issue
Block a user