Skip to content

Commit 9d9a414

Browse files
serializedowenserializedowen
committed
feat(check in): added daily checkin count banner
1 parent 8d267f5 commit 9d9a414

File tree

7 files changed

+155
-63
lines changed

7 files changed

+155
-63
lines changed

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343
"lodash": "^4.17.11",
4444
"material-ui-dropzone": "^3.5.0",
4545
"medium-editor": "^5.23.3",
46+
"notistack": "^1.0.2",
4647
"polished": "^2.3.0",
4748
"prismjs": "^1.15.0",
4849
"prop-types": "^15.6.2",

‎src/components/DailyCheckIn.js

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { useSnackbar } from 'notistack'
2+
import React, { useEffect } from 'react'
3+
import { Typography } from '@material-ui/core'
4+
import http from 'src/utils/http'
5+
import { FormattedMessage } from 'react-intl'
6+
import dayjs from 'dayjs'
7+
import isToday from 'dayjs/plugin/isToday'
8+
9+
dayjs.extend(isToday)
10+
11+
const LASTCHECKIN = 'LASTCHECKIN'
12+
export default function DailyCheckIn() {
13+
const { enqueueSnackbar } = useSnackbar()
14+
useEffect(() => {
15+
const lastCheckIn = localStorage.getItem(LASTCHECKIN)
16+
17+
if (!lastCheckIn || !dayjs(lastCheckIn).isToday()) {
18+
http.get('/auth/days').then(res => {
19+
enqueueSnackbar(
20+
<Typography>
21+
<FormattedMessage
22+
id="checkInBanner"
23+
values={{ days: res.data }}
24+
></FormattedMessage>
25+
</Typography>,
26+
{
27+
variant: 'success',
28+
anchorOrigin: { vertical: 'top', horizontal: 'right' }
29+
}
30+
)
31+
})
32+
localStorage.setItem(LASTCHECKIN, new Date().toJSON())
33+
}
34+
return () => {}
35+
}, [])
36+
37+
return null
38+
}

‎src/lang/dist/en.dev.js

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
"use strict";
2+
3+
module.exports = {
4+
selectLanguage: 'Select your language',
5+
greeting: 'Howdy',
6+
categories: 'Categories',
7+
contact: 'Contact',
8+
readTime: '{time} Min Read',
9+
blog: 'Blog',
10+
docs: 'Docs',
11+
mainPage: 'Home',
12+
copyrights: '@SerializedOwen 2020. All rights reserved.',
13+
login: 'Login',
14+
logout: 'Logout',
15+
account: 'Account',
16+
"delete": 'Delete',
17+
yes: 'Yes',
18+
no: 'No',
19+
tools: 'Tools',
20+
checkInBanner: 'You have checked in for {days} days in a row!',
21+
'nginx-regex-tester': 'Nginx Regex Tester'
22+
};

‎src/lang/dist/zh.dev.js

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
"use strict";
2+
3+
module.exports = {
4+
selectLanguage: '请选择语言',
5+
greeting: '你好',
6+
categories: '分类',
7+
contact: '联系',
8+
readTime: '{time} 分钟阅读',
9+
blog: '博客',
10+
docs: '文档',
11+
mainPage: '主页',
12+
copyrights: '@SerializedOwen 2020. 保留所有权利。',
13+
login: '登录',
14+
logout: '登出',
15+
account: '账号',
16+
"delete": '删除',
17+
yes: '确认',
18+
no: '取消',
19+
tools: '工具箱',
20+
checkInBanner: '你已经连续登陆{days}天!',
21+
'nginx-regex-tester': 'Nginx正则测试器'
22+
};

‎src/lang/en.js

+1
Original file line numberDiff line numberDiff line change
@@ -15,5 +15,6 @@ module.exports = {
1515
yes: 'Yes',
1616
no: 'No',
1717
tools: 'Tools',
18+
checkInBanner: 'You have checked in for {days} days in a row!',
1819
'nginx-regex-tester': 'Nginx Regex Tester'
1920
}

‎src/lang/zh.js

+1
Original file line numberDiff line numberDiff line change
@@ -15,5 +15,6 @@ module.exports = {
1515
yes: '确认',
1616
no: '取消',
1717
tools: '工具箱',
18+
checkInBanner: '你已经连续登陆{days}天!',
1819
'nginx-regex-tester': 'Nginx正则测试器'
1920
}

‎src/layouts/index.js

+70-63
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
createMuiTheme,
1212
ThemeProvider as MuiThemeProvider
1313
} from '@material-ui/core/styles'
14-
14+
import { SnackbarProvider } from 'notistack'
1515
import SEO from 'src/components/SEO'
1616
import theme from '../../config/Theme'
1717
import { media } from 'src/utils/media'
@@ -22,6 +22,7 @@ import Scroller from 'src/components/Scroller'
2222
import axios from 'src/utils/http'
2323
import { AuthenticationContext } from 'src/hooks/useAuthentication'
2424
import { Dialog, DialogTitle, Typography } from '@material-ui/core'
25+
import DailyCheckIn from 'src/components/DailyCheckIn'
2526

2627
const Login = React.lazy(() => import('src/app/Login'))
2728

@@ -167,68 +168,74 @@ const Layout = ({ children, location, pageContext, i18nMessages }) => {
167168
const langKey = getCurrentLangKey(langs, defaultLangKey, url)
168169

169170
return (
170-
<AuthenticationContext.Provider
171-
value={{
172-
user: authentication,
173-
refresher,
174-
isAuthenticated,
175-
authenticationLoading
176-
}}
177-
>
178-
<MuiThemeProvider theme={muiTheme}>
179-
<IntlProvider locale={langKey} messages={i18nMessages}>
180-
<ThemeProvider theme={theme}>
181-
<React.Fragment>
182-
<Parallax />
183-
<SEO />
184-
<GlobalStyle />
185-
<Navigation />
186-
{children}
187-
188-
<Dialog
189-
open={showLogin}
190-
onClose={() => setshowLogin(false)}
191-
>
192-
<DialogTitle>
193-
<Typography>登录</Typography>
194-
</DialogTitle>
195-
<React.Suspense fallback={'加载中'}>
196-
<Login></Login>
197-
</React.Suspense>
198-
</Dialog>
199-
<Scroller>
200-
<VerticalAlignTopIcon
201-
style={{ marginRight: '0px', transform: 'scale(1.5)' }}
202-
></VerticalAlignTopIcon>
203-
</Scroller>
204-
{pageContext.layout !== 'docs' && (
205-
<Footer>
206-
<div>
207-
<SocialIcon.GitHub link="https://github.com/serializedowen" />
208-
<SocialIcon.LinkedIn link="https://www.linkedin.com/in/jiahao-wang-7319b45b/" />
209-
<SocialIcon.Wechat
210-
link={withPrefix('/social/QRcode.jpg')}
211-
/>
212-
<SocialIcon.Facebook link="https://www.facebook.com/owentheoracle" />
213-
</div>
214-
<FormattedMessage id="copyrights"></FormattedMessage>{' '}
215-
<br />
216-
<a href="https://github.com/serializedowen/serializedowen.github.io">
217-
GitHub Repository
218-
</a>{' '}
219-
<br />
220-
<span>Last build: {data.site.buildTime}</span>
221-
<br />
222-
<a href="http://beian.miit.gov.cn/">
223-
浙ICP备2020034764
224-
</a>
225-
</Footer>
226-
)}
227-
</React.Fragment>
228-
</ThemeProvider>
229-
</IntlProvider>
230-
</MuiThemeProvider>
231-
</AuthenticationContext.Provider>
171+
<IntlProvider locale={langKey} messages={i18nMessages}>
172+
<AuthenticationContext.Provider
173+
value={{
174+
user: authentication,
175+
refresher,
176+
isAuthenticated,
177+
authenticationLoading
178+
}}
179+
>
180+
<SnackbarProvider maxSnack={3}>
181+
<MuiThemeProvider theme={muiTheme}>
182+
<ThemeProvider theme={theme}>
183+
<React.Fragment>
184+
<DailyCheckIn></DailyCheckIn>
185+
<Parallax />
186+
<SEO />
187+
<GlobalStyle />
188+
<Navigation />
189+
{children}
190+
191+
<Dialog
192+
open={showLogin}
193+
onClose={() => setshowLogin(false)}
194+
>
195+
<DialogTitle>
196+
<Typography>登录</Typography>
197+
</DialogTitle>
198+
<React.Suspense fallback={'加载中'}>
199+
<Login></Login>
200+
</React.Suspense>
201+
</Dialog>
202+
<Scroller>
203+
<VerticalAlignTopIcon
204+
style={{
205+
marginRight: '0px',
206+
transform: 'scale(1.5)'
207+
}}
208+
></VerticalAlignTopIcon>
209+
</Scroller>
210+
{pageContext.layout !== 'docs' && (
211+
<Footer>
212+
<div>
213+
<SocialIcon.GitHub link="https://github.com/serializedowen" />
214+
<SocialIcon.LinkedIn link="https://www.linkedin.com/in/jiahao-wang-7319b45b/" />
215+
<SocialIcon.Wechat
216+
link={withPrefix('/social/QRcode.jpg')}
217+
/>
218+
<SocialIcon.Facebook link="https://www.facebook.com/owentheoracle" />
219+
</div>
220+
<FormattedMessage id="copyrights"></FormattedMessage>{' '}
221+
<br />
222+
<a href="https://github.com/serializedowen/serializedowen.github.io">
223+
GitHub Repository
224+
</a>{' '}
225+
<br />
226+
<span>Last build: {data.site.buildTime}</span>
227+
<br />
228+
<a href="http://beian.miit.gov.cn/">
229+
浙ICP备2020034764
230+
</a>
231+
</Footer>
232+
)}
233+
</React.Fragment>
234+
</ThemeProvider>
235+
</MuiThemeProvider>
236+
</SnackbarProvider>
237+
</AuthenticationContext.Provider>
238+
</IntlProvider>
232239
)
233240
}}
234241
/>

0 commit comments

Comments
 (0)