1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
|
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
* You can obtain one at http://mozilla.org/MPL/2.0/. */
import React from "react";
import { actionCreators as ac } from "common/Actions.sys.mjs";
import { SafeAnchor } from "../SafeAnchor/SafeAnchor";
import { ImpressionStats } from "../../DiscoveryStreamImpressionStats/ImpressionStats";
import { connect } from "react-redux";
export function _TopicsWidget(props) {
const { id, source, position, DiscoveryStream, dispatch } = props;
const { utmCampaign, utmContent, utmSource } = DiscoveryStream.experimentData;
let queryParams = `?utm_source=${utmSource}`;
if (utmCampaign && utmContent) {
queryParams += `&utm_content=${utmContent}&utm_campaign=${utmCampaign}`;
}
const topics = [
{ label: "Technology", name: "technology" },
{ label: "Science", name: "science" },
{ label: "Self-Improvement", name: "self-improvement" },
{ label: "Travel", name: "travel" },
{ label: "Career", name: "career" },
{ label: "Entertainment", name: "entertainment" },
{ label: "Food", name: "food" },
{ label: "Health", name: "health" },
{
label: "Must-Reads",
name: "must-reads",
url: `https://getpocket.com/collections${queryParams}`,
},
];
function onLinkClick(topic, positionInCard) {
if (dispatch) {
dispatch(
ac.DiscoveryStreamUserEvent({
event: "CLICK",
source,
action_position: position,
value: {
card_type: "topics_widget",
topic,
...(positionInCard || positionInCard === 0
? { position_in_card: positionInCard }
: {}),
},
})
);
dispatch(
ac.ImpressionStats({
source,
click: 0,
window_inner_width: props.windowObj.innerWidth,
window_inner_height: props.windowObj.innerHeight,
tiles: [
{
id,
pos: position,
},
],
})
);
}
}
function mapTopicItem(topic, index) {
return (
<li
key={topic.name}
className={topic.overflow ? "ds-topics-widget-list-overflow-item" : ""}
>
<SafeAnchor
url={
topic.url ||
`https://getpocket.com/explore/${topic.name}${queryParams}`
}
dispatch={dispatch}
onLinkClick={() => onLinkClick(topic.name, index)}
>
{topic.label}
</SafeAnchor>
</li>
);
}
return (
<div className="ds-topics-widget">
<header className="ds-topics-widget-header">Popular Topics</header>
<hr />
<div className="ds-topics-widget-list-container">
<ul>{topics.map(mapTopicItem)}</ul>
</div>
<SafeAnchor
className="ds-topics-widget-button button primary"
url={`https://getpocket.com/${queryParams}`}
dispatch={dispatch}
onLinkClick={() => onLinkClick("more-topics")}
>
More Topics
</SafeAnchor>
<ImpressionStats
dispatch={dispatch}
rows={[
{
id,
pos: position,
},
]}
source={source}
/>
</div>
);
}
_TopicsWidget.defaultProps = {
windowObj: window, // Added to support unit tests
};
export const TopicsWidget = connect(state => ({
DiscoveryStream: state.DiscoveryStream,
}))(_TopicsWidget);
|
