Skip to content
This repository has been archived by the owner on Dec 21, 2024. It is now read-only.

Commit

Permalink
Feat/expired paste (#61)
Browse files Browse the repository at this point in the history
* support expiration paste

* add: support expired paste

Co-authored-by: cgi-bin <[email protected]>
  • Loading branch information
sven-hash and cgi-bin authored Jan 25, 2023
1 parent 92df670 commit cd12d07
Show file tree
Hide file tree
Showing 4 changed files with 180 additions and 15 deletions.
4 changes: 2 additions & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 4 additions & 0 deletions src/Texts.js
Original file line number Diff line number Diff line change
Expand Up @@ -258,6 +258,8 @@ class Texts extends React.Component {
is_burn: data['is_burn'],
is_ipfs: data['is_ipfs'],
burn_view: data['burn_view'],
expiration_time: data['expiration_time'],
expiration_height: data['expiration_height']
})

// Display text if any
Expand Down Expand Up @@ -439,6 +441,8 @@ class Texts extends React.Component {
num_view={this.state.num_view}
created_on={this.state.created_on}
is_ipfs={this.state.is_ipfs}
expiration_time={this.state.expiration_time}
expiration_height={this.state.expiration_height}
/>
) : (
''
Expand Down
128 changes: 126 additions & 2 deletions src/UserInput.js
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,10 @@ import Tab from '@mui/joy/Tab'
import MarkdownViewer from './components/MarkdownViewer'
import Autocomplete from '@mui/material/Autocomplete'
import TextField from '@mui/material/TextField'
import { Thermostat } from '@mui/icons-material'

const EXPIRATION_BITCOIN_HEIGHT = process.env.EXPIRATION_BITCOIN_HEIGHT || 'false'


const muiTheme = extendMuiTheme({
// This is required to point to `var(--joy-*)` because we are using `CssVarsProvider` from Joy UI.
Expand Down Expand Up @@ -136,6 +140,9 @@ class UserInput extends React.Component {
limitSize: 120_0000,
mdPreview: false,
burnView: 0,
expirationChecked: false,
expirationTimeRelative: '',
expirationHeightRelative: null,
}

this.files = null
Expand All @@ -148,6 +155,27 @@ class UserInput extends React.Component {
{ view: '256' },
]

this.expirationRelativeTimeOption = [
{ time: '5 minutes' },
{ time: '10 minutes' },
{ time: '30 minutes' },
{ time: '1 hour' },
{ time: '12 hours' },
{ time: '1 week' },
{ time: '1 month' },
{ time: '6 months' },
]

this.expirationRelativeHeightOption = [
{ height: '1 block', value: 1 },
{ height: '5 blocks', value: 5 },
{ height: '10 blocks', value: 10 },
{ height: '50 blocks', value: 50 },
{ height: '100 blocks', value: 100 },
{ height: '256 blocks', value: 256 },
{ height: '500 blocks', value: 500 },
]

// Instanciating a new encryptor will generate new key by default
this.encryptor = new E2EEncryptor()

Expand Down Expand Up @@ -414,6 +442,12 @@ class UserInput extends React.Component {
burn_view: parseInt(this.state.burnView),
encParams: this.state.isPrivate ? encrypted[1] : '',
ipfs: this.state.isIpfs,
expiration_time: this.state.expirationTimeRelative,
expiration_height: this.state.expirationHeightRelative
? parseInt(
this.state.expirationHeightRelative.split(' ')[0]
)
: null,
},
}

Expand All @@ -437,8 +471,8 @@ class UserInput extends React.Component {
render() {
return (
<CssVarsProvider theme={theme}>
<Header/>
<main style={{marginRight: '10px', marginLeft:'10px'}}>
<Header />
<main style={{ marginRight: '10px', marginLeft: '10px' }}>
<Sheet
sx={{
maxWidth: '950px',
Expand Down Expand Up @@ -560,6 +594,96 @@ class UserInput extends React.Component {
''
)}

<Tooltip
title="Your message will be deleted after a time. Not compatible with IPFS upload."
size="sm"
placement="bottom"
>
<Checkbox
onChange={(event) =>
this.setState({
expirationChecked:
event.target.checked,
})
}
disabled={this.state.isIpfs}
size="sm"
label="Expire in"
checked={this.state.expirationChecked}
/>
</Tooltip>

{this.state.expirationChecked ? (
<Autocomplete
disablePortal
onChange={(event, newValue) => {
this.setState({
expirationTimeRelative: newValue,
})
}}
onInputChange={(event, newInputValue) => {
this.setState({
expirationTimeRelative:
newInputValue,
})
}}
options={this.expirationRelativeTimeOption.map(
(option) => option.time
)}
freeSolo
sx={{
position: 'relative',
top: '-13px',
width: 150,
fontSize: '12px',
}}
renderInput={(params) => (
<TextField {...params} label="Time" />
)}
size="small"
/>
) : (
''
)}

{this.state.expirationChecked &&
EXPIRATION_BITCOIN_HEIGHT ===
'true' ? (
<Autocomplete
disablePortal
onChange={(event, newValue) => {
this.setState({
expirationHeightRelative: newValue,
})
}}
onInputChange={(event, newInputValue) => {
this.setState({
expirationHeightRelative:
newInputValue,
})
}}
options={this.expirationRelativeHeightOption.map(
(option) => option.height
)}
freeSolo
sx={{
position: 'relative',
top: '-13px',
width: 150,
fontSize: '12px',
}}
renderInput={(params) => (
<TextField
{...params}
label="Block height"
/>
)}
size="small"
/>
) : (
''
)}

<Tooltip
title="Your message will not be encrypted"
size="sm"
Expand Down
59 changes: 48 additions & 11 deletions src/components/TextStats.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,19 +25,56 @@ class TextStats extends React.Component {
}}
>
{this.props.num_view
? `Views: ` + this.props.num_view + ` - `
? `Views: ` + this.props.num_view + ' - '
: ''}
{'Created on: ' +
new Date(this.props.created_on).toLocaleString(navigator.language,{
day: "2-digit",
month: "2-digit",
year: "2-digit",
})
}
new Date(this.props.created_on).toLocaleString(
navigator.language,
{
day: '2-digit',
month: '2-digit',
year: '2-digit',
}
)}
</Typography>

{this.props.is_ipfs ? ' - ' : ''}
{this.props.is_ipfs ? (

{this.props.expiration_time ? <>&nbsp;</> : ''}
<Typography
level="body2"
sx={{
display: 'inline-block',
alignItems: 'flex-start',
wordBreak: 'break-all',
}}
>
{this.props.expiration_time
? '- Expire on: ' +
new Date(this.props.expiration_time).toLocaleString(
navigator.language
)
: ''}
</Typography>


{this.props.expiration_height ? <>&nbsp;</> : ''}
<Typography
level="body2"
sx={{
display: 'inline-block',
alignItems: 'flex-start',
wordBreak: 'break-all',
}}
>
{this.props.expiration_height
? '- Expire block height: ' +
new Date(this.props.expiration_height).toLocaleString(
navigator.language
)
: ''}
</Typography>

{this.props.is_ipfs ? ' - ' : ''}
{this.props.is_ipfs ? (
<Chip
color={this.props.is_ipfs ? 'success' : 'neutral'}
variant="soft"
Expand All @@ -51,7 +88,7 @@ class TextStats extends React.Component {
}
style={{ position: 'relative', top: '-2px' }}
>
IPFS
IPFS
</Chip>
) : (
''
Expand Down

0 comments on commit cd12d07

Please sign in to comment.