feat: rolling out share modal for photoinfo

src/components/helpers/sharemodal/ShareModal.jsx

@@ -8,12 +8,12 @@ import { toast } from 'react-toastify';
 
 import './sharemodal.scss';
 
-export default function ShareModal({ modalClose, data }) {
+export default function ShareModal({ modalClose, data, type }) {
   const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
   const url = variables.constants.MARKETPLACE_URL + '/share/' + btoa(data.api_name);
 
   const copyLink = () => {
-    navigator.clipboard.writeText(url);
+    navigator.clipboard.writeText(data);
     toast('Link copied!');
   };
 
@@ -33,7 +33,7 @@ export default function ShareModal({ modalClose, data }) {
             onClick={() =>
               window
                 .open(
-                  `https://twitter.com/intent/tweet?text=Check out ${data.data.name} on @getmue marketplace: ${url}`,
+                  `https://twitter.com/intent/tweet?text=Check out ${data.data.name} on @getmue marketplace: ${data}`,
                   '_blank',
                 )
                 .focus()
@@ -45,7 +45,7 @@ export default function ShareModal({ modalClose, data }) {
         <Tooltip title="Facebook">
           <button
             onClick={() =>
-              window.open(`https://www.facebook.com/sharer/sharer.php?u=${url}`, '_blank').focus()
+              window.open(`https://www.facebook.com/sharer/sharer.php?u=${data}`, '_blank').focus()
             }
           >
             <FaFacebookF />
@@ -59,7 +59,7 @@ export default function ShareModal({ modalClose, data }) {
                   'mailto:email@example.com?subject=Check%20out%20this%20Mue%20addon!&body=' +
                     data.data.name +
                     'on Mue: ' +
-                    url,
+                    data,
                   '_blank',
                 )
                 .focus()
@@ -76,7 +76,7 @@ export default function ShareModal({ modalClose, data }) {
             onClick={() =>
               window
                 .open(
-                  `https://api.qrserver.com/v1/create-qr-code/?size=154x154&data=${url}`,
+                  `https://api.qrserver.com/v1/create-qr-code/?size=154x154&data=${data}`,
                   '_blank',
                 )
                 .focus()
@@ -89,7 +89,7 @@ export default function ShareModal({ modalClose, data }) {
           <button
             onClick={() =>
               window
-                .open(`http://connect.qq.com/widget/shareqq/index.html?url=${url}`, '_blank')
+                .open(`http://connect.qq.com/widget/shareqq/index.html?url=${data}`, '_blank')
                 .focus()
             }
           >
@@ -98,7 +98,7 @@ export default function ShareModal({ modalClose, data }) {
         </Tooltip>
       </div>
       <div className="copy">
-        <input type="text" value={url} className="left field" readOnly />
+        <input type="text" value={data} className="left field" readOnly />
         <Tooltip title="Copy link" placement="top">
           <button onClick={() => copyLink()}>
             <MdContentCopy />

src/components/modals/main/marketplace/Item.jsx

@@ -103,7 +103,7 @@ export default class Item extends PureComponent {
           onRequestClose={() => this.setState({ shareModal: false })}
         >
           <ShareModal
-            data={this.props.data}
+            data={variables.constants.MARKETPLACE_URL + '/share/' + btoa(this.props.data.api_name)}
             modalClose={() => this.setState({ shareModal: false })}
           />
         </Modal>

src/components/modals/welcome/Welcome.jsx

@@ -120,15 +120,6 @@ export default class WelcomeModal extends PureComponent {
             />
           </div>
           <div className="buttons">
-            {this.state.currentTab === 0 ? (
-              <button
-                className="close"
-                style={{ marginRight: '20px' }}
-                onClick={() => this.props.modalSkip()}
-              >
-                {this.getMessage('modals.welcome.buttons.preview')}
-              </button>
-            ) : null}
             {this.state.currentTab !== 0 ? (
               <button
                 className="close"
@@ -137,7 +128,15 @@ export default class WelcomeModal extends PureComponent {
               >
                 {this.getMessage('modals.welcome.buttons.previous')}
               </button>
-            ) : null}
+            ) : (
+              <button
+                className="close"
+                style={{ marginRight: '20px' }}
+                onClick={() => this.props.modalSkip()}
+              >
+                {this.getMessage('modals.welcome.buttons.preview')}
+              </button>
+            )}
             <button className="close" onClick={() => this.changeTab()}>
               {this.state.buttonText}
             </button>

src/components/widgets/background/PhotoInformation.jsx

@@ -12,6 +12,7 @@ import {
   MdSource as Source,
 } from 'react-icons/md';
 import Tooltip from '../../helpers/tooltip/Tooltip';
+import Modal from 'react-modal';
 import ShareModal from '../../helpers/sharemodal/ShareModal';
 //import Hotkeys from 'react-hot-keys';
 import { toast } from 'react-toastify';
@@ -50,6 +51,7 @@ export default function PhotoInformation({ info, url, api }) {
   const [showExtraInfo, setshowExtraInfo] = useState(false);
   const [showOld, setShowOld] = useState(true);
   const [other, setOther] = useState(false);
+  const [shareModal, openShareModal] = useState(false);
 
   if (info.hidden === true || !info.credit) {
     return null;
@@ -199,6 +201,19 @@ export default function PhotoInformation({ info, url, api }) {
       onMouseEnter={() => setOther(true)}
       onMouseLeave={() => setOther(false)}
     >
+      <Modal
+        closeTimeoutMS={300}
+        isOpen={shareModal}
+        className="Modal mainModal"
+        overlayClassName="Overlay"
+        ariaHideApp={false}
+        onRequestClose={() => openShareModal(false)}
+      >
+        <ShareModal
+          data={info.url}
+          modalClose={() => openShareModal(false)}
+        />
+      </Modal>
       {localStorage.getItem('widgetStyle') === 'legacy' && (
         <div className="photoInformation-legacy">
           <MdInfo />
@@ -270,7 +285,7 @@ export default function PhotoInformation({ info, url, api }) {
             <>
               <div className="concept-buttons">
                 <Tooltip title="Share" key="share">
-                  <Share onClick={() => copyImage(info)} />
+                  <Share onClick={() => openShareModal(true)} />
                 </Tooltip>
                 <Tooltip title="Favourite" key="favourite">
                   <Favourite />
@@ -308,10 +323,12 @@ export default function PhotoInformation({ info, url, api }) {
                     {width}x{height}
                   </span>
                 </div>
-                {api ? <div className="concept-row">
-                  <Source />
-                  <span id="infoSource">{api.charAt(0).toUpperCase() + api.slice(1)}</span>
-                </div> : null}
+                {api ? (
+                  <div className="concept-row">
+                    <Source />
+                    <span id="infoSource">{api.charAt(0).toUpperCase() + api.slice(1)}</span>
+                  </div>
+                ) : null}
               </div>
             </>
           ) : null}