Restructure Link Components and fix internal link children error (#106)

* Restructure Link Components and fix internal link children error

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 {

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}>

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 {
+export const ExternalLink: React.FC<LinkWithTextProps> = ({ href, text, icon, className = 'text-light' }) => {
-  href: string;
-  icon?: IconProp;
-  className?: string
-}
-
-export interface ExternalLinkTextProp {
-  text: string;
-}
-
-export const ExternalLink: React.FC<ExternalLinkProp & ExternalLinkTextProp> = ({ href, text, icon, className = 'text-light' }) => {
   return (
     <a href={href}
       target="_blank"

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 {
+export const InternalLink: React.FC<LinkWithTextProps> = ({ href, text, icon, className = 'text-light' }) => {
-  path: string;
-  icon?: IconProp;
-  className?: string
-}
-
-export interface InternalLinkTextProp {
-  text: string;
-}
-
-export const InternalLink: React.FC<InternalLinkProp & InternalLinkTextProp> = ({ path, text, icon, className = 'text-light' }) => {
   return (
-    <LinkContainer to={path}
+    <LinkContainer to={href}
       className={className}>
-      {
+      <Fragment>
-        icon
+        {
-          ? <Fragment>
+          icon
-            <FontAwesomeIcon icon={icon} fixedWidth={true}/>&nbsp;
+            ? <Fragment>
-          </Fragment>
+              <FontAwesomeIcon icon={icon} fixedWidth={true}/>&nbsp;
-          : null
+            </Fragment>
-      }
+            : null
-      {text}
+        }
+        {text}
+      </Fragment>
     </LinkContainer>
   )
 }

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 {
+export const TranslatedExternalLink: React.FC<TranslatedLinkProps> = ({ i18nKey, i18nOption, ...props }) => {
-  i18nKey: string;
-  i18nOption?: (TOptionsBase & StringMap) | string
-}
-
-const TranslatedExternalLink: React.FC<TranslatedLinkProps & ExternalLinkProp> = ({ i18nKey, i18nOption, ...props }) => {
   const { t } = useTranslation()
   return (
     <ExternalLink text={t(i18nKey, i18nOption)} {...props}/>
   )
 }
-
-export { TranslatedExternalLink }

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 { InternalLink } from './internal-link'
-import { TranslatedLinkProps } from './translated-external-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}/>

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
+}