From 44a21619a044847819cb53a056e5175b7bb154e2 Mon Sep 17 00:00:00 2001 From: thanhdanh27600 Date: Wed, 30 Aug 2023 16:10:48 +0700 Subject: [PATCH 1/3] feature tabs --- src/components/atoms/Accordion.tsx | 4 +- src/components/atoms/Tabs.tsx | 52 +++++++++++++++++++ src/components/atoms/UploadImage.tsx | 4 +- .../sections/URLAdvancedSetting.tsx | 29 ++++++++++- src/components/sections/URLSharePreview.tsx | 14 ++--- .../sections/URLShortenerResult.tsx | 32 ++++++++---- 6 files changed, 109 insertions(+), 26 deletions(-) create mode 100644 src/components/atoms/Tabs.tsx diff --git a/src/components/atoms/Accordion.tsx b/src/components/atoms/Accordion.tsx index 621b5a1e..eb1eac85 100644 --- a/src/components/atoms/Accordion.tsx +++ b/src/components/atoms/Accordion.tsx @@ -10,7 +10,7 @@ export const Accordion = ({ children, title }: Props) => { return (
-

+

-

+
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 ( +
+
    + {tabs.map((tab) => { + const selected = selectedKey === tab.key; + return ( + <> +
  • + +
    {tab.content}
    +     +
    • + + ); + })} +
+
+ ); +}; diff --git a/src/components/atoms/UploadImage.tsx b/src/components/atoms/UploadImage.tsx index 5cf4b4f6..a2ccda22 100644 --- a/src/components/atoms/UploadImage.tsx +++ b/src/components/atoms/UploadImage.tsx @@ -44,9 +44,9 @@ export const UploadImage = ({ }; return ( ); }} diff --git a/src/components/sections/URLAdvancedSetting.tsx b/src/components/sections/URLAdvancedSetting.tsx index bb852f8d..31c31a9a 100644 --- 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: ( + + + Facebook + + ), + key: 'Facebook', + }, + { + content: ( + + + Twitter + + ), + key: 'Twitter', + }, +]; + export const URLAdvancedSetting = () => { const { t, locale } = useTrans(); + const [selectedKey, setSelectedKey] = useState(tabs[0]?.key); const title = ( @@ -19,7 +43,8 @@ export const URLAdvancedSetting = () => { return (
- + +
diff --git a/src/components/sections/URLSharePreview.tsx b/src/components/sections/URLSharePreview.tsx index 79faed76..02913848 100644 --- 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 ( -
-
-

{`Facebook`}

- -
-
-

{`Twitter`}

- -
+
+ {selectedKey === 'Facebook' && } + {selectedKey === 'Twitter' && }
); }; diff --git a/src/components/sections/URLShortenerResult.tsx b/src/components/sections/URLShortenerResult.tsx index 12cbded1..635a8347 100644 --- 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 (

🚀 {t('shortenSuccess')}

@@ -83,16 +94,17 @@ export const URLShortenerResult = ({ setCopied, copied }: Props) => { {copied ? 'Copied' : 'Copy'}
+ + {t('trackingLive')} + +
-
- - {t('trackingLive')} - +
- - {t('trackingLive')} - +
From 1bace5495661c9423e7dfc46c24ea081050ed815 Mon Sep 17 00:00:00 2001 From: thanhdanh27600 Date: Wed, 30 Aug 2023 16:20:16 +0700 Subject: [PATCH 3/3] remove clg --- src/api/axios.ts | 1 - src/components/sections/URLShortenerInput.tsx | 1 - src/controllers/cld.ts | 2 -- src/controllers/og.ts | 1 - src/utils/agent.ts | 1 - 5 files changed, 6 deletions(-) diff --git a/src/api/axios.ts b/src/api/axios.ts index 1a918bc8..7f7c205e 100644 --- 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/sections/URLShortenerInput.tsx b/src/components/sections/URLShortenerInput.tsx index f5b7f4e6..8be76164 100644 --- 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/controllers/cld.ts b/src/controllers/cld.ts index 0a842705..91668dcf 100644 --- 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 index 0657fcd9..f9da8a81 100644 --- 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 index 47c91bd4..06aff8c0 100644 --- 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');