Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view

This file was deleted.

83 changes: 2 additions & 81 deletions packages/shared/src/components/cards/entity/SourceEntityCard.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useEffect, useRef, useState } from 'react';
import React from 'react';
import Link from '../../utilities/Link';
import EntityCard from './EntityCard';
import {
Expand All @@ -13,23 +13,11 @@ import CustomFeedOptionsMenu from '../../CustomFeedOptionsMenu';
import { ButtonVariant } from '../../buttons/Button';
import { Separator } from '../common/common';
import EntityDescription from './EntityDescription';
import EnableNotificationsCta from './EnableNotificationsCta';
import useSourceMenuProps from '../../../hooks/useSourceMenuProps';
import {
ContentPreferenceStatus,
ContentPreferenceType,
} from '../../../graphql/contentPreference';
import {
NotificationCtaPlacement,
NotificationPromptSource,
TargetType,
} from '../../../lib/log';
import { ContentPreferenceType } from '../../../graphql/contentPreference';
import useShowFollowAction from '../../../hooks/useShowFollowAction';
import { FollowButton } from '../../contentPreference/FollowButton';
import { useContentPreferenceStatusQuery } from '../../../hooks/contentPreference/useContentPreferenceStatusQuery';
import { useContentPreference } from '../../../hooks/contentPreference/useContentPreference';
import { useSourceActionsNotify } from '../../../hooks/source/useSourceActionsNotify';
import { useNotificationCtaExperiment } from '../../../hooks/notifications/useNotificationCtaExperiment';

type SourceEntityCardProps = {
source: SourceTooltip;
Expand All @@ -49,68 +37,12 @@ const SourceEntityCard = ({ source, className }: SourceEntityCardProps) => {
id: sourceId,
entity: ContentPreferenceType.Source,
});
const [showNotificationCta, setShowNotificationCta] = useState(false);
const { isEnabled: isNotificationCtaExperimentEnabled } =
useNotificationCtaExperiment({
shouldEvaluate: showNotificationCta,
});
const { subscribe } = useContentPreference();
const prevStatusRef = useRef(contentPreference?.status);
const menuProps = useSourceMenuProps({ source });
const { haveNotificationsOn, onNotify } = useSourceActionsNotify({
source,
});

const currentStatus = contentPreference?.status;
const isNowFollowing =
currentStatus === ContentPreferenceStatus.Follow ||
currentStatus === ContentPreferenceStatus.Subscribed;
const wasFollowing =
prevStatusRef.current === ContentPreferenceStatus.Follow ||
prevStatusRef.current === ContentPreferenceStatus.Subscribed;
const shouldRenderNotificationCta =
isNotificationCtaExperimentEnabled &&
showNotificationCta &&
!haveNotificationsOn;

useEffect(() => {
if (currentStatus === prevStatusRef.current) {
return;
}

prevStatusRef.current = currentStatus;

if (isNowFollowing && !wasFollowing) {
setShowNotificationCta(true);
return;
}

if (!isNowFollowing && wasFollowing) {
setShowNotificationCta(false);
}
}, [currentStatus, isNowFollowing, wasFollowing]);

if (!source?.id || !source.name || !source.image || !source.permalink) {
return null;
}

const handleTurnOn = async () => {
if (!source?.id) {
throw new Error('Cannot subscribe to notifications without source id');
}

if (currentStatus !== ContentPreferenceStatus.Subscribed) {
await subscribe({
id: source.id,
entity: ContentPreferenceType.Source,
entityName: source.name ?? source.id,
});
}

await onNotify();
setShowNotificationCta(false);
};

return (
<EntityCard
permalink={source.permalink}
Expand Down Expand Up @@ -174,17 +106,6 @@ const SourceEntityCard = ({ source, className }: SourceEntityCardProps) => {
{largeNumberFormat(source.flags?.totalUpvotes ?? 0) || 0} Upvotes
</Typography>
</div>
{shouldRenderNotificationCta && (
<EnableNotificationsCta
onEnable={handleTurnOn}
analytics={{
placement: NotificationCtaPlacement.SourceCard,
targetType: TargetType.Source,
targetId: source.id,
source: NotificationPromptSource.SourceSubscribe,
}}
/>
)}
</div>
</EntityCard>
);
Expand Down
59 changes: 2 additions & 57 deletions packages/shared/src/components/cards/entity/SquadEntityCard.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useEffect, useRef, useState } from 'react';
import React from 'react';
import Link from '../../utilities/Link';
import {
Typography,
Expand All @@ -7,11 +7,6 @@ import {
TypographyType,
} from '../../typography/Typography';
import type { Origin } from '../../../lib/log';
import {
NotificationCtaPlacement,
NotificationPromptSource,
TargetType,
} from '../../../lib/log';
import { largeNumberFormat } from '../../../lib';
import { SquadActionButton } from '../../squads/SquadActionButton';
import { SourceIcon } from '../../icons';
Expand All @@ -24,14 +19,10 @@ import EntityDescription from './EntityDescription';
import EntityCard from './EntityCard';
import { ContentPreferenceType } from '../../../graphql/contentPreference';
import useShowFollowAction from '../../../hooks/useShowFollowAction';
import EnableNotificationsCta from './EnableNotificationsCta';
import { useSourceActionsNotify } from '../../../hooks/source/useSourceActionsNotify';
import { useNotificationCtaExperiment } from '../../../hooks/notifications/useNotificationCtaExperiment';

type SquadEntityCardProps = {
handle: string;
origin: Origin;
showNotificationCtaOnJoin?: boolean;
className?: {
container?: string;
};
Expand All @@ -40,56 +31,21 @@ type SquadEntityCardProps = {
const SquadEntityCard = ({
handle,
origin,
showNotificationCtaOnJoin = false,
className,
}: SquadEntityCardProps) => {
const { squad } = useSquad({ handle });
const [showNotificationCta, setShowNotificationCta] = useState(false);
const { isEnabled: isNotificationCtaExperimentEnabled } =
useNotificationCtaExperiment({
shouldEvaluate: showNotificationCta,
});
const wasSquadMemberRef = useRef(!!squad?.currentMember);
const { isLoading } = useShowFollowAction({
entityId: squad?.id ?? '',
entityType: ContentPreferenceType.Source,
});
const { haveNotificationsOn, onNotify } = useSourceActionsNotify({
source: squad,
});

const isSquadMember = !!squad?.currentMember;
const shouldRenderNotificationCta =
isNotificationCtaExperimentEnabled &&
showNotificationCta &&
!haveNotificationsOn;

useEffect(() => {
if (
showNotificationCtaOnJoin &&
isSquadMember &&
!wasSquadMemberRef.current &&
!haveNotificationsOn
) {
setShowNotificationCta(true);
} else if (!isSquadMember) {
setShowNotificationCta(false);
}

wasSquadMemberRef.current = isSquadMember;
}, [haveNotificationsOn, isSquadMember, showNotificationCtaOnJoin]);

const handleEnableNotifications = async () => {
await onNotify();
setShowNotificationCta(false);
};

if (!squad?.id || !squad.name || !squad.image || !squad.permalink) {
return null;
}

const { description, name, image, membersCount, flags, permalink } =
squad || {};

return (
<EntityCard
permalink={permalink}
Expand Down Expand Up @@ -162,17 +118,6 @@ const SquadEntityCard = ({
{largeNumberFormat(flags?.totalUpvotes ?? 0)} Upvotes
</Typography>
</div>
{shouldRenderNotificationCta && (
<EnableNotificationsCta
onEnable={handleEnableNotifications}
analytics={{
placement: NotificationCtaPlacement.SquadCard,
targetType: TargetType.Source,
targetId: squad.id,
source: NotificationPromptSource.SourceSubscribe,
}}
/>
)}
</div>
</EntityCard>
);
Expand Down
Loading
Loading