hyper-tuner
/
hypertuner-cloud
mirror of https://github.com/hyper-tuner/hypertuner-cloud.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add Edit button to Hub

This commit is contained in:
Piotr Rogowski 2022-10-30 16:29:57 +01:00
parent 3a5aa64aa5
commit 2b790a990b
No known key found for this signature in database
GPG Key ID: 4A842D702D9C6F8F
1 changed files with 22 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/pages/Hub.tsx
View File

@ -13,6 +13,7 @@ import {
CopyOutlined, CopyOutlined,
StarOutlined, StarOutlined,
ArrowRightOutlined, ArrowRightOutlined,
EditOutlined,
} from '@ant-design/icons'; } from '@ant-design/icons';
import { import {
useCallback, useCallback,
@ -39,6 +40,7 @@ import {
UsersRecordFull, UsersRecordFull,
} from '../types/dbData'; } from '../types/dbData';
import { formatTime } from '../utils/time'; import { formatTime } from '../utils/time';
import { useAuth } from '../contexts/AuthContext';
const { useBreakpoint } = Grid; const { useBreakpoint } = Grid;
const { Text, Title } = Typography; const { Text, Title } = Typography;
@ -56,6 +58,10 @@ const Hub = () => {
const [pageSize, setPageSize] = useState(5); const [pageSize, setPageSize] = useState(5);
const [total, setTotal] = useState(0); const [total, setTotal] = useState(0);
const searchRef = useRef<InputRef | null>(null); const searchRef = useRef<InputRef | null>(null);
const { currentUser } = useAuth();
const goToEdit = (tuneId: string) => navigate(generatePath(Routes.UPLOAD_WITH_TUNE_ID, {
tuneId,
}));
const loadData = debounce(async (searchText: string) => { const loadData = debounce(async (searchText: string) => {
setIsLoading(true); setIsLoading(true);
@ -66,7 +72,7 @@ const Hub = () => {
...tune, ...tune,
key: tune.tuneId, key: tune.tuneId,
year: tune.year, year: tune.year,
author: (tune.expand.author as unknown as UsersRecordFull).username, authorUsername: (tune.expand.author as unknown as UsersRecordFull).username,
displacement: `${tune.displacement}l`, displacement: `${tune.displacement}l`,
aspiration: aspirationMapper[tune.aspiration], aspiration: aspirationMapper[tune.aspiration],
published: formatTime(tune.updated), published: formatTime(tune.updated),
@ -83,7 +89,7 @@ const Hub = () => {
const debounceLoadData = useCallback((value: string) => { const debounceLoadData = useCallback((value: string) => {
setSearchQuery(value); setSearchQuery(value);
loadData(value); loadData(value);
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, []); }, []);
const handleGlobalKeyboard = useCallback((e: KeyboardEvent) => { const handleGlobalKeyboard = useCallback((e: KeyboardEvent) => {
@ -157,8 +163,8 @@ const Hub = () => {
}, },
{ {
title: 'Author', title: 'Author',
dataIndex: 'author', dataIndex: 'authorUsername',
key: 'author', key: 'authorUsername',
responsive: ['sm'], responsive: ['sm'],
}, },
{ {
@ -182,12 +188,18 @@ const Hub = () => {
{ {
dataIndex: 'tuneId', dataIndex: 'tuneId',
fixed: 'right', fixed: 'right',
render: (tuneId: string) => ( render: (tuneId: string, record) => {
<Space> const isOwner = currentUser?.id === record.author;
{isClipboardSupported && <Button icon={<CopyOutlined />} onClick={() => copyToClipboard(buildFullUrl([tunePath(tuneId)]))} />} const size = isOwner ? 'small' : 'middle';
<Button type="primary" icon={<ArrowRightOutlined />} onClick={() => navigate(tunePath(tuneId))} />
</Space> return (
), <Space>
{isOwner && <Button size={size} icon={<EditOutlined />} onClick={() => goToEdit(tuneId)} />}
{isClipboardSupported && <Button size={size} icon={<CopyOutlined />} onClick={() => copyToClipboard(buildFullUrl([tunePath(tuneId)]))} />}
<Button size={size} type="primary" icon={<ArrowRightOutlined />} onClick={() => navigate(tunePath(tuneId))} />
</Space>
);
},
key: 'tuneId', key: 'tuneId',
}, },
]; ];