21paradox · 21paradox · Sep 17, 2019 · Sep 17, 2019
diff --git a/src/components/BountyDeletedWarning/index.js b/src/components/BountyDeletedWarning/index.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import styled from 'styled-components';
+import Tooltip from '../Tooltip';
+import { i18nTxt } from '../../utils';
+
+const ItemWarning = styled.span`
+  margin-left: 10px;
+  i {
+    font-size: 18px;
+    color: rgb(240, 69, 58);
+  }
+`;
+
+export default function BountyDeletedWarning() {
+  return (
+    <ItemWarning>
+      <span className="item-warning">
+        <Tooltip direction="topRight" tipSpan={<i className="material-icons dp48">info</i>}>
+          {i18nTxt('The Bounty has been offline from its corresponding national station and no longer supports viewing')}
+        </Tooltip>
+      </span>
+    </ItemWarning>
+  );
+}
diff --git a/src/components/PageHead/index.js b/src/components/PageHead/index.js
@@ -226,7 +226,7 @@ class PageHead extends Component {
   };
 
   render() {
-    const { head, location, updateCommon, lang, updateHead } = this.props;
+    const { head, location, updateCommon, lang, updateHead, history } = this.props;
     const { homeSticky } = this.state;
     let wrapClass;
     if (isPath(location, '/')) {
@@ -336,7 +336,7 @@ class PageHead extends Component {
                   updateCommon({
                     lang: v.value,
                   });
-                  window.location.reload();
+                  history.push('/');
                 },
                 options: [
                   {

diff --git a/src/pages/Bounty/commonStyle.js b/src/pages/Bounty/commonStyle.js
@@ -169,6 +169,10 @@ export const MyBounSolunDiv = styled(StyledWrapper)`
       vertical-align: middle;
     }
   }
+  .item-link.disabled {
+    cursor: default;
+    pointer-events: none;
+  }
   .item-head {
     display: flex;
     justify-content: space-between;
@@ -200,13 +204,6 @@ export const MyBounSolunDiv = styled(StyledWrapper)`
       font-size: 14px;
       margin-right: 12px;
     }
-    .item-warning {
-      margin-left: 10px;
-      i {
-        font-size: 18px;
-        color: rgb(240, 69, 58);
-      }
-    }
     .reject-tips {
       margin-top: 8px;
       width: 520px;

diff --git a/src/pages/Bounty/mybounty.js b/src/pages/Bounty/mybounty.js
@@ -9,8 +9,9 @@ import BackHeadDiv from '../../components/BackHeadDiv';
 import { BOUNTY_STATUS_ENUM } from '../../constants';
 import * as s2 from '../UserInfo/commonStyle';
 import { fmtToDay, getStatus, auth, commonPropTypes, i18nTxt } from '../../utils';
-import Tooltip from '../../components/Tooltip';
+import BountyDeletedWarning from '../../components/BountyDeletedWarning';
 // import * as s2 from './commonStyle';
+
 class MyBounty extends Component {
   constructor(...args) {
     super(...args);
@@ -34,16 +35,6 @@ class MyBounty extends Component {
     document.title = i18nTxt('My Bounties');
   }
 
-  renderWarning = () => {
-    return (
-      <span className="item-warning">
-        <Tooltip direction="topRight" tipSpan={<i className="material-icons dp48">info</i>}>
-          {i18nTxt('The Bounty has been offline from its corresponding national station and no longer supports viewing')}
-        </Tooltip>
-      </span>
-    );
-  };
-
   render() {
     const { myBounty, getMyBounty, getMyJoinedBounty, history, updateMy } = this.props;
     return (
@@ -114,7 +105,7 @@ class MyBounty extends Component {
                   <div className="my-bounty-item clearfix">
                     <div className="item-head">
                       <h5>{v.title}</h5>
-                      <Link className="item-link" to={`/view-bounty?bountyId=${v.id}`}>
+                      <Link className={`item-link ${v.transDeleted ? 'disabled' : ''}`} to={`/view-bounty?bountyId=${v.id}`}>
                         <span>{i18nTxt('VIEW MORE')}</span>
                         <i className="material-icons dp48">chevron_right</i>
                       </Link>
@@ -125,7 +116,7 @@ class MyBounty extends Component {
                       <span className="item-status" style={rejectColor}>
                         {getStatus(v.status)}
                       </span>
-                      {v.transDeleted && this.renderWarning()}
+                      {v.transDeleted && <BountyDeletedWarning />}
                     </div>
                     {rejectTips}
                   </div>
@@ -180,7 +171,7 @@ class MyBounty extends Component {
                   <div className="my-bounty-item clearfix">
                     <div className="item-head">
                       <h5>{v.title}</h5>
-                      <Link className="item-link" to={`/view-bounty?bountyId=${v.id}`}>
+                      <Link className={`item-link ${v.transDeleted ? 'disabled' : ''}`} to={`/view-bounty?bountyId=${v.id}`}>
                         <span>{i18nTxt('VIEW MORE')}</span>
                         <i className="material-icons dp48">chevron_right</i>
                       </Link>
@@ -191,6 +182,7 @@ class MyBounty extends Component {
                       <span className="item-status" style={rejectColor}>
                         {getStatus(v.status)}
                       </span>
+                      {v.transDeleted && <BountyDeletedWarning />}
                     </div>
                     {rejectTips}
                   </div>

diff --git a/src/pages/Solution/mysolution.js b/src/pages/Solution/mysolution.js
@@ -8,6 +8,7 @@ import * as s from '../Bounty/commonStyle';
 import BackHeadDiv from '../../components/BackHeadDiv';
 import { SOLUTION_STATUS_ENUM } from '../../constants';
 import { fmtToDay, getStatus, auth, commonPropTypes, i18nTxt } from '../../utils';
+import BountyDeletedWarning from '../../components/BountyDeletedWarning';
 
 const MyBounSolunDiv = styled(s.MyBounSolunDiv)`
   .update-progress {
@@ -103,7 +104,10 @@ class MySolution extends Component {
                 <div className="my-bounty-item clearfix">
                   <div className="item-head">
                     <h5>{v.title}</h5>
-                    <Link className="item-link" to={`/view-submission?submissionId=${v.id}&from=mysubmission`}>
+                    <Link
+                      className={`item-link ${v.transDeleted ? 'disabled' : ''}`}
+                      to={`/view-submission?submissionId=${v.id}&from=mysubmission`}
+                    >
                       <span>{i18nTxt('VIEW MORE')}</span>
                       <i className="material-icons dp48">chevron_right</i>
                     </Link>
@@ -114,6 +118,7 @@ class MySolution extends Component {
                     <span className="item-status" style={rejectColor}>
                       {getStatus(v.status)}
                     </span>
+                    {v.transDeleted && <BountyDeletedWarning />}
                   </div>
                   {updateDiv}
                   {rejectTips}

diff --git a/src/pages/UserInfo/my-likes.js b/src/pages/UserInfo/my-likes.js
@@ -10,6 +10,7 @@ import BackHeadDiv from '../../components/BackHeadDiv';
 import * as s2 from './commonStyle';
 import Modal from '../../components/Modal';
 import { fmtToDay, auth, commonPropTypes, getStatus, i18nTxt } from '../../utils';
+import BountyDeletedWarning from '../../components/BountyDeletedWarning';
 
 const Wrapper = styled(StyledWrapper)`
   padding: 40px;
@@ -72,6 +73,10 @@ const Wrapper = styled(StyledWrapper)`
         vertical-align: middle;
       }
     }
+    .arrow-link.disabled {
+      cursor: default;
+      pointer-events: none;
+    }
   }
   .like-subm-from {
     color: #999;
@@ -251,6 +256,7 @@ class MyLikes extends Component {
                         <div className="like-sub">
                           <span style={{ color: '#666' }}>{fmtToDay(bounty.updatedAt || bounty.createdAt)}</span>
                           <span className="like-state">{getStatus(bounty.status)}</span>
+                          {bounty.transDeleted && <BountyDeletedWarning />}
                         </div>
                       </td>
                       <td className="align-right">
@@ -259,7 +265,7 @@ class MyLikes extends Component {
                         </button>
                       </td>
                       <td className="align-right">
-                        <Link to={`/view-bounty?bountyId=${bounty.id}`} className="arrow-link">
+                        <Link to={`/view-bounty?bountyId=${bounty.id}`} className={`arrow-link ${bounty.transDeleted ? 'disabled' : ''}`}>
                           <span>{i18nTxt('VIEW MORE')}</span>
                           <i className="material-icons dp48">chevron_right</i>
                         </Link>
@@ -324,6 +330,7 @@ class MyLikes extends Component {
                           <span className="like-subm-from">
                             {i18nTxt('Submission from')} {solution.user.nickname}
                           </span>
+                          {solution.transDeleted && <BountyDeletedWarning />}
                         </div>
                       </td>
                       <td className="align-right">
@@ -332,7 +339,10 @@ class MyLikes extends Component {
                         </button>
                       </td>
                       <td className="align-right">
-                        <Link to={`/view-submission?submissionId=${solution.id}`} className="arrow-link">
+                        <Link
+                          to={`/view-submission?submissionId=${solution.id}`}
+                          className={`arrow-link ${solution.transDeleted ? 'disabled' : ''}`}
+                        >
                           <span>{i18nTxt('VIEW MORE')}</span>
                           <i className="material-icons dp48">chevron_right</i>
                         </Link>