diff --git a/apps/deriv-hk/pages/_app.tsx b/apps/deriv-hk/pages/_app.tsx index 319c5c82b..bba838304 100644 --- a/apps/deriv-hk/pages/_app.tsx +++ b/apps/deriv-hk/pages/_app.tsx @@ -1,13 +1,23 @@ import { AppProps } from 'next/app'; import '../styles.css'; import { ThemeProvider } from '@deriv/quill-design'; -import { BuildVariantProvider } from '@deriv-com/providers'; +import { + BuildVariantProvider, + SharedLinkProvider, + SharedLink, +} from '@deriv-com/providers'; +import Link from 'next/link'; +const NextSharedLink: SharedLink = ({ href, ...rest }) => { + return ; +}; function CustomApp({ Component, pageProps }: AppProps) { return ( - + + + ); diff --git a/libs/blocks/vite.config.ts b/libs/blocks/vite.config.ts index eefa46519..175da6aa5 100644 --- a/libs/blocks/vite.config.ts +++ b/libs/blocks/vite.config.ts @@ -45,7 +45,7 @@ export default defineConfig({ '@deriv-com/components', ], }, - minify: true, + minify: false, }, test: { diff --git a/libs/components/src/lib/link/index.tsx b/libs/components/src/lib/link/index.tsx index 8f2cde24c..66ee72b96 100644 --- a/libs/components/src/lib/link/index.tsx +++ b/libs/components/src/lib/link/index.tsx @@ -1,10 +1,9 @@ +import { useSharedLink } from '@deriv-com/hooks'; import { qtMerge } from '@deriv/quill-design'; import { StandaloneChevronRightRegularIcon } from '@deriv/quill-icons'; -import Link from 'next/link'; -import { useRouter } from 'next/router'; -import { ComponentPropsWithRef, useState } from 'react'; +import { HTMLAttributes, useState } from 'react'; -export interface CustomLinkProps extends ComponentPropsWithRef { +export interface CustomLinkProps extends HTMLAttributes { skipLocaleHandling?: boolean; size?: textSize; href: string; @@ -30,42 +29,15 @@ export function CustomLink({ children, ...rest }: CustomLinkProps) { - // TODO: uncomment this when we have localization - // const customHref = useCustomLink({ - // href, - // locale: rest.locale, - // skipLocaleHandling: skipLocaleHandling, - // }); - - // TODO: remove this when we have localization - const router = useRouter(); - const locale = rest.locale || router.query.locale || 'en'; - - let customHref = href.toString() || router.asPath; - if (customHref.indexOf('http') === 0) skipLocaleHandling = true; - if (locale && !skipLocaleHandling) { - if (locale === 'en') { - if (customHref === '/') { - customHref = '/'; - } else { - customHref = customHref - ? `${customHref}` - : router.pathname.replace('[locale]', locale as string); - } - } else { - customHref = customHref - ? `/${locale}${customHref}` - : router.pathname.replace('[locale]', locale as string); - } - } + const { DerivLink } = useSharedLink(); const [isHover, setHover] = useState(false); return ( - hasHoverColor && setHover(true)} onMouseOut={() => setHover(false)} - href={customHref} + href={href} className={qtMerge( 'flex items-center justify-center', 'text-typography-prominent', @@ -88,7 +60,7 @@ export function CustomLink({ fill={isHover || hasLinkColor ? '#FF444F' : '#000000'} /> )} - + ); } diff --git a/libs/components/vite.config.ts b/libs/components/vite.config.ts index 159248887..b3c256737 100644 --- a/libs/components/vite.config.ts +++ b/libs/components/vite.config.ts @@ -40,7 +40,7 @@ export default defineConfig({ 'swiper', ], }, - minify: true, + minify: false, }, test: { diff --git a/libs/hooks/src/index.ts b/libs/hooks/src/index.ts index 5a3db72a3..bf29083e3 100644 --- a/libs/hooks/src/index.ts +++ b/libs/hooks/src/index.ts @@ -1,3 +1,3 @@ -export * from './lib/use-custom-link/use-custom-link'; export * from './lib/use-build-variant'; export * from './lib/use-navigation'; +export * from './lib/use-shared-link'; diff --git a/libs/hooks/src/lib/use-custom-link/use-custom-link.spec.tsx b/libs/hooks/src/lib/use-custom-link/use-custom-link.spec.tsx deleted file mode 100644 index 4a034f8ac..000000000 --- a/libs/hooks/src/lib/use-custom-link/use-custom-link.spec.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import { renderHook } from '@testing-library/react'; -import mockRouter from 'next-router-mock'; -import { MemoryRouterProvider } from 'next-router-mock/MemoryRouterProvider'; -import useCustomLink from './use-custom-link'; - -describe('useCustomLink', () => { - it('should return no locale for en', () => { - const { result } = renderHook( - () => - useCustomLink({ - href: '/who-we-are', - }), - { - wrapper: MemoryRouterProvider, - }, - ); - - expect(result.current).toBe('/who-we-are'); - }); - - it('should have locale for other languages', () => { - const { result } = renderHook( - () => - useCustomLink({ - href: '/es/who-we-are', - }), - { - wrapper: MemoryRouterProvider, - }, - ); - - expect(result.current).toBe('/es/who-we-are'); - }); - - it("should have locale for other languages and don't add locale if it's already there", () => { - const { result } = renderHook( - () => - useCustomLink({ - href: '/es/who-we-are', - }), - { - wrapper: MemoryRouterProvider, - }, - ); - - expect(result.current).toBe('/es/who-we-are'); - }); - - it("should not add two locale subpaths if it's already there", () => { - const { result } = renderHook( - () => - useCustomLink({ - href: '/es/who-we-are', - locale: 'es', - }), - { - wrapper: MemoryRouterProvider, - }, - ); - - expect(result.current).toBe('/es/who-we-are'); - }); -}); diff --git a/libs/hooks/src/lib/use-custom-link/use-custom-link.ts b/libs/hooks/src/lib/use-custom-link/use-custom-link.ts deleted file mode 100644 index e2a9c7b4c..000000000 --- a/libs/hooks/src/lib/use-custom-link/use-custom-link.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { useRouter } from 'next/router'; -import { useMemo } from 'react'; - -export function useCustomLink({ - locale, - href, - skipLocaleHandling = false, -}: { - locale?: string | boolean; - href: string; - skipLocaleHandling?: boolean; -}) { - const router = useRouter(); - - const hrefWithLocale = useMemo(() => { - const selectedLocale = locale || router.query.locale || 'en'; - let customHref = href.toString() || router.asPath; - const skipLocaleCheck = - skipLocaleHandling || - customHref.indexOf('http') === 0 || - selectedLocale === 'en'; - - if (!skipLocaleCheck) { - if (locale) { - customHref = customHref.includes(`/${locale}/`) - ? customHref - : `/${locale}${customHref}`; - } else { - customHref = customHref.includes(`/${selectedLocale}/`) - ? customHref - : `/${selectedLocale}${customHref}`; - } - } - return customHref; - }, [href, locale, router.asPath, router.query.locale, skipLocaleHandling]); - - return hrefWithLocale; -} - -export default useCustomLink; diff --git a/libs/hooks/src/lib/use-shared-link/index.ts b/libs/hooks/src/lib/use-shared-link/index.ts new file mode 100644 index 000000000..b3135b05d --- /dev/null +++ b/libs/hooks/src/lib/use-shared-link/index.ts @@ -0,0 +1,6 @@ +import { SharedLinkContext } from '@deriv-com/providers'; +import { useContext } from 'react'; + +export const useSharedLink = () => { + return useContext(SharedLinkContext); +}; diff --git a/libs/hooks/src/lib/use-shared-link/use-shared-link.spec.tsx b/libs/hooks/src/lib/use-shared-link/use-shared-link.spec.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/libs/providers/src/index.ts b/libs/providers/src/index.ts index bc417a926..989e5bd94 100644 --- a/libs/providers/src/index.ts +++ b/libs/providers/src/index.ts @@ -1,2 +1,3 @@ export * from './lib/build-variant'; export * from './lib/navigation'; +export * from './lib/shared-link-provider'; diff --git a/libs/providers/src/lib/shared-link-provider/index.ts b/libs/providers/src/lib/shared-link-provider/index.ts new file mode 100644 index 000000000..13c36a88a --- /dev/null +++ b/libs/providers/src/lib/shared-link-provider/index.ts @@ -0,0 +1,3 @@ +export * from './shared-link-provider.context'; +export * from './shared-link-provider.provider'; +export * from './types'; diff --git a/libs/providers/src/lib/shared-link-provider/shared-link-provider.context.tsx b/libs/providers/src/lib/shared-link-provider/shared-link-provider.context.tsx new file mode 100644 index 000000000..31f5c3145 --- /dev/null +++ b/libs/providers/src/lib/shared-link-provider/shared-link-provider.context.tsx @@ -0,0 +1,6 @@ +import React from 'react'; +import { SharedLinkContextValue } from './types'; + +export const SharedLinkContext = React.createContext({ + DerivLink: (props) => , +}); diff --git a/libs/providers/src/lib/shared-link-provider/shared-link-provider.provider.spec.tsx b/libs/providers/src/lib/shared-link-provider/shared-link-provider.provider.spec.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/libs/providers/src/lib/shared-link-provider/shared-link-provider.provider.tsx b/libs/providers/src/lib/shared-link-provider/shared-link-provider.provider.tsx new file mode 100644 index 000000000..62da21112 --- /dev/null +++ b/libs/providers/src/lib/shared-link-provider/shared-link-provider.provider.tsx @@ -0,0 +1,17 @@ +import { ReactNode } from 'react'; +import { SharedLink } from './types'; +import { SharedLinkContext } from './shared-link-provider.context'; + +export const SharedLinkProvider = ({ + children, + DerivLink, +}: { + DerivLink: SharedLink; + children: ReactNode; +}) => { + return ( + + {children} + + ); +}; diff --git a/libs/providers/src/lib/shared-link-provider/types.ts b/libs/providers/src/lib/shared-link-provider/types.ts new file mode 100644 index 000000000..9d3194084 --- /dev/null +++ b/libs/providers/src/lib/shared-link-provider/types.ts @@ -0,0 +1,11 @@ +import React, { AnchorHTMLAttributes } from 'react'; + +export interface SharedLinkProps + extends AnchorHTMLAttributes { + fasih?: string; +} +export type SharedLink = React.FC; + +export interface SharedLinkContextValue { + DerivLink: SharedLink; +}