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/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/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/components/sections/URLShortenerResult.tsx b/src/components/sections/URLShortenerResult.tsx index 12cbded1..26b76028 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,19 @@ export const URLShortenerResult = ({ setCopied, copied }: Props) => { {copied ? 'Copied' : 'Copy'}
-
- -
-
+ + +
+ +
+