Merge pull request #142 from thanhdanh27600/staging

Staging
thanhdanh27600 · Aug 30, 2023 · 7bb4a81 · 7bb4a81
2 parents 5b74062 + 1bace54
commit 7bb4a81
Show file tree

Hide file tree

Showing 11 changed files with 108 additions and 29 deletions.
diff --git a/src/api/axios.ts b/src/api/axios.ts
@@ -26,7 +26,6 @@ const allowedOrigins = [brandUrl, brandUrlShort, ...[alternateBrandUrl]];
 
 export const allowCors = (handler: any) => async (req: NextApiRequest, res: NextApiResponse) => {
   const origin = req.headers?.origin;
-  console.log('origin', origin);
   if (!!origin && allowedOrigins.includes(origin)) {
     res.setHeader('Access-Control-Allow-Origin', origin);
   }

diff --git a/src/components/atoms/Accordion.tsx b/src/components/atoms/Accordion.tsx
@@ -10,7 +10,7 @@ export const Accordion = ({ children, title }: Props) => {
   return (
     <div id={`accordion${id}`}>
       <div key={`k${id}`} className="rounded-none border-none border-neutral-200">
-        <h2 className="mb-0 hover:text-cyan-500 hover:underline" id={`heading${id}`}>
+        <h3 className="mb-0 hover:text-cyan-500 hover:underline" id={`heading${id}`}>
           <button
             className="[&:not([data-te-collapse-collapsed])]:text-primary group relative flex w-full items-center rounded-none border-0 py-4 text-left text-base transition [overflow-anchor:none] hover:z-[2] focus:z-[3] focus:outline-none"
             type="button"
@@ -31,7 +31,7 @@ export const Accordion = ({ children, title }: Props) => {
             </span>
             <span className="ml-2 text-lg">{title || 'Heading'}</span>
           </button>
-        </h2>
+        </h3>
         <div
           id={`collapse${id}`}
           className="!visible hidden border-0"

diff --git a/src/components/atoms/Tabs.tsx b/src/components/atoms/Tabs.tsx
@@ -0,0 +1,52 @@
+import clsx from 'clsx';
+import { ReactNode } from 'react';
+
+export type Tab = {
+  content: ReactNode;
+  key: string;
+  disabled?: boolean;
+};
+
+interface Props {
+  tabs: Tab[];
+  selectedKey: string;
+  setSelectedKey: (key: string) => void;
+}
+
+export const Tabs = (props: Props) => {
+  const { tabs, selectedKey, setSelectedKey } = props;
+
+  const handleClick = (tab: Tab) => (e: any) => {
+    if (tab.disabled) return;
+    setSelectedKey(tab.key);
+  };
+
+  return (
+    <div className="border-b border-gray-200 ">
+      <ul className="-mb-px flex flex-wrap text-center text-sm font-medium text-gray-500">
+        {tabs.map((tab) => {
+          const selected = selectedKey === tab.key;
+          return (
+            <>
+              <li className="mr-2" key={`tab-${tab.key}`}>
+                <a
+                  href={`#${tab.key}`}
+                  onClick={handleClick(tab)}
+                  className={clsx(
+                    'group inline-flex items-center justify-center rounded-t-lg border-b-2 border-transparent p-4',
+                    !tab.disabled && !selected && 'hover:border-gray-300 hover:text-gray-600',
+                    !tab.disabled &&
+                      selected &&
+                      'border-cyan-500 text-cyan-500 hover:border-cyan-400 hover:text-cyan-400',
+                    tab.disabled && 'cursor-not-allowed text-gray-400',
+                  )}>
+                  <div className={clsx()}>{tab.content}</div>
+                </a>
+              </li>
+            </>
+          );
+        })}
+      </ul>
+    </div>
+  );
+};
diff --git a/src/components/atoms/UploadImage.tsx b/src/components/atoms/UploadImage.tsx
@@ -44,9 +44,9 @@ export const UploadImage = ({
           };
           return (
             <button
-              className="w-fit cursor-pointer rounded-lg border border-gray-300 p-4 transition-colors hover:bg-gray-100"
+              className="w-fit cursor-pointer rounded-lg border border-gray-300 p-6 transition-colors hover:bg-gray-100"
               onClick={handleOnClick}>
-              <UploadCloud className="h-8 w-8 text-gray-700" />
+              <UploadCloud className="h-8 w-8 stroke-[1.25px] text-gray-700" />
             </button>
           );
         }}

diff --git a/src/components/sections/URLAdvancedSetting.tsx b/src/components/sections/URLAdvancedSetting.tsx
@@ -1,11 +1,35 @@
-import { ThumbsUp } from '@styled-icons/feather';
+import { Facebook, ThumbsUp, Twitter } from '@styled-icons/feather';
 import { Accordion } from 'components/atoms/Accordion';
+import { Tab, Tabs } from 'components/atoms/Tabs';
 import { AdvancedSettingUrlForm } from 'components/gadgets/AdvancedSettingUrlForm';
+import { useState } from 'react';
 import { useTrans } from 'utils/i18next';
 import { URLSharePreview } from './URLSharePreview';
 
+const tabs: Tab[] = [
+  {
+    content: (
+      <span className="flex items-center gap-2">
+        <Facebook className="w-5" />
+        Facebook
+      </span>
+    ),
+    key: 'Facebook',
+  },
+  {
+    content: (
+      <span className="flex items-center gap-2">
+        <Twitter className="w-5" />
+        Twitter
+      </span>
+    ),
+    key: 'Twitter',
+  },
+];
+
 export const URLAdvancedSetting = () => {
   const { t, locale } = useTrans();
+  const [selectedKey, setSelectedKey] = useState(tabs[0]?.key);
 
   const title = (
     <span className="relative">
@@ -19,7 +43,8 @@ export const URLAdvancedSetting = () => {
   return (
     <Accordion title={title}>
       <div>
-        <URLSharePreview />
+        <Tabs tabs={tabs} selectedKey={selectedKey} setSelectedKey={setSelectedKey} />
+        <URLSharePreview selectedKey={selectedKey} />
         <AdvancedSettingUrlForm key={locale} />
         <hr className="my-8" />
       </div>

diff --git a/src/components/sections/URLSharePreview.tsx b/src/components/sections/URLSharePreview.tsx
@@ -2,21 +2,15 @@ import { useBearStore } from 'bear';
 import { FacebookPreview } from 'components/gadgets/FacebookPreview';
 import { TwitterPreview } from 'components/gadgets/TwitterPreview';
 
-export const URLSharePreview = () => {
+export const URLSharePreview = ({ selectedKey }: { selectedKey: string }) => {
   const { shortenSlice } = useBearStore();
   const shortenHistoryForm = shortenSlice((state) => state.shortenHistoryForm);
   if (!shortenHistoryForm) return null;
 
   return (
-    <div className="mx-auto mt-4 flex w-fit flex-col items-center justify-between gap-8 lg:flex-row">
-      <div>
-        <p className="mb-2 text-gray-500">{`Facebook`}</p>
-        <FacebookPreview {...shortenHistoryForm} />
-      </div>
-      <div>
-        <p className="mb-2 text-gray-500">{`Twitter`}</p>
-        <TwitterPreview {...shortenHistoryForm} />
-      </div>
+    <div className="mx-auto mt-8 flex w-fit flex-col items-center justify-between gap-8 lg:flex-row">
+      {selectedKey === 'Facebook' && <FacebookPreview {...shortenHistoryForm} />}
+      {selectedKey === 'Twitter' && <TwitterPreview {...shortenHistoryForm} />}
     </div>
   );
 };
diff --git a/src/components/sections/URLShortenerInput.tsx b/src/components/sections/URLShortenerInput.tsx
@@ -52,7 +52,6 @@ export const URLShortenerInput = () => {
       setLocalError('');
     },
     onError: (error, variables, context) => {
-      console.log(`An error happened!`, error);
       mixpanel.track(MIXPANEL_EVENT.SHORTEN, {
         status: MIXPANEL_STATUS.FAILED,
         errorMessage: error,

diff --git a/src/components/sections/URLShortenerResult.tsx b/src/components/sections/URLShortenerResult.tsx
@@ -4,6 +4,7 @@ import clsx from 'clsx';
 import { Button } from 'components/atoms/Button';
 import mixpanel from 'mixpanel-browser';
 import Image from 'next/image';
+import { useEffect } from 'react';
 import { toast } from 'react-hot-toast';
 import { useQuery } from 'react-query';
 import { BASE_URL, BASE_URL_SHORT, PLATFORM_AUTH } from 'types/constants';
@@ -26,14 +27,13 @@ export const URLShortenerResult = ({ setCopied, copied }: Props) => {
   const shortenUrl = getShortenUrl();
 
   const onCopy = () => {
-    if (copied) {
-      toast.success('Copied');
-    }
     mixpanel.track(MIXPANEL_EVENT.LINK_COPY, {
       status: MIXPANEL_STATUS.OK,
+      shortenUrl,
     });
     setCopied(true);
     copyToClipBoard(shortenUrl);
+    toast.success('Copied');
   };
   let token = '';
   if (PLATFORM_AUTH) {
@@ -48,6 +48,17 @@ export const URLShortenerResult = ({ setCopied, copied }: Props) => {
     ...strictRefetch,
   });
 
+  useEffect(() => {
+    if (!copied) return;
+    let timeout = setTimeout(() => {
+      setCopied(false);
+    }, 2000);
+
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [copied]);
+
   return (
     <div className="mt-4">
       <h2 className="text-xl">🚀 {t('shortenSuccess')}</h2>
@@ -83,16 +94,19 @@ export const URLShortenerResult = ({ setCopied, copied }: Props) => {
           <span className="">{copied ? 'Copied' : 'Copy'}</span>
         </button>
       </div>
-      <div className="mt-4">
-        <URLAdvancedSetting />
-      </div>
-      <div className="flex flex-col flex-wrap justify-between gap-8 sm:flex-row sm:items-center">
+      <div className="mt-2 flex w-full justify-end">
         <a
           href={linkWithLanguage(shortenUrl.replace(`${BASE_URL_SHORT}/`, `${BASE_URL}/v/`), locale)}
           target="_blank"
           className="cursor-pointer text-cyan-500 underline decoration-1 transition-all hover:decoration-wavy">
           {t('trackingLive')}
         </a>
+      </div>
+
+      <div className="mt-4">
+        <URLAdvancedSetting />
+      </div>
+      <div className="flex justify-center max-sm:mt-4 sm:justify-end">
         <div className="flex flex-col items-center gap-2 sm:flex-row">
           <a href={`http://www.facebook.com/sharer.php?u=${shortenUrl}`} target="_blank">
             <Button

diff --git a/src/controllers/cld.ts b/src/controllers/cld.ts
@@ -4,9 +4,7 @@ import { api, badRequest, successHandler } from '../utils/axios';
 export const handler = api(
   async (req, res) => {
     const body = JSON.parse(req.body) || {};
-    console.log('cld: body', body);
     const { paramsToSign } = body;
-    console.log('process.env.CLOUDINARY_API_SECRET', process.env.CLOUDINARY_API_SECRET);
     if (!process.env.CLOUDINARY_API_SECRET) {
       console.error('Not found CLOUDINARY_API_SECRET');
       return badRequest(res);

diff --git a/src/controllers/og.ts b/src/controllers/og.ts
@@ -214,7 +214,6 @@ export const handler = api(
     const image = await element?.screenshot({ type: 'jpeg' });
     await browser.close();
     // write og to cache
-    console.log(`write ${ogKey} to cache`);
     await redis.setex(ogKey, isProduction ? 604800 /* 7days */ : 60, image?.toString('base64') || '');
     res.writeHead(200, {
       'Content-Type': 'image/jpeg',

diff --git a/src/utils/agent.ts b/src/utils/agent.ts
@@ -72,7 +72,6 @@ export function detectReferer(userAgent?: string | null): Referer {
 
 export function detectCrawler(userAgent: string): Crawler {
   const ua = userAgent.toLowerCase();
-  console.log('ua detectCrawler', ua);
   let check = false;
 
   check = ua.includes('facebookexternalhit') || ua.includes('facebook.com/externalhit');