From e6438b367c6949d3343183ea09ed7b38e124c88a Mon Sep 17 00:00:00 2001
From: thanhdanh27600 <thanhdanh27600@gmail.com>
Date: Mon, 28 Aug 2023 22:14:53 +0700
Subject: [PATCH] update og image

---
 public/locales/en/common.json                 |  3 +-
 public/locales/vi/common.json                 |  3 +-
 src/api/requests.ts                           |  8 +++-
 .../gadgets/AdvancedSettingUrlForm.tsx        | 45 ++++++++++++++-----
 src/components/gadgets/FacebookPreview.tsx    | 10 +++--
 src/components/gadgets/TwitterPreview.tsx     |  8 ++--
 .../sections/URLAdvancedSetting.tsx           |  4 +-
 src/controllers/forward.ts                    | 18 ++++++--
 src/controllers/og.ts                         |  3 +-
 src/controllers/shorten/update.ts             | 10 ++++-
 src/pages/[...hash].tsx                       | 21 ++++++---
 src/types/constants.ts                        |  4 +-
 src/utils/validateMiddleware.ts               |  3 ++
 13 files changed, 101 insertions(+), 39 deletions(-)

diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index f6e0f90a..ad0b9041 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -56,5 +56,6 @@
   "advancedView": "Advanced info",
   "loadMore": "Load more",
   "editPreview": "More options",
-  "save": "Save"
+  "save": "Save",
+  "maximumCharaters": "Maximum of {{n}} characters"
 }
diff --git a/public/locales/vi/common.json b/public/locales/vi/common.json
index 417bd51d..2e88e9d9 100644
--- a/public/locales/vi/common.json
+++ b/public/locales/vi/common.json
@@ -56,5 +56,6 @@
   "advancedView": "Xem nâng cao",
   "loadMore": "Xem thêm",
   "editPreview": "Chỉnh sửa",
-  "save": "Lưu thay đổi"
+  "save": "Lưu thay đổi",
+  "maximumCharaters": "Tối đa {{n}} ký tự"
 }
diff --git a/src/api/requests.ts b/src/api/requests.ts
index 890fe744..69325252 100644
--- a/src/api/requests.ts
+++ b/src/api/requests.ts
@@ -1,6 +1,7 @@
 import memoize from 'fast-memoize';
 import { stringify } from 'querystring';
 import { Forward } from 'types/forward';
+import { Locale } from 'types/locale';
 import { QR } from 'types/qr';
 import { ShortenUrl } from 'types/shorten';
 import { Stats } from 'types/stats';
@@ -16,12 +17,15 @@ export const updateShortenUrlRequest = async ({
   hash,
   ogTitle,
   ogDescription,
+  locale,
 }: {
   hash: string;
   ogDescription?: string;
   ogTitle?: string;
+  locale: Locale;
 }) => {
   const rs = await API.put(`/api/shorten/update`, {
+    locale,
     hash,
     ogTitle,
     ogDescription,
@@ -32,16 +36,18 @@ export const updateShortenUrlRequest = async ({
 
 export const getForwardUrl = async ({
   hash,
+  locale,
   userAgent,
   ip,
   fromClientSide,
 }: {
   hash: string;
+  locale: string;
   userAgent?: string;
   ip?: string | null;
   fromClientSide?: boolean;
 }) => {
-  const rs = await API.post(`/api/forward`, { hash, userAgent, ip, fromClientSide });
+  const rs = await API.post(`/api/forward`, { hash, locale, userAgent, ip, fromClientSide });
   const data = rs.data;
   return data as Forward;
 };
diff --git a/src/components/gadgets/AdvancedSettingUrlForm.tsx b/src/components/gadgets/AdvancedSettingUrlForm.tsx
index cce2e486..dcc11727 100644
--- a/src/components/gadgets/AdvancedSettingUrlForm.tsx
+++ b/src/components/gadgets/AdvancedSettingUrlForm.tsx
@@ -10,23 +10,26 @@ import { SubmitHandler, useForm } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
 import { useMutation } from 'react-query';
 import { LIMIT_OG_DESCRIPTION_LENGTH, LIMIT_OG_TITLE_LENGTH, brandUrlShortDomain } from 'types/constants';
+import { Locale } from 'types/locale';
 import { MIXPANEL_EVENT, MIXPANEL_STATUS } from 'types/utils';
 import { debounce } from 'utils/data';
 import { useTrans } from 'utils/i18next';
 import { logger } from 'utils/logger';
 import { QueryKey } from 'utils/requests';
 
+type ShortenSettingPayload = Partial<UrlShortenerHistory> & { locale?: Locale };
+
 export const AdvancedSettingUrlForm = () => {
-  const { t } = useTrans();
+  const { t, locale } = useTrans();
   const { shortenSlice } = useBearStore();
   const [shortenHistory, setShortenHistoryForm] = shortenSlice((state) => [
     state.shortenHistory,
     state.setShortenHistoryForm,
   ]);
   const defaultValues = {
-    ogTitle: shortenHistory?.ogTitle ?? t('ogTitle', { hash: shortenHistory?.hash ?? 'XXX' }),
-    ogDescription: shortenHistory?.ogDescription ?? t('ogDescription'),
-    ogDomain: shortenHistory?.ogDomain ?? brandUrlShortDomain,
+    ogTitle: shortenHistory?.ogTitle || t('ogTitle', { hash: shortenHistory?.hash ?? 'XXX' }),
+    ogDescription: shortenHistory?.ogDescription || t('ogDescription'),
+    ogDomain: shortenHistory?.ogDomain || brandUrlShortDomain,
     ogImgSrc: shortenHistory?.ogImgSrc,
   };
 
@@ -35,11 +38,11 @@ export const AdvancedSettingUrlForm = () => {
     handleSubmit,
     formState: { errors },
     watch,
-  } = useForm<Partial<UrlShortenerHistory>>({
+  } = useForm<ShortenSettingPayload>({
     defaultValues,
   });
 
-  const handleUpdate = useCallback((history: Partial<UrlShortenerHistory>) => {
+  const handleUpdate = useCallback((history: ShortenSettingPayload) => {
     setShortenHistoryForm(history);
   }, []);
 
@@ -49,11 +52,18 @@ export const AdvancedSettingUrlForm = () => {
 
   useEffect(() => {
     debouncedUpdate({
-      ...shortenHistory,
       ogTitle,
       ogDescription,
     });
-  }, [ogTitle, ogDescription, shortenHistory]);
+  }, [ogTitle, ogDescription]);
+
+  useEffect(() => {
+    if (shortenHistory)
+      debouncedUpdate({
+        ogTitle: shortenHistory.ogDescription || t('ogTitle', { hash: shortenHistory.hash ?? 'XXX' }),
+        ogDescription: shortenHistory.ogDescription || t('ogDescription'),
+      });
+  }, [shortenHistory]);
 
   const updateShortenUrl = useMutation(QueryKey.SHORTEN_UPDATE, {
     mutationFn: updateShortenUrlRequest,
@@ -72,10 +82,11 @@ export const AdvancedSettingUrlForm = () => {
     },
   });
 
-  const onSubmit: SubmitHandler<Partial<UrlShortenerHistory>> = async (values) => {
+  const onSubmit: SubmitHandler<ShortenSettingPayload> = async (values) => {
     if (!shortenHistory?.hash) return;
     updateShortenUrl.mutate({
       hash: shortenHistory.hash,
+      locale,
       ogDescription: values.ogDescription || undefined,
       ogTitle: values.ogTitle || undefined,
     });
@@ -92,14 +103,15 @@ export const AdvancedSettingUrlForm = () => {
             btnSize="md"
             {...register('ogTitle', {
               required: { message: t('errorNoInput'), value: true },
-              maxLength: { message: `Maximum of ${LIMIT_OG_TITLE_LENGTH} charactors`, value: LIMIT_OG_TITLE_LENGTH },
+              maxLength: { message: t('maximumCharaters', { n: LIMIT_OG_TITLE_LENGTH }), value: LIMIT_OG_TITLE_LENGTH },
             })}
+            maxLength={LIMIT_OG_TITLE_LENGTH}
             disabled={updateShortenUrl.isLoading}
           />
           <ErrorMessage
             errors={errors}
             name="ogTitle"
-            render={(error) => <p className="mt-4 text-red-400">{error.message}</p>}
+            render={(error) => <p className="text-red-400">{error.message}</p>}
           />
         </div>
         <div className="mt-4">
@@ -107,11 +119,20 @@ export const AdvancedSettingUrlForm = () => {
           <Textarea
             {...register('ogDescription', {
               required: { message: t('errorNoInput'), value: true },
-              maxLength: { message: `Maximum of ${LIMIT_OG_DESCRIPTION_LENGTH}}`, value: LIMIT_OG_DESCRIPTION_LENGTH },
+              maxLength: {
+                message: t('maximumCharaters', { n: LIMIT_OG_DESCRIPTION_LENGTH }),
+                value: LIMIT_OG_DESCRIPTION_LENGTH,
+              },
             })}
+            maxLength={LIMIT_OG_DESCRIPTION_LENGTH}
             rows={3}
             disabled={updateShortenUrl.isLoading}
           />
+          <ErrorMessage
+            errors={errors}
+            name="ogDescription"
+            render={(error) => <p className="text-red-400">{error.message}</p>}
+          />
         </div>
         <Button type="submit" text={t('save')} className="mt-4" loading={updateShortenUrl.isLoading} />
       </div>
diff --git a/src/components/gadgets/FacebookPreview.tsx b/src/components/gadgets/FacebookPreview.tsx
index 88a4fe99..d90197dd 100644
--- a/src/components/gadgets/FacebookPreview.tsx
+++ b/src/components/gadgets/FacebookPreview.tsx
@@ -6,7 +6,7 @@ import { useTrans } from 'utils/i18next';
 
 export const FacebookPreview = ({ hash, ogTitle, ogDomain, ogDescription }: Partial<UrlShortenerHistory>) => {
   const { t, locale } = useTrans();
-  const title = ogTitle ?? t('ogTitle', { hash: hash || 'XXX' });
+  const title = ogTitle || t('ogTitle', { hash: hash || 'XXX' });
   let encodeTitle = '';
   if (PLATFORM_AUTH) {
     encodeTitle = encrypt(title);
@@ -14,7 +14,7 @@ export const FacebookPreview = ({ hash, ogTitle, ogDomain, ogDescription }: Part
   return (
     <div className="w-fit bg-gray-100/75 max-[420px]:overflow-scroll">
       <div className="w-[420px]">
-        <div className="h-[221px] w-full border border-solid border-gray-200 bg-cover bg-no-repeat">
+        <div className="h-[220.5px] w-full border border-solid border-gray-200 bg-cover bg-no-repeat">
           <iframe
             className="relative origin-top-left scale-[0.35]"
             width={1200}
@@ -29,9 +29,11 @@ export const FacebookPreview = ({ hash, ogTitle, ogDomain, ogDescription }: Part
             {ogDomain ?? brandUrlShortDomain}
           </span>
           <div className="text-left">
-            <div className="font-facebook text-[16px] font-semibold text-[#1d2129]">{title}</div>
+            <div className="font-facebook text-[16px] font-semibold text-[#1d2129] line-clamp-2">{title}</div>
           </div>
-          <span className="font-facebook text-sm text-[#606770]">{ogDescription ?? t('ogDescription')}</span>
+          <span className="mt-0.5 font-facebook text-sm text-[#606770] line-clamp-2">
+            {ogDescription ?? t('ogDescription')}
+          </span>
         </div>
       </div>
     </div>
diff --git a/src/components/gadgets/TwitterPreview.tsx b/src/components/gadgets/TwitterPreview.tsx
index beb1cc66..ddc41492 100644
--- a/src/components/gadgets/TwitterPreview.tsx
+++ b/src/components/gadgets/TwitterPreview.tsx
@@ -5,7 +5,7 @@ import { useTrans } from 'utils/i18next';
 
 export const TwitterPreview = ({ hash, ogTitle, ogDomain, ogDescription }: Partial<UrlShortenerHistory>) => {
   const { t, locale } = useTrans();
-  const title = ogTitle ?? t('ogTitle', { hash: hash || 'XXX' });
+  const title = ogTitle || t('ogTitle', { hash: hash || 'XXX' });
   let encodeTitle = '';
   if (PLATFORM_AUTH) {
     encodeTitle = encrypt(title);
@@ -25,9 +25,11 @@ export const TwitterPreview = ({ hash, ogTitle, ogDomain, ogDescription }: Parti
         </div>
         <div className="rounded-xl rounded-t-none border border-t-0 border-solid border-gray-200 py-3 px-2.5">
           <div className="text-left">
-            <div className="font-twitter font-bold text-[#18283e]">{title}</div>
+            <div className="font-twitter font-bold text-[#18283e] line-clamp-2">{title}</div>
+          </div>
+          <div className="mt-0.5 font-twitter text-sm text-[#18283e] line-clamp-2">
+            {ogDescription ?? t('ogDescription')}
           </div>
-          <div className="mt-0.5 font-twitter text-sm text-[#18283e]">{ogDescription ?? t('ogDescription')}</div>
           <div className="mt-0.5 border-separate text-ellipsis whitespace-nowrap break-words font-twitter text-sm lowercase text-[#8899a6]">
             {ogDomain ?? brandUrlShortDomain}
           </div>
diff --git a/src/components/sections/URLAdvancedSetting.tsx b/src/components/sections/URLAdvancedSetting.tsx
index d56298de..0c8c395a 100644
--- a/src/components/sections/URLAdvancedSetting.tsx
+++ b/src/components/sections/URLAdvancedSetting.tsx
@@ -5,7 +5,7 @@ import { useTrans } from 'utils/i18next';
 import { URLSharePreview } from './URLSharePreview';
 
 export const URLAdvancedSetting = () => {
-  const { t } = useTrans();
+  const { t, locale } = useTrans();
 
   const title = (
     <span className="relative">
@@ -20,7 +20,7 @@ export const URLAdvancedSetting = () => {
     <Accordion title={title}>
       <>
         <URLSharePreview />
-        <AdvancedSettingUrlForm />
+        <AdvancedSettingUrlForm key={locale} />
         <hr className="my-8" />
       </>
     </Accordion>
diff --git a/src/controllers/forward.ts b/src/controllers/forward.ts
index beb64a71..f755f5af 100644
--- a/src/controllers/forward.ts
+++ b/src/controllers/forward.ts
@@ -1,5 +1,6 @@
 import geoIp from 'geoip-country';
 import { NextApiResponse } from 'next';
+import { isEmpty } from 'ramda';
 import prisma from '../db/prisma';
 import { redis } from '../redis/client';
 import { LIMIT_SHORTENED_SECOND, REDIS_KEY, getRedisKey } from '../types/constants';
@@ -27,11 +28,11 @@ export const handler = api(
     }
     const data = { hash, ip, userAgent, fromClientSide, lookupIp };
     const hashShortenedLinkKey = getRedisKey(REDIS_KEY.HASH_SHORTEN_BY_HASH_URL, hash);
-    const shortenedUrlCache = await redis.hget(hashShortenedLinkKey, 'url');
-    if (shortenedUrlCache) {
+    const shortenedUrlCache = await redis.hgetall(hashShortenedLinkKey);
+    if (!isEmpty(shortenedUrlCache)) {
       // cache hit
       postProcessForward(data); // bypass process
-      return res.status(HttpStatusCode.OK).json({ history: { url: shortenedUrlCache } as any });
+      return res.status(HttpStatusCode.OK).json({ history: shortenedUrlCache as any });
     }
     // cache missed
     await postProcessForward(data, res);
@@ -75,7 +76,16 @@ export const postProcessForward = async (payload: any, res?: NextApiResponse<For
   if (res) {
     // write back to cache
     const hashShortenedLinkKey = getRedisKey(REDIS_KEY.HASH_SHORTEN_BY_HASH_URL, hash);
-    const dataHashShortenLink = ['url', history.url, 'updatedAt', new Date().getTime()];
+    const dataHashShortenLink = [
+      'url',
+      history.url,
+      'ogTitle',
+      history.ogTitle,
+      'ogDescription',
+      history.ogDescription,
+      'updatedAt',
+      new Date().getTime(),
+    ];
     await redis.hset(hashShortenedLinkKey, dataHashShortenLink);
     await redis.expire(hashShortenedLinkKey, LIMIT_SHORTENED_SECOND);
     return res.status(HttpStatusCode.OK).json({ history });
diff --git a/src/controllers/og.ts b/src/controllers/og.ts
index b2995531..0657fcd9 100644
--- a/src/controllers/og.ts
+++ b/src/controllers/og.ts
@@ -52,6 +52,7 @@ const templateStylesOg = `
 }
 body {
   padding: 3rem;
+  margin: 0;
   width: 1200px;
   height: 630px;
   overflow: hidden;
@@ -93,7 +94,7 @@ main {
 }
 .title {
   font-size: {{fontSize}};
-  margin: 0.25rem 0;
+  margin: 0.25rem;
   font-weight: bold;
   color: #fff;
   text-shadow: .15em .15em 0 hsl(200 50% 30%);
diff --git a/src/controllers/shorten/update.ts b/src/controllers/shorten/update.ts
index 6111c9fc..82237b1a 100644
--- a/src/controllers/shorten/update.ts
+++ b/src/controllers/shorten/update.ts
@@ -1,3 +1,6 @@
+import { redis } from 'redis/client';
+import { REDIS_KEY, getRedisKey } from 'types/constants';
+import { Locale } from 'types/locale';
 import prisma from '../../db/prisma';
 import { ShortenUrl } from '../../types/shorten';
 import { api, badRequest, successHandler } from '../../utils/axios';
@@ -6,10 +9,12 @@ import { validateUpdateShortenSchema } from '../../utils/validateMiddleware';
 export const handler = api<ShortenUrl>(
   async (req, res) => {
     let hash = req.body.hash as string;
+    let locale = req.body.locale as string;
     let ogTitle = req.body.ogTitle as string;
     let ogDescription = req.body.ogDescription as string;
     await validateUpdateShortenSchema.parseAsync({
       hash,
+      locale,
       ogTitle,
       ogDescription,
     });
@@ -22,7 +27,10 @@ export const handler = api<ShortenUrl>(
         ogDescription,
       },
     });
-    successHandler(res, rs);
+    const ogKey = getRedisKey(REDIS_KEY.OG_BY_HASH, `${hash}-${locale || Locale.Vietnamese}`);
+    const hashShortenedLinkKey = getRedisKey(REDIS_KEY.HASH_SHORTEN_BY_HASH_URL, hash);
+    await Promise.all([redis.expire(ogKey, -1), redis.expire(hashShortenedLinkKey, -1)]);
+    return successHandler(res, rs);
   },
   ['PUT'],
 );
diff --git a/src/pages/[...hash].tsx b/src/pages/[...hash].tsx
index efe4dbf2..833862c1 100644
--- a/src/pages/[...hash].tsx
+++ b/src/pages/[...hash].tsx
@@ -1,3 +1,4 @@
+import { UrlShortenerHistory } from '@prisma/client';
 import { getForwardUrl } from 'api/requests';
 import mixpanel from 'mixpanel-browser';
 import { GetServerSidePropsContext } from 'next';
@@ -14,17 +15,20 @@ import { useTrans } from 'utils/i18next';
 import { QueryKey } from 'utils/requests';
 
 interface Props {
-  url: string;
+  history?: UrlShortenerHistory | null;
   hash: string;
   error?: unknown;
   ip?: string;
   redirect?: string;
 }
 
-const ForwardURL = ({ url, hash, ip, error, redirect }: Props) => {
+const ForwardURL = ({ history, hash, ip, error, redirect }: Props) => {
   const { t, locale } = useTrans();
   const forwardUrl = useMutation(QueryKey.FORWARD, getForwardUrl);
   const loading = forwardUrl.isLoading && !forwardUrl.isError;
+  const url = history?.url;
+  const ogTitle = history?.ogTitle || t('ogTitle', { hash });
+  const ogDescription = history?.ogTitle || t('ogDescription');
 
   useEffect(() => {
     if (!Window()) {
@@ -35,6 +39,7 @@ const ForwardURL = ({ url, hash, ip, error, redirect }: Props) => {
     } else {
       // start client-side forward
       forwardUrl.mutate({
+        locale,
         hash: hash,
         userAgent: navigator.userAgent,
         ip,
@@ -73,7 +78,6 @@ const ForwardURL = ({ url, hash, ip, error, redirect }: Props) => {
     location.replace(`${url.includes('http') ? '' : '//'}${url}`);
   }, [forwardUrl]);
 
-  const ogTitle = t('ogTitle', { hash });
   let encodeTitle = '';
   if (PLATFORM_AUTH) {
     encodeTitle = encrypt(ogTitle);
@@ -87,7 +91,7 @@ const ForwardURL = ({ url, hash, ip, error, redirect }: Props) => {
         <meta property="og:type" content="website" />
         <meta property="og:url" content="https://facebook.com/clickditop/ " />
         <meta property="og:title" content={ogTitle} />
-        <meta property="og:description" content={t('ogDescription')} />
+        <meta property="og:description" content={ogDescription} />
         <meta
           property="og:image"
           content={`${BASE_URL}/api/og?hash=${hash}&title=${encodeURIComponent(encodeTitle)}&locale=${locale}`}
@@ -97,7 +101,7 @@ const ForwardURL = ({ url, hash, ip, error, redirect }: Props) => {
         <meta property="twitter:card" content="summary_large_image" />
         {/* <meta property="twitter:url" content="https://twitter.com/clickditop" /> */}
         <meta property="twitter:title" content={ogTitle} />
-        <meta property="twitter:description" content={t('ogDescription')} />
+        <meta property="twitter:description" content={ogDescription} />
         <meta
           property="twitter:image"
           content={`${BASE_URL}/api/og?hash=${hash}&title=${encodeURIComponent(encodeTitle)}&locale=${locale}`}
@@ -115,20 +119,23 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
         props: { redirect: '/' },
       };
     }
+    const locale = context.locale || Locale.Vietnamese;
     const { hash } = context.query;
     const ip = requestIp.getClientIp(context.req);
     // start server-side forward
     const forwardUrl = await getForwardUrl({
+      locale,
       hash: hash ? (hash[0] as string) : '',
       userAgent: context.req.headers['user-agent'],
       ip,
     });
+    console.log('forwardUrl', forwardUrl);
     return {
       props: {
-        url: forwardUrl.history?.url,
+        history: forwardUrl.history,
         hash: hash ? (hash[0] as string) : '',
         ip,
-        ...(await serverSideTranslations(context.locale ?? Locale.Vietnamese, ['common'])),
+        ...(await serverSideTranslations(locale, ['common'])),
       },
     };
   } catch (error: any) {
diff --git a/src/types/constants.ts b/src/types/constants.ts
index 17039f5b..3e463e7e 100644
--- a/src/types/constants.ts
+++ b/src/types/constants.ts
@@ -19,8 +19,8 @@ export const LIMIT_SHORTENED_SECOND = LIMIT_SHORTENED_HOUR * 3600;
 export const LIMIT_URL_REQUEST = 5;
 export const LIMIT_RECENT_HISTORY = 5;
 export const NUM_CHARACTER_HASH = 3;
-export const LIMIT_OG_TITLE_LENGTH = 150;
-export const LIMIT_OG_DESCRIPTION_LENGTH = 300;
+export const LIMIT_OG_TITLE_LENGTH = 100;
+export const LIMIT_OG_DESCRIPTION_LENGTH = 200;
 export const OG_IMAGE_DIMENSION = '1200 x 630';
 
 export const baseUrl = (useShortDomain: boolean = false) => {
diff --git a/src/utils/validateMiddleware.ts b/src/utils/validateMiddleware.ts
index 72d17843..3a81e353 100644
--- a/src/utils/validateMiddleware.ts
+++ b/src/utils/validateMiddleware.ts
@@ -22,6 +22,9 @@ export const validateShortenSchema = z.object({
 });
 
 export const validateUpdateShortenSchema = z.object({
+  locale: z.string({
+    required_error: 'Locale is required',
+  }),
   hash: z
     .string({
       required_error: 'Hash is required',