[90] link refactor - terrianx/link refactor #140
Conversation
There was a problem hiding this comment.
connectList still needs to be updated. some pages are not included in this mvp im pretty sure.
need to fill in interest form
also wondering if the footer link at the very bottom for "HARVEST MISSION COMMUNITY CHURCH" should redirect to this new site or the old one?
There was a problem hiding this comment.
clicking ann arbor on location no longer does nothing. it opens a new tab at the home page.
There was a problem hiding this comment.
i know this page is on hold right now but i still changed it since we are probably going to use it in the near future?
wondering if the link to the lg form (check out a lifegroup) should link directly to the form itself or the internal page (which is what it currently does)
frontend/src/components/footer.js
Outdated
| @@ -181,12 +173,12 @@ const Footer = () => { | |||
| <h2 className="text-Shades-0 text-sm md:text-lg font-normal mb-0 ml-1 tracking-medium-wide md:tracking-normal"> | |||
| 2023 | |||
| </h2> | |||
| <a | |||
| <Link | |||
| href="https://annarbor.hmcc.net" | |||
There was a problem hiding this comment.
should this redirect to current gatsby site?
There was a problem hiding this comment.
im not sure, i think it probably should. ill update it to point to the new site
frontend/src/components/header.js
Outdated
| @@ -133,16 +133,14 @@ const Header = () => { | |||
| {locationsList.map((item, index) => ( | |||
| <Link | |||
| key={`browseLink-${index}`} | |||
| to={item.route} | |||
| target="_blank" | |||
| href={item.route} | |||
There was a problem hiding this comment.
for location list, need to use to instead 'href' you can do ternary opration for the which Link and properties to use:
Here is my suggestion
index === 0 ? (<Link key={`browseLink-${index}`} to={item.route} className={`${textStyle} hover:bg-[#0C2966] py-2 px-4 border-b-[0.1px] border-gray-100 tracking-[0.96px]`}>{item.title}</Link>) : (<Link key={`browseLink-${index}`} href={item.route} className={`${textStyle} hover:bg-[#0C2966] py-2 px-4 border-b-[0.1px] border-gray-100 tracking-[0.96px]`}>{item.title}</Link>)
i think this works. i do not know full syntax for reactjs for this ternary operation. but hopefully it works.
Co-authored-by: thedomcab <9808478+thedomcab@users.noreply.github.com>
* Link refactor skeleton * Added conditional rendering for links * Small whitespace fix * Usage comment * Updated button links to use custom link * Refactored all links * Removed debug * Change to redirection to home fix Co-authored-by: thedomcab <9808478+thedomcab@users.noreply.github.com> * Fixed to redirection and ann arbor location link --------- Co-authored-by: thedomcab <9808478+thedomcab@users.noreply.github.com>
updated all links including gatsby links, anchors, buttonlinks (primary and secondary)
links now all look like
<Link href="some external site" prop1=x prop2=y>Click here</Link>or
<Link to="some internal page" prop1=x prop2=y>Click here</Link>href must be defined for an external link
to must be defined for internal page, otherwise it redirects to home page
any props can be passed down all the way to the original
<a>or<GatsbyLink>element defined in components/Link.jschildren can also be rendered in
Linki tested every link after making this change. every link that is currently working still works. #127 and #131 are some currently broken links.