EddieHubCommunity · eddiejaoude · Mar 22, 2023 · Mar 19, 2023 · Mar 20, 2023
diff --git a/components/ClipboardCopy.js b/components/ClipboardCopy.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { onlyText } from "react-children-utilities";
 
 const ClipboardCopy = ({ children }) => {

diff --git a/components/Footer.js b/components/Footer.js
@@ -1,4 +1,4 @@
-import Link from "../components/Link";
+import Link from "@components/Link";
 import getIcon from "./Icon";
 const FaMoneyBillAlt = getIcon("FaMoneyBillAlt");
 const FaRocket = getIcon("FaRocket");

diff --git a/components/IconCard.js b/components/IconCard.js
@@ -2,7 +2,7 @@ import { Fragment, useState } from 'react'
 import { Transition } from '@headlessui/react'
 import { CheckCircleIcon } from '@heroicons/react/24/outline'
 import { XMarkIcon } from '@heroicons/react/20/solid'
-import getIcon from "../components/Icon";
+import getIcon from "@components/Icon";
 
 export default function IconCard({ iconName }) {
   const [show, setShow] = useState(false)

diff --git a/components/Link.js b/components/Link.js
@@ -1,4 +1,3 @@
-import React from "react";
 import NextLink from "next/link";
 
 export default function Link({ children, className, rel, ...restProps }) {

diff --git a/components/Tag.js b/components/Tag.js
@@ -1,9 +1,13 @@
-import { abbreviateNumber } from "../services/utils/abbreviateNumbers";
+import { abbreviateNumber } from "@services/utils/abbreviateNumbers";
 import Badge from "./Badge";
 
 export default function Tag({ name, total, selected, onClick }) {
   return (
-    <Badge content={abbreviateNumber(total)} display={!!total} badgeClassName={"translate-x-2/4 -translate-y-1/2"}>
+    <Badge
+      content={abbreviateNumber(total)}
+      display={!!total}
+      badgeClassName={"translate-x-2/4 -translate-y-1/2"}
+    >
       <div
         onClick={onClick}
         className={`flex flex-row p-1 m-2 rounded-lg text-sm font-mono border-2 cursor-pointer shadow-none ${

diff --git a/components/Testimonials.js b/components/Testimonials.js
@@ -1,4 +1,3 @@
-import Image from "next/image";
 import Link from "./Link";
 
 export default function Testimonials({ data }) {

diff --git a/components/event/EventCard.js b/components/event/EventCard.js
@@ -6,8 +6,8 @@ import {
 } from "react-icons/md";
 import { ReactMarkdown } from "react-markdown/lib/react-markdown";
 
-import Link from "../Link";
-import FallbackImage from "../FallbackImage";
+import Link from "@components/Link";
+import FallbackImage from "@components/FallbackImage";
 
 export default function EventCard({ event, username }) {
   const fallbackImageSize = 60;

diff --git a/components/event/EventTabs.js b/components/event/EventTabs.js
@@ -1,4 +1,4 @@
-import Link from "../Link";
+import Link from "@components/Link";
 
 export function EventTabs({ tabs, eventType, setEventType }) {
   const classNames = (...classes) => classes.filter(Boolean).join(" ");

diff --git a/components/layouts/DocsLayout.js b/components/layouts/DocsLayout.js
@@ -1,9 +1,9 @@
 import { MDXProvider } from "@mdx-js/react";
 import Head from "next/head";
 
-import Page from "../Page";
-import Link from "../../components/Link";
-import { ComponentStyle } from "../mdx/ComponentStyle";
+import Page from "@components/Page";
+import Link from "@components/Link";
+import { ComponentStyle } from "@components/mdx/ComponentStyle";
 
 export default function DocsLayout({ children, title }) {
   return (

diff --git a/components/layouts/MultiLayout.js b/components/layouts/MultiLayout.js
@@ -1,7 +1,7 @@
 import Script from "next/script";
 
-import Navbar from "../navbar/Navbar";
-import Footer from "../Footer";
+import Navbar from "@components/navbar/Navbar";
+import Footer from "@components/Footer";
 
 export default function MultiLayout({ children }) {
   return (

diff --git a/components/layouts/SingleLayout.js b/components/layouts/SingleLayout.js
@@ -1,4 +1,4 @@
-import Footer from "../Footer";
+import Footer from "@components/Footer";
 
 export default function SingleLayout({ children }) {
   return (

diff --git a/components/map/Map.js b/components/map/Map.js
@@ -1,57 +1,58 @@
-import React from "react";
 import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
+import { ReactMarkdown } from "react-markdown/lib/react-markdown";
 import "leaflet/dist/leaflet.css";
 
-import Link from "../Link";
-import MarkerCluster from "./MarkerCluster";
-import { ReactMarkdown } from "react-markdown/lib/react-markdown";
+import Link from "@components/Link";
+import MarkerCluster from "@components/map/MarkerCluster";
 
 export default function Map({ users }) {
   return (
     <>
-        <MapContainer
-          style={{ height: "100vh", width: "width: 100vw", zIndex: 10 }}
-          center={[16.843908, -18.09]}
-          zoom={2}
-          zoomControl={true}
-          scrollWheelZoom={false}
-          maxBounds={null}
-        >
-          <TileLayer
-            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-          />
-          <MarkerCluster>
-            {users.map((user) => (
-              <div key={user.username}>
-                <Marker
-                  icon={L.icon({
-                    className: "rounded-full",
-                    iconUrl: `https://github.com/${user.username}.png`,
-                    popupAnchor: [0, -10],
-                    iconSize: [40, 40],
-                    iconAnchor: [20, 20],
-                  })}
-                  position={[user.location.lat, user.location.lon]}
-                >
-                  <Popup>
-                    <div className="flex flex-col gap-[5px]">
-                      <h1 className="font-[600]">
-                        <Link
-                          href={`https://linkfree.eddiehub.io/${user.username}`}
-                        >
-                          {user.name}
-                        </Link>
-                      </h1>
-                      <span>{user.location.provided}</span>
-                      <span><ReactMarkdown>{user.bio}</ReactMarkdown></span>
-                    </div>
-                  </Popup>
-                </Marker>
-              </div>
-            ))}
-          </MarkerCluster>
-        </MapContainer>
+      <MapContainer
+        style={{ height: "100vh", width: "width: 100vw", zIndex: 10 }}
+        center={[16.843908, -18.09]}
+        zoom={2}
+        zoomControl={true}
+        scrollWheelZoom={false}
+        maxBounds={null}
+      >
+        <TileLayer
+          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        />
+        <MarkerCluster>
+          {users.map((user) => (
+            <div key={user.username}>
+              <Marker
+                icon={L.icon({
+                  className: "rounded-full",
+                  iconUrl: `https://github.com/${user.username}.png`,
+                  popupAnchor: [0, -10],
+                  iconSize: [40, 40],
+                  iconAnchor: [20, 20],
+                })}
+                position={[user.location.lat, user.location.lon]}
+              >
+                <Popup>
+                  <div className="flex flex-col gap-[5px]">
+                    <h1 className="font-[600]">
+                      <Link
+                        href={`https://linkfree.eddiehub.io/${user.username}`}
+                      >
+                        {user.name}
+                      </Link>
+                    </h1>
+                    <span>{user.location.provided}</span>
+                    <span>
+                      <ReactMarkdown>{user.bio}</ReactMarkdown>
+                    </span>
+                  </div>
+                </Popup>
+              </Marker>
+            </div>
+          ))}
+        </MarkerCluster>
+      </MapContainer>
     </>
   );
 }
diff --git a/components/modals/ProfilePreview.js b/components/modals/ProfilePreview.js
@@ -1,4 +1,4 @@
-import UserPage from "../user/UserPage";
+import UserPage from "@components/user/UserPage";
 
 export default function Preview({ toggle, data }) {
   const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;

diff --git a/components/navbar/NavLink.js b/components/navbar/NavLink.js
@@ -1,4 +1,4 @@
-import Link from "../Link";
+import Link from "@components/Link";
 
 export default function NavLink({ path, item, mode, setIsOpen, onClick }) {
   let className =

diff --git a/components/navbar/Navbar.js b/components/navbar/Navbar.js
@@ -1,12 +1,13 @@
 import { useRouter } from "next/router";
 import { useEffect, useRef, useState } from "react";
 import { useSession, signIn, signOut } from "next-auth/react";
-
-import NavLink from "./NavLink";
-import Link from "../Link";
-import app from "../../config/app.json";
 import Image from "next/legacy/image";
-import getIcon from "../Icon";
+
+import app from "@config/app.json";
+import NavLink from "@components/navbar/NavLink";
+import Link from "@components/Link";
+import getIcon from "@components/Icon";
+
 const FaGithub = getIcon("FaGithub");
 
 export default function Navbar() {
@@ -179,10 +180,11 @@ export default function Navbar() {
         </div>
 
         <div
-          className={`${isOpen
+          className={`${
+            isOpen
               ? "transform translate-y-0 opacity-100"
               : "transform -translate-y-96 opacity-0 "
-            } md:hidden z-20 absolute t-0 bg-gray-800 transition-all duration-700 ease-in-out w-full`}
+          } md:hidden z-20 absolute t-0 bg-gray-800 transition-all duration-700 ease-in-out w-full`}
           id="mobile-menu"
         >
           <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">

diff --git a/components/statistics/BasicCards.js b/components/statistics/BasicCards.js
@@ -1,6 +1,7 @@
-import { abbreviateNumber } from "../../services/utils/abbreviateNumbers";
 import { MdArrowUpward } from "react-icons/md";
 
+import { abbreviateNumber } from "@services/utils/abbreviateNumbers";
+
 export default function BasicCards({ data }) {
   return (
     <dl className="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-3">

diff --git a/components/user/UserCard.js b/components/user/UserCard.js
@@ -1,7 +1,7 @@
-import Link from "../Link";
 import ReactMarkdown from "react-markdown";
-import { abbreviateNumber } from "../../services/utils/abbreviateNumbers";
-import FallbackImage from "../FallbackImage";
+
+import Link from "@components/Link";
+import FallbackImage from "@components/FallbackImage";
 
 export default function UserCard({ profile }) {
   return (

diff --git a/components/user/UserEvents.js b/components/user/UserEvents.js
@@ -1,8 +1,8 @@
 import { useState } from "react";
 
-import EventCard from "../event/EventCard";
-import Alert from "../Alert";
-import EventKey from "../event/EventKey";
+import EventCard from "@components/event/EventCard";
+import Alert from "@components/Alert";
+import EventKey from "@components/event/EventKey";
 
 export default function UserEvents({ data }) {
   const [eventType, seteventType] = useState("future");

diff --git a/components/user/UserLink.js b/components/user/UserLink.js
@@ -1,8 +1,8 @@
 import { useState } from "react";
 
-import getIcon from "../Icon";
-import colors from "../../config/icons.json";
-import Link from "../Link";
+import getIcon from "@components/Icon";
+import colors from "@config/icons.json";
+import Link from "@components/Link";
 
 export default function UserLink({ BASE_URL, link, username }) {
   const [clicks, setClicks] = useState(link.clicks || 0);

diff --git a/components/user/UserLinks.js b/components/user/UserLinks.js
@@ -1,5 +1,5 @@
 import UserLink from "./UserLink";
-import Alert from "../Alert";
+import Alert from "@components/Alert";
 
 export default function UserLinks({ BASE_URL, data }) {
   const defaultBucket = "Others";

diff --git a/components/user/UserMilestone.js b/components/user/UserMilestone.js
@@ -1,8 +1,8 @@
 import { ReactMarkdown } from "react-markdown/lib/react-markdown";
 import { FaExternalLinkAlt } from "react-icons/fa";
 
-import getIcon from "../Icon";
-import Link from "../Link";
+import getIcon from "@components/Icon";
+import Link from "@components/Link";
 
 export default function UserMilestone({ milestone, isGoal }) {
   const DisplayIcon = getIcon(milestone.icon);

diff --git a/components/user/UserMilestones.js b/components/user/UserMilestones.js
@@ -1,5 +1,5 @@
 import UserMilestone from "./UserMilestone";
-import Alert from "../Alert";
+import Alert from "@components/Alert";
 
 export default function UserMilestones({ data }) {
   const historicMilestones = data.milestones.filter(

diff --git a/components/user/UserProfile.js b/components/user/UserProfile.js
@@ -3,11 +3,11 @@ import ReactMarkdown from "react-markdown";
 import { MdQrCode2 } from "react-icons/md";
 import { QRCodeSVG } from "qrcode.react";
 
-import FallbackImage from "../FallbackImage";
+import FallbackImage from "@components/FallbackImage";
 import UserSocial from "./UserSocials";
-import Tag from "../Tag";
-import Link from "../Link";
-import Badge from "../Badge";
+import Tag from "@components/Tag";
+import Link from "@components/Link";
+import Badge from "@components/Badge";
 
 function UserProfile({ BASE_URL, data }) {
   const [qrShow, setQrShow] = useState(false);
@@ -68,7 +68,10 @@ function UserProfile({ BASE_URL, data }) {
 
       <div className="flex justify-center my-4">
         {qrShow && (
-          <QRCodeSVG value={`${BASE_URL}/${data.username}`} size={fallbackImageSize * 2} />
+          <QRCodeSVG
+            value={`${BASE_URL}/${data.username}`}
+            size={fallbackImageSize * 2}
+          />
         )}
       </div>
     </>

diff --git a/components/user/UserSocials.js b/components/user/UserSocials.js
@@ -1,5 +1,5 @@
-import getIcon from "../Icon";
-import Link from "../Link";
+import getIcon from "@components/Icon";
+import Link from "@components/Link";
 
 function UserSocial({ BASE_URL, username, social }) {
   const DisplayIcon = getIcon(social.icon);

diff --git a/components/user/UserTabs.js b/components/user/UserTabs.js
@@ -1,5 +1,6 @@
 import { BiSortAlt2 } from "react-icons/bi";
-import Link from "../Link";
+
+import Link from "@components/Link";
 
 export default function UserTabs({ tabs, setTabs, setUserData, userData }) {
   const classNames = (...classes) => classes.filter(Boolean).join(" ");

diff --git a/components/user/UserTestimonials.js b/components/user/UserTestimonials.js
@@ -1,8 +1,9 @@
-import Link from "../Link";
-import Alert from "../Alert";
-import FallbackImage from "../FallbackImage";
 import { ReactMarkdown } from "react-markdown/lib/react-markdown";
 
+import Link from "@components/Link";
+import Alert from "@components/Alert";
+import FallbackImage from "@components/FallbackImage";
+
 export default function UserTestimonials({ data }) {
   return (
     <>

diff --git a/jsconfig.json b/jsconfig.json
@@ -0,0 +1,19 @@
+{
+    "compilerOptions": {
+        "baseUrl": ".",
+        "paths": {
+            "@components/*": [
+                "components/*"
+            ],
+            "@config/*": [
+                "config/*"
+            ],
+            "@services/*": [
+                "services/*"
+            ],
+            "@models/*": [
+                "models/*"
+            ]
+        }
+    }
+}