TTMK/web2.0-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix links

Browse Source
This commit is contained in:
Aarni Halinen
2020-12-29 20:22:50 +02:00
parent cec44c3053
commit f114e5c6e6
8 changed files with 36 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AddLink.tsx
+2 -1
View File
@@ -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
+9 -9
View File
@@ -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
+14 -10
View File
@@ -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
+1 -1
View File
@@ -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
+1
View File
@@ -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
+6
View File
@@ -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) => (
<>
<Header />
<FrontPageView {...props} />
<Footer />
</>
);
export const getServerSideProps: GetServerSideProps = async () => {
src/views/ContactsPage/ContactsPageView.tsx
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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");