Merge pull request #26 from EOS-uiux-Solutions/feat/sharable-links

added feature to share/copy story link

Author: kaybhutani

.github/workflows/deploy.yml

@@ -2,39 +2,39 @@ name: Deploy site
 
 on:
   push:
-    branches: [ main ]
+    branches: [main]
 
 jobs:
   deploy:
     runs-on: ubuntu-latest
 
     steps:
-    - name: Checkout repository code
-      uses: actions/checkout@v2
+      - name: Checkout repository code
+        uses: actions/checkout@v2
 
-    - name: Cache node_modules
-      id: cache-node-modules
-      uses: actions/cache@v2
-      with:
-        path: node_modules
-        key: node_modules-deploy-${{ hashFiles('package-lock.json') }}
+      - name: Cache node_modules
+        id: cache-node-modules
+        uses: actions/cache@v2
+        with:
+          path: node_modules
+          key: node_modules-deploy-${{ hashFiles('package-lock.json') }}
 
-    - name: Install node modules
-      if: steps.cache-node-modules.outputs.cache-hit != 'true'
-      run: npm install
+      - name: Install node modules
+        if: steps.cache-node-modules.outputs.cache-hit != 'true'
+        run: npm install
 
-    - name: Build the site
-      run: |
-        echo "$CONFIG_JSON" > src/config.json
-        npm run build
-        cp build/index.html build/404.html
-      env:
-        CONFIG_JSON: ${{ secrets.CONFIG_JSON }}
+      - name: Build the site
+        run: |
+          echo "$CONFIG_JSON" > src/config.json
+          npm run build
+          cp build/index.html build/404.html
+        env:
+          CONFIG_JSON: ${{ secrets.CONFIG_JSON }}
 
-    - name: Deploy
-      uses: s0/git-publish-subdir-action@develop
-      env:
-        REPO: self
-        BRANCH: gh-pages
-        FOLDER: build
-        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - name: Deploy
+        uses: s0/git-publish-subdir-action@develop
+        env:
+          REPO: self
+          BRANCH: gh-pages
+          FOLDER: build
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/github-ci.yml

@@ -1,6 +1,6 @@
 name: Run Tests
 
-on: [ push, pull_request ]
+on: [push, pull_request]
 
 jobs:
   cache_node_modules:
@@ -16,7 +16,7 @@ jobs:
         with:
           path: node_modules
           key: node_modules-${{ hashFiles('package-lock.json') }}
-        
+
       - name: Install dependencies
         if: steps.cache-node-modules.outputs.cache-hit != 'true'
         run: npm install

package-lock.json

@@ -24,7 +24,8 @@
     "react-markdown": "^5.0.2",
     "react-promise-tracker": "^2.1.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.1"
+    "react-scripts": "3.4.1",
+    "react-share": "^4.4.0"
   },
   "devDependencies": {
     "cypress": "^4.12.1",

package.json

@@ -11,3 +11,14 @@
     padding-right: 6em;
   }
 }
+
+.share-story {
+  background-color: transparent;
+  border: 0;
+  cursor: pointer;
+  margin-left: 1em;
+}
+
+.share-button {
+  margin-right: 2em;
+}

src/assets/scss/pages/story.scss

@@ -4,6 +4,16 @@ import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
 import axios from 'axios'
 import { apiURL } from '../config.json'
 import { trackPromise, usePromiseTracker } from 'react-promise-tracker'
+import {
+  FacebookShareButton,
+  TwitterShareButton,
+  LinkedinShareButton,
+  WhatsappShareButton,
+  FacebookIcon,
+  TwitterIcon,
+  LinkedinIcon,
+  WhatsappIcon
+} from 'react-share'
 
 import { Helmet } from 'react-helmet'
 
@@ -14,6 +24,7 @@ import LoadingIndicator from '../modules/LoadingIndicator'
 import Navigation from '../components/Navigation'
 import { Link, navigate } from '@reach/router'
 import Vote from '../components/Vote'
+import Modal from '../components/Modal'
 
 const Story = (props) => {
   const { storyId } = props
@@ -30,6 +41,12 @@ const Story = (props) => {
 
   const { promiseInProgress } = usePromiseTracker()
 
+  const [isOpen, setIsOpen] = useState(false)
+
+  const togglePopup = () => {
+    setIsOpen(!isOpen)
+  }
+
   useEffect(() => {
     const fetchStory = async () => {
       const response = await axios.post(
@@ -114,6 +131,20 @@ const Story = (props) => {
     return null
   }
 
+  const copy = () => {
+    const dummy = document.createElement('input')
+    const text = window.location.href
+
+    document.body.appendChild(dummy)
+    dummy.value = text
+    dummy.select()
+    document.execCommand('copy')
+    document.body.removeChild(dummy)
+  }
+
+  const hashtagsArray = ['EOS', 'userstory']
+  const title = 'EOS User Story - POST Stories. GET Features.'
+
   return (
     <>
       <Helmet>
@@ -184,12 +215,20 @@ const Story = (props) => {
               )}
               <div className='story-buttons-container'>
                 {editMode && !editor ? (
-                  <Button
-                    className='btn btn-default'
-                    onClick={() => setEditor(true)}
-                  >
-                    Edit
-                  </Button>
+                  <>
+                    <Button
+                      className='btn btn-default'
+                      onClick={() => setEditor(true)}
+                    >
+                      Edit
+                    </Button>
+                    <Button className='share-story' onClick={togglePopup}>
+                      <i className='eos-icons'> share </i>
+                    </Button>
+                    <Button className='share-story' onClick={copy}>
+                      <i className='eos-icons'>content_copy</i>
+                    </Button>
+                  </>
                 ) : (
                   ''
                 )}
@@ -210,6 +249,51 @@ const Story = (props) => {
                 ) : (
                   ''
                 )}
+                {isOpen && (
+                  <Modal
+                    content={
+                      <>
+                        <h1>Share</h1>
+                        <FacebookShareButton
+                          url={window.location}
+                          className='share-button'
+                          quote={title}
+                          hashtag={'#EOS'}
+                          onShareWindowClose={togglePopup}
+                        >
+                          <FacebookIcon />
+                        </FacebookShareButton>
+                        <TwitterShareButton
+                          url={window.location}
+                          className='share-button'
+                          title={title}
+                          hashtags={hashtagsArray}
+                          onShareWindowClose={togglePopup}
+                        >
+                          <TwitterIcon />
+                        </TwitterShareButton>
+                        <LinkedinShareButton
+                          url={window.location}
+                          className='share-button'
+                          onShareWindowClose={togglePopup}
+                        >
+                          <LinkedinIcon />
+                        </LinkedinShareButton>
+                        <WhatsappShareButton
+                          url={window.location}
+                          className='share-button'
+                          title={title}
+                          separator=' '
+                          onShareWindowClose={togglePopup}
+                        >
+                          <WhatsappIcon />
+                        </WhatsappShareButton>
+                      </>
+                    }
+                    handleClose={togglePopup}
+                    active={isOpen}
+                  />
+                )}
               </div>
               <Comments storyId={storyId} />
             </div>