old-ybbond

commit 2bd8f4dc133f7954553317ac081fc6c5fa018b64
parent 5fe4429e9038cbbb6545b15c5123b4ca7452b00d
Author: Yohanes Bandung <bandungpenting@gmail.com>
Date:   Mon,  9 Mar 2020 21:28:14 +0700

refactor(Link): integrate with react-router

Diffstat:
M
src/Components/Link.js
 | 
31
++++++++++++++++++++++++++++---

diff --git a/src/Components/Link.js b/src/Components/Link.js
@@ -1,4 +1,6 @@
 // @flow
+import React from 'react';
+import {useHistory} from 'react-router';
 import styled, {type StyledComponent} from 'styled-components';
 import theme from 'styled-theming';
 
@@ -9,11 +11,34 @@ const linkColor = theme('mode', {
   dark: colors.linkLight,
 });
 
-type LinkProps = {} & HTMLAnchorElement;
+type LinkProps = {to: string, children: React$Node};
 
-const LinkBase: StyledComponent<LinkProps, {}, {}> = styled.a`
+const LinkBase: StyledComponent<{}, {}, {}> = styled.a`
   color: ${linkColor};
+  cursor: pointer;
   text-decoration: underline solid ${linkColor};
+
+  &:hover {
+    color: ${colors.orange};
+    text-decoration: underline solid ${colors.orange};
+  }
 `;
 
-export default LinkBase;
+const Link = ({children, to, ...props}: LinkProps) => {
+  const history = useHistory();
+  const isExternal = to[0] !== '/';
+  const handleClick = () => {
+    history.push(to);
+  };
+  return isExternal ? (
+    <LinkBase {...props} target="_blank" rel="noopener noreferrer" href={to}>
+      {children}
+    </LinkBase>
+  ) : (
+    <LinkBase as="span" onClick={handleClick}>
+      {children}
+    </LinkBase>
+  );
+};
+
+export default Link;