@@ -565,6 +604,12 @@ const Content = (props) => {
onClose={handleClickOnCloseVoteList}
upvoteList={active_votes || []}
/>
+
+ {invalidBuzz && !loadingContent && !loadingReplies &&
+
+
+ Hmm...this page doesn’t exist. Try searching for something else.
+
}
)
}
diff --git a/src/components/sections/CreateBuzzForm/index.js b/src/components/sections/CreateBuzzForm/index.js
index 7654b4dc..b879df47 100644
--- a/src/components/sections/CreateBuzzForm/index.js
+++ b/src/components/sections/CreateBuzzForm/index.js
@@ -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(() => {
diff --git a/src/components/sections/PostList/index.js b/src/components/sections/PostList/index.js
index 3897db84..39d6dc05 100644
--- a/src/components/sections/PostList/index.js
+++ b/src/components/sections/PostList/index.js
@@ -202,7 +202,7 @@ const PostList = React.memo((props) => {
title = null,
disableProfileLink = false,
disableUserMenu = false,
- disableUpvote = false,
+ // disableUpvote = false,
openUserDialog,
saveScrollIndex,
scrollIndex,
@@ -274,7 +274,6 @@ const PostList = React.memo((props) => {
}
}, [censorList, author, permlink])
-
useEffect(() => {
if(!isMobile) {
if(width >= 676) {
@@ -431,7 +430,7 @@ const PostList = React.memo((props) => {
- {!muted && !hidden && !opacityActivated && disableOpacity && !isMutedUser() && !isAHiddenBuzz() && (
+ {!isAuthor() && !muted && !hidden && !opacityActivated && disableOpacity && !isMutedUser() && !isAHiddenBuzz() && (
@@ -451,7 +450,7 @@ const PostList = React.memo((props) => {
)}
-
+ {!isAuthor &&
+
}
diff --git a/src/components/sections/ReplyList/index.js b/src/components/sections/ReplyList/index.js
index 83208717..7266c3ea 100644
--- a/src/components/sections/ReplyList/index.js
+++ b/src/components/sections/ReplyList/index.js
@@ -20,7 +20,7 @@ import IconButton from '@material-ui/core/IconButton'
import MuteIcon from '@material-ui/icons/VolumeOff'
import Chip from '@material-ui/core/Chip'
import { Link, useHistory } from 'react-router-dom'
-import { truncateBody } from 'services/helper'
+import { calculateOverhead, truncateBody } from 'services/helper'
import stripHtml from 'string-strip-html'
import { censorLinks } from 'services/helper'
@@ -171,6 +171,28 @@ const useStyles = createUseStyles(theme => ({
muteButton: {
float: 'right',
},
+ seeMoreRepliesButton: {
+ display: 'flex',
+ justifyContent: 'center',
+ padding: '15px 0',
+ width: '100%',
+ fontFamily: 'Segoe-Bold',
+ cursor: 'pointer',
+
+ '&:hover': {
+ background: theme.seeMoreReplies.background,
+ },
+
+ '& span': {
+ display: 'flex',
+ alignItems: 'center',
+ width: 'fit-content',
+ padding: '8px 25px',
+ borderRadius: 8,
+ userSelect: 'none',
+ ...theme.seeMoreReplies,
+ },
+ },
}))
const countReplies = async (replies = []) => {
@@ -200,6 +222,7 @@ const ReplyList = (props) => {
const [replyCounter, setReplyCounter] = useState(0)
const [repliesState, setRepliesState] = useState(replies)
const history = useHistory()
+ const [overhead, setOverhead] = useState(0)
useEffect(() => {
countReplies(replies)
@@ -361,6 +384,11 @@ const ReplyList = (props) => {
openCensorshipDialog(author, permlink, censorCallBack)
}
+ useEffect(() => {
+ const overhead = calculateOverhead(reply.body)
+ setOverhead(overhead)
+ }, [reply.body])
+
useEffect(() => {
if(censorList.length !== 0 && author && permlink) {
const result = censorList.filter((item) => `${item.author}/${item.permlink}` === `${author}/${permlink}`)
@@ -382,9 +410,9 @@ const ReplyList = (props) => {
- {`${stripHtml(content)}`.length > 280 && (
+ {`${stripHtml(reply.body)}`.length - overhead > 280 && (
Reply is truncated because it is over 280 characters
@@ -443,11 +471,14 @@ const ReplyList = (props) => {
{replies.length !== 0 && (
-
- {replies.map((reply, index) => (
-
- ))}
-
+ //
+ // {replies.map((reply, index) => (
+ //
+ // ))}
+ //
+
+ view more replies on this...
+
)}
)
@@ -462,7 +493,7 @@ const ReplyList = (props) => {
)}
- {repliesState.map((reply, index) => (
+ {repliesState.slice(0).reverse().map((reply, index) => (
diff --git a/src/services/helper.js b/src/services/helper.js
index de0d435c..898664c0 100644
--- a/src/services/helper.js
+++ b/src/services/helper.js
@@ -11,7 +11,7 @@ const dmp = new diff_match_patch()
export const getUrls = (text) => {
const regexUrls = /(http|ftp|https):\/\/([\w_-]+(?:(?:\.[\w_-]+)+))([\w.,@?^=%&:/~+#-]*[/w@?^=%&/~+#-(a-z)(A-Z)(0-9)])?/gm
- return text.match(regexUrls) !== null ? text.match(regexUrls) : []
+ return text?.match(regexUrls) !== null ? text?.match(regexUrls) : []
}
export const anchorTop = () => {
@@ -254,8 +254,27 @@ export const sendToBerries = (author, theme) => {
window.open(`https://buymeberri.es/!dbuzz${color}/@${author}`, '_blank')
}
+export const calculateOverhead = (content) => {
+ let urls = getUrls(content)
+
+ let overhead = 0
+
+ if(urls?.length > 3) {
+ urls = urls?.slice(0, 2)
+ }
+
+ if(urls){
+ urls.forEach((item) => {
+ overhead += item.length
+ })
+ }
+
+ return overhead
+}
+
export const truncateBody = (body) => {
- const bodyLength = `${stripHtml(body)}`.length
+ const overhead = calculateOverhead(body)
+ const bodyLength = `${stripHtml(body)}`.length - overhead
if(bodyLength > 280) {
body = stripHtml(body)
@@ -367,19 +386,3 @@ export const redirectToUserProfile = () => {
window.location = (`/#/@${account[1].replace("#/", "")}`)
}
}
-
-export const calculateOverhead = (content) => {
- let urls = getUrls(content)
-
- let overhead = 0
-
- if(urls.length > 3) {
- urls = urls.slice(0, 2)
- }
-
- urls.forEach((item) => {
- overhead += item.length
- })
-
- return overhead
-}
diff --git a/src/services/theme.js b/src/services/theme.js
index 5f48c378..884a40f1 100644
--- a/src/services/theme.js
+++ b/src/services/theme.js
@@ -168,6 +168,10 @@ const night = {
color: '#172e3f',
highlight: 'rgb(56 68 77 / 31%)',
},
+ seeMoreReplies: {
+ background: '#192734',
+ color: '#ffffff',
+ },
}
const light = {
@@ -329,6 +333,10 @@ const light = {
},
},
skeleton: { },
+ seeMoreReplies: {
+ background: '#F5F8FA',
+ color: '#778694',
+ },
}
const gray = {
@@ -500,6 +508,10 @@ const gray = {
color: '#2f3136',
highlight: '#36393fed',
},
+ seeMoreReplies: {
+ background: '#282A2D',
+ color: '#ffffff',
+ },
}
export const getTheme = (mode) => {