[New Feature] Add othe social network sharing buttons

src/components/post/PostComponent.tsx

@@ -13,7 +13,6 @@ import { getTranslate, getActiveLanguage } from 'react-localize-redux'
 import { Card, CardActions, CardHeader, CardMedia, CardContent } from 'material-ui'
 import Typography from 'material-ui/Typography'
 import SvgShare from 'material-ui-icons/Share'
-import SvgLink from 'material-ui-icons/Link'
 import SvgComment from 'material-ui-icons/Comment'
 import SvgFavorite from 'material-ui-icons/Favorite'
 import SvgFavoriteBorder from 'material-ui-icons/FavoriteBorder'
@@ -39,6 +38,7 @@ import reactStringReplace from 'react-string-replace'
 
 // - Import app components
 import CommentGroup from 'components/commentGroup'
+import ShareDialog from 'components/shareDialog'
 import PostWrite from 'components/postWrite'
 import Img from 'components/img'
 import IconButtonElement from 'layouts/IconButtonElement'
@@ -80,18 +80,6 @@ const styles = (theme: any) => ({
     pointerEvents: 'none',
     zIndex: 0
   },
-  shareLinkPaper: {
-    minHeight: 80,
-    padding: 10,
-    minWidth: 460
-  },
-  clipboard: {
-    fontSize: '18px',
-    textAlign: 'center',
-    marginTop: '10px',
-    color: '#1e882d',
-    fontWeight: 400
-  },
   postBody: {
     wordWrap: 'break-word',
     color: 'rgba(0, 0, 0, 0.87)',
@@ -103,6 +91,14 @@ const styles = (theme: any) => ({
   image: {
     width: '100%',
     height: 500
+  },
+  fullPageXs: {
+    [theme.breakpoints.down('xs')]: {
+      width: '100%',
+      height: '100%',
+      margin: 0,
+      overflowY: 'auto'
+    }
   }
 })
 
@@ -450,31 +446,15 @@ export class PostComponent extends Component<IPostComponentProps, IPostComponent
 
         <CommentGroup open={this.state.openComments} comments={commentList} ownerPostUserId={post.ownerUserId!} onToggleRequest={this.handleOpenComments} isPostOwner={this.props.isPostOwner!} disableComments={post.disableComments!} postId={post.id!} />
 
-        {/* Copy link dialog*/}
-        <Dialog
-          title='Share On'
-          open={this.state.shareOpen}
-          onClose={this.handleCloseShare}
-        >
-             <Paper className={classes.shareLinkPaper}>
-              {!this.state.openCopyLink
-             ? (<MenuList>
-                <MenuItem onClick={this.handleCopyLink} >
-                  <ListItemIcon>
-                    <SvgLink />
-                  </ListItemIcon>
-                  <ListItemText inset primary={translate!('post.copyLinkButton')} />
-                </MenuItem>
-              </MenuList>)
-            : <div>
-              <TextField autoFocus fullWidth={true} id='text-field-default' defaultValue={`${location.origin}/${post.ownerUserId}/posts/${post.id}`} />
-              <Typography className={classNames('animate-top', classes.clipboard)} variant='headline' component='h2'>
-              Link has been copied to clipboard ...
-          </Typography>
-              </div>}
-            </Paper>
-        </Dialog>
+        <ShareDialog 
+        onClose={this.handleCloseShare} 
+        shareOpen={this.state.shareOpen} 
+        onCopyLink={this.handleCopyLink} 
+        openCopyLink={this.state.openCopyLink}
+        post={post} 
 
+        />
+       
         <PostWrite
           open={this.state.openPostWrite}
           onRequestClose={this.handleClosePostWrite}

src/components/shareDialog/IShareDialogComponentProps.ts

@@ -0,0 +1,40 @@
+import { Post } from 'core/domain/posts'
+
+export interface IShareDialogComponentProps {
+
+  /**
+   * Whether share dialog is open
+   */
+  shareOpen: boolean
+
+  /**
+   * On close share dialog
+   */
+  onClose: () => void
+
+  /**
+   * Whether copy link is displayed
+   */
+  openCopyLink: boolean
+
+  /**
+   * On copy link
+   */
+  onCopyLink: () => void
+
+  /**
+   * The post object for sharing
+   */
+  post: Post
+
+  /**
+   * Styles
+   */
+  classes?: any
+
+  /**
+   * Translate to locale string
+   */
+  translate?: (state: any) => any
+
+}

src/components/shareDialog/IShareDialogComponentState.ts

@@ -0,0 +1,4 @@
+
+export interface IShareDialogComponentState {
+
+}

src/components/shareDialog/ShareDialogComponent.tsx

@@ -0,0 +1,213 @@
+// - Import react components
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import SvgImage from 'material-ui-icons/Image'
+import { withStyles } from 'material-ui/styles'
+import { getTranslate, getActiveLanguage } from 'react-localize-redux'
+import classNames from 'classnames'
+
+import {
+  FacebookShareButton,
+  FacebookIcon,
+
+  TwitterShareButton,
+  TwitterIcon,
+
+  GooglePlusShareButton,
+  GooglePlusIcon,
+
+  LinkedinShareButton,
+  LinkedinIcon
+} from 'react-share'
+
+// - Import app components
+
+// - Import API
+
+// - Import actions
+import { IShareDialogComponentProps } from './IShareDialogComponentProps'
+import { IShareDialogComponentState } from './IShareDialogComponentState'
+import { Dialog, Paper, MenuList, MenuItem, ListItemIcon, ListItemText, TextField, Typography } from 'material-ui'
+import SvgLink from 'material-ui-icons/Link'
+
+const styles = (theme: any) => ({
+  image: {
+    verticalAlign: 'top',
+    maxWidth: '100%',
+    minWidth: '100%',
+    width: '100%'
+  },
+  clipboard: {
+    fontSize: '18px',
+    textAlign: 'center',
+    marginTop: '10px',
+    color: '#1e882d',
+    fontWeight: 400
+  },
+  networkShare: {
+    width: '100%',
+    height: '100%'
+  },
+  fullPageXs: {
+    [theme.breakpoints.down('xs')]: {
+      width: '100%',
+      height: '100%',
+      margin: 0,
+      overflowY: 'auto'
+    }
+  },
+  shareLinkPaper: {
+    minHeight: 80,
+    padding: 10,
+    minWidth: 460
+  }
+})
+
+/**
+ * Create component class
+ */
+export class ShareDialogComponent extends Component<IShareDialogComponentProps, IShareDialogComponentState> {
+
+  /**
+   * Component constructor
+   * @param  {object} props is an object properties of component
+   */
+  constructor(props: IShareDialogComponentProps) {
+    super(props)
+
+    // Defaul state
+    this.state = {
+
+    }
+
+    // Binding functions to `this`
+
+  }
+
+  /**
+   * Reneder component DOM
+   * @return {react element} return the DOM which rendered by component
+   */
+  render() {
+
+    let { classes, translate, shareOpen, onClose, openCopyLink, post, onCopyLink } = this.props
+    return (
+      <Dialog
+        className={classes.fullPageXs}
+        title='Share On'
+        open={shareOpen}
+        onClose={onClose}
+      >
+        <Paper className={classes.shareLinkPaper}>
+          {!openCopyLink
+            ? (<MenuList>
+              <div>
+                <FacebookShareButton
+                  onShareWindowClose={onClose}
+                  url={`https://test-4515a.firebaseapp.com/${post.ownerUserId}/posts/${post.id}`}
+                  quote={post.body}
+                  hashtag={`#${post.tags![0]}`}>
+                  <MenuItem >
+                    <ListItemIcon classes={{ root: classes.networkShare }}>
+                      <FacebookIcon
+                        size={32}
+                        round />
+                    </ListItemIcon>
+                    <ListItemText inset primary={translate!('post.facebookButton')} />
+                  </MenuItem>
+                </FacebookShareButton>
+              </div>
+              <div>
+                <TwitterShareButton
+                  onShareWindowClose={onClose}
+                  url={`https://test-4515a.firebaseapp.com/${post.ownerUserId}/posts/${post.id}`}
+                  quote={post.body}
+                  hashtag={`#${post.tags![0]}`}>
+                  <MenuItem >
+                    <ListItemIcon classes={{ root: classes.networkShare }}>
+                      <TwitterIcon
+                        size={32}
+                        round />
+                    </ListItemIcon>
+                    <ListItemText inset primary={translate!('post.twitterButton')} />
+                  </MenuItem>
+              </TwitterShareButton>
+              </div>
+              <div>
+                <LinkedinShareButton
+                  onShareWindowClose={onClose}
+                  url={`https://test-4515a.firebaseapp.com/${post.ownerUserId}/posts/${post.id}`}
+                  quote={post.body}
+                  hashtag={`#${post.tags![0]}`}>
+                  <MenuItem >
+                    <ListItemIcon classes={{ root: classes.networkShare }}>
+                      <LinkedinIcon
+                        size={32}
+                        round />
+                    </ListItemIcon>
+                    <ListItemText inset primary={translate!('post.linkedinButton')} />
+                  </MenuItem>
+              </LinkedinShareButton>
+              </div>
+              <div>
+                <GooglePlusShareButton
+                  onShareWindowClose={onClose}
+                  url={`https://test-4515a.firebaseapp.com/${post.ownerUserId}/posts/${post.id}`}
+                  quote={post.body}
+                  hashtag={`#${post.tags![0]}`}>
+                  <MenuItem >
+                    <ListItemIcon classes={{ root: classes.networkShare }}>
+                      <GooglePlusIcon
+                        size={32}
+                        round />
+                    </ListItemIcon>
+                    <ListItemText inset primary={translate!('post.googlePlusButton')} />
+                  </MenuItem>
+              </GooglePlusShareButton>
+              </div>
+              <MenuItem onClick={onCopyLink} >
+                <ListItemIcon>
+                  <SvgLink />
+                </ListItemIcon>
+                <ListItemText inset primary={translate!('post.copyLinkButton')} />
+              </MenuItem>
+            </MenuList>)
+            : <div>
+              <TextField autoFocus fullWidth={true} id='text-field-default' defaultValue={`${location.origin}/${post.ownerUserId}/posts/${post.id}`} />
+              <Typography className={classNames('animate-top', classes.clipboard)} variant='headline' component='h2'>
+                Link has been copied to clipboard ...
+        </Typography>
+            </div>}
+        </Paper>
+      </Dialog>
+    )
+  }
+}
+
+/**
+ * Map dispatch to props
+ * @param  {func} dispatch is the function to dispatch action to reducers
+ * @param  {object} ownProps is the props belong to component
+ * @return {object}          props of component
+ */
+const mapDispatchToProps = (dispatch: any, ownProps: IShareDialogComponentProps) => {
+  return {
+
+  }
+}
+
+/**
+ * Map state to props
+ * @param  {object} state is the obeject from redux store
+ * @param  {object} ownProps is the props belong to component
+ * @return {object}          props of component
+ */
+const mapStateToProps = (state: any, ownProps: IShareDialogComponentProps) => {
+  return {
+    translate: getTranslate(state.locale)
+  }
+}
+
+// - Connect component to redux store
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles as any)(ShareDialogComponent as any) as any)

src/components/shareDialog/index.ts

@@ -0,0 +1,2 @@
+import ShareDialogComponent from './ShareDialogComponent'
+export default ShareDialogComponent

src/locale/en.json

@@ -30,7 +30,11 @@
         "postButton": "POST",
         "cancelButton": "CANCEL",
         "updateButton": "UPDATE",
-        "copyLinkButton": "Copy Link"
+        "copyLinkButton": "Copy Link",
+        "facebookButton": "Share in Facebook",
+        "twitterButton": "Share in Twitter",
+        "linkedinButton": "Share in Linkedin",
+        "googlePlusButton": "Share in Google+"
 
     },
     "imageGallery": {

src/typings/react-share.ts

@@ -0,0 +1 @@
+declare module 'react-share'