fix: favourite, share modal, reminder etc

src/components/helpers/notification/notification.jsx

@@ -1,18 +0,0 @@
-import { memo } from 'react';
-
-import variables from 'modules/variables';
-import './preview.scss';
-
-function Notification(props) {
-  return (
-    <div className="preview-mode">
-      <span className="title">{variables.getMessage('modals.main.settings.reminder.title')}</span>
-      <span className="subtitle">{variables.getMessage('modals.welcome.preview.description')}</span>
-      <button onClick={() => props.setup()}>
-        {variables.getMessage('modals.welcome.preview.continue')}
-      </button>
-    </div>
-  );
-}
-
-export default memo(Notification);

src/components/helpers/sharemodal/ShareModal.jsx

@@ -10,18 +10,23 @@ import { toast } from 'react-toastify';
 import './sharemodal.scss';
 
 function ShareModal({ modalClose, data }) {
+  if (data.startsWith('https://cdn.')) {
+    data = {
+      url: data,
+      name: 'this image',
+    };
+  } else {
+    data = {
+      url: data,
+      name: 'this marketplace item',
+    };
+  }
+
   const copyLink = () => {
-    navigator.clipboard.writeText(data);
+    navigator.clipboard.writeText(data.url);
     toast(variables.getMessage('modals.share.copy_link'));
   };
 
-  // look into what's wrong with this
-  try {
-    if (!data.data) {
-      data.data.name = 'this image';
-    }
-  } catch (e) {}
-
   return (
     <div className="smallModal">
       <div className="shareHeader">
@@ -38,7 +43,7 @@ function ShareModal({ modalClose, data }) {
             onClick={() =>
               window
                 .open(
-                  `https://twitter.com/intent/tweet?text=Check out ${data.name} on @getmue: ${data}`,
+                  `https://twitter.com/intent/tweet?text=Check out ${data.name} on @getmue: ${data.url}`,
                   '_blank',
                 )
                 .focus()
@@ -50,7 +55,7 @@ function ShareModal({ modalClose, data }) {
         <Tooltip title="Facebook">
           <button
             onClick={() =>
-              window.open(`https://www.facebook.com/sharer/sharer.php?u=${data}`, '_blank').focus()
+              window.open(`https://www.facebook.com/sharer/sharer.php?u=${data.url}`, '_blank').focus()
             }
           >
             <FaFacebookF />
@@ -78,7 +83,7 @@ function ShareModal({ modalClose, data }) {
             onClick={() =>
               window
                 .open(
-                  `https://api.qrserver.com/v1/create-qr-code/?size=154x154&data=${data}`,
+                  `https://api.qrserver.com/v1/create-qr-code/?size=154x154&data=${data.url}`,
                   '_blank',
                 )
                 .focus()
@@ -91,7 +96,7 @@ function ShareModal({ modalClose, data }) {
           <button
             onClick={() =>
               window
-                .open(`http://connect.qq.com/widget/shareqq/index.html?url=${data}`, '_blank')
+                .open(`http://connect.qq.com/widget/shareqq/index.html?url=${data.url}`, '_blank')
                 .focus()
             }
           >
@@ -100,7 +105,7 @@ function ShareModal({ modalClose, data }) {
         </Tooltip>
       </div>
       <div className="copy">
-        <input type="text" value={data} className="left field" readOnly />
+        <input type="text" value={data.url} className="left field" readOnly />
         <Tooltip title={variables.getMessage('modals.share.copy_link')} placement="top">
           <button onClick={() => copyLink()}>
             <MdContentCopy />

src/components/modals/main/tabs/backend/Tabs.jsx

@@ -31,6 +31,11 @@ export default class Tabs extends PureComponent {
     });
   };
 
+  hideReminder() {
+    localStorage.setItem('showReminder', false);
+    document.querySelector('.reminder-info').style.display = 'none';
+  }
+
   render() {
     const display = localStorage.getItem('showReminder') === 'true' ? 'flex' : 'none';
 
@@ -40,7 +45,7 @@ export default class Tabs extends PureComponent {
           <span className="title">
             {variables.getMessage('modals.main.settings.reminder.title')}
           </span>
-          <span className="closeModal" onClick={ () => localStorage.setItem('showReminder', false)}>
+          <span className="closeModal" onClick={() => this.hideReminder()}>
             <MdClose />
           </span>
         </div>

src/components/widgets/background/Background.jsx

@@ -37,7 +37,9 @@ export default class Background extends PureComponent {
 
   async setBackground() {
     // clean up the previous image to prevent a memory leak
-    if (this.state.blob) URL.revokeObjectURL(this.state.blob);
+    if (this.blob) {
+      URL.revokeObjectURL(this.blob);
+    }
 
     const backgroundImage = document.getElementById('backgroundImage');
 
@@ -74,9 +76,9 @@ export default class Background extends PureComponent {
         backgroundImage.style.backgroundImage = `url(${canvas.toDataURL()})`;
       }
 
-      this.state.blob = URL.createObjectURL(await (await fetch(url)).blob());
+      this.blob = URL.createObjectURL(await (await fetch(url)).blob());
       backgroundImage.classList.add('backgroundTransform');
-      backgroundImage.style.backgroundImage = `url(${this.state.blob})`;
+      backgroundImage.style.backgroundImage = `url(${this.blob})`;
     } else {
       // custom colour
       backgroundImage.setAttribute('style', this.state.style);
@@ -165,7 +167,7 @@ export default class Background extends PureComponent {
       offline = true;
     }
 
-    const setFavourited = ({ type, url, credit, location, camera }) => {
+    const setFavourited = ({ type, url, credit, location, camera, pun, offline }) => {
       if (type === 'random_colour' || type === 'random_gradient') {
         return this.setState({
           type: 'colour',
@@ -178,6 +180,9 @@ export default class Background extends PureComponent {
           credit,
           location,
           camera,
+          pun,
+          offline,
+          url,
         },
       });
     };

src/components/widgets/background/Favourite.jsx

@@ -77,10 +77,12 @@ export default class Favourite extends PureComponent {
               JSON.stringify({
                 type,
                 url,
-                credit: document.getElementById('credit').textContent || '',
+                credit: this.props.credit || '',
                 location: location?.innerText,
                 camera: camera?.innerText,
                 resolution: document.getElementById('infoResolution').textContent || '',
+                offline: this.props.offline,
+                pun: this.props.pun,
               }),
             );
           }

src/components/widgets/background/PhotoInformation.jsx

@@ -364,7 +364,7 @@ function PhotoInformation({ info, url, api }) {
                   key="favourite"
                   placement="top"
                 >
-                  <Favourite />
+                  <Favourite pun={info.pun} offline={info.offline} credit={info.credit} photoURL={info.url} />
                 </Tooltip>
                 {!info.offline ? (
                   <Tooltip