Fix links

src/components/AddLink.tsx

@@ -2,6 +2,7 @@ import React, { ComponentProps } from "react";
 import styled from "styled-components";
 import { colors }from "@theme/colors";
 import { Link } from "@components/index";
+
 const AddIcon = "/img/add-icon.png";
 
 const StyledLink = styled(Link)`
@@ -26,7 +27,7 @@ type AddLinkProps = ComponentProps<typeof Link> & {
 }
 
 const AddLink: React.FC<AddLinkProps> = ({ text, ...props }) => (
-  <StyledLink {...props}>
+  <StyledLink passHref={true} {...props}>
     <img src={AddIcon} />
     {text}
   </StyledLink>

src/components/AdminSidebar.tsx

@@ -20,7 +20,7 @@ const SideBar = styled.nav`
   }
 `;
 
-const StyledLink = styled(Link)<{path: string}>`
+const StyledLink = styled(Link)<{$path: string}>`
   padding: 1rem 3rem 1rem 1rem;
   letter-spacing: 3px;
   text-transform: uppercase;
@@ -30,7 +30,7 @@ const StyledLink = styled(Link)<{path: string}>`
   color: ${colors.white};
   border-left: 4px solid transparent;
 
-  ${p => p.path === p.to && `
+  ${p => p.$path === p.to && `
     border-left: 4px solid ${colors.white};
   `}
 
@@ -45,13 +45,13 @@ const StyledLink = styled(Link)<{path: string}>`
 
 const AdminSidebar: React.FC<AdminSidebarProps> = ({ path }) => (
   <SideBar>
-    <StyledLink to="/admin" path={path}>Home&nbsp;›</StyledLink>
-    <StyledLink to="/admin/events" path={path}>Events&nbsp;›</StyledLink>
-    <StyledLink to="/admin/feed" path={path}>Feed&nbsp;›</StyledLink>
-    <StyledLink to="/admin/signups" path={path}>Signup forms&nbsp;›</StyledLink>
-    <StyledLink to="/admin/jobads" path={path}>Job advertisements&nbsp;›</StyledLink>
-    <StyledLink to="https://static.sika.sik.party/admin" path={path}>Files&nbsp;›</StyledLink>
-    <StyledLink id="admin-sidebar-logout" to="/admin/logout" path={path}>Logout&nbsp;›</StyledLink>
+    <StyledLink to="/admin" passHref={true} $path={path}>Home&nbsp;›</StyledLink>
+    <StyledLink to="/admin/events" passHref={true} $path={path}>Events&nbsp;›</StyledLink>
+    <StyledLink to="/admin/feed" passHref={true} $path={path}>Feed&nbsp;›</StyledLink>
+    <StyledLink to="/admin/signups" passHref={true} $path={path}>Signup forms&nbsp;›</StyledLink>
+    <StyledLink to="/admin/jobads" passHref={true} $path={path}>Job advertisements&nbsp;›</StyledLink>
+    <StyledLink to="https://static.sika.sik.party/admin" passHref={true} $path={path}>Files&nbsp;›</StyledLink>
+    <StyledLink data-e2e="admin-sidebar-logout" to="/admin/logout" passHref={true} $path={path}>Logout&nbsp;›</StyledLink>
   </SideBar>
 );
 

src/components/Link.tsx

@@ -1,29 +1,33 @@
 import React from "react";
 import NextJSLink, { LinkProps } from "next/link";
 
-interface Props extends Omit<LinkProps, "href"> {
+interface Props extends Omit<LinkProps, "href" | "as"> {
+  to: string;
   template?: string;
-  to: string;
+  target?: string;
+  onClick?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
+  onMouseEnter?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
+  onMouseLeave?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
 }
 
-interface Props extends React.HTMLAttributes<HTMLAnchorElement> {
-  to: string;
-}
-
-const Link: React.FC<Props> = ({ to, template, ...props }) => {
+const Link: React.FC<Props> = ({ to, template, passHref, onClick, onMouseEnter, onMouseLeave, ...props }) => {
   if (template) {
     return (
-      <NextJSLink href={template} as={to} {...props}  />
+      <NextJSLink href={template} passHref={passHref} as={to} {...props}>
+        <a onClick={onClick} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} {...props} />
+      </NextJSLink>
     )
   }
   if (to.startsWith("/") || to.startsWith("#")) {
     return (
-      <NextJSLink href={to} {...props} />
+      <NextJSLink href={to} passHref={passHref} {...props}>
+        <a onClick={onClick} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} {...props} />
+      </NextJSLink>
     );
   }
   else {
     return (
-      <a href={to} {...props} />
+      <a href={to} onClick={onClick} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} {...props} />
     );
   }
 }

src/components/NavbarChildLink.tsx

@@ -29,7 +29,7 @@ const StyledLink = styled(Link)`
 `;
 
 const NavbarChildLink: React.FC<NavbarChildLinkProps> = (props) => (
-  <StyledLink {...props} />
+  <StyledLink passHref={true} {...props} />
 )
 
 export default NavbarChildLink;

src/components/NavbarDropdownLink.tsx

@@ -66,6 +66,7 @@ const NavbarDropdownLink: React.FC<NavbarDropdownLinkProps> = ({ to, text, explo
     <Container>
       <StyledLink
         to={to}
+        passHref={true}
         onMouseEnter={handleMouseEnterLink}
         onMouseLeave={handleMouseLeaveLink}
       >

src/pages/index.tsx

@@ -3,9 +3,15 @@ import { NextPage, GetServerSideProps } from "next";
 import { getEvents } from "@models/Event";
 import { getFeed } from "@models/Feed";
 import FrontPageView from "@views/FrontPage/FrontPageView";
+import Header from "@components/Header";
+import Footer from "@components/Footer/Footer";
 
 const FrontPage: NextPage<React.ComponentProps<typeof FrontPageView>> = (props) => (
-  <FrontPageView {...props} />
+  <>
+    <Header />
+    <FrontPageView {...props} />
+    <Footer />
+  </>
 );
 
 export const getServerSideProps: GetServerSideProps = async () => {

src/views/ContactsPage/ContactsPageView.tsx

@@ -38,7 +38,7 @@ class ContactsPageView extends React.Component<ContactsPageViewProps> {
             <CommitteeContainer name_fi="Hallitus" name_en="Board" contacts={board} />
             <p>
               {"Hallitukseen saa yhteyden lähettämällä sähköpostia "}
-              <BlueLink to="mailto:sik-hallitus@list.ayy.fi">
+              <BlueLink to="mailto:sik-hallitus@list.ayy.fi" passHref={true}>
                 sik-hallitus@list.ayy.fi
               </BlueLink>
             </p>

tests/testcafe/admin.test.ts

@@ -36,7 +36,7 @@ test("User can log out and is redirected to login", async t => {
    */
   await t.click(Selector("#login-submit"));
 
-  const logout = Selector("#admin-sidebar-logout");
+  const logout = Selector(`[data-e2e="admin-sidebar-logout"]`);
   await t.click(logout);
 
   const loginForm = Selector("form.admin-login-form");