From 5c716bd314b26fe1d84f770a45ebb7719e0ed0c6 Mon Sep 17 00:00:00 2001
From: mrdrogdrog <mr.drogdrog@gmail.com>
Date: Sun, 31 May 2020 13:25:41 +0200
Subject: [PATCH] Restructure Link Components and fix internal link children
 error (#106)

* Restructure Link Components and fix internal link children error
---
 .../application-loader/loading-screen.tsx     |  2 +-
 .../layout/footer/powered-by-links.tsx        |  2 +-
 src/components/links/external-link.tsx        | 16 ++-------
 src/components/links/internal-link.tsx        | 36 ++++++++-----------
 .../links/translated-external-link.tsx        | 13 ++-----
 .../links/translated-internal-link.tsx        |  6 ++--
 src/components/links/types.ts                 | 17 +++++++++
 7 files changed, 42 insertions(+), 50 deletions(-)
 create mode 100644 src/components/links/types.ts

diff --git a/src/components/application-loader/loading-screen.tsx b/src/components/application-loader/loading-screen.tsx
index 32a1a6c96..0477c375f 100644
--- a/src/components/application-loader/loading-screen.tsx
+++ b/src/components/application-loader/loading-screen.tsx
@@ -1,5 +1,5 @@
-import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import React from 'react'
 import { Alert } from 'react-bootstrap'
 
 export interface LoadingScreenProps {
diff --git a/src/components/landing/layout/footer/powered-by-links.tsx b/src/components/landing/layout/footer/powered-by-links.tsx
index 9f58ae29d..865a00c45 100644
--- a/src/components/landing/layout/footer/powered-by-links.tsx
+++ b/src/components/landing/layout/footer/powered-by-links.tsx
@@ -18,7 +18,7 @@ export const PoweredByLinks: React.FC = () => {
         <ExternalLink href="https://codimd.org" text="CodiMD"/>
       </Trans>
       &nbsp;|&nbsp;
-      <TranslatedInternalLink path='/n/release-notes' i18nKey='landing.footer.releases'/>
+      <TranslatedInternalLink href='/n/release-notes' i18nKey='landing.footer.releases'/>
       {
         Object.entries({ ...config.specialLinks }).map(([i18nKey, href]) =>
           <Fragment key={i18nKey}>
diff --git a/src/components/links/external-link.tsx b/src/components/links/external-link.tsx
index 79739eb10..a68bdccc5 100644
--- a/src/components/links/external-link.tsx
+++ b/src/components/links/external-link.tsx
@@ -1,18 +1,8 @@
-import React, { Fragment } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { IconProp } from '../../utils/iconProp'
+import React, { Fragment } from 'react'
+import { LinkWithTextProps } from './types'
 
-export interface ExternalLinkProp {
-  href: string;
-  icon?: IconProp;
-  className?: string
-}
-
-export interface ExternalLinkTextProp {
-  text: string;
-}
-
-export const ExternalLink: React.FC<ExternalLinkProp & ExternalLinkTextProp> = ({ href, text, icon, className = 'text-light' }) => {
+export const ExternalLink: React.FC<LinkWithTextProps> = ({ href, text, icon, className = 'text-light' }) => {
   return (
     <a href={href}
       target="_blank"
diff --git a/src/components/links/internal-link.tsx b/src/components/links/internal-link.tsx
index 52290b4ff..96cb0f9f8 100644
--- a/src/components/links/internal-link.tsx
+++ b/src/components/links/internal-link.tsx
@@ -1,30 +1,22 @@
-import React, { Fragment } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import React, { Fragment } from 'react'
 import { LinkContainer } from 'react-router-bootstrap'
-import { IconProp } from '../../utils/iconProp'
+import { LinkWithTextProps } from './types'
 
-export interface InternalLinkProp {
-  path: string;
-  icon?: IconProp;
-  className?: string
-}
-
-export interface InternalLinkTextProp {
-  text: string;
-}
-
-export const InternalLink: React.FC<InternalLinkProp & InternalLinkTextProp> = ({ path, text, icon, className = 'text-light' }) => {
+export const InternalLink: React.FC<LinkWithTextProps> = ({ href, text, icon, className = 'text-light' }) => {
   return (
-    <LinkContainer to={path}
+    <LinkContainer to={href}
       className={className}>
-      {
-        icon
-          ? <Fragment>
-            <FontAwesomeIcon icon={icon} fixedWidth={true}/>&nbsp;
-          </Fragment>
-          : null
-      }
-      {text}
+      <Fragment>
+        {
+          icon
+            ? <Fragment>
+              <FontAwesomeIcon icon={icon} fixedWidth={true}/>&nbsp;
+            </Fragment>
+            : null
+        }
+        {text}
+      </Fragment>
     </LinkContainer>
   )
 }
diff --git a/src/components/links/translated-external-link.tsx b/src/components/links/translated-external-link.tsx
index 8edfcaca9..4fa1eb05f 100644
--- a/src/components/links/translated-external-link.tsx
+++ b/src/components/links/translated-external-link.tsx
@@ -1,18 +1,11 @@
-import { StringMap, TOptionsBase } from 'i18next'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { ExternalLink, ExternalLinkProp } from './external-link'
+import { ExternalLink } from './external-link'
+import { TranslatedLinkProps } from './types'
 
-export interface TranslatedLinkProps {
-  i18nKey: string;
-  i18nOption?: (TOptionsBase & StringMap) | string
-}
-
-const TranslatedExternalLink: React.FC<TranslatedLinkProps & ExternalLinkProp> = ({ i18nKey, i18nOption, ...props }) => {
+export const TranslatedExternalLink: React.FC<TranslatedLinkProps> = ({ i18nKey, i18nOption, ...props }) => {
   const { t } = useTranslation()
   return (
     <ExternalLink text={t(i18nKey, i18nOption)} {...props}/>
   )
 }
-
-export { TranslatedExternalLink }
diff --git a/src/components/links/translated-internal-link.tsx b/src/components/links/translated-internal-link.tsx
index 418cb22f5..2c6517ef7 100644
--- a/src/components/links/translated-internal-link.tsx
+++ b/src/components/links/translated-internal-link.tsx
@@ -1,9 +1,9 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { InternalLink, InternalLinkProp } from './internal-link'
-import { TranslatedLinkProps } from './translated-external-link'
+import { InternalLink } from './internal-link'
+import { TranslatedLinkProps } from './types'
 
-export const TranslatedInternalLink: React.FC<TranslatedLinkProps & InternalLinkProp> = ({ i18nKey, i18nOption, ...props }) => {
+export const TranslatedInternalLink: React.FC<TranslatedLinkProps> = ({ i18nKey, i18nOption, ...props }) => {
   const { t } = useTranslation()
   return (
     <InternalLink text={t(i18nKey, i18nOption)} {...props}/>
diff --git a/src/components/links/types.ts b/src/components/links/types.ts
new file mode 100644
index 000000000..b6c5b5f8d
--- /dev/null
+++ b/src/components/links/types.ts
@@ -0,0 +1,17 @@
+import { StringMap, TOptionsBase } from 'i18next'
+import { IconProp } from '../../utils/iconProp'
+
+export interface GeneralLinkProp {
+  href: string;
+  icon?: IconProp;
+  className?: string
+}
+
+export interface LinkWithTextProps extends GeneralLinkProp {
+  text: string;
+}
+
+export interface TranslatedLinkProps extends GeneralLinkProp{
+  i18nKey: string;
+  i18nOption?: (TOptionsBase & StringMap) | string
+}