feat: update post page to show data if token

web-components/src/components/cards/PostCard/PostCard.constants.ts

@@ -0,0 +1 @@
+export const SIGNED_BY = 'Signed by';

web-components/src/components/organisms/PostFiles/PostFiles.tsx

@@ -20,13 +20,15 @@ export type PostFilesProps = {
  files: Array<PostFile>;
  mapboxToken?: string;
  isAdmin: boolean;
+ hasToken?: boolean;
 };
 
 const PostFiles = ({
  privacyType,
  files,
  mapboxToken,
  isAdmin = false,
+ hasToken = false,
 }: PostFilesProps) => {
  const isPublic = privacyType === 'public';
  const privateLocations = privacyType === 'private_locations';
@@ -39,7 +41,7 @@ const PostFiles = ({
  (isPublic || privateLocations || isAdmin) && 'lg:h-[550px]',
  )}
  >
- {(isPublic || isAdmin) && (
+ {(isPublic || isAdmin || hasToken) && (
  <PostFilesPublic
  files={files}
  mapboxToken={mapboxToken}
@@ -48,10 +50,10 @@ const PostFiles = ({
  privateFiles={privateFiles}
  />
  )}
- {!isAdmin && privateLocations && (
+ {!isAdmin && !hasToken && privateLocations && (
  <PostFilesPrivateLocations files={files} />
  )}
- {!isAdmin && privateFiles && <PostFilesPrivateFiles />}
+ {!isAdmin && !hasToken && privateFiles && <PostFilesPrivateFiles />}
  </div>
  );
 };

web-marketplace/src/lib/queries/react-query/registry-server/getPostQuery/getPostQuery.ts

@@ -8,15 +8,21 @@ import {
 
 export const getPostQuery = ({
  iri,
+ token,
  ...params
 }: ReactQueryGetPostQueryParams): ReactQueryGetPostQueryResponse => ({
- queryKey: [GET_POST_QUERY_KEY, iri],
+ queryKey: [GET_POST_QUERY_KEY, iri, token ?? ''],
  queryFn: async () => {
  try {
- const resp = await fetch(`${apiUri}/marketplace/v1/posts/${iri}`, {
- method: 'GET',
- credentials: 'include',
- });
+ const resp = await fetch(
+ `${apiUri}/marketplace/v1/posts/${iri}${
+ token ? `?token=${token}` : ''
+ }`,
+ {
+ method: 'GET',
+ credentials: 'include',
+ },
+ );
  if (resp.status === 200 || resp.status === 401) {
  return await resp.json();
  }

web-marketplace/src/lib/queries/react-query/registry-server/getPostQuery/getPostQuery.types.ts

@@ -43,4 +43,5 @@ export type ReactQueryGetPostQueryResponse = QueryObserverOptions<Post | null>;
 
 export type ReactQueryGetPostQueryParams = {
  iri?: string;
+ token?: string | null;
 } & ReactQueryBuilderResponse<ReactQueryGetPostQueryResponse>;

web-marketplace/src/pages/Post/Post.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams, useSearchParams } from 'react-router-dom';
 import {
  ApolloClient,
  NormalizedCacheObject,
@@ -29,10 +29,13 @@ import { PostTimeline } from './Post.Timeline';
 
 function Post(): JSX.Element {
  const { iri } = useParams();
+ const [searchParams] = useSearchParams();
+ const token = searchParams.get('token');
  const { activeAccountId } = useAuth();
  const { data, isFetching } = useQuery(
  getPostQuery({
  iri,
+ token,
  enabled: !!iri,
  }),
  );
@@ -56,11 +59,16 @@ function Post(): JSX.Element {
  const isAdmin =
  !!adminAccountId && !!activeAccountId && adminAccountId === activeAccountId;
  const privacyType = data?.privacy;
- const privatePost =
-  data?.privacy === 'private' || data?.error === 'private post';
+ const privatePostError = data?.error === 'private post';
+ const privatePost = data?.privacy === 'private';
  const privateFiles = data?.privacy === 'private_files';
+ const privateLocations = data?.privacy === 'private_locations';
  const publicPost = data?.privacy === 'public';
 
+ const hasToken =
+ (privateFiles && !!data?.filesUrls) ||
+ (privateLocations && data?.contents?.files?.some(file => file.location));
+
  const files = useMemo(
  () =>
  data?.contents?.files?.map((file, i) => {
@@ -96,12 +104,12 @@ function Post(): JSX.Element {
  <NotFoundPage />
  ) : (
  <>
- {!loadingOffchainProjectById && !isAdmin && privatePost && (
+ {!loadingOffchainProjectById && !isAdmin && privatePostError && (
  <PostPrivate />
  )}
  {!loadingOffchainProjectById &&
  data?.contents &&
- (!privatePost || isAdmin) && (
+ (!privatePostError || isAdmin) && (
  <>
  <PostHeader
  projectHref={`/project/${
@@ -133,6 +141,7 @@ function Post(): JSX.Element {
  mapboxToken={MAPBOX_TOKEN}
  isAdmin={isAdmin}
  files={files}
+ hasToken={hasToken}
  />
  {(isAdmin || !privateFiles) && (
  <img

web-marketplace/src/pages/Post/hooks/useSharePrivateLink.ts

@@ -0,0 +1,46 @@
+import { useCallback } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { useSetAtom } from 'jotai';
+import { postData } from 'utils/fetch/postData';
+
+import { COPY_SUCCESS } from 'web-components/src/components/organisms/ProfileHeader/ProfileHeader.constants';
+import copyTextToClipboard from 'web-components/src/utils/copy';
+
+import { apiUri } from 'lib/apiUri';
+import { bannerTextAtom } from 'lib/atoms/banner.atoms';
+import { errorBannerTextAtom } from 'lib/atoms/error.atoms';
+import { useRetryCsrfRequest } from 'lib/errors/hooks/useRetryCsrfRequest';
+import { getCsrfTokenQuery } from 'lib/queries/react-query/registry-server/getCsrfTokenQuery/getCsrfTokenQuery';
+
+type Params = {
+ iri?: string;
+};
+
+export const useSharePrivateLink = ({ iri }: Params) => {
+ const retryCsrfRequest = useRetryCsrfRequest();
+ const { data: token } = useQuery(getCsrfTokenQuery({}));
+ const setErrorBannerTextAtom = useSetAtom(errorBannerTextAtom);
+ const setBannerText = useSetAtom(bannerTextAtom);
+
+ const sharePrivateLink = useCallback(async () => {
+ if (token && iri) {
+ try {
+ await postData({
+ url: `${apiUri}/marketplace/v1/posts/${iri}/token`,
+ token,
+ retryCsrfRequest,
+ onSuccess: async response => {
+ const token = response.token;
+ await copyTextToClipboard(
+ `${window.location.origin}/post/${iri}?token=${token}`,
+ );
+ setBannerText(COPY_SUCCESS);
+ },
+ });
+ } catch (e) {
+ setErrorBannerTextAtom(String(e));
+ }
+ }
+ }, [iri, retryCsrfRequest, setBannerText, setErrorBannerTextAtom, token]);
+ return sharePrivateLink;
+};