hotfix-merge (#782)

* fix draft feature bug #749 * hotfix logout button blocking ui #760 * add buzz button to the feed (ui fix) * add buzz button to the feed * fixed buzz button not showing Co-authored-by: Aashir Shaikh <[email protected]>
d-buzz · Jun 5, 2021 · f2669b8 · f2669b8
1 parent 39f9617
commit f2669b8
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 7 deletions.
diff --git a/src/components/layout/GuardedAppFrame/index.js b/src/components/layout/GuardedAppFrame/index.js
@@ -10,7 +10,7 @@ import Row from 'react-bootstrap/Row'
 import Col from 'react-bootstrap/Col'
 import queryString from 'query-string'
 import { clearNotificationsRequest } from 'store/profile/actions'
-import { broadcastNotification } from 'store/interface/actions'
+import { broadcastNotification, setBuzzModalStatus } from 'store/interface/actions'
 import { searchRequest, clearSearchPosts } from 'store/posts/actions'
 import { ContainedButton } from 'components/elements'
 import { useLocation } from 'react-router-dom'
@@ -20,6 +20,9 @@ import { useLastLocation } from 'react-router-last-location'
 import { useWindowDimensions } from 'services/helper'
 import { pending } from 'redux-saga-thunk'
 import { SideBarLeft, SideBarRight, SearchField, NotificationFilter } from 'components'
+import BuzzFormModal from 'components/modals/BuzzFormModal'
+import { Fab } from '@material-ui/core'
+import BuzzIcon from 'components/elements/Icons/BuzzIcon'
 
 const useStyles = createUseStyles(theme => ({
   main: {
@@ -79,6 +82,16 @@ const useStyles = createUseStyles(theme => ({
   },
 }))
 
+const floatStyle = {
+  margin: 0,
+  top: 'auto',
+  bottom: 20,
+  left: 'auto',
+  position: 'fixed',
+  zIndex: 500,
+  backgroundColor: '#e61c34',
+}
+
 const GuardedAppFrame = (props) => {
   const {
     route,
@@ -104,6 +117,8 @@ const GuardedAppFrame = (props) => {
   const [minify, setMinify] = useState(false)
   const [hideSideBarRight, setHideSideBarRight] = useState(false)
   const { width } = useWindowDimensions()
+  const [open, setOpen] = useState(false)
+  const isBuzzIntent = pathname.match(/^\/intent\/buzz/)
 
   useEffect(() => {
     setSearch(query)
@@ -213,6 +228,22 @@ const GuardedAppFrame = (props) => {
       })
   }
 
+  const handleOpenBuzzModal = () => {
+    setOpen(true)
+  }
+
+  const onHide = () => {
+    setBuzzModalStatus(false)
+    setOpen(false)
+    if (isBuzzIntent) {
+      history.push('/')
+    }
+  }
+
+  const floatingButtonStyle = {
+    marginLeft: width > 1026 && 530, right: width < 1026 && 30,
+  }
+
   return (
     <React.Fragment>
       <Row style={{ padding: 0, margin: 0 }}>
@@ -276,6 +307,12 @@ const GuardedAppFrame = (props) => {
             <div className={classes.main}>
               <React.Fragment>
                 {renderRoutes(route.routes)}
+                {minify && (
+                  <Fab onClick={handleOpenBuzzModal} size="medium" color="secondary" aria-label="add" style={{...floatStyle, ...floatingButtonStyle}}>
+                    <BuzzIcon />
+                  </Fab>
+                )}
+                <BuzzFormModal show={open} onHide={onHide} />
               </React.Fragment>
             </div>
           </div>
@@ -301,6 +338,7 @@ const GuardedAppFrame = (props) => {
 const mapStateToProps = (state) => ({
   loading: pending(state, 'CLEAR_NOTIFICATIONS_REQUEST'),
   count: state.polling.get('count'),
+  buzzModalStatus: state.interfaces.get('buzzModalStatus'),
 })
 
 const mapDispatchToProps = (dispatch) => ({
@@ -309,6 +347,7 @@ const mapDispatchToProps = (dispatch) => ({
     clearSearchPosts,
     clearNotificationsRequest,
     broadcastNotification,
+    setBuzzModalStatus,
   }, dispatch),
 })
 

diff --git a/src/components/layout/SideBarLeft/index.js b/src/components/layout/SideBarLeft/index.js
@@ -46,7 +46,7 @@ const useStyles = createUseStyles(theme => ({
     width: 'max-content',
     fontSize: 18,
     padding: 8,
-    marginBottom: 15,
+    marginBottom: 8,
     ...theme.left.sidebar.items.icons,
     '& a': {
       color: theme.left.sidebar.items.color,
@@ -72,7 +72,7 @@ const useStyles = createUseStyles(theme => ({
   },
   minifyItems: {
     textAlign: 'left',
-    marginBottom: 15,
+    marginBottom: 5,
     ...theme.left.sidebar.items.icons,
     '& a': {
       color: theme.left.sidebar.items.color,
@@ -106,7 +106,7 @@ const useStyles = createUseStyles(theme => ({
     },
   },
   navLinkContainer: {
-    marginTop: 20,
+    marginTop: 15,
     fontSize: 14,
   },
   bottom: {
@@ -414,7 +414,7 @@ const SideBarLeft = (props) => {
                   active={location.pathname}
                 />
               ))}
-              {!is_subscribe && (
+              {!is_subscribe && !minify && (
                 <ContainedButton
                   transparent={true}
                   fontSize={14}
@@ -436,6 +436,7 @@ const SideBarLeft = (props) => {
               )}
               {minify && (
                 <IconButton
+                  style={{display: 'none'}}
                   size="medium"
                   classes={{
                     root: classes.buzzButton,

diff --git a/src/components/pages/Feeds/index.js b/src/components/pages/Feeds/index.js
@@ -31,6 +31,7 @@ import { anchorTop } from 'services/helper'
 import { isMobile } from 'react-device-detect'
 import { Link } from 'react-router-dom'
 
+
 const useStyles = createUseStyles(theme => ({
   wrapper: {
     ...theme.font,
@@ -113,7 +114,7 @@ const Feeds = React.memo((props) => {
     getHomePostsRequest(permlink, author)
     // eslint-disable-next-line
   }, [last])
-
+  
   return (
     <React.Fragment>
       <HelmetGenerator page='Home' />
@@ -136,7 +137,6 @@ const Feeds = React.memo((props) => {
 })
 
 const mapStateToProps = (state) => ({
-  buzzModalStatus: state.interfaces.get('buzzModalStatus'),
   loading: pending(state, 'GET_HOME_POSTS_REQUEST'),
   isHomeVisited: state.posts.get('isHomeVisited'),
   items: state.posts.get('home'),

diff --git a/src/components/sections/CreateBuzzForm/index.js b/src/components/sections/CreateBuzzForm/index.js
@@ -382,6 +382,11 @@ const CreateBuzzForm = (props) => {
   }
 
   const handleClickPublishPost = () => {
+
+    // delete post from draft
+    savePostAsDraft("")
+    savePostAsDraftToStorage("")
+
     if (buzzToTwitter) {
       invokeTwitterIntent(content)
     }