Merge pull request 'Return of working develop' (#125) from fix/clean-develop into develop

Reviewed-on: http://85.143.176.51:3000/free-land/front-end/pulls/125

src/components/Card.tsx

@@ -6,8 +6,7 @@ import React from "react";
 /* -------------------------------------------------------------------------- */
 import Typography from "./typography/Typography";
 import Heading from "./typography/Heading";
-import Link from "./Link";
+import Link from "./typography/Link";
-
 /* -------------------------------------------------------------------------- */
 /*                                    Props                                   */
 /* -------------------------------------------------------------------------- */
@@ -102,7 +101,7 @@ Card.CardAction = function CardCardAction({
 }: CardActionProps) {
   return (
     <Link
-      href={href}
+      to={href}
       className={classNames([className, "flex items-center gap-2"])}
     >
       {children}

src/components/FeaturedArticlesCards.tsx

@@ -12,12 +12,56 @@ import Typography from "./typography/Typography";
 import SkeletonCard from "./SkeletonCard";
 import AspectRatio from "./AspectRatio";
 import Card from "./Card";
-import Link from "./Link";
+import Link from "./typography/Link";
 
 /* -------------------------------------------------------------------------- */
-/*                                    Data                                    */
+/*                                    Article mock data                                    */
 /* -------------------------------------------------------------------------- */
-import Articales from "./Articales.json";
+
+const articles = [
+  {
+    CoverImg:
+      "https://i.kinja-img.com/gawker-media/image/upload/t_original/ijsi5fzb1nbkbhxa2gc1.png",
+    Body: "1 ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.sit amet consectetur adipisicing elit.Consequuntur ma",
+    Link: "http://pinterest.com",
+  },
+  {
+    CoverImg:
+      "https://i.kinja-img.com/gawker-media/image/upload/t_original/ijsi5fzb1nbkbhxa2gc1.png",
+    Body: "2 ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.",
+    Link: "http://pinterest.com",
+  },
+  {
+    CoverImg:
+      "https://i.kinja-img.com/gawker-media/image/upload/t_original/ijsi5fzb1nbkbhxa2gc1.png",
+    Body: "2 ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.",
+    Link: "http://pinterest.com",
+  },
+  {
+    CoverImg:
+      "https://i.kinja-img.com/gawker-media/image/upload/t_original/ijsi5fzb1nbkbhxa2gc1.png",
+    Body: "2 ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.",
+    Link: "http://pinterest.com",
+  },
+  {
+    CoverImg:
+      "https://i.kinja-img.com/gawker-media/image/upload/t_original/ijsi5fzb1nbkbhxa2gc1.png",
+    Body: "2 ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.",
+    Link: "http://pinterest.com",
+  },
+  {
+    CoverImg:
+      "https://i.kinja-img.com/gawker-media/image/upload/t_original/ijsi5fzb1nbkbhxa2gc1.png",
+    Body: "2 ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.",
+    Link: "http://pinterest.com",
+  },
+  {
+    CoverImg:
+      "https://i.kinja-img.com/gawker-media/image/upload/t_original/ijsi5fzb1nbkbhxa2gc1.png",
+    Body: "2 ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.",
+    Link: "http://pinterest.com",
+  },
+];
 
 /* -------------------------------------------------------------------------- */
 /*                                    Icons                                   */
@@ -42,22 +86,22 @@ import "swiper/css";
 /* -------------------------------------------------------------------------- */
 let twoCards: boolean = false;
 let threeCards: boolean = false;
-console.log(`Number of cards ${Articales.length}`);
+console.log(`Number of cards ${articles.length}`);
-if (Articales.length == 2) {
+if (articles.length == 2) {
   twoCards = true;
-} else if (Articales.length == 3) {
+} else if (articles.length == 3) {
   threeCards = true;
 }
 
 SwiperCore.use([Navigation]);
 
-const FeaturedArticales = () => {
+const FeaturedArticlesCards = () => {
   const navigationPrevRef = useRef(null);
   const navigationNextRef = useRef(null);
   const paginationRef = useRef(null);
 
   return (
-    <div className="slider-wrapper Articales">
+    <div className="slider-wrapper articles">
       <div className="flex justify-end gap-2 my-2">
         <div
           className="prev inline-flex  justify-center items-center 
@@ -80,7 +124,7 @@ const FeaturedArticales = () => {
       <Swiper
         slidesPerView={1.25}
         slidesPerGroup={1}
-        loop={Articales.length > 4 ? true : false}
+        loop={articles.length > 4 ? true : false}
         pagination={{ el: ".pagination", clickable: true }}
         navigation={{
           prevEl: ".prev",
@@ -108,7 +152,7 @@ const FeaturedArticales = () => {
         loopFillGroupWithBlank={true}
         modules={[Pagination, Navigation]}
       >
-        {Articales.map((Articale) => (
+        {articles.map((Articale) => (
           <SwiperSlide>
             <Card className="flex-1">
               <Card.CardContent>
@@ -124,7 +168,7 @@ const FeaturedArticales = () => {
               </Card.CardContent>
 
               <Card.CardAction href={Articale.Link}>
-                <Link>
+                <Link to="*">
                   <Typography className="text-blue-500 font-bold">
                     Read More
                   </Typography>
@@ -185,4 +229,4 @@ const FeaturedArticales = () => {
   );
 };
 
-export default FeaturedArticales;
+export default FeaturedArticlesCards;

src/components/FeaturedAuthorsCards.tsx

@@ -18,9 +18,33 @@ import "./styles.css";
 import "swiper/css";
 
 /* -------------------------------------------------------------------------- */
-/*                                    Authors                                 */
+/*                                    Authors data mock                                */
 /* -------------------------------------------------------------------------- */
-import Authors from "./Authors.json";
+const authors = [
+  {
+    Title: "JSON Three",
+    Body: "Lorem ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.am elit.Consequuntur maxime, adipisicing elit.",
+    Link: "http://pinterest.com",
+  },
+  {
+    Title: "JSON Two",
+    Body: "Lorem ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.am elit.Consequuntur maxime, libero est unde sapiente repellendus quam",
+    Link: "http://pinterest.com",
+    img: "https://i.kinja-img.com/gawker-media/image/upload/t_original/ijsi5fzb1nbkbhxa2gc1.png",
+  },
+  {
+    Title: "JSON Two",
+    Body: "Lorem ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.am elit.Consequuntur maxime, libero est unde sapiente repellendus quam",
+    Link: "http://pinterest.com",
+    img: "https://i.kinja-img.com/gawker-media/image/upload/t_original/ijsi5fzb1nbkbhxa2gc1.png",
+  },
+  {
+    Title: "JSON Two",
+    Body: "Lorem ipsum dolor sit amet consectetur adipisicing elit.Consequuntur maxime, adipisicing elit.am elit.Consequuntur maxime, libero est unde sapiente repellendus quam",
+    Link: "http://pinterest.com",
+    img: "https://i.kinja-img.com/gawker-media/image/upload/t_original/ijsi5fzb1nbkbhxa2gc1.png",
+  },
+];
 
 /* -------------------------------------------------------------------------- */
 /*                                    Icons                                   */
@@ -38,17 +62,17 @@ SwiperCore.use([Navigation]);
 /* -------------------------------------------------------------------------- */
 let twoCards: boolean = false;
 let threeCards: boolean = false;
-console.log(`Number of cards ${Authors.length}`);
+console.log(`Number of cards ${authors.length}`);
-if (Authors.length == 2) {
+if (authors.length == 2) {
   twoCards = true;
-} else if (Authors.length == 3) {
+} else if (authors.length == 3) {
   threeCards = true;
 }
 
 /**
  * Featured authors component to display ...
  */
-export default function FeaturedAuthors(): JSX.Element {
+export default function FeaturedAuthorsCards(): JSX.Element {
   return (
     <div>
       {/* The Title of Featured Authors section */}
@@ -60,7 +84,7 @@ export default function FeaturedAuthors(): JSX.Element {
           slidesPerView={1.25}
           slidesPerGroup={1}
           spaceBetween={25}
-          loop={Authors.length > 4 ? true : false}
+          loop={authors.length > 4 ? true : false}
           loopFillGroupWithBlank={false}
           breakpoints={{
             768: {
@@ -81,7 +105,7 @@ export default function FeaturedAuthors(): JSX.Element {
             },
           }}
         >
-          {Authors.map((card) => (
+          {authors.map((card) => (
             <SwiperSlide>
               <Card className="flex-1">
                 <Card.CardContent>
@@ -109,7 +133,9 @@ export default function FeaturedAuthors(): JSX.Element {
                 </Card.CardContent>
 
                 <Card.CardAction href={card.Link}>
-                  <Link className="text-blue-500 font-bold ">See More</Link>
+                  <Link className="text-blue-500 font-bold" to="*">
+                    See More
+                  </Link>
                   <SVGCaretRight className="fill-blue-500 w-4 h-4" />
                 </Card.CardAction>
               </Card>

src/components/parts/Footer.tsx

@@ -12,16 +12,26 @@ import Link from "components/typography/Link";
 /* -------------------------------------------------------------------------- */
 
 const mainLinks = [
-  { label: "account settings", url: "/account/settings", enabled: true },
+  { label: "account settings", url: "/account/settings", disabled: false },
-  { label: "about freeland", url: "/about", enabled: true },
+  { label: "about freeland", url: "/about", disabled: false },
-  { label: "help", url: "/help", enabled: true },
+  { label: "help", url: "/help", disabled: false },
-  { label: "contact us", url: "/contact-us", enabled: true },
+  { label: "contact us", url: "/contact-us", disabled: false },
 ];
 
 const secondaryLinks = [
-  { index: 1, label: "Terms of Use", url: "/terms-of-use", enabled: true },
+  { index: 1, label: "Terms of Use", url: "/terms-of-use", disabled: false },
-  { index: 2, label: "Privacy Policy", url: "/privacy-policy", enabled: true },
+  {
-  { index: 3, label: "Cookies Policy", url: "/cookies-policy", enabled: true },
+    index: 2,
+    label: "Privacy Policy",
+    url: "/privacy-policy",
+    disabled: false,
+  },
+  {
+    index: 3,
+    label: "Cookies Policy",
+    url: "/cookies-policy",
+    disabled: false,
+  },
 ];
 
 /* -------------------------------------------------------------------------- */
@@ -42,16 +52,16 @@ export function Footer() {
   const mainLinksPart = useMemo(
     () =>
       mainLinks.map((link) => (
-        <RouterLink
+        <Link
           key={link.url}
           className="py-1 md:py-2 text-gray-900 px-4"
-          enabled={link.enabled}
+          disabled={link.disabled}
           to={link.url}
         >
           <Typography className="" fontWeightVariant="semibold" htmlTag="p">
             {link.label.toUpperCase()}
           </Typography>
-        </RouterLink>
+        </Link>
       )),
     mainLinks
   );
@@ -61,9 +71,9 @@ export function Footer() {
       secondaryLinks.map((link) => (
         <div className="flex flex-row items-center">
           {link.index != 1 && circleDivider}
-          <RouterLink key={link.url} enabled={link.enabled} to={link.url}>
+          <Link key={link.url} disabled={link.disabled} to={link.url}>
             {link.label}
-          </RouterLink>
+          </Link>
         </div>
       )),
     secondaryLinks
@@ -76,20 +86,20 @@ export function Footer() {
     <div className="lg:px-12 px-2 sm:px-8 md:px-4 pb-2 md:pt-4 pt-2 lg:pt-5 bg-gray-200">
       <section className="w-full grid grid-cols-2 md:grid-rows-2 sm:grid-flow-row-dense sm:grid-rows-2 justify-items-between md:justify-between mb-2 md: items-center md:flex-row md:flex">
         <div className="sm:col-span-1">
-          <RouterLink to="/">
+          <Link to="*">
             <Typography className="text-2xl" fontWeightVariant="semibold">
               Freeland
             </Typography>
-          </RouterLink>
+          </Link>
         </div>
         <div className="order-last md:order-none justify-center justify-items-center items-center flex flex-col col-span-4 sm:flex sm:flex-row text-sm">
           {mainLinksPart}
         </div>
         <div className="flex flex-row sm:col-span-1 justify-end">
-          <Link href="https://www.facebook.com">
+          <Link to="https://www.facebook.com">
             <SVGFacebook className="w-5 h-5 fill-gray-900 stroke-gray-900 mr-2" />
           </Link>
-          <Link href="https://www.instagram/com">
+          <Link to="https://www.instagram/com">
             {" "}
             <SVGInstagram className="w-5 h-5 fill-gray-900 stroke-gray-900 ml-2 " />
           </Link>

src/components/typography/Link.tsx

@@ -1,21 +1,49 @@
 import React from "react";
+import { NavLink, NavLinkProps } from "react-router-dom";
+import classNames from "classnames";
 
 type Props = {
-  href?: string;
+  to: string;
   children: React.ReactNode;
   disabled?: boolean;
   className?: string;
-} & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "">;
+} & NavLinkProps &
+  Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "">;
 
-export default function Link({ href, children, disabled, ...props }: Props) {
+function getURL(to: string): URL {
-  return (
+  try {
-    // eslint-disable-next-line jsx-a11y/anchor-is-valid
+    return new URL(to);
+  } catch {
+    let outurl = `${window.location.origin}${
+      to.startsWith("/") ? to : "/" + to
+    }`;
+    return new URL(outurl);
+  }
+}
+
+export default function Link({
+  to,
+  children,
+  disabled,
+  className,
+  ...props
+}: Props) {
+  const link =
+    getURL(to).hostname === window.location.hostname ? (
+      <NavLink
+        to={getURL(to).pathname}
+        className={classNames({ "pointer-events-none": disabled }, className)}
+      >
+        {children}
+      </NavLink>
+    ) : (
       <a
-      href={disabled ? undefined : href}
+        href={disabled ? undefined : getURL(to).origin}
         aria-disabled={disabled}
         {...props}
       >
         {children}
       </a>
     );
+  return <div>{link}</div>;
 }

src/components/typography/RouterLink.tsx

@@ -1,5 +1,5 @@
 import classNames from "classnames";
-import { NavLink, NavLinkProps, To } from "react-router-dom";
+import { NavLink, NavLinkProps } from "react-router-dom";
 
 type Props = {
   enabled?: boolean;