-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch '220-countdown-in-post' into 'develop'
Resolve "Add support to countdown in posts" Closes #220 See merge request hive/condenser!405
- Loading branch information
Showing
15 changed files
with
523 additions
and
11 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -12,3 +12,4 @@ lib | |
| *.bk | ||
| docs | ||
| jest | ||
| ._* | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import React from "react"; | ||
| import tt from 'counterpart'; | ||
|
|
||
| import DateTimePicker from "../elements/DateTimePicker"; | ||
|
|
||
| const CountdownSelector = (props) => { | ||
| const { value, onChange } = props; | ||
|
|
||
| return ( | ||
| <> | ||
| <div className="row"> | ||
| <div className="column"> | ||
| <h4>{tt('post_advanced_settings_jsx.countdown')}</h4> | ||
| <p>{tt('post_advanced_settings_jsx.countdown_description')}</p> | ||
| </div> | ||
| </div> | ||
| <div className="row"> | ||
| <div className="small-12 medium-6 large-12 columns"> | ||
| <DateTimePicker | ||
| onChange={onChange} | ||
| value={value} | ||
| /> | ||
| </div> | ||
| </div> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default CountdownSelector; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| import React, { useEffect, useCallback, useState } from 'react'; | ||
| import SimplePicker from 'simplepicker'; | ||
| import { DateTime } from 'luxon'; | ||
| import tt from 'counterpart'; | ||
|
|
||
| import 'simplepicker/dist/simplepicker.css'; | ||
|
|
||
| const DateTimePicker = (props) => { | ||
| const { onChange, value } = props; | ||
| const [picker, setPicker] = useState(undefined); | ||
| const [error, setError] = useState(''); | ||
|
|
||
| const handleChange = useCallback((event) => { | ||
| const coundDownDate = DateTime.fromISO(event); | ||
| const delta = coundDownDate.diffNow().as('seconds'); | ||
|
|
||
| if (delta < 3600) { | ||
| setError(tt('post_advanced_settings_jsx.countdown_date_error')); | ||
| } else if (onChange) { | ||
| setError(''); | ||
| onChange(coundDownDate); | ||
| } | ||
| }, []); | ||
|
|
||
| const openPicker = useCallback(() => { | ||
| if (value) { | ||
| picker.reset(value.toJSDate()); | ||
| } | ||
| picker.open(); | ||
| }, [picker, value]); | ||
|
|
||
| useEffect(() => { | ||
| const _picker = new SimplePicker('.datetimepicker'); | ||
| _picker.on('submit', (date) => { | ||
| handleChange(date.toISOString()); | ||
| }); | ||
| setPicker(_picker); | ||
| }, [onChange]); | ||
|
|
||
| return ( | ||
| <div> | ||
| {picker && ( | ||
| <input | ||
| className="datetimepicker_value" | ||
| type="text" | ||
| name="countdown" | ||
| placeholder={tt('post_advanced_settings_jsx.countdown_placeholder')} | ||
| value={value ? value.toLocaleString(DateTime.DATETIME_SHORT) : ''} | ||
| onClick={openPicker} | ||
| readOnly | ||
| /> | ||
| )} | ||
| <div className="datetimepicker" /> | ||
| <div className="error">{error}</div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default DateTimePicker; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| import React, { useEffect, useState } from 'react'; | ||
| import { DateTime } from 'luxon'; | ||
| import tt from "counterpart"; | ||
| import HumanizeDuration from "humanize-duration"; | ||
| import classnames from 'classnames'; | ||
|
|
||
| const PostCountDown = (props) => { | ||
| const { post } = props; | ||
| const jsonMetadata = post.get('json_metadata'); | ||
| const countDownEndDate = jsonMetadata.get('countdown'); | ||
| const [remainingTime, setRemainingTime] = useState(); | ||
| const [intervalHandler, setIntervalHandler] = useState(); | ||
|
|
||
| useEffect(() => { | ||
| const endDate = DateTime.fromISO(countDownEndDate); | ||
| let interval = 1000; | ||
|
|
||
| if (endDate.diff(DateTime.now()).as('days') >= 1) { | ||
| interval = 24 * 3600; | ||
| } | ||
|
|
||
| const updateRemainingTime = () => { | ||
| const remainingSeconds = Math.round(endDate.diff(DateTime.now()).as('seconds')); | ||
| setRemainingTime(remainingSeconds); | ||
| }; | ||
|
|
||
| if (countDownEndDate) { | ||
| updateRemainingTime(); | ||
| setIntervalHandler(setInterval(updateRemainingTime, interval)); | ||
| } | ||
|
|
||
| return () => { | ||
| clearInterval(intervalHandler); | ||
| }; | ||
| }, [countDownEndDate]); | ||
|
|
||
| useEffect(() => { | ||
| if (remainingTime && remainingTime <= 0) { | ||
| clearInterval(intervalHandler); | ||
| } | ||
| }, [remainingTime]); | ||
|
|
||
| if (!countDownEndDate) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <div className={classnames('PostFull__countdown', { terminated: remainingTime <= 0 })}> | ||
| {remainingTime > 0 | ||
| ? tt('postfull_jsx.post_countdown', { remainingTime: HumanizeDuration(remainingTime * 1000, { largest: 2 })}) | ||
| : tt('postfull_jsx.post_countdown_terminated', { date: DateTime.fromISO(countDownEndDate).toLocaleString(DateTime.DATETIME_MED) })} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default PostCountDown; |
Oops, something went wrong.