refactor ShareLinkAlert

packages/app/src/components/Page/ShareLinkAlert.tsx

@@ -1,47 +1,47 @@
-import React from 'react';
+import React, { FC } from 'react';
 
 import { useTranslation } from 'next-i18next';
 
-const ShareLinkAlert = () => {
-  const { t } = useTranslation();
+const generateRatio = (expiredAt: Date, createdAt: Date): number => {
+  const wholeTime = new Date(expiredAt).getTime() - new Date(createdAt).getTime();
+  const remainingTime = new Date(expiredAt).getTime() - new Date().getTime();
+  return remainingTime / wholeTime;
+};
 
-  const shareContent = document.getElementById('is-shared-page');
-  const expiredAt = shareContent.getAttribute('data-share-link-expired-at');
-  const createdAt = shareContent.getAttribute('data-share-link-created-at');
+const getAlertColor = (ratio: number): string => {
+  let color: string;
 
-  function generateRatio() {
-    const wholeTime = new Date(expiredAt).getTime() - new Date(createdAt).getTime();
-    const remainingTime = new Date(expiredAt).getTime() - new Date().getTime();
-    return remainingTime / wholeTime;
+  if (ratio >= 0.75) {
+    color = 'success';
+  }
+  else if (ratio < 0.75 && ratio >= 0.5) {
+    color = 'info';
+  }
+  else if (ratio < 0.5 && ratio >= 0.25) {
+    color = 'warning';
+  }
+  else {
+    color = 'danger';
   }
+  return color;
+};
 
-  let ratio = 1;
+type Props = {
+  expiredAt: Date,
+  createdAt: Date,
+}
 
-  if (expiredAt !== '') {
-    ratio = generateRatio();
-  }
+const ShareLinkAlert: FC<Props> = (props: Props) => {
+  const { t } = useTranslation();
+  const { expiredAt, createdAt } = props;
 
-  function specifyColor() {
-    let color;
-    if (ratio >= 0.75) {
-      color = 'success';
-    }
-    else if (ratio < 0.75 && ratio >= 0.5) {
-      color = 'info';
-    }
-    else if (ratio < 0.5 && ratio >= 0.25) {
-      color = 'warning';
-    }
-    else {
-      color = 'danger';
-    }
-    return color;
-  }
+  const ratio = expiredAt != null ? generateRatio(expiredAt, createdAt) : 1;
+  const alertColor = getAlertColor(ratio);
 
   return (
-    <p className={`alert alert-${specifyColor()} py-3 px-4 d-edit-none`}>
+    <p className={`alert alert-${alertColor} py-3 px-4 d-edit-none`}>
       <i className="icon-fw icon-link"></i>
-      {(expiredAt === '' ? <span>{t('page_page.notice.no_deadline')}</span>
+      {(expiredAt === null ? <span>{t('page_page.notice.no_deadline')}</span>
       // eslint-disable-next-line react/no-danger
         : <span dangerouslySetInnerHTML={{ __html: t('page_page.notice.expiration', { expiredAt }) }} />
       )}

packages/app/src/pages/share/[[...path]].page.tsx

@@ -5,6 +5,7 @@ import {
   NextPage, GetServerSideProps, GetServerSidePropsContext,
 } from 'next';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+import dynamic from 'next/dynamic';
 
 import { BasicLayout } from '~/components/Layout/BasicLayout';
 import GrowiContextualSubNavigation from '~/components/Navbar/GrowiContextualSubNavigation';
@@ -20,6 +21,8 @@ import {
   CommonProps, getServerSideCommonProps, useCustomTitle, getNextI18NextConfig,
 } from '../utils/commons';
 
+const ShareLinkAlert = dynamic(() => import('~/components/Page/ShareLinkAlert'), { ssr: false });
+
 
 type Props = CommonProps & {
   shareLink: any, // TODO: Type 作る
@@ -51,7 +54,12 @@ const SharedPage: NextPage<Props> = (props: Props) => {
         <header className="py-0 position-relative">
           <GrowiContextualSubNavigation isLinkSharingDisabled={props.disableLinkSharing} />
         </header>
+
         <div id="grw-fav-sticky-trigger" className="sticky-top"></div>
+
+        <div id="content-main" className="content-main grw-container-convertible my-5">
+          <ShareLinkAlert expiredAt={expiredAt} createdAt={createdAt} />
+        </div>
       </div>
     </BasicLayout>
   );
@@ -105,7 +113,7 @@ async function injectRoutingInformation(context: GetServerSidePropsContext, prop
     // exipred
   }
 
-  props.shareLink = shareLink.toObject;
+  props.shareLink = shareLink.toObject();
 }
 
 export const getServerSideProps: GetServerSideProps = async(context: GetServerSidePropsContext) => {