Skip to content

Commit f5a7b26

Browse files
modularcodermodularcoder
committed
Implement recent subscriptions
1 parent 55d6b93 commit f5a7b26

File tree

5 files changed

+172
-90
lines changed

5 files changed

+172
-90
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
"react": "^16.12.0",
3232
"react-chartjs-2": "^2.9.0",
3333
"react-dom": "^16.11.0",
34+
"react-intl": "^4.4.0",
3435
"react-router-dom": "^5.1.2",
3536
"react-script": "^2.0.5",
3637
"react-scripts": "3.2.0",

‎src/App.js

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react'
22
import { ThemeProvider } from '@material-ui/styles'
3+
import { IntlProvider } from 'react-intl'
34

45
import CssBaseline from '@material-ui/core/CssBaseline'
56

@@ -15,7 +16,9 @@ const App = () => {
1516
)
1617
}
1718
export default () => (
18-
<ThemeProvider theme={theme}>
19-
<App />
20-
</ThemeProvider>
19+
<IntlProvider locale={navigator.language}>
20+
<ThemeProvider theme={theme}>
21+
<App />
22+
</ThemeProvider>
23+
</IntlProvider>
2124
)

‎src/Dashboard/SubscriptionsRecent/SubscriptionsRecent.js

Lines changed: 48 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,26 @@
11
import React from 'react'
2-
import PropTypes from 'prop-types'
2+
// import PropTypes from 'prop-types'
33
import {
44
makeStyles,
55
Box,
66
Grid,
77
Card,
8+
Button,
89
CardHeader,
9-
CardContent,
10-
Typography,
10+
CardActions,
1111
IconButton,
12-
LinearProgress,
12+
Table,
13+
TableBody,
14+
TableCell,
15+
TableContainer,
16+
TableHead,
17+
TableRow,
18+
Paper,
1319
} from '@material-ui/core'
1420
import { Notes as IconNotes, MoreVert as IconMoreVert } from '@material-ui/icons'
21+
import { FormattedDate } from 'react-intl'
1522

16-
import { customersByIntegrations } from './data'
23+
import { recentSubscriptions } from './data'
1724

1825
const Subscriptions = props => {
1926
const classes = useStyles()
@@ -31,41 +38,43 @@ const Subscriptions = props => {
3138
}
3239
title="Recent Subscriptions"
3340
/>
34-
<CardContent className={classes.cardContent}>
35-
<Box className={classes.ratingBox}>
36-
{customersByIntegrations.map(({ name, ratio, value }) => (
37-
<div key={name}>
38-
<Grid container>
39-
<Grid item xs>
40-
<Typography variant="body1">{name}</Typography>
41-
</Grid>
42-
<Grid item xs className={classes.ratingItemValueBox}>
43-
<Typography
44-
align="right"
45-
variant="body2"
46-
display="inline"
47-
className={classes.ratingItemValue}
48-
>
49-
{value}
50-
</Typography>
51-
<Typography
52-
align="left"
53-
variant="body2"
54-
color="textSecondary"
55-
className={classes.ratingItemRatio}
56-
>
57-
{ratio}%
58-
</Typography>
59-
</Grid>
60-
</Grid>
61-
<LinearProgress variant="determinate" value={ratio} color="primary" />
62-
</div>
63-
))}
64-
</Box>
65-
<Box padding={2} justifyContent="center">
41+
<TableContainer component={Paper}>
42+
<Table className={classes.table} aria-label="simple table">
43+
<TableHead>
44+
<TableRow>
45+
<TableCell>Organization</TableCell>
46+
<TableCell align="right">Users</TableCell>
47+
<TableCell align="right">Plan</TableCell>
48+
<TableCell align="right">Date</TableCell>
49+
</TableRow>
50+
</TableHead>
51+
<TableBody>
52+
{recentSubscriptions.map(subscription => (
53+
<TableRow key={subscription.organization}>
54+
<TableCell component="th" scope="row">
55+
{subscription.organization}
56+
</TableCell>
57+
<TableCell align="right">{subscription.numUsers}</TableCell>
58+
<TableCell align="right">{subscription.plan}</TableCell>
59+
<TableCell align="right">
60+
<FormattedDate
61+
value={subscription.created}
62+
month="long"
63+
day="2-digit"
64+
hour="numeric"
65+
minute="numeric"
66+
></FormattedDate>
67+
</TableCell>
68+
</TableRow>
69+
))}
70+
</TableBody>
71+
</Table>
72+
</TableContainer>
73+
<CardActions>
74+
<Button size="small" color="primary">
6675
View All
67-
</Box>
68-
</CardContent>
76+
</Button>
77+
</CardActions>
6978
</Card>
7079
</Grid>
7180
)
@@ -93,47 +102,6 @@ const useStyles = makeStyles(theme => ({
93102
verticalAlign: 'sub',
94103
marginRight: '.3em',
95104
},
96-
chartBox: {
97-
borderRight: '1px solid',
98-
borderRightColor: theme.palette.divider,
99-
},
100-
chartContainer: {
101-
width: '100%',
102-
position: 'relative',
103-
paddingBottom: '25%',
104-
minHeight: 240,
105-
},
106-
chart: {
107-
position: 'absolute',
108-
width: '100%',
109-
height: '100%',
110-
top: 0,
111-
left: 0,
112-
},
113-
cardContent: {
114-
height: '100%',
115-
'&:last-child': {
116-
paddingBottom: 'default',
117-
},
118-
},
119-
ratingBox: {
120-
display: 'flex',
121-
flexDirection: 'column',
122-
justifyContent: 'space-between',
123-
},
124-
ratingItemValueBox: {
125-
textAlign: 'right',
126-
fontSize: '0.7em',
127-
},
128-
ratingItemValue: {
129-
display: 'inline-block',
130-
},
131-
ratingItemRatio: {
132-
marginLeft: 4,
133-
display: 'inline-block',
134-
width: '3em',
135-
// fontSize: '1em',
136-
},
137105
}))
138106

139107
export default Subscriptions

‎src/Dashboard/SubscriptionsRecent/data.js

Lines changed: 25 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,26 @@
1-
export const customersByIntegrations = [
2-
{ name: 'Jira', ratio: 55.3, value: Math.round(55.3 * 144) },
3-
{ name: 'Trello', ratio: 25.7, value: Math.round(25.7 * 144) },
4-
{ name: 'Slack', ratio: 15.6, value: Math.round(15.6 * 144) },
5-
{ name: 'GitLab', ratio: 8.4, value: Math.round(8.4 * 144) },
6-
{ name: 'Heroku', ratio: 5.5, value: Math.round(5.5 * 144) },
1+
export const recentSubscriptions = [
2+
{
3+
organization: 'Apple',
4+
plan: 'Pro',
5+
numUsers: 144,
6+
created: '2020-04-16T02:04:22.406Z',
7+
},
8+
{
9+
organization: 'Google',
10+
numUsers: 3673,
11+
plan: 'Gold',
12+
created: '2020-04-14T12:03:15.406Z',
13+
},
14+
{
15+
organization: 'GitHub',
16+
numUsers: 36730,
17+
plan: 'Enterprise',
18+
created: '2020-04-13T21:32:04.406Z',
19+
},
20+
{
21+
organization: 'Microsoft',
22+
numUsers: 124,
23+
plan: 'Trial',
24+
created: '2020-04-10T11:03:46.406Z',
25+
},
726
]

‎yarn.lock

Lines changed: 92 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1164,6 +1164,39 @@
11641164
resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
11651165
integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
11661166

1167+
"@formatjs/intl-displaynames@^1.2.4":
1168+
version "1.2.4"
1169+
resolved "https://registry.yarnpkg.com/@formatjs/intl-displaynames/-/intl-displaynames-1.2.4.tgz#c9fffd19cd8a69bab202b2db90ded00c7b85093a"
1170+
integrity sha512-c9Wv/TJLrdQJvrR6NbF63ZMNHE2IVCuxwo4riVLb3YmvR6yK6dI5BT3tdLBvtg5oCY/MECx3O2UirmfQjWf1mA==
1171+
dependencies:
1172+
"@formatjs/intl-utils" "^2.2.2"
1173+
1174+
"@formatjs/intl-listformat@^1.4.4":
1175+
version "1.4.4"
1176+
resolved "https://registry.yarnpkg.com/@formatjs/intl-listformat/-/intl-listformat-1.4.4.tgz#87af681a3eadaa04387269f3e36b6f5b01c0e79a"
1177+
integrity sha512-b9DFftQDQEE4fVHX8WFCIXLWdlt98XPyXoyNt9wTSOhUZBJUmu97w9y8fRZnPry6pES/D9yGLJeD4/XDjG0tbw==
1178+
dependencies:
1179+
"@formatjs/intl-utils" "^2.2.2"
1180+
1181+
"@formatjs/intl-relativetimeformat@^4.5.12":
1182+
version "4.5.12"
1183+
resolved "https://registry.yarnpkg.com/@formatjs/intl-relativetimeformat/-/intl-relativetimeformat-4.5.12.tgz#2d2365f62c15524a40b63627cd62924f6196dd4e"
1184+
integrity sha512-Fh57ZnwOgAIA61i3BQhTb8C8OrCP1zDLQ35xzJ7yv/UiDDExAS8rQPf80+7Hu/8+kydL1DDgVY1PXvE63fxF+Q==
1185+
dependencies:
1186+
"@formatjs/intl-utils" "^2.2.2"
1187+
1188+
"@formatjs/intl-unified-numberformat@^3.3.3":
1189+
version "3.3.3"
1190+
resolved "https://registry.yarnpkg.com/@formatjs/intl-unified-numberformat/-/intl-unified-numberformat-3.3.3.tgz#c0006fb06588ccce614df50f3469ca2ec92816f2"
1191+
integrity sha512-dic7DA8REMy8gkidkCSoWqTjaLIlCyLJ5fDtlgHzK/ftwxAlbSSHkbeozZ/IKQDPbbcSppI/t9hp9KT+co/Ksg==
1192+
dependencies:
1193+
"@formatjs/intl-utils" "^2.2.2"
1194+
1195+
"@formatjs/intl-utils@^2.2.2":
1196+
version "2.2.2"
1197+
resolved "https://registry.yarnpkg.com/@formatjs/intl-utils/-/intl-utils-2.2.2.tgz#adc448035c2e3f60c550bd27c97eca336e641f5a"
1198+
integrity sha512-rKINaMRYH3FeNwYjEQwPtsA0kP2/hLLMB9mLi/QYfszz/huTqkInFmYilFRCX4oLlhFXDK5UQQMGNfEavN02Sg==
1199+
11671200
"@hapi/[email protected]":
11681201
version "2.1.4"
11691202
resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
@@ -2165,6 +2198,19 @@
21652198
resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.3.tgz#856c99cdc1551d22c22b18b5402719affec9839a"
21662199
integrity sha512-cS5owqtwzLN5kY+l+KgKdRJ/Cee8tlmQoGQuIE9tWnSmS3JMKzmxo2HIAk2wODMifGwO20d62xZQLYz+RLfXmw==
21672200

2201+
"@types/hoist-non-react-statics@^3.3.1":
2202+
version "3.3.1"
2203+
resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
2204+
integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
2205+
dependencies:
2206+
"@types/react" "*"
2207+
hoist-non-react-statics "^3.3.0"
2208+
2209+
"@types/invariant@^2.2.31":
2210+
version "2.2.31"
2211+
resolved "https://registry.yarnpkg.com/@types/invariant/-/invariant-2.2.31.tgz#4444c03004f215289dbca3856538434317dd28b2"
2212+
integrity sha512-jMlgg9pIURvy9jgBHCjQp/CyBjYHUwj91etVcDdXkFl2CwTFiQlB+8tcsMeXpXf2PFE5X2pjk4Gm43hQSMHAdA==
2213+
21682214
"@types/is-function@^1.0.0":
21692215
version "1.0.0"
21702216
resolved "https://registry.yarnpkg.com/@types/is-function/-/is-function-1.0.0.tgz#1b0b819b1636c7baf0d6785d030d12edf70c3e83"
@@ -7022,6 +7068,13 @@ hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.2.1, hoist-non-react-
70227068
dependencies:
70237069
react-is "^16.7.0"
70247070

7071+
hoist-non-react-statics@^3.3.2:
7072+
version "3.3.2"
7073+
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
7074+
integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
7075+
dependencies:
7076+
react-is "^16.7.0"
7077+
70257078
hosted-git-info@^2.1.4:
70267079
version "2.8.5"
70277080
resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.5.tgz#759cfcf2c4d156ade59b0b2dfabddc42a6b9c70c"
@@ -7441,6 +7494,26 @@ interpret@^2.0.0:
74417494
resolved "https://registry.yarnpkg.com/interpret/-/interpret-2.0.0.tgz#b783ffac0b8371503e9ab39561df223286aa5433"
74427495
integrity sha512-e0/LknJ8wpMMhTiWcjivB+ESwIuvHnBSlBbmP/pSb8CQJldoj1p2qv7xGZ/+BtbTziYRFSz8OsvdbiX45LtYQA==
74437496

7497+
intl-format-cache@^4.2.24:
7498+
version "4.2.24"
7499+
resolved "https://registry.yarnpkg.com/intl-format-cache/-/intl-format-cache-4.2.24.tgz#d6a264430553db233aa444acefc4150762d603e4"
7500+
integrity sha512-eea8rHu7ipmUilSd9+MCglgR07E+xJXmTYVFODmeLKsO3Psr/OrixDr6vWprz1whli7cwRdSc1/jHVBxrd+QBw==
7501+
7502+
intl-messageformat-parser@^4.1.4:
7503+
version "4.1.4"
7504+
resolved "https://registry.yarnpkg.com/intl-messageformat-parser/-/intl-messageformat-parser-4.1.4.tgz#98f3415e6990d44bebf2e0ad8e4cfbacf3ef5ed3"
7505+
integrity sha512-zV4kBUD1yhxSyaXm6bGhmP4HFH9Gh4pRQwNn+xq5P+B1dT8mpaAfU75nfUn4HgddIB6pyFnzM5MQjO55UpJwkQ==
7506+
dependencies:
7507+
"@formatjs/intl-unified-numberformat" "^3.3.3"
7508+
7509+
intl-messageformat@^8.3.6:
7510+
version "8.3.6"
7511+
resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-8.3.6.tgz#1445e3e9b0e1befedefa86ef1a68e1ffd1a15e11"
7512+
integrity sha512-LUg5ObCM+E5lYzHYJ6enCwZNwxo68QBItAMbXdFYA+v6cF9YD/fD/nZlXiGY/uJ9JG7oJLiFrG9+hxbVv3PgIQ==
7513+
dependencies:
7514+
intl-format-cache "^4.2.24"
7515+
intl-messageformat-parser "^4.1.4"
7516+
74447517
invariant@^2.2.2, invariant@^2.2.3, invariant@^2.2.4:
74457518
version "2.2.4"
74467519
resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
@@ -11773,6 +11846,24 @@ react-inspector@^4.0.0:
1177311846
prop-types "^15.6.1"
1177411847
storybook-chromatic "^2.2.2"
1177511848

11849+
react-intl@^4.4.0:
11850+
version "4.4.0"
11851+
resolved "https://registry.yarnpkg.com/react-intl/-/react-intl-4.4.0.tgz#c76e59214272e4b34787a581e8373f7bc19afe19"
11852+
integrity sha512-SId6fgh8sHTujTvOe7Epyk7X7a9nehNihR6xgdclA0RWnkovbLNCtLfa4tPojcx1xr61TgbA8RiAEiwE00LBqg==
11853+
dependencies:
11854+
"@formatjs/intl-displaynames" "^1.2.4"
11855+
"@formatjs/intl-listformat" "^1.4.4"
11856+
"@formatjs/intl-relativetimeformat" "^4.5.12"
11857+
"@formatjs/intl-unified-numberformat" "^3.3.3"
11858+
"@formatjs/intl-utils" "^2.2.2"
11859+
"@types/hoist-non-react-statics" "^3.3.1"
11860+
"@types/invariant" "^2.2.31"
11861+
hoist-non-react-statics "^3.3.2"
11862+
intl-format-cache "^4.2.24"
11863+
intl-messageformat "^8.3.6"
11864+
intl-messageformat-parser "^4.1.4"
11865+
shallow-equal "^1.2.1"
11866+
1177611867
react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.9.0:
1177711868
version "16.12.0"
1177811869
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c"
@@ -12833,7 +12924,7 @@ shallow-clone@^3.0.0:
1283312924
dependencies:
1283412925
kind-of "^6.0.2"
1283512926

12836-
shallow-equal@^1.1.0:
12927+
shallow-equal@^1.1.0, shallow-equal@^1.2.1:
1283712928
version "1.2.1"
1283812929
resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-1.2.1.tgz#4c16abfa56043aa20d050324efa68940b0da79da"
1283912930
integrity sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==

0 commit comments

Comments
 (0)