Skip to content

Commit 2fd6475

Browse files
kkartunovkkartunov
committed
Implements #4058 
1 parent 7178975 commit 2fd6475

File tree

2 files changed

+196
-22
lines changed

2 files changed

+196
-22
lines changed

‎src/shared/components/NewsletterArchive/index.jsx

Lines changed: 104 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,118 @@
11
import _ from 'lodash';
22
import moment from 'moment';
3-
import React, { Fragment } from 'react';
3+
import React, { Component } from 'react';
44
import PT from 'prop-types';
55
import { themr } from 'react-css-super-themr';
6+
import cn from 'classnames';
67
import defaultStyle from './style.scss';
78

89
/* Date/time format to use in the link. */
9-
const FORMAT = 'MMM DD, HH:mm';
10+
const FORMAT = 'MMM DD, YYYY';
1011

11-
function NewsletterArchive({
12-
archive,
13-
}) {
14-
// console.log(archive)
15-
return _.map(
16-
archive.campaigns,
17-
(link, indx) => (
18-
<Fragment key={`f${indx}`}>
19-
<a href={link.archive_url} key={`l${indx}`} styleName="archive-link" target="_blank" rel="noopener noreferrer">
20-
{link.settings.title}
21-
</a>
22-
<small key={`d${indx}`} styleName="archive-date"><strong>Sent:</strong> {moment(link.send_time).format(FORMAT)}</small>
23-
</Fragment>
24-
),
25-
);
26-
}
12+
class NewsletterArchive extends Component {
13+
constructor(props) {
14+
super(props);
2715

28-
NewsletterArchive.defaultProps = {
29-
token: null,
30-
};
16+
this.state = {
17+
sortParam: {
18+
order: '',
19+
field: '',
20+
},
21+
};
22+
}
23+
24+
render() {
25+
const {
26+
archive,
27+
} = this.props;
28+
const { sortParam } = this.state;
29+
const archiveOrdered = _.orderBy(archive.campaigns, [sortParam.field], [sortParam.order]);
30+
31+
return (
32+
<table styleName="history-table">
33+
<thead>
34+
<tr>
35+
<th>Item</th>
36+
<th>
37+
<div styleName="header-table-content">
38+
<span>NEWSLETTER</span>
39+
<button
40+
styleName="sort-container"
41+
onClick={() => {
42+
if (!sortParam.field || sortParam.field !== 'settings.title') {
43+
sortParam.field = 'settings.title';
44+
sortParam.order = 'desc';
45+
} else {
46+
sortParam.order = sortParam.order === 'asc' ? 'desc' : 'asc';
47+
}
48+
this.setState({ sortParam });
49+
}}
50+
type="button"
51+
>
52+
<div styleName={cn('sort-up', {
53+
active: sortParam.field === 'settings.title' && sortParam.order === 'asc',
54+
})}
55+
/>
56+
<div styleName={cn('sort-down', {
57+
active: sortParam.field === 'settings.title' && sortParam.order === 'desc',
58+
})}
59+
/>
60+
</button>
61+
</div>
62+
</th>
63+
<th>
64+
<div styleName="header-table-content">
65+
<span>SEND DATE</span>
66+
<button
67+
styleName="sort-container"
68+
onClick={() => {
69+
if (!sortParam.field || sortParam.field !== 'send_time') {
70+
sortParam.field = 'send_time';
71+
sortParam.order = 'desc';
72+
} else {
73+
sortParam.order = sortParam.order === 'asc' ? 'desc' : 'asc';
74+
}
75+
this.setState({ sortParam });
76+
}}
77+
type="button"
78+
>
79+
<div styleName={cn('sort-up', {
80+
active: sortParam.field === 'send_time' && sortParam.order === 'asc',
81+
})}
82+
/>
83+
<div styleName={cn('sort-down', {
84+
active: sortParam.field === 'send_time' && sortParam.order === 'desc',
85+
})}
86+
/>
87+
</button>
88+
</div>
89+
</th>
90+
</tr>
91+
</thead>
92+
<tbody>
93+
{
94+
archiveOrdered.map((archiveItem, indx) => (
95+
<tr styleName="row" key={`${archiveItem.id}`}>
96+
<td styleName="index">{indx + 1}</td>
97+
<td styleName="name">
98+
<a href={archiveItem.archive_url} key={`l${archiveItem.id}`} styleName="archive-link" target="_blank" rel="noopener noreferrer">
99+
{archiveItem.settings.title}
100+
</a>
101+
</td>
102+
<td styleName="sent-date">
103+
{moment(archiveItem.send_time).format(FORMAT)}
104+
</td>
105+
</tr>
106+
))
107+
}
108+
</tbody>
109+
</table>
110+
);
111+
}
112+
}
31113

32114
NewsletterArchive.propTypes = {
33-
archive: PT.shape().isRequired,
115+
archive: PT.arrayOf().isRequired,
34116
};
35117

36118
export default themr('NewsletterArchive', defaultStyle)(NewsletterArchive);

‎src/shared/components/NewsletterArchive/style.scss

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
@import "~styles/mixins";
22

3+
$light-gray: #d4d4d4;
4+
35
.archive-link {
46
display: block;
57
font-size: 15px;
@@ -20,3 +22,93 @@
2022
margin-bottom: 10px;
2123
display: block;
2224
}
25+
26+
.history-table {
27+
width: 100%;
28+
margin-bottom: 62px;
29+
30+
thead {
31+
th {
32+
color: #2a2a2a;
33+
font-family: Roboto, sans-serif;
34+
font-size: 14px;
35+
font-weight: 500;
36+
letter-spacing: 0.5px;
37+
line-height: 18px;
38+
text-align: left;
39+
text-transform: uppercase;
40+
border-bottom: 1px solid #d4d4d4;
41+
padding-bottom: 15px;
42+
}
43+
}
44+
45+
.row {
46+
border-bottom: 1px solid #d4d4d4;
47+
48+
td {
49+
padding: 0;
50+
border-bottom: 1px solid #d4d4d4;
51+
}
52+
53+
.name {
54+
.archive-link {
55+
color: #0d61bf;
56+
font-size: 14px;
57+
font-weight: 500;
58+
line-height: 51px;
59+
text-decoration: underline;
60+
61+
&:hover {
62+
text-decoration: none;
63+
}
64+
}
65+
}
66+
67+
.index,
68+
.sent-date {
69+
color: #2a2a2a;
70+
font-size: 14px;
71+
font-weight: 400;
72+
line-height: 51px;
73+
}
74+
}
75+
}
76+
77+
.header-table-content {
78+
display: flex;
79+
align-items: center;
80+
}
81+
82+
.sort-container {
83+
display: flex;
84+
flex-direction: column;
85+
margin-left: 5px;
86+
padding: 0;
87+
border: none;
88+
outline: none;
89+
background: transparent;
90+
}
91+
92+
.sort-container > div {
93+
width: 0;
94+
height: 0;
95+
border-left: 4px solid transparent;
96+
border-right: 4px solid transparent;
97+
}
98+
99+
.sort-up {
100+
border-bottom: 4px solid $light-gray;
101+
margin-bottom: 2px;
102+
103+
&.active {
104+
border-bottom: 4px solid $tc-black;
105+
}
106+
}
107+
108+
.sort-down {
109+
border-top: 4px solid $light-gray;
110+
111+
&.active {
112+
border-top: 4px solid $tc-black;
113+
}
114+
}

0 commit comments

Comments
 (0)