rename expiration into expiredAt

resource/locales/en-US/translation.json

@@ -246,7 +246,7 @@
       "restricted": "Access to this page is restricted",
       "stale": "More than {{count}} year has passed since last update.",
       "stale_plural": "More than {{count}} years has passed since last update.",
-      "expiration": "This share link will expire <strong>%s</strong>."
+      "expiration": "This share link will expire <strong>{{expiredAt}}</strong>."
     }
   },
   "page_edit": {

resource/locales/ja/translation.json

@@ -244,7 +244,7 @@
       "unlinked": "このページへのリダイレクトは削除されました。",
       "restricted": "このページの閲覧は制限されています",
       "stale": "このページは最終更新日から{{count}}年以上が経過しています。",
-      "expiration": "このシェアリンクの有効期限は <strong>{{expiration}}</strong> です。"
+      "expiration": "このシェアリンクの有効期限は <strong>{{expiredAt}}</strong> です。"
     }
   },
   "page_edit": {

src/client/js/components/Page/ShareLinkAlert.jsx

@@ -6,10 +6,10 @@ import { withTranslation } from 'react-i18next';
 const ShareLinkAlert = (props) => {
   const { t } = props;
   const shareContent = document.getElementById('is-shared-page');
-  const expiration = new Date(shareContent.getAttribute('data-share-link-expiration'));
-  const createdAt = new Date(shareContent.getAttribute('data-share-link-created-at'));
-  const wholeTime = expiration.getTime() - createdAt.getTime();
-  const remainingTime = expiration.getTime() - new Date().getTime();
+  const expiredAt = shareContent.getAttribute('data-share-link-expired-at');
+  const createdAt = shareContent.getAttribute('data-share-link-created-at');
+  const wholeTime = new Date(expiredAt).getTime() - new Date(createdAt).getTime();
+  const remainingTime = new Date(expiredAt).getTime() - new Date().getTime();
   const percentage = remainingTime / wholeTime * 100;
 
   function specifyColor() {
@@ -27,7 +27,7 @@ const ShareLinkAlert = (props) => {
     <p className={`alert alert-${specifyColor()} py-3 px-4`}>
       <i className="icon-fw icon-link"></i>
       {/* eslint-disable-next-line react/no-danger */}
-      <span dangerouslySetInnerHTML={{ __html: t('page_page.notice.expiration', { expiration }) }} />
+      <span dangerouslySetInnerHTML={{ __html: t('page_page.notice.expiration', { expiredAt }) }} />
     </p>
   );
 };

src/server/views/layout-growi/shared_page.html

@@ -14,7 +14,7 @@
 {% endblock %}
 
 {% block content_main %}
-  <div class="row" id="is-shared-page" data-share-link-expiration="{{ sharelink.expiration|datetz('Y/m/d H:i:s')}}" data-share-link-created-at="{{ sharelink.createdAt|datetz('Y/m/d H:i:s')}}">
+  <div class="row" id="is-shared-page" data-share-link-expired-at="{{ sharelink.expiredAt|datetz('Y/m/d H:i:s')}}" data-share-link-created-at="{{ sharelink.createdAt|datetz('Y/m/d H:i:s')}}">
     <div class="col grw-page-content-container">
      <div id="share-link-alert"></div>
 

src/server/views/layout-kibela/shared_page.html

@@ -14,7 +14,7 @@
 {% endblock %}
 
 {% block content_main %}
-  <div class="row" id="is-shared-page" data-expiration="{{ sharelink.expiration|datetz('Y/m/d H:i:s')}}" data-create-at="{{ }}">
+  <div class="row" id="is-shared-page" data-share-link-expired-at="{{ sharelink.expiredAt|datetz('Y/m/d H:i:s')}}"  data-share-link-created-at="{{ sharelink.createdAt|datetz('Y/m/d H:i:s')}}">
     <div class="col-12 col-xl-9 col-lg-8 bg-white round-corner">
       <div id="share-link-alert"></div>