Skip to content

Commit

Permalink
bug fixes and improvements (#816) (#829)
Browse files Browse the repository at this point in the history 
* Copy-pasting posting key with extra spaces before or after it onto login form causes a login error with incorrect key (where the extra spaces should automatically be removed)

* Typing a username that does not exist on Hive (or with spaces before or after it) on the login form and trying to log in will not push through and will just display a loading animation indefinitely

* Clicking the heart (upvote) button while looking at posts with a specific tag does not do anything

* Editing posts or comments (not writing a new one) does not show how many characters are left before reaching the 280-character limit

* The 3 links (which includes images and videos) are not counted towards the 280-character limit only on the feed and user profile, not when viewing the buzz (and its comments)

* Overlapping text after clicking the "Latest" button when there are new buzzes.

* A blank section is shown when viewing a post or comment that has been deleted

* The "Tip" option when viewing own buzz is visible

* change comments order

* fix tags not automatically appending
  • Loading branch information
@aaashir
aaashir authored Aug 3, 2021
1 parent 45eaf6d commit 9a54dc4
Show file tree
Hide file tree
Showing 10 changed files with 209 additions and 73 deletions.
2 changes: 1 addition & 1 deletion .env.development
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
REACT_APP_VERSION=3.21.1-dev
REACT_APP_VERSION=3.21.2-dev
REACT_APP_SEARCH_API=https://endpoint.d.buzz/api/v1
REACT_APP_SCRAPE_API=https://endpoint.d.buzz/api/v1/meta
REACT_APP_IMAGE_API=https://endpoint.d.buzz/api/v1/imageservice
Expand Down
13 changes: 7 additions & 6 deletions src/components/layout/SideBarLeft/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -318,11 +318,11 @@ const SideBarLeft = (props) => {
setOpenLoginModal(false)
}

const refreshLatestRouteData = () => {
if(pathname.match(/^\/latest/)){
setRefreshRouteStatus("latest",timestamp)
}
}
// const refreshLatestRouteData = () => {
// if(pathname.match(/^\/latest/)){
// setRefreshRouteStatus("latest",timestamp)
// }
// }

const refreshTrendingRouteData = () => {
if(pathname.match(/^\/trending/)){
Expand Down Expand Up @@ -356,7 +356,8 @@ const SideBarLeft = (props) => {
path: "/latest",
icon: <LatestIcon />,
preventDefault: false,
onClick: refreshLatestRouteData,
// onClick: refreshLatestRouteData,
onClick: () => window.location.reload(true),
},
{
name: 'Notifications',
Expand Down
18 changes: 13 additions & 5 deletions src/components/modals/LoginModal/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { authenticateUserRequest } from 'store/auth/actions'
import { Spinner } from 'components/elements'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { pending } from 'redux-saga-thunk'
// import { pending } from 'redux-saga-thunk'
import classNames from 'classnames'
import { hasCompatibleKeychain } from 'services/helper'
import { FaChrome, FaFirefoxBrowser } from 'react-icons/fa'
Expand Down Expand Up @@ -100,7 +100,7 @@ const LoginModal = (props) => {
show,
onHide,
authenticateUserRequest,
loading,
// loading,
fromIntentBuzz,
buzzIntentCallback = () => { },
accounts,
Expand All @@ -114,15 +114,16 @@ const LoginModal = (props) => {
const [useKeychain, setUseKeychain] = useState(false)
const [hasInstalledKeychain, setHasInstalledKeychain] = useState(false)
const [hasAuthenticationError, setHasAuthenticationError] = useState(false)
const [loading, setLoading] = useState(false)

const onChange = (e) => {
const { target } = e
const { name, value } = target

if (name === 'username') {
setUsername(value.replace("@", ""))
setUsername(value.replace(/[@!#$%^&*()+=/\\~`,;:"'_\s]/gi, ''))
} else if (name === 'password') {
setPassword(value)
setPassword(value.replace(/[\s]/gi, ''))
}
setHasAuthenticationError(false)
}
Expand All @@ -142,17 +143,24 @@ const LoginModal = (props) => {
}

const handleClickLogin = () => {
setLoading(true)
authenticateUserRequest(username, password, useKeychain)
.then(({ is_authenticated }) => {
if (!is_authenticated) {
setHasAuthenticationError(true)
setLoading(false)
} else {
if (fromIntentBuzz && buzzIntentCallback) {
buzzIntentCallback()
setLoading(false)
}
onHide()
}
})
setTimeout(() => {
setHasAuthenticationError(true)
setLoading(false)
}, 10000)
}

const isDisabled = () => {
Expand Down Expand Up @@ -322,7 +330,7 @@ const LoginModal = (props) => {
}

const mapStateToProps = (state) => ({
loading: pending(state, 'AUTHENTICATE_USER_REQUEST'),
// loading: pending(state, 'AUTHENTICATE_USER_REQUEST'),
accounts: state.auth.get('accounts'),
user: state.auth.get('user'),
})
Expand Down
63 changes: 49 additions & 14 deletions src/components/modals/UpdateFormModal/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,6 @@ const useStyles = createUseStyles(theme => ({
},
circle: {
strokeLinecap: 'round',
color: '#e53935',
},
previewContainer: {
width: '100%',
Expand Down Expand Up @@ -142,6 +141,26 @@ const useStyles = createUseStyles(theme => ({
actionWrapper: {
width: '100%',
},
characterCounter: {
position: 'relative',
width: '30px',
height: '30px',
float: 'right',
marginTop: 15,
marginRight: 10,
},
counter: {
position: 'absolute',
fontWeight: 'bold',
fontSize: '0.8em',
marginRight: 12,
color: '#e61c34',
width: 'fit-content',
left: '50%',
top: '50%',
transform: 'translate(-52%,-52%)',
animation: 'counterAnimation 350ms',
},
}))

const UpdateFormModal = (props) => {
Expand All @@ -160,8 +179,6 @@ const UpdateFormModal = (props) => {
uploadFileRequest,
} = props

const CircularProgressStyle = { float: 'right', marginRight: 5, marginTop: 15 }

const { username } = user
const inputRef = useRef(null)
const [content, setContent] = useState('')
Expand All @@ -176,6 +193,20 @@ const UpdateFormModal = (props) => {
const inputFile = { display: 'none' }
const replyButtonStyle = { width: 85 }

const [counterColor, setCounterColor] = useState('#e53935')
const CircularProgressStyle = { float: 'right', color: counterColor, transform: content.length >= 260 && 'scale(1.3)' }


useEffect(() => {
if(content.length === 280) {
setCounterColor('#E0245E')
} else if(content.length >= 260) {
setCounterColor('#FFAD1F')
} else {
setCounterColor('#e53935')
}
}, [content])

useEffect(() => {
if(body && body !== '') {
setContent(body)
Expand Down Expand Up @@ -229,11 +260,11 @@ const UpdateFormModal = (props) => {
publishUpdateRequest(permlink, content)
.then((success) => {
if(success) {
broadcastNotification('success', `Post successfully edited`)
broadcastNotification('success', `Buzz successfully edited`)
onSuccess(content)
onClose()
} else {
broadcastNotification('error', `Post failed to edited`)
broadcastNotification('error', `Buzz failed to edited`)
}
})
}
Expand Down Expand Up @@ -364,15 +395,19 @@ const UpdateFormModal = (props) => {
onClick={handleClickSubmitUpdate}
disabled={loading || `${content}`.trim() === ''}
/>
<CircularProgress
style={CircularProgressStyle}
classes={{
circle: classes.circle,
}}
size={30}
value={wordCount}
variant="static"
/>
<div className={classes.characterCounter}>
<CircularProgress
className='countProgressBar'
style={CircularProgressStyle}
classes={{
circle: classes.circle,
}}
size={30}
value={wordCount}
variant="static"
/>
{content.length >= 260 && <p className={classes.counter}>{280 - content.length}</p>}
</div>
</div>
</div>
</Col>
Expand Down
51 changes: 48 additions & 3 deletions src/components/pages/Content/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import {
} from 'components'
import { bindActionCreators } from 'redux'
import { pending } from 'redux-saga-thunk'
import { anchorTop, calculatePayout, invokeTwitterIntent, sendToBerries } from 'services/helper'
import { anchorTop, calculateOverhead, calculatePayout, invokeTwitterIntent, sendToBerries } from 'services/helper'
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'
import Tooltip from '@material-ui/core/Tooltip'
Expand All @@ -41,6 +41,7 @@ import {
import Chip from '@material-ui/core/Chip'
import { useHistory } from 'react-router-dom'
import { truncateBody, censorLinks } from 'services/helper'
import ReportProblemRoundedIcon from '@material-ui/icons/ReportProblemRounded'

const useStyles = createUseStyles(theme => ({
wrapper: {
Expand Down Expand Up @@ -130,6 +131,29 @@ const useStyles = createUseStyles(theme => ({
marginTop: 5,
marginBottom: 5,
},
invalidBuzz: {
width: '100%',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
color: '#E61C34',
fontWeight: 600,
fontSize: '1.2em',
gap: 20,

'@media (max-width: 480px)': {
textAlign: 'center',

'& .errorIcon': {
fontSize: '8em !important',
},
},

'& .errorIcon': {
fontSize: '6em !important',
},
},
}))

const Content = (props) => {
Expand Down Expand Up @@ -161,6 +185,8 @@ const Content = (props) => {
const [openVoteList, setOpenVoteList] = useState(false)
const popoverAnchor = useRef(null)
const history = useHistory()
const [overhead, setOverhead] = useState(0)
const [invalidBuzz, setInvalidBuzz] = useState(false)


const {
Expand Down Expand Up @@ -193,6 +219,19 @@ const Content = (props) => {
let hasUpvoted = false
let payout_at = cashout_time

useEffect(() => {
const overhead = calculateOverhead(content.body)
setOverhead(overhead)

// check for invalid buzz
if(!content.body && !loadingContent && !loadingReplies){
setInvalidBuzz(true)
} else {
setInvalidBuzz(false)
}
// eslint-disable-next-line
}, [content.body])

useEffect(() => {
checkHasUpdateAuthorityRequest(username)
.then((result) => {
Expand Down Expand Up @@ -406,7 +445,7 @@ const Content = (props) => {
<div className={classes.wrapper}>
<br />
<React.Fragment>
{depth !== 0 && parent_author !== null && !(body.length > 280) && (
{depth !== 0 && parent_author !== null && !(content.body.length - overhead > 280) && (
<Row>
<Col>
<div className={classes.context}>
Expand Down Expand Up @@ -454,7 +493,7 @@ const Content = (props) => {
<MarkdownViewer content={originalContent} minifyAssets={false} />
</div>
<PostTags meta={meta} />
{(`${stripHtml(body)}`.length > 280) && (
{(`${stripHtml(content.body)}`.length - overhead > 280) && (
<Row>
<Col>
<div className={classes.context}>
Expand Down Expand Up @@ -565,6 +604,12 @@ const Content = (props) => {
onClose={handleClickOnCloseVoteList}
upvoteList={active_votes || []}
/>

{invalidBuzz && !loadingContent && !loadingReplies &&
<div className={classes.invalidBuzz}>
<ReportProblemRoundedIcon className='errorIcon' />
<span>Hmm...this page doesn’t exist. Try searching for something else.</span>
</div>}
</React.Fragment>
)
}
Expand Down
3 changes: 2 additions & 1 deletion src/components/sections/CreateBuzzForm/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -414,7 +414,8 @@ const CreateBuzzForm = (props) => {

// getting the draft post value from browser storage
savePostAsDraft(localStorage.getItem('draft_post'))
setTags(extractAllHashtags(draftPost || content))
buzzThreads && setTags(extractAllHashtags(buzzThreads[1].content))
// eslint-disable-next-line
}, [content, draftPost, images, savePostAsDraft])

useEffect(() => {
Expand Down
30 changes: 15 additions & 15 deletions src/components/sections/PostList/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -202,7 +202,7 @@ const PostList = React.memo((props) => {
title = null,
disableProfileLink = false,
disableUserMenu = false,
disableUpvote = false,
// disableUpvote = false,
openUserDialog,
saveScrollIndex,
scrollIndex,
Expand Down Expand Up @@ -274,7 +274,6 @@ const PostList = React.memo((props) => {
}
}, [censorList, author, permlink])


useEffect(() => {
if(!isMobile) {
if(width >= 676) {
Expand Down Expand Up @@ -431,7 +430,7 @@ const PostList = React.memo((props) => {
<label className={classes.username}>
&nbsp;&bull;&nbsp;{moment(`${ !searchListMode ? `${created}Z` : created }`).local().fromNow()}
</label>
{!muted && !hidden && !opacityActivated && disableOpacity && !isMutedUser() && !isAHiddenBuzz() && (
{!isAuthor() && !muted && !hidden && !opacityActivated && disableOpacity && !isMutedUser() && !isAHiddenBuzz() && (
<IconButton onClick={openMenu} style={{ float: 'right' }} size='small'>
<ExpandMoreIcon className={classes.moreIcon} />
</IconButton>
Expand All @@ -451,7 +450,7 @@ const PostList = React.memo((props) => {
<div className={classes.actionWrapper}>
<PostActions
upvoteList={upvoteList}
disableUpvote={disableUpvote}
// disableUpvote={disableUpvote}
body={body}
hasUpvoted={hasUpvoted}
author={author}
Expand All @@ -466,17 +465,18 @@ const PostList = React.memo((props) => {
/>
</div>
)}
<Menu
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={closeMenu}
>
<MenuItem onClick={handleTipClick} className={classes.menuText}>Tip</MenuItem>
{!isAuthor() && (<MenuItem onClick={handleClickMuteDialog} className={classes.menuText}>Mute User</MenuItem>)}
{!isAuthor() && (<MenuItem onClick={handleClickHideBuzzDialog} className={classes.menuText}>Hide Buzz</MenuItem>)}
{!isAuthor() && user.username === 'dbuzz' && !user.useKeychain && !isCensored && (<MenuItem onClick={handleClickCensorDialog} className={classes.menuText}>Censor Buzz</MenuItem>)}
</Menu>
{!isAuthor &&
<Menu
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={closeMenu}
>
{!isAuthor() && (<MenuItem onClick={handleTipClick} className={classes.menuText}>Tip</MenuItem>)}
{!isAuthor() && (<MenuItem onClick={handleClickMuteDialog} className={classes.menuText}>Mute User</MenuItem>)}
{!isAuthor() && (<MenuItem onClick={handleClickHideBuzzDialog} className={classes.menuText}>Hide Buzz</MenuItem>)}
{!isAuthor() && user.username === 'dbuzz' && !user.useKeychain && !isCensored && (<MenuItem onClick={handleClickCensorDialog} className={classes.menuText}>Censor Buzz</MenuItem>)}
</Menu>}
</div>
</Col>
</Row>
Expand Down
Loading

0 comments on commit 9a54dc4

Please sign in to comment.