IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix after merge

Browse Source
This commit is contained in:
Timofey Boyko 2024-02-14 11:01:43 +03:00
parent 0c652ed1e5
commit e953fc7c04
5 changed files with 16 additions and 436 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

138
packages/client/src/pages/Home/InfoPanel/Body/views/Share/LinkRow.js
View File

@ -1,138 +0,0 @@
import PlusIcon from "PUBLIC_DIR/images/plus.react.svg?url";
import UniverseIcon from "PUBLIC_DIR/images/universe.react.svg?url";
import PeopleIcon from "PUBLIC_DIR/images/people.react.svg?url";
import CopyIcon from "PUBLIC_DIR/images/copy.react.svg?url";
import { useTranslation } from "react-i18next";
import { isMobileOnly } from "react-device-detect";
import copy from "copy-to-clipboard";
import { Avatar } from "@docspace/shared/components/avatar";
import { Link } from "@docspace/shared/components/link";
import { ComboBox } from "@docspace/shared/components/combobox";
import { IconButton } from "@docspace/shared/components/icon-button";
import { toastr } from "@docspace/shared/components/toast";
import { Loader } from "@docspace/shared/components/loader";
import { StyledLinkRow } from "./StyledShare";
import { getShareOptions, getAccessOptions } from "./optionsHelper";
import ExpiredComboBox from "./ExpiredComboBox";
import { RowLoader } from "./ShareLoader";
const LinkRow = ({
onAddClick,
links,
changeShareOption,
changeAccessOption,
changeExpirationOption,
availableExternalRights,
loadingLinks,
}) => {
const { t } = useTranslation([
"SharingPanel",
"Files",
"Translations",
"Common",
]);
const shareOptions = getShareOptions(t);
const accessOptions = getAccessOptions(t, availableExternalRights);
const onCopyLink = (link) => {
copy(link.sharedTo.shareLink);
toastr.success(t("Common:LinkSuccessfullyCopied"));
};
return (
<>
{!links?.length ? (
<StyledLinkRow>
<Avatar size="min" source={PlusIcon} />
<Link
type="action"
isHovered={true}
fontWeight={600}
onClick={onAddClick}
>
{t("Common:CreateAndCopy")}
</Link>
</StyledLinkRow>
) : (
links.map((link, index) => {
if (link.isLoaded) return <RowLoader />;
const shareOption = shareOptions.find(
(option) => option.internal === link.sharedTo.internal,
);
const accessOption = accessOptions.find(
(option) => option.access === link.access,
);
const avatar =
shareOption.key === "anyone" ? UniverseIcon : PeopleIcon;
const isExpiredLink = link.sharedTo.isExpired;
const isLoaded = loadingLinks.includes(link.sharedTo.id);
return (
<StyledLinkRow key={`share-link-row-${index}`}>
{isLoaded ? (
<Loader className="loader" size="20px" type="track" />
) : (
<Avatar size="min" source={avatar} />
)}
<div className="link-options">
<ComboBox
className="internal-combobox"
directionY={"both"}
options={shareOptions}
selectedOption={shareOption}
onSelect={(item) => changeShareOption(item, link)}
scaled={false}
scaledOptions={false}
showDisabledItems={true}
size="content"
fillIcon={false}
withBlur={isMobileOnly}
modernView={true}
isDisabled={isExpiredLink || isLoaded}
/>
<ExpiredComboBox
link={link}
changeExpirationOption={changeExpirationOption}
isDisabled={isLoaded}
/>
</div>
<div className="link-actions">
<IconButton
size={16}
iconName={CopyIcon}
onClick={() => onCopyLink(link)}
title={t("Common:CreateAndCopy")}
isDisabled={isExpiredLink || isLoaded}
/>
<ComboBox
directionY={"both"}
options={accessOptions}
selectedOption={accessOption}
onSelect={(item) => changeAccessOption(item, link)}
scaled={false}
scaledOptions={false}
showDisabledItems={true}
size="content"
fillIcon={true}
withBlur={isMobileOnly}
modernView={true}
type="onlyIcon"
isDisabled={isExpiredLink || isLoaded}
/>
</div>
</StyledLinkRow>
);
})
)}
</>
);
};
export default LinkRow;

280
packages/client/src/pages/Home/InfoPanel/Body/views/Share/index.js
View File

@ -1,280 +0,0 @@
import InfoIcon from "PUBLIC_DIR/images/info.outline.react.svg?url";
import LinksToViewingIconUrl from "PUBLIC_DIR/images/links-to-viewing.react.svg?url";
import { useEffect, useState } from "react";
import { inject, observer } from "mobx-react";
import { useTranslation } from "react-i18next";
import copy from "copy-to-clipboard";
import { Text } from "@docspace/shared/components/text";
import { IconButton } from "@docspace/shared/components/icon-button";
import { toastr } from "@docspace/shared/components/toast";
import { ShareAccessRights } from "@docspace/shared/enums";
import PublicRoomBar from "../Members/sub-components/PublicRoomBar";
import LinkRow from "./LinkRow";
import ShareLoader from "./ShareLoader";
import { StyledLinks } from "./StyledShare";
const Share = (props) => {
const {
isRooms,
setView,
infoPanelSelection,
getPrimaryFileLink,
getFileLinks,
editFileLink,
addFileLink,
shareChanged,
setShareChanged,
} = props;
const { t } = useTranslation(["SharingPanel", "Files", "Common"]);
const [primaryFileLink, setPrimaryFileLink] = useState([]);
const [additionalFileLinks, setAdditionalFileLinks] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const [loadingLinks, setLoadingLinks] = useState([]);
const hideSharePanel = isRooms || !infoPanelSelection?.canShare;
useEffect(() => {
if (hideSharePanel) {
setView("info_details");
}
fetchLinks();
}, [infoPanelSelection]);
useEffect(() => {
fetchLinks();
setShareChanged(false);
}, [shareChanged]);
const fetchLinks = async () => {
const res = await getFileLinks(infoPanelSelection.id);
const primaryLink = res.items.filter(
(item) => item.sharedTo.primary === true,
);
const additionalLinks = res.items.filter(
(item) => item.sharedTo.primary !== true,
);
setPrimaryFileLink(primaryLink);
setAdditionalFileLinks(additionalLinks);
setIsLoading(false);
};
const addGeneralLink = async () => {
addLoaderLink(true);
const link = await getPrimaryFileLink(infoPanelSelection.id);
setPrimaryFileLink([link]);
copy(link.sharedTo.shareLink);
toastr.success(t("Common:GeneralAccessLinkCopied"));
};
const addAdditionalLinks = async () => {
addLoaderLink(false);
const newLink = await addFileLink(
infoPanelSelection.id,
ShareAccessRights.ReadOnly,
false,
false,
);
setAdditionalFileLinks([...additionalFileLinks, ...[newLink]]);
};
const addLoaderLink = (primary) => {
const link = { isLoaded: true };
if (primary) {
setPrimaryFileLink([link]);
} else {
setAdditionalFileLinks([...additionalFileLinks, ...[link]]);
}
};
const changeShareOption = async (item, link) => {
try {
setLoadingLinks([...loadingLinks, link.sharedTo.id]);
const res = await editFileLink(
infoPanelSelection.id,
link.sharedTo.id,
link.access,
link.sharedTo.primary,
item.internal,
link.sharedTo.expirationDate,
);
updateLink(link, res);
copy(link.sharedTo.shareLink);
toastr.success(t("Common:LinkSuccessfullyCopied"));
} catch (e) {
toastr.error(e);
}
};
const changeAccessOption = async (item, link) => {
try {
setLoadingLinks([...loadingLinks, link.sharedTo.id]);
const res = await editFileLink(
infoPanelSelection.id,
link.sharedTo.id,
item.access,
link.sharedTo.primary,
link.sharedTo.internal,
link.sharedTo.expirationDate,
);
if (item.access === ShareAccessRights.None) {
deleteLink(link, link.sharedTo.id);
if (link.sharedTo.primary) {
toastr.success(t("Common:GeneralAccessLinkRemove"));
} else {
toastr.success(t("Common:AdditionalLinkRemove"));
}
} else {
updateLink(link, res);
if (item.access === ShareAccessRights.DenyAccess) {
toastr.success(t("Common:LinkAccessDenied"));
} else {
copy(link.sharedTo.shareLink);
toastr.success(t("Common:LinkSuccessfullyCopied"));
}
}
} catch (e) {
toastr.error(e);
}
};
const changeExpirationOption = async (link, expirationDate) => {
try {
setLoadingLinks([...loadingLinks, link.sharedTo.id]);
const res = await editFileLink(
infoPanelSelection.id,
link.sharedTo.id,
link.access,
link.sharedTo.primary,
link.sharedTo.internal,
expirationDate,
);
updateLink(link, res);
copy(link.sharedTo.shareLink);
toastr.success(t("Common:LinkSuccessfullyCopied"));
} catch (e) {
toastr.error(e);
}
};
const updateLink = (link, newItem) => {
if (link.sharedTo.primary) {
setPrimaryFileLink([newItem]);
} else {
const newArr = additionalFileLinks.map((item) => {
if (item.sharedTo.id === newItem.sharedTo.id) {
return newItem || null;
}
return item;
});
setAdditionalFileLinks(newArr);
}
const newLoadingLinks = loadingLinks.filter(
(item) => item !== link.sharedTo.id,
);
setLoadingLinks(newLoadingLinks);
};
const deleteLink = (link, id) => {
if (link.sharedTo.primary) {
setPrimaryFileLink(null);
} else {
const newArr = additionalFileLinks.filter(
(item) => item.sharedTo.id !== id,
);
setAdditionalFileLinks(newArr);
}
};
if (hideSharePanel) return <></>;
return (
<div>
<PublicRoomBar
headerText={t("Common:ShareDocument")}
bodyText={t("Common:ShareDocumentDescription")}
iconName={InfoIcon}
/>
{isLoading ? (
<ShareLoader t={t} />
) : (
<>
<StyledLinks>
<Text fontSize="14px" fontWeight={600} className="title-link">
{t("Common:GeneralAccessLink")}
</Text>
<LinkRow
onAddClick={addGeneralLink}
links={primaryFileLink}
changeShareOption={changeShareOption}
changeAccessOption={changeAccessOption}
changeExpirationOption={changeExpirationOption}
availableExternalRights={
infoPanelSelection.availableExternalRights
}
loadingLinks={loadingLinks}
/>
</StyledLinks>
{(primaryFileLink?.length > 0 || additionalFileLinks?.length > 0) && (
<StyledLinks>
<div className="additional-link">
<Text fontSize="14px" fontWeight={600} className="title-link">
{t("Common:AdditionalLinks")}
</Text>
<IconButton
className="link-to-viewing-icon"
iconName={LinksToViewingIconUrl}
onClick={addAdditionalLinks}
size={16}
/>
</div>
<LinkRow
onAddClick={addAdditionalLinks}
links={additionalFileLinks}
changeShareOption={changeShareOption}
changeAccessOption={changeAccessOption}
changeExpirationOption={changeExpirationOption}
availableExternalRights={
infoPanelSelection.availableExternalRights
}
loadingLinks={loadingLinks}
/>
</StyledLinks>
)}
</>
)}
</div>
);
};
export default inject(({ infoPanelStore }) => {
const {
setView,
getPrimaryFileLink,
getFileLinks,
editFileLink,
addFileLink,
shareChanged,
setShareChanged,
} = infoPanelStore;
return {
setView,
getPrimaryFileLink,
getFileLinks,
editFileLink,
addFileLink,
shareChanged,
setShareChanged,
};
})(observer(Share));

17
packages/shared/components/share/index.tsx
View File

@ -40,7 +40,7 @@ const Share = (props: ShareProps) => {
shareChanged, shareChanged,
setShareChanged, setShareChanged,
} = props; } = props;
const { t } = useTranslation(["SharingPanel", "Files"]); const { t } = useTranslation(["Common"]);
const [primaryFileLink, setPrimaryFileLink] = useState<TLink[] | null>([]); const [primaryFileLink, setPrimaryFileLink] = useState<TLink[] | null>([]);
const [additionalFileLinks, setAdditionalFileLinks] = useState<TLink[]>([]); const [additionalFileLinks, setAdditionalFileLinks] = useState<TLink[]>([]);
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
@ -49,7 +49,6 @@ const Share = (props: ShareProps) => {
const requestRunning = React.useRef(false); const requestRunning = React.useRef(false);
const hideSharePanel = isRooms || !infoPanelSelection?.canShare; const hideSharePanel = isRooms || !infoPanelSelection?.canShare;
console.log(additionalFileLinks);
const fetchLinks = React.useCallback(async () => { const fetchLinks = React.useCallback(async () => {
if (requestRunning.current) return; if (requestRunning.current) return;
@ -98,7 +97,7 @@ const Share = (props: ShareProps) => {
setPrimaryFileLink([link]); setPrimaryFileLink([link]);
copy(link.sharedTo.shareLink); copy(link.sharedTo.shareLink);
toastr.success(t("SharingPanel:GeneralAccessLinkCopied")); toastr.success(t("Common:GeneralAccessLinkCopied"));
}; };
const addAdditionalLinks = async () => { const addAdditionalLinks = async () => {
@ -117,7 +116,11 @@ const Share = (props: ShareProps) => {
false, false,
); );
setAdditionalFileLinks((links) => { setAdditionalFileLinks((links) => {
const newLinks: TLink[] = [...links, ...[newLink]]; const newLinks: TLink[] = [...links];
const idx = newLinks.findIndex((l) => "isLoaded" in l && l.isLoaded);
if (typeof idx !== "undefined") newLinks[idx] = { ...newLink };
return newLinks; return newLinks;
}); });
@ -178,7 +181,7 @@ const Share = (props: ShareProps) => {
updateLink(link, res); updateLink(link, res);
copy(link.sharedTo.shareLink); copy(link.sharedTo.shareLink);
toastr.success(t("Files:LinkSuccessfullyCopied")); toastr.success(t("Common:LinkSuccessfullyCopied"));
} catch (e) { } catch (e) {
toastr.error(e as TData); toastr.error(e as TData);
} }
@ -221,7 +224,7 @@ const Share = (props: ShareProps) => {
toastr.success(t("LinkAccessDenied")); toastr.success(t("LinkAccessDenied"));
} else { } else {
copy(link.sharedTo.shareLink); copy(link.sharedTo.shareLink);
toastr.success(t("Files:LinkSuccessfullyCopied")); toastr.success(t("Common:LinkSuccessfullyCopied"));
} }
} }
} catch (e) { } catch (e) {
@ -259,7 +262,7 @@ const Share = (props: ShareProps) => {
updateLink(link, res); updateLink(link, res);
copy(link.sharedTo.shareLink); copy(link.sharedTo.shareLink);
toastr.success(t("Files:LinkSuccessfullyCopied")); toastr.success(t("Common:LinkSuccessfullyCopied"));
} catch (e) { } catch (e) {
toastr.error(e as TData); toastr.error(e as TData);
} }

2
packages/shared/components/share/sub-components/ExpiredComboBox.tsx
View File

@ -17,7 +17,7 @@ const ExpiredComboBox = ({
changeExpirationOption, changeExpirationOption,
isDisabled, isDisabled,
}: ExpiredComboBoxProps) => { }: ExpiredComboBoxProps) => {
const { t, i18n } = useTranslation(["SharingPanel", "Settings", "Common"]); const { t, i18n } = useTranslation(["Common"]);
const calendarRef = useRef<HTMLDivElement | null>(null); const calendarRef = useRef<HTMLDivElement | null>(null);
const bodyRef = useRef<HTMLDivElement | null>(null); const bodyRef = useRef<HTMLDivElement | null>(null);

15
packages/shared/components/share/sub-components/LinkRow.tsx
View File

@ -31,19 +31,14 @@ const LinkRow = ({
availableExternalRights, availableExternalRights,
loadingLinks, loadingLinks,
}: LinkRowProps) => { }: LinkRowProps) => {
const { t } = useTranslation([ const { t } = useTranslation(["Common"]);
"SharingPanel",
"Files",
"Translations",
"Common",
]);
const shareOptions = getShareOptions(t); const shareOptions = getShareOptions(t);
const accessOptions = getAccessOptions(t, availableExternalRights); const accessOptions = getAccessOptions(t, availableExternalRights);
const onCopyLink = (link: TFileLink) => { const onCopyLink = (link: TFileLink) => {
copy(link.sharedTo.shareLink); copy(link.sharedTo.shareLink);
toastr.success(t("Files:LinkSuccessfullyCopied")); toastr.success(t("Common:LinkSuccessfullyCopied"));
}; };
return !links?.length ? ( return !links?.length ? (
@ -55,13 +50,13 @@ const LinkRow = ({
fontWeight={600} fontWeight={600}
onClick={onAddClick} onClick={onAddClick}
> >
{t("CreateAndCopy")} {t("Common:CreateAndCopy")}
</Link> </Link>
</StyledLinkRow> </StyledLinkRow>
) : ( ) : (
links.map((link, index) => { links.map((link, index) => {
if (("isLoaded" in link && link.isLoaded) || "isLoaded" in link) if (("isLoaded" in link && link.isLoaded) || "isLoaded" in link)
return <RowSkeleton />; return <RowSkeleton key="loading-link" />;
const shareOption = shareOptions.find( const shareOption = shareOptions.find(
(option) => option.internal === link.sharedTo.internal, (option) => option.internal === link.sharedTo.internal,
@ -114,7 +109,7 @@ const LinkRow = ({
size={16} size={16}
iconName={CopyIcon} iconName={CopyIcon}
onClick={() => onCopyLink(link)} onClick={() => onCopyLink(link)}
title={t("CreateAndCopy")} title={t("Common:CreateAndCopy")}
isDisabled={isExpiredLink || isLoaded} isDisabled={isExpiredLink || isLoaded}
/> />
<ComboBox <ComboBox