improve ui ux

thanhdanh27600 · Aug 14, 2023 · c42f51d · c42f51d
1 parent 13eb3a9
commit c42f51d
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 9 deletions.
diff --git a/.github/workflows/cd.yml b/.github/workflows/cd.yml
@@ -54,8 +54,8 @@ jobs:
             sh ./backup.sh
             docker login -u ${{ github.repository_owner }} -p ${{ secrets.GITHUB_TOKEN }}
             docker compose pull
+            docker compose down
             docker compose up -d
             docker system prune -f
             sh ./migrate.sh
             sh ./puppeteer.sh
-            
diff --git a/components/screens/URLTracking/index.tsx b/components/screens/URLTracking/index.tsx
@@ -12,7 +12,7 @@ import { useRouter } from 'next/router';
 import { useCallback, useEffect, useState } from 'react';
 import { toast } from 'react-hot-toast';
 import { useMutation, useQuery } from 'react-query';
-import {} from 'types/constants';
+import { BASE_URL_SHORT } from 'types/constants';
 import { MIXPANEL_EVENT } from 'types/utils';
 import { UAParser } from 'ua-parser-js';
 import { Referer, detectReferer } from 'utils/agent';
@@ -102,6 +102,7 @@ export const URLTracking = ({ hash }: { hash: string }) => {
   const hasData = !!history?.urlForwardMeta?.length;
   const hasPassword = history?.password !== null;
   const hasMore = hasData && (history?.urlForwardMeta?.length || 0) % PAGE_SIZE === 0;
+  const clickableUrl = history ? (history.url.startsWith('http') ? history.url : `//${history.url}`) : '';
 
   return (
     <LayoutMain>
@@ -124,8 +125,20 @@ export const URLTracking = ({ hash }: { hash: string }) => {
                   {`${t('shortCreatedAt')}: ${date(data?.record.createdAt).locale(locale).format(DATE_FULL_FORMAT)}`}
                 </p>
               )}
+              {history?.hash && (
+                <a
+                  className="block"
+                  href={`${BASE_URL_SHORT}/${history.hash}`}
+                  target="_blank"
+                  title={`${BASE_URL_SHORT}/${history.hash}`}>
+                  {t('shortenedURL')}:{' '}
+                  <span className="text-cyan-500 underline decoration-1 hover:decoration-wavy">
+                    {`${BASE_URL_SHORT}/${history.hash}`.replace(`${location.protocol}//`, '')}
+                  </span>
+                </a>
+              )}
               {history?.url && (
-                <a className="block" href={history.url} target="_blank" title={history.url}>
+                <a className="block" href={clickableUrl} target="_blank" title={history.url}>
                   URL:{' '}
                   <span className="text-cyan-500 underline decoration-1 hover:decoration-wavy">
                     {truncate(history.url)}

diff --git a/components/sections/URLStatsInput.tsx b/components/sections/URLStatsInput.tsx
@@ -12,16 +12,16 @@ import { MIXPANEL_EVENT, MIXPANEL_STATUS } from 'types/utils';
 import { linkWithLanguage, useTrans } from 'utils/i18next';
 import { QueryKey, strictRefetch } from 'utils/requests';
 import { FeedbackLink, FeedbackTemplate } from './FeedbackLink';
-
 type URLStatsForm = {
   hash: string;
 };
 
 export const URLStats = () => {
   const { t, locale } = useTrans();
 
-  const onSubmit: SubmitHandler<URLStatsForm> = (data) => {
-    fetchTracking.mutate({ hash: data.hash.replace(BASE_URL_SHORT + '/', '') });
+  const onSubmit: SubmitHandler<URLStatsForm> = ({ hash: h }) => {
+    const hash = h.startsWith(BASE_URL_SHORT.replace(`${location.protocol}//`, '')) ? `${location.protocol}//` + h : h;
+    fetchTracking.mutate({ hash: hash.replace(BASE_URL_SHORT + '/', '') });
   };
 
   const fetchTracking = useMutation(QueryKey.STATS, getStats);
@@ -54,7 +54,11 @@ export const URLStats = () => {
         message: t('errorNoTracking'),
       });
     } else {
-      location.href = linkWithLanguage(`${BASE_URL}/v/${getValues('hash').replace(BASE_URL_SHORT + '/', '')}`, locale);
+      const h = getValues('hash');
+      const hash = h.startsWith(BASE_URL_SHORT.replace(`${location.protocol}//`, ''))
+        ? `${location.protocol}//` + h
+        : h;
+      location.href = linkWithLanguage(`${BASE_URL}/v/${hash.replace(BASE_URL_SHORT + '/', '')}`, locale);
     }
   }, [fetchTracking.isSuccess, fetchTracking.isError]);
 
@@ -94,7 +98,10 @@ export const URLStats = () => {
             {...register('hash', {
               required: { message: t('errorNoInput'), value: true },
               validate: function (values) {
-                return values.startsWith(BASE_URL_SHORT) && /^.{3}$/.test(values.replace(BASE_URL_SHORT + '/', ''))
+                const v = values.startsWith(BASE_URL_SHORT.replace(`${location.protocol}//`, ''))
+                  ? `${location.protocol}//` + values
+                  : values;
+                return v.startsWith(BASE_URL_SHORT) && /^.{3}$/.test(v.replace(BASE_URL_SHORT + '/', ''))
                   ? undefined
                   : t('errorInvalidForward', { name: `${BASE_URL_SHORT}/xxx` });
               },

diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -15,6 +15,7 @@
   "feedbackForgotSubject": "[CLICKDI.TOP] Forgot Password",
   "feedbackBody": "Sorry for the inconvenience, please provide more information (image would be helpful):",
   "feedbackForgotBody": "Sorry for the inconvenience, please send a ticket with content of the shortened link and sent via email associated with that shortened link. We will reset your password asap.",
+  "shortenedURL": "Shortened URL",
   "shortenSuccess": "That was fast! URL has been successfully shortened.",
   "urlShortener": "URL Shortener",
   "viewMore": "View more",

diff --git a/public/locales/vi/common.json b/public/locales/vi/common.json
@@ -15,6 +15,7 @@
   "feedbackForgotSubject": "[CLICKDI.TOP] Quên mật khẩu",
   "feedbackBody": "Rất tiếc không làm bạn hài lòng, hãy cung cấp thêm thông tin nhé (có ảnh thì tuyệt vời):",
   "feedbackForgotBody": "Rất tiếc không làm bạn hài lòng. Vui lòng gửi ticket với nội dung là link rút gọn, dùng email đăng ký cho link để gửi. Link sẽ mở khóa sớm nhất có thể.",
+  "shortenedURL": "URL rút gọn",
   "shortenSuccess": "Rút gọn link thành công!",
   "urlShortener": "Rút gọn link",
   "viewMore": "Xem thêm",

diff --git a/types/constants.ts b/types/constants.ts
@@ -4,7 +4,7 @@ export const brandUrlShort = 'https://clid.top';
 export const brandUrlShortDomain = 'clid.top';
 export const isProduction = process.env.NODE_ENV === 'production';
 export const cdnUrl = 'https://cdn.jsdelivr.net/gh/thanhdanh27600/clickdi@production/public';
-export const cdn = (file: string) => `${isProduction ? cdnUrl : ''}/${file}`;
+export const cdn = (file: string) => `${isProduction ? cdnUrl : ''}${file}`;
 export const isShortDomain = process.env.NEXT_PUBLIC_SHORT_DOMAIN === 'true';
 export const allowedDomains = isProduction ? [brandUrl, brandUrlShort] : [localUrl, brandUrl, brandUrlShort];
 export const Window = () => ('object' === typeof window && window ? (window as any) : undefined);