Rename Anchor to Link

src/components/AddLink.tsx

@@ -1,10 +1,10 @@
 import React, { ComponentProps } from "react";
 import styled from "styled-components";
 import { colors }from "@theme/colors";
-import Anchor from "@components/Anchor";
+import { Link } from "@components/index";
 import AddIcon from "@assets/img/add-icon.png";
 
-const Link = styled(Anchor)`
+const StyledLink = styled(Link)`
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
@@ -21,15 +21,15 @@ const Link = styled(Anchor)`
   }
 `;
 
-type AddLinkProps = ComponentProps<typeof Anchor> & {
+type AddLinkProps = ComponentProps<typeof Link> & {
   text: string;
 }
 
 const AddLink: React.FC<AddLinkProps> = ({ text, ...props }) => (
-  <Link {...props}>
+  <StyledLink {...props}>
     <img src={AddIcon} />
     {text}
-  </Link>
+  </StyledLink>
 )
 
 export default AddLink;

src/components/AdminSidebar.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import Anchor from "@components/Anchor";
+import { Link } from "@components/index";
 import colors from "@theme/colors";
 import breakpoints from "@theme/breakpoints";
 
@@ -20,7 +20,7 @@ const SideBar = styled.nav`
   }
 `;
 
-const StyledLink = styled(Anchor)<{path: string}>`
+const StyledLink = styled(Link)<{path: string}>`
   padding: 1rem 3rem 1rem 1rem;
   letter-spacing: 3px;
   text-transform: uppercase;

src/components/Anchor.tsx

@@ -1,25 +0,0 @@
-import React from "react";
-import { Link } from "react-router-dom";
-import { HashLink } from "react-router-hash-link";
-
-interface AnchorProps extends React.HTMLAttributes<HTMLAnchorElement> {
-  to: string;
-}
-
-const Anchor: React.FC<AnchorProps> = ({ to, ...props }) => {
-  if (to.startsWith("/")) {
-    return (
-      <Link to={to} {...props} />
-    );
-  } else if (to.startsWith("#")) {
-    return (
-      <HashLink to={to} {...props} />
-    );
-  }
-  else {
-    return (
-      <a href={to} {...props} />
-    );
-  }
-}
-export default Anchor;

src/components/Card.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import { colors } from "@theme/colors";
-import Anchor from "@components/Anchor";
+import { Link } from "@components/index";
 import breakpoints from "@theme/breakpoints";
 
 interface WrappedCardProps {
@@ -97,11 +97,11 @@ const WrappedCard: React.FC<WrappedCardProps> = ({ title, text, link, image, ima
   ) : null;
 
   const button = (
-    <Anchor to={link}>
+    <Link to={link}>
       <button onClick={buttonOnClick}>
       Lue lisää&nbsp;›
       </button>
-    </Anchor>
+    </Link>
   );
 
   return (

src/components/Footer/FooterContent.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import Anchor from "../Anchor";
+import { Link } from "@components/index";
 import colors from "@theme/colors";
 import breakpoints from "@theme/breakpoints";
 
@@ -79,14 +79,14 @@ const FooterContent: React.FC = () => (
             <div>
               <p>Y-tunnus: 1627010-1</p>
               <p>sik-hallitus@list.ayy.fi</p>
-              <Anchor to="/yhteystiedot">Yhteystiedot</Anchor>
+              <Link to="/yhteystiedot">Yhteystiedot</Link>
             </div>
           </div>
           <div>
-            <Anchor to="/jaseneksi">Jäseneksi</Anchor>
-            <Anchor to="/palaute">Palaute</Anchor>
-            <Anchor to="https://static.sika.sik.party">Arkisto</Anchor>
-            <Anchor to="https://static.sika.sik.party">Materiaalipankki</Anchor>
+            <Link to="/jaseneksi">Jäseneksi</Link>
+            <Link to="/palaute">Palaute</Link>
+            <Link to="https://static.sika.sik.party">Arkisto</Link>
+            <Link to="https://static.sika.sik.party">Materiaalipankki</Link>
           </div>
         </Columns>
       </MarginSpace>

src/components/HeaderLogo.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import { Link } from "react-router-dom";
+import { Link } from "@components/index";
 import TitleImage from "@assets/img/SIK_RGB_W_side.png";
 import breakpoints from "@theme/breakpoints";
 

src/components/Hero/HeroAside.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import { colors } from "@theme/colors";
-import Anchor from "@components/Anchor";
+import { Link } from "@components/index";
 
 interface HeroAsideItemProps {
   header: string;
@@ -20,11 +20,11 @@ export const HeroAsideItem: React.FC<HeroAsideItemProps> = ({ header, text, link
     {text && (
       <p>{text}</p>
     )}
-    <Anchor to={link}>
+    <Link to={link}>
       <h6>
         {linkText}
       </h6>
-    </Anchor>
+    </Link>
   </Article>
 )
 

src/components/Link.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+// import NextJSLink, { LinkProps } from "next/link";
+import { Link as RouterLink } from "react-router-dom";
+import { HashLink } from "react-router-hash-link";
+
+// interface Props extends Omit<LinkProps, "href"> {
+//   template?: string;
+//   to: string;
+// }
+
+interface Props extends React.HTMLAttributes<HTMLAnchorElement> {
+  to: string;
+}
+
+const Link: React.FC<Props> = ({ to, ...props }) => {
+// const Link: React.FC<Props> = ({ to, template, ...props }) => {
+//   if (template) {
+//     return (
+//       <NextJSLink href={template} as={to} {...props}  />
+//     )
+//   }
+//   if (to.startsWith("/") || to.startsWith("#")) {
+//     return (
+//       <NextJSLink href={to} {...props} />
+//     );
+//   }
+//   else {
+//     return (
+//       <a href={to} {...props} />
+//     );
+//   }
+  if (to.startsWith("/")) {
+    return (
+      <RouterLink to={to} {...props} />
+    );
+  } else if (to.startsWith("#")) {
+    return (
+      <HashLink to={to} {...props} />
+    );
+  }
+  else {
+    return (
+      <a href={to} {...props} />
+    );
+  }
+}
+
+export default Link;

src/components/NavbarChildLink.tsx

@@ -2,13 +2,13 @@ import React from "react";
 import styled from "styled-components";
 import colors from "@theme/colors";
 import breakpoints from "@theme/breakpoints";
-import Anchor from "./Anchor";
+import { Link } from "@components/index";
 
 interface NavbarChildLinkProps {
   to: string;
 }
 
-const StyledLink = styled(Anchor)`
+const StyledLink = styled(Link)`
   display: block;
   padding: 1rem;
   letter-spacing: 1.5px;

src/components/NavbarDropdownLink.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import styled from "styled-components";
 import DropDownBox from "./DropDownBox";
-import Anchor from "./Anchor";
+import { Link } from "@components/index";
 import colors from "@theme/colors";
 import breakpoints from "@theme/breakpoints";
 
@@ -20,7 +20,7 @@ const Container = styled.div`
   }
 `;
 
-const StyledLink = styled(Anchor)`
+const StyledLink = styled(Link)`
   display: flex;
   flex-flow: row nowrap;
   justify-content: flex-start;

src/components/PageLink.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import { colors } from "@theme/colors";
-import Anchor from "@components/Anchor";
+import { Link } from "@components/index";
 
 interface PageLinkProps {
   to: string;
@@ -43,7 +43,7 @@ const StyledPageLink = styled.div`
 const PageLink: React.FC<PageLinkProps> = ({ to, desc, children }) => (
   <StyledPageLink>
     <p>{children}</p>
-    <Anchor to={to}>{desc}</Anchor>
+    <Link to={to}>{desc}</Link>
   </StyledPageLink>
 );
 

src/components/Sections/CTASection.tsx

@@ -2,7 +2,7 @@
 import React from "react";
 import styled from "styled-components";
 import { colors } from "@theme/colors";
-import Anchor from "@components/Anchor";
+import { Link } from "@components/index";
 
 const Section = styled.section<{ colors: string }>`
   ${(p) => p.colors}
@@ -91,9 +91,9 @@ const CTASection: React.FC<CTASectionProps> = ({ bgColor = "orange1", link, link
   <Section colors={textColors(bgColor)} {...props}>
     <h1>{children}</h1>
     {link && (
-      <Anchor to={link}>
+      <Link to={link}>
         <h4>{linkText}</h4>
-      </Anchor>
+      </Link>
     )}
   </Section>
 );

src/components/index.tsx

@@ -8,3 +8,4 @@ export { default as TextSection } from "./Sections/TextSection";
 export { default as FullWidthSection } from "./Sections/FullWidthSection";
 export { default as InfoBox } from "./InfoBox";
 export { default as Accordion } from "./Accordion/Accordion";
+export { default as Link } from "./Link";

src/pages/admin/AdminEventPage.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import { Helmet } from "react-helmet";
 import { formatRelative } from "date-fns";
 import AdminListCommon from "@views/admin/AdminListCommon";
-import Anchor from "@components/Anchor";
+import { Link } from "@components/index";
 import AddLink from "@components/AddLink";
 import { Event, getEvents } from "@models/Event";
 
@@ -25,7 +25,7 @@ const renderData = (events: Event[]) => {
       <tbody>
         {events.map(event => (
           <tr key={event.id}>
-            <td><Anchor to={`${URL}/${event.id}`}>{event.title_fi}</Anchor></td>
+            <td><Link to={`${URL}/${event.id}`}>{event.title_fi}</Link></td>
             <td>{formatRelative(new Date(event.start_time), new Date())}</td>
             <td>{formatRelative(new Date(event.end_time), new Date())}</td>
           </tr>

src/pages/admin/AdminFeedPage.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import { Helmet } from "react-helmet";
 import { formatRelative } from "date-fns";
 import AdminListCommon from "@views/admin/AdminListCommon";
-import Anchor from "@components/Anchor";
+import { Link } from "@components/index";
 import AddLink from "@components/AddLink";
 import { Post, getFeed } from "@models/Feed";
 
@@ -25,7 +25,7 @@ const renderData = (feed: Post[]) => {
       <tbody>
         {feed.map(post => (
           <tr key={post.id}>
-            <td><Anchor to={`${URL}/${post.id}`}>{post.title_fi}</Anchor></td>
+            <td><Link to={`${URL}/${post.id}`}>{post.title_fi}</Link></td>
             <td>{post.description_fi}</td>
             <td>{formatRelative(new Date(post.publish_time), new Date())}</td>
           </tr>

src/pages/admin/AdminJobAdPage.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Helmet } from "react-helmet";
 import { formatRelative } from "date-fns";
 import AdminListCommon from "@views/admin/AdminListCommon";
-import Anchor from "@components/Anchor";
+import { Link } from "@components/index";
 import AddLink from "@components/AddLink";
 import useFetchJobAds from "@hooks/useFetchJobAds";
 import { JobAd } from "@models/JobAd";
@@ -27,7 +27,7 @@ const renderData = (jobAds: JobAd[]) => {
       <tbody>
         {jobAds.map(ad => (
           <tr key={ad.id}>
-            <td><Anchor to={`${URL}/${ad.id}`}>{ad.title_fi}</Anchor></td>
+            <td><Link to={`${URL}/${ad.id}`}>{ad.title_fi}</Link></td>
             <td>{ad.description_fi}</td>
             <td>
               {ad.autohide_enabled ?

src/pages/admin/AdminSignupPage.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import { Helmet } from "react-helmet";
 import { formatRelative } from "date-fns";
 import AdminListCommon from "@views/admin/AdminListCommon";
-import Anchor from "@components/Anchor";
+import { Link } from "@components/index";
 import AddLink from "@components/AddLink";
 import { SignupForm, getForms } from "@models/SignupForm";
 
@@ -27,11 +27,11 @@ const renderData = (signupForms: SignupForm[]) => {
       <tbody>
         {signupForms.map(signupForm => (
           <tr key={signupForm.id}>
-            <td><Anchor to={`${URL}/${signupForm.id}`}>{signupForm.title_fi}</Anchor></td>
+            <td><Link to={`${URL}/${signupForm.id}`}>{signupForm.title_fi}</Link></td>
             <td>{formatRelative(new Date(signupForm.start_time), new Date())}</td>
             <td>{formatRelative(new Date(signupForm.end_time), new Date())}</td>
-            <td><Anchor to={`${URL}/${signupForm.id}/list`}>View</Anchor></td>
-            <td><Anchor to={`${URL}/${signupForm.id}/email`}>Send</Anchor></td>
+            <td><Link to={`${URL}/${signupForm.id}/list`}>View</Link></td>
+            <td><Link to={`${URL}/${signupForm.id}/email`}>Send</Link></td>
           </tr>
         ))}
       </tbody>

src/views/ActualPage/ActualPageHero.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Hero, HeroPrimarySection, HeroSecondarySection, HeroSecondarySectionItem, HeroAside, HeroAsideItem, HeroPrimaryButtons } from "@components/Hero";
-import Anchor from "@components/Anchor";
+import { Link } from "@components/index";
 import noop from "@utils/noop";
 
 const ActualPageHero: React.FC = () => (
@@ -10,16 +10,16 @@ const ActualPageHero: React.FC = () => (
       text="Teekkarielämä ei ole pelkkää saunomista, juhlimista ja muita huvituksia—tai no, on se sitäkin."
     >
       <HeroPrimaryButtons row>
-        <Anchor to="#tapahtumat">
+        <Link to="#tapahtumat">
           <button onClick={noop}>
             <span>Tapahtumat&nbsp;›</span>
           </button>
-        </Anchor>
-        <Anchor to="#uutiset">
+        </Link>
+        <Link to="#uutiset">
           <button onClick={noop}>
             <span>Uutiset&nbsp;›</span>
           </button>
-        </Anchor>
+        </Link>
       </HeroPrimaryButtons>
     </HeroPrimarySection>
     <HeroAside bgColor="lightTurquoise">

src/views/ContactsPage/ContactsPageView.tsx

@@ -4,14 +4,14 @@ import { Occupation, Committee } from "@models/Contacts";
 import CommitteeContainer from "@components/CommitteeContainer";
 import { Divider, TextSection } from "@components/index";
 import { colors } from "@theme/colors";
-import Anchor from "@components/Anchor";
+import { Link } from "@components/index";
 
 interface ContactsPageViewProps {
   contacts: Occupation[];
   committees: Committee[];
 }
 
-const BlueLink = styled(Anchor)`
+const BlueLink = styled(Link)`
   color: ${colors.blue1};
 
   &:hover {

src/views/CorporatePage/JobAdList.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import { JobAd } from "@models/JobAd";
-// import Anchor from "@components/Anchor";
+// import { Link } from "@components/index";
 import { Accordion } from "@components/index";
 import ReactMarkdown from "react-markdown";
 

src/views/EventPage/EventPageView.tsx

@@ -3,7 +3,7 @@ import styled from "styled-components";
 import colors from "@theme/colors";
 import { Event } from "@models/Event";
 import Button from "@components/Button";
-import Anchor from "@components/Anchor";
+import { Link } from "@components/index";
 import noop from "@utils/noop";
 import { TextSection } from "@components/index";
 import MarkdownStyles from "@views/common/MarkdownStyles";
@@ -56,11 +56,11 @@ const EventPageView: React.FC<EventPageViewProps> = ({ event }) => {
         {/* We may have multiple signup forms. Generate own Button for each one */}
         <SignupButtons>
           {event.signupForm.map(sf => (
-            <Anchor key={sf.id} to={`/signup/${sf.id}`}>
+            <Link key={sf.id} to={`/signup/${sf.id}`}>
               <Button type="filled" onClick={noop}>
                 {sf.title_fi}
               </Button>
-            </Anchor>
+            </Link>
           )
           )}
         </SignupButtons>

src/views/FrontPage/FrontPageHero.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Anchor from "@components/Anchor";
+import { Link } from "@components/index";
 import { Hero, HeroPrimarySection, HeroAside, HeroAsideItem, HeroPrimaryButtons } from "@components/Hero";
 import noop from "@utils/noop";
 
@@ -10,16 +10,16 @@ const FrontPageHero: React.FC = () => (
       text="on opiskelijajärjestö, joka kokoaa yhteen laaja-alaisesti sähkötekniikan osaajia elektroniikasta nanoteknologiaan ja akustiikkaan. Kiltalaisista valmistuu alansa huippuja, jotka ovat avainasemassa vauhdilla sähköistyvän maailmamme kehityksessä."
     >
       <HeroPrimaryButtons>
-        <Anchor to="/kilta">
+        <Link to="/kilta">
           <button onClick={noop}>
             <span>Tietoa killasta&nbsp;›</span>
           </button>
-        </Anchor>
-        <Anchor to="/kilta/toiminta">
+        </Link>
+        <Link to="/kilta/toiminta">
           <button onClick={noop}>
             <span>Vastapainoa opiskelulle&nbsp;›</span>
           </button>
-        </Anchor>
+        </Link>
       </HeroPrimaryButtons>
     </HeroPrimarySection>
 

src/views/FrontPage/FrontPageView.tsx

@@ -5,7 +5,7 @@ import FrontPageHero from "./FrontPageHero";
 import { Event } from "@models/Event";
 import { Post } from "@models/Feed";
 import { colors } from "@theme/colors";
-import Anchor from "@components/Anchor";
+import { Link } from "@components/index";
 import FullWidthSection from "@components/Sections/FullWidthSection";
 import noop from "@utils/noop";
 
@@ -116,19 +116,19 @@ const FrontPageView: React.FC<FrontPageViewProps> = ({ events, feed }) => (
         <h6>Yhteistyössä:</h6>
         <SponsorReel>
           <div>
-            <Anchor to="https://new.abb.com/fi/uralle"><img src={ABB} /></Anchor>
-            <Anchor to="https://www.capgemini.com/"><img src={Capgemini} /></Anchor>
-            <Anchor to="https://www.caruna.fi/tietoa-meista/tyonhakijalle/tyonantajalupaus"><img src={Caruna} /></Anchor>
-            <Anchor to="https://www.eaton.com/us/en-us.html"><img src={Eaton} /></Anchor>
-            <Anchor to="#https://www.ensto.com/fi"><img src={Ensto} /></Anchor>
-            <Anchor to="https://www.esett.com/"><img src={eSett} /></Anchor>
-            <Anchor to="https://www.fennovoima.fi/"><img src={Fennovoima} /></Anchor>
-            <Anchor to="https://www.fingrid.fi/"><img src={Fingrid} /></Anchor>
-            <Anchor to="https://www.nrcgroup.fi/"><img src={NRCGroup} /></Anchor>
-            <Anchor to="https://www.okmetic.com/fi/"><img src={Okmetic} /></Anchor>
-            <Anchor to="https://www.sogeti.com/"><img src={Sogeti} /></Anchor>
+            <Link to="https://new.abb.com/fi/uralle"><img src={ABB} /></Link>
+            <Link to="https://www.capgemini.com/"><img src={Capgemini} /></Link>
+            <Link to="https://www.caruna.fi/tietoa-meista/tyonhakijalle/tyonantajalupaus"><img src={Caruna} /></Link>
+            <Link to="https://www.eaton.com/us/en-us.html"><img src={Eaton} /></Link>
+            <Link to="https://www.ensto.com/fi"><img src={Ensto} /></Link>
+            <Link to="https://www.esett.com/"><img src={eSett} /></Link>
+            <Link to="https://www.fennovoima.fi/"><img src={Fennovoima} /></Link>
+            <Link to="https://www.fingrid.fi/"><img src={Fingrid} /></Link>
+            <Link to="https://www.nrcgroup.fi/"><img src={NRCGroup} /></Link>
+            <Link to="https://www.okmetic.com/fi/"><img src={Okmetic} /></Link>
+            <Link to="https://www.sogeti.com/"><img src={Sogeti} /></Link>
           </div>
-          <Anchor to="/yritysyhteistyo">Haluatko kuulla lisää yhteistyöstä kanssamme?</Anchor>
+          <Link to="/yritysyhteistyo">Haluatko kuulla lisää yhteistyöstä kanssamme?</Link>
         </SponsorReel>
       </FullWidthSection>
     </main>