feat(share): public share directory with anonymous listing + search (#203)
Upstream #2729 items 4+5. Opt-in public listing for share links: - share.listed_publicly column; gated by new GroupPermissionSharePublicList bit (admin Share section switch) - Service rejects listed+password combos; creation normalizes the flag off when a password is set; directory query independently requires listed_publicly AND no password AND unexpired (defense-in-depth for shares edited private later) - GET /share/listed: anonymous, rate-limited 60/min/IP, cursor-paginated, case-insensitive name search across anchor and covered files - listed_publicly owner-visible in share responses - /discover page under AutoNavbarFrame (anonymous-visible nav item, debounced search, infinite scroll via ShareCard), sign-in page link, en+zh locales Authored By: TDvorak <info@tdvorak.dev> Generated with [Devin](https://devin.ai) Co-authored-by: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>pull/3587/head
Tomáš Dvořák
2 weeks ago
committed by
GitHub
parent
1b357a2856
commit
2d55fdccf6
File diff suppressed because one or more lines are too long
@ -0,0 +1,153 @@
|
|||||||
|
import { Box, Container, FormControl, Grid, ListItemText, Stack } from "@mui/material";
|
||||||
|
import { debounce } from "lodash";
|
||||||
|
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||||
|
import { useTranslation } from "react-i18next";
|
||||||
|
import { getPublicShares } from "../../../api/api.ts";
|
||||||
|
import { Share } from "../../../api/explorer.ts";
|
||||||
|
import { useAppDispatch } from "../../../redux/hooks.ts";
|
||||||
|
import { OutlineIconTextField } from "../../Common/Form/OutlineIconTextField.tsx";
|
||||||
|
import Nothing from "../../Common/Nothing.tsx";
|
||||||
|
import { DenseSelect } from "../../Common/StyledComponents.tsx";
|
||||||
|
import { SquareMenuItem } from "../../FileManager/ContextMenu/ContextMenu.tsx";
|
||||||
|
import Search from "../../Icons/Search.tsx";
|
||||||
|
import PageContainer from "../PageContainer.tsx";
|
||||||
|
import PageHeader from "../PageHeader.tsx";
|
||||||
|
import ShareCard from "../Shares/ShareCard.tsx";
|
||||||
|
|
||||||
|
const defaultPageSize = 50;
|
||||||
|
|
||||||
|
// Discover renders the public share directory: shares whose owners opted
|
||||||
|
// into public listing. Anonymous-accessible.
|
||||||
|
const Discover = () => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const dispatch = useAppDispatch();
|
||||||
|
const [nextPageToken, setNextPageToken] = useState<string | undefined>("");
|
||||||
|
const [shares, setShares] = useState<Share[]>([]);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [orderDirection, setOrderDirection] = useState("desc");
|
||||||
|
const [query, setQuery] = useState("");
|
||||||
|
|
||||||
|
const loadNextPage = useCallback(
|
||||||
|
(originShares: Share[], token?: string, direction?: string, q?: string) => () => {
|
||||||
|
setLoading(true);
|
||||||
|
dispatch(
|
||||||
|
getPublicShares({
|
||||||
|
page_size: defaultPageSize,
|
||||||
|
order_direction: direction ?? orderDirection,
|
||||||
|
next_page_token: token,
|
||||||
|
query: q ?? query,
|
||||||
|
}),
|
||||||
|
)
|
||||||
|
.then((res) => {
|
||||||
|
setShares([...originShares, ...res.shares]);
|
||||||
|
setNextPageToken(res.pagination?.next_token);
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
setNextPageToken(undefined);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
setLoading(false);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
[dispatch, orderDirection, query],
|
||||||
|
);
|
||||||
|
|
||||||
|
const refresh = useCallback(
|
||||||
|
(direction?: string, q?: string) => {
|
||||||
|
loadNextPage([], "", direction, q)();
|
||||||
|
},
|
||||||
|
[loadNextPage],
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
refresh();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const onQueryChange = useMemo(
|
||||||
|
() =>
|
||||||
|
debounce((value: string) => {
|
||||||
|
setQuery(value);
|
||||||
|
refresh(undefined, value);
|
||||||
|
}, 400),
|
||||||
|
[refresh],
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => () => onQueryChange.cancel(), [onQueryChange]);
|
||||||
|
|
||||||
|
const onShareDeleted = useCallback((id: string) => {
|
||||||
|
setShares((shares) => shares.filter((share) => share.id !== id));
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PageContainer>
|
||||||
|
<Container maxWidth="lg">
|
||||||
|
<PageHeader
|
||||||
|
secondaryAction={
|
||||||
|
<Stack direction="row" spacing={1} alignItems="center">
|
||||||
|
<FormControl variant="outlined">
|
||||||
|
<DenseSelect
|
||||||
|
variant="outlined"
|
||||||
|
value={orderDirection}
|
||||||
|
onChange={(e) => {
|
||||||
|
setOrderDirection(e.target.value as string);
|
||||||
|
refresh(e.target.value as string);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SquareMenuItem value={"desc"}>
|
||||||
|
<ListItemText slotProps={{ primary: { variant: "body2" } }}>
|
||||||
|
{t("application:share.createdAtDesc")}
|
||||||
|
</ListItemText>
|
||||||
|
</SquareMenuItem>
|
||||||
|
<SquareMenuItem value={"asc"}>
|
||||||
|
<ListItemText slotProps={{ primary: { variant: "body2" } }}>
|
||||||
|
{t("application:share.createdAtAsc")}
|
||||||
|
</ListItemText>
|
||||||
|
</SquareMenuItem>
|
||||||
|
</DenseSelect>
|
||||||
|
</FormControl>
|
||||||
|
</Stack>
|
||||||
|
}
|
||||||
|
onRefresh={() => refresh()}
|
||||||
|
loading={loading}
|
||||||
|
title={t("application:navbar.discover")}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<OutlineIconTextField
|
||||||
|
variant="outlined"
|
||||||
|
icon={<Search />}
|
||||||
|
placeholder={t("application:discover.searchPlaceholder")}
|
||||||
|
fullWidth
|
||||||
|
size="small"
|
||||||
|
sx={{ mb: 2 }}
|
||||||
|
onChange={(e) => onQueryChange(e.target.value)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Grid container spacing={1}>
|
||||||
|
{shares.map((share) => (
|
||||||
|
<ShareCard share={share} key={share.id} onShareDeleted={onShareDeleted} />
|
||||||
|
))}
|
||||||
|
{nextPageToken != undefined && (
|
||||||
|
<>
|
||||||
|
{[...Array(4)].map((_, i) => (
|
||||||
|
<ShareCard
|
||||||
|
onShareDeleted={onShareDeleted}
|
||||||
|
onLoad={i == 0 ? loadNextPage(shares, nextPageToken) : undefined}
|
||||||
|
loading={true}
|
||||||
|
key={i == 0 ? nextPageToken : i}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
{nextPageToken == undefined && shares.length == 0 && !loading && (
|
||||||
|
<Box sx={{ p: 1, width: "100%", textAlign: "center" }}>
|
||||||
|
<Nothing size={0.8} top={63} primary={t("setting.listEmpty")} />
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
</Container>
|
||||||
|
</PageContainer>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Discover;
|
||||||
Loading…
Reference in new issue