use module aliases vs relative paths

src/web/app/src/components/AdminButtons.tsx

@@ -2,7 +2,7 @@ import { makeStyles, Theme } from '@material-ui/core/styles';
 import { IconButton } from '@material-ui/core';
 import FlagIcon from '@material-ui/icons/Flag';
 import DeleteIcon from '@material-ui/icons/Delete';
-import useAuth from '../hooks/use-auth';
+import useAuth from '@hooks/use-auth';
 
 const useStyles = makeStyles((theme: Theme) => ({
   adminButtons: {

src/web/app/src/components/AuthProvider.tsx

@@ -6,7 +6,7 @@ import type { SupabaseClient } from '@supabase/supabase-js';
 
 import supabase from '../supabase';
 import User from '../User';
-import { loginUrl, logoutUrl, webUrl } from '../config';
+import { loginUrl, logoutUrl, webUrl } from '@config';
 
 export interface AuthContextInterface {
   login: (returnTo?: string) => void;

src/web/app/src/components/Banner.tsx

@@ -3,7 +3,7 @@ import { BsInfoCircle } from 'react-icons/bs';
 import { makeStyles, Theme, createStyles, Typography, Fab } from '@material-ui/core';
 import smoothscroll from 'smoothscroll-polyfill';
 import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
-import { gitCommitSha, webUrl, statusUrl } from '../config';
+import { gitCommitSha, webUrl, statusUrl } from '@config';
 import BannerDynamicItems from './BannerDynamicItems';
 import BannerButtons from './BannerButtons';
 import ScrollAction from './ScrollAction';

src/web/app/src/components/BannerButtons.tsx

@@ -3,10 +3,10 @@ import { useRouter } from 'next/router';
 import { makeStyles, Tooltip, withStyles, Zoom } from '@material-ui/core';
 import Button from '@material-ui/core/Button';
 import clsx from 'clsx';
-import useAuth from '../hooks/use-auth';
+import useAuth from '@hooks/use-auth';
 import TelescopeAvatar from './TelescopeAvatar';
 import PopUp from './PopUp';
-import { webUrl } from '../config';
+import { webUrl } from '@config';
 
 const useStyles = makeStyles((theme) => ({
   buttonsContainer: {

src/web/app/src/components/BannerDynamicItems.tsx

@@ -2,7 +2,7 @@ import { makeStyles } from '@material-ui/core/styles';
 import NoSsr from '@material-ui/core/NoSsr';
 
 import DynamicImage from './DynamicImage';
-import { imageServiceUrl } from '../config';
+import { imageServiceUrl } from '@config';
 
 const useStyles = makeStyles((theme) => ({
   dynamic: {

src/web/app/src/components/DependenciesPage.tsx

@@ -5,7 +5,7 @@ import IconButton from '@mui/material/IconButton';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
 
-import { dependencyDiscoveryUrl } from '../config';
+import { dependencyDiscoveryUrl } from '@config';
 import DependenciesTable from './DependenciesTable';
 
 const useStyles = makeStyles((theme) => ({

src/web/app/src/components/DependenciesTable/Row.tsx

@@ -14,7 +14,7 @@ import { FiPackage } from 'react-icons/fi';
 import useSWR from 'swr';
 import CircularProgress from '@mui/material/CircularProgress';
 
-import { dependencyDiscoveryUrl } from '../../config';
+import { dependencyDiscoveryUrl } from '@config';
 
 const useStyles = makeStyles((theme) => ({
   root: {

src/web/app/src/components/DependenciesTable/index.tsx

@@ -6,7 +6,7 @@ import TablePagination from '@mui/material/TablePagination';
 import { makeStyles } from '@material-ui/core/styles';
 
 import Row from './Row';
-import SearchInput from '../SearchInput/SearchInput';
+import SearchInput from '@components/SearchInput/SearchInput';
 
 const useStyles = makeStyles((theme) => ({
   root: {

src/web/app/src/components/DynamicImage.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import clsx from 'clsx';
 
-import { imageServiceUrl } from '../config';
+import { imageServiceUrl } from '@config';
 
 const useStyles = makeStyles(() => ({
   img: {

src/web/app/src/components/GenericInfoProvider.tsx

@@ -1,7 +1,7 @@
 import { createContext, useMemo, ReactNode } from 'react';
 import { parseGitHubUrls, GitHubInfo } from '@senecacdot/github-url-parser';
 
-import { Post } from '../interfaces';
+import { Post } from '@interfaces';
 import { YouTubeInfoContextInterface, extractYouTubeInfo } from './YouTubeInfo';
 
 type GenericInfoContextInterface = {

src/web/app/src/components/GitHubContributorCard.tsx

@@ -1,6 +1,6 @@
 import { makeStyles } from '@material-ui/core/styles';
 import { Card, CardContent, Typography, Avatar, Grid } from '@material-ui/core';
-import useTelescopeContributor from '../hooks/use-telescope-contributor';
+import useTelescopeContributor from '@hooks/use-telescope-contributor';
 
 const contributionsCount = (contributions: number) =>
   contributions < 2 ? '1 contribution.' : `${contributions} contributions.`;

src/web/app/src/components/LanguageSelector.tsx

@@ -2,7 +2,7 @@ import { createContext, ChangeEvent, useState } from 'react';
 import { FormControl, Grid, InputLabel, MenuItem, Select } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 
-import { setLang, getLang } from '../translations/i18n';
+import { setLang, getLang } from '@translations/i18n';
 
 export interface TranslationInterface {
   currentLanguage: string;

src/web/app/src/components/Login/LoggedIn.tsx

@@ -1,7 +1,7 @@
 import PowerSettingsNewIcon from '@material-ui/icons/PowerSettingsNew';
 
-import useAuth from '../../hooks/use-auth';
-import NavBarButton, { NavBarIconProps } from '../NavBar/NavBarButton';
+import useAuth from '@hooks/use-auth';
+import NavBarButton, { NavBarIconProps } from '@components/NavBar/NavBarButton';
 
 const LoggedIn = () => {
   const { logout, user } = useAuth();

src/web/app/src/components/Login/LoggedOut.tsx

@@ -1,7 +1,7 @@
 import ExitToAppIcon from '@material-ui/icons/ExitToApp';
 
-import NavBarButton from '../NavBar/NavBarButton';
-import useAuth from '../../hooks/use-auth';
+import NavBarButton from '@components/NavBar/NavBarButton';
+import useAuth from '@hooks/use-auth';
 
 const LoggedOut = () => {
   const { login } = useAuth();

src/web/app/src/components/Login/index.tsx

@@ -1,6 +1,6 @@
 import LoggedIn from './LoggedIn';
 import LoggedOut from './LoggedOut';
-import useAuth from '../../hooks/use-auth';
+import useAuth from '@hooks/use-auth';
 
 /**
  * Show either a Login button (if user isn't authenticated)

src/web/app/src/components/NavBar/index.tsx

@@ -12,10 +12,10 @@ import { FiPackage } from 'react-icons/fi';
 import dynamic from 'next/dynamic';
 
 import NavBarButton, { NavBarIconProps } from './NavBarButton';
-import Logo from '../Logo';
-import Login from '../Login';
-import TelescopeAvatar from '../TelescopeAvatar';
-import useAuth from '../../hooks/use-auth';
+import Logo from '@components/Logo';
+import Login from '@components/Login';
+import TelescopeAvatar from '@components/TelescopeAvatar';
+import useAuth from '@hooks/use-auth';
 
 /**  This will solve the problem of incorrect rendering of theme icon when theme preference is dark
  * This ensures that the version displayed to user is the client view which ties to the client's preference theme.

src/web/app/src/components/Posts/GitHubInfo/Commits.tsx

@@ -1,6 +1,6 @@
 import { VscGitCommit } from 'react-icons/vsc';
 import { createStyles, makeStyles, Theme } from '@material-ui/core';
-import { useGithubInfo } from '../../../hooks/use-genericInfo';
+import { useGithubInfo } from '@hooks/use-genericInfo';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({

src/web/app/src/components/Posts/GitHubInfo/GitHubInfoMobile.tsx

@@ -4,7 +4,7 @@ import Issues from './Issues';
 import PullRequests from './PullRequests';
 import Commits from './Commits';
 import Users from './Users';
-import { useGithubInfo } from '../../../hooks/use-genericInfo';
+import { useGithubInfo } from '@hooks/use-genericInfo';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({

src/web/app/src/components/Posts/GitHubInfo/Issues.tsx

@@ -1,6 +1,6 @@
 import { VscIssues } from 'react-icons/vsc';
 import { createStyles, makeStyles, Theme } from '@material-ui/core';
-import { useGithubInfo } from '../../../hooks/use-genericInfo';
+import { useGithubInfo } from '@hooks/use-genericInfo';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({

src/web/app/src/components/Posts/GitHubInfo/PullRequests.tsx

@@ -1,6 +1,6 @@
 import { VscGitPullRequest } from 'react-icons/vsc';
 import { createStyles, makeStyles, Theme } from '@material-ui/core';
-import { useGithubInfo } from '../../../hooks/use-genericInfo';
+import { useGithubInfo } from '@hooks/use-genericInfo';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({

src/web/app/src/components/Posts/GitHubInfo/Repos.tsx

@@ -1,6 +1,6 @@
 import { VscRepoForked } from 'react-icons/vsc';
 import { createStyles, makeStyles, Theme } from '@material-ui/core';
-import { useGithubInfo } from '../../../hooks/use-genericInfo';
+import { useGithubInfo } from '@hooks/use-genericInfo';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({

src/web/app/src/components/Posts/GitHubInfo/Users.tsx

@@ -1,7 +1,7 @@
 import { VscGithub } from 'react-icons/vsc';
 import { createStyles, makeStyles, Theme } from '@material-ui/core';
-import TelescopeAvatar from '../../TelescopeAvatar';
-import { useGithubInfo } from '../../../hooks/use-genericInfo';
+import TelescopeAvatar from '@components/TelescopeAvatar';
+import { useGithubInfo } from '@hooks/use-genericInfo';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({

src/web/app/src/components/Posts/GitHubInfo/index.tsx

@@ -4,7 +4,7 @@ import Issues from './Issues';
 import PullRequests from './PullRequests';
 import Commits from './Commits';
 import Users from './Users';
-import { useGithubInfo } from '../../../hooks/use-genericInfo';
+import { useGithubInfo } from '@hooks/use-genericInfo';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({

src/web/app/src/components/Posts/Post.tsx

@@ -20,14 +20,14 @@ import GitHubInfo from './GitHubInfo';
 import YouTubeInfo from './YouTubeInfo';
 import GitHubInfoMobile from './GitHubInfo/GitHubInfoMobile';
 import YouTubeInfoMobile from './YouTubeInfo/YouTubeInfoMobile';
-import GenericInfoProvider from '../GenericInfoProvider';
+import GenericInfoProvider from '@components/GenericInfoProvider';
 import PostDesktopInfo from './PostInfo';
 import PostAvatar from './PostAvatar';
-import AdminButtons from '../AdminButtons';
-import Spinner from '../Spinner';
+import AdminButtons from '@components/AdminButtons';
+import Spinner from '@components/Spinner';
 import ShareButton from './ShareButton';
 import ExpandIcon from './ExpandIcon';
-import { Post } from '../../interfaces';
+import { Post } from '@interfaces';
 
 import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css';
 

src/web/app/src/components/Posts/PostInfo.tsx

@@ -1,6 +1,6 @@
 import { createStyles, ListSubheader, makeStyles, Theme } from '@material-ui/core';
 import PostAvatar from './PostAvatar';
-import AdminButtons from '../AdminButtons';
+import AdminButtons from '@components/AdminButtons';
 import ShareButton from './ShareButton';
 
 const useStyles = makeStyles((theme: Theme) =>

src/web/app/src/components/Posts/Timeline.tsx

@@ -3,7 +3,7 @@ import { render } from 'react-dom';
 import { Container, createStyles } from '@material-ui/core';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import PostComponent from './Post';
-import { Post } from '../../interfaces';
+import { Post } from '@interfaces';
 import LoadAutoScroll from './LoadAutoScroll';
 import CopyButton from './CopyButton';
 

src/web/app/src/components/Posts/YouTubeInfo/YouTubeInfoMobile.tsx

@@ -1,6 +1,6 @@
 import { createStyles, makeStyles, Theme, ListSubheader } from '@material-ui/core';
 import { AiOutlineYoutube } from 'react-icons/ai';
-import { useYouTubeInfo } from '../../../hooks/use-genericInfo';
+import { useYouTubeInfo } from '@hooks/use-genericInfo';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({

src/web/app/src/components/Posts/YouTubeInfo/index.tsx

@@ -1,6 +1,6 @@
 import { createStyles, makeStyles, Theme, ListSubheader } from '@material-ui/core';
 import { AiOutlineYoutube } from 'react-icons/ai';
-import { useYouTubeInfo } from '../../../hooks/use-genericInfo';
+import { useYouTubeInfo } from '@hooks/use-genericInfo';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({

src/web/app/src/components/Posts/index.tsx

@@ -5,9 +5,9 @@ import { makeStyles, Theme } from '@material-ui/core/styles';
 import { usePrevious } from 'react-use';
 import SentimentDissatisfiedRoundedIcon from '@material-ui/icons/SentimentDissatisfiedRounded';
 import Timeline from './Timeline';
-import { postsServiceUrl } from '../../config';
-import useFaviconBadge from '../../hooks/use-favicon-badge';
-import { Post } from '../../interfaces';
+import { postsServiceUrl } from '@config';
+import useFaviconBadge from '@hooks/use-favicon-badge';
+import { Post } from '@interfaces';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({

src/web/app/src/components/SEO.tsx

@@ -1,6 +1,6 @@
 import Head from 'next/head';
 import { useRouter } from 'next/router';
-import { webUrl } from '../config';
+import { webUrl } from '@config';
 
 type SEOProps = {
   pageTitle: string;

src/web/app/src/components/SearchInput/AuthorInput.tsx

@@ -5,7 +5,7 @@ import { Autocomplete } from '@mui/material';
 import TextField from '@material-ui/core/TextField';
 import { Dispatch, SetStateAction, useState } from 'react';
 import { useDebounce } from 'react-use';
-import { searchServiceUrl } from '../../config';
+import { searchServiceUrl } from '@config';
 
 type AutocompleteOption = {
   author: string;

src/web/app/src/components/SearchResults.tsx

@@ -3,7 +3,7 @@ import { useRouter } from 'next/router';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import useSWRInfinite from 'swr/infinite';
 import { Container, Box, createStyles } from '@material-ui/core';
-import { searchServiceUrl } from '../config';
+import { searchServiceUrl } from '@config';
 import Timeline from './Posts/Timeline';
 import Spinner from './Spinner';
 import SearchHelp from './SearchHelp';

src/web/app/src/components/SignUp/Forms/BasicInfo.tsx

@@ -2,8 +2,8 @@ import { ReactNode } from 'react';
 import { createStyles, makeStyles } from '@material-ui/core';
 import { connect } from 'formik';
 
-import { SignUpForm } from '../../../interfaces';
-import useAuth from '../../../hooks/use-auth';
+import { SignUpForm } from '@interfaces';
+import useAuth from '@hooks/use-auth';
 import formModels from '../Schema/FormModel';
 import { TextInput } from '../FormFields';
 

src/web/app/src/components/SignUp/Forms/GitHubAccount.tsx

@@ -3,10 +3,10 @@ import Button from '@material-ui/core/Button';
 import { createStyles, makeStyles, Theme } from '@material-ui/core';
 import { connect } from 'formik';
 
-import { SignUpForm } from '../../../interfaces';
+import { SignUpForm } from '@interfaces';
 import formModels from '../Schema/FormModel';
 import { TextInput, CheckBoxInput } from '../FormFields';
-import PostAvatar from '../../Posts/PostAvatar';
+import PostAvatar from '@components/Posts/PostAvatar';
 
 const { githubUsername, github, githubOwnership } = formModels;
 

src/web/app/src/components/SignUp/Forms/RSSFeeds.tsx

@@ -7,9 +7,9 @@ import FormControlLabel from '@material-ui/core/FormControlLabel';
 import FormHelperText from '@material-ui/core/FormHelperText';
 import Checkbox from '@material-ui/core/Checkbox';
 
-import { feedDiscoveryServiceUrl } from '../../../config';
-import useAuth from '../../../hooks/use-auth';
-import { SignUpForm, DiscoveredFeed, DiscoveredFeeds } from '../../../interfaces';
+import { feedDiscoveryServiceUrl } from '@config';
+import useAuth from '@hooks/use-auth';
+import { SignUpForm, DiscoveredFeed, DiscoveredFeeds } from '@interfaces';
 import { TextInput, CheckBoxInput } from '../FormFields';
 
 const useStyles = makeStyles((theme: Theme) =>

src/web/app/src/components/SignUp/Forms/Review.tsx

@@ -1,8 +1,8 @@
 import { createStyles, makeStyles, Theme, FormHelperText } from '@material-ui/core';
 import { connect } from 'formik';
 
-import { SignUpForm } from '../../../interfaces';
-import PostAvatar from '../../Posts/PostAvatar';
+import { SignUpForm } from '@interfaces';
+import PostAvatar from '@components/Posts/PostAvatar';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({

src/web/app/src/components/ThemeProvider.tsx

@@ -1,8 +1,8 @@
 import { createContext, useContext } from 'react';
 import { Theme } from '@material-ui/core/styles';
 
-import { ThemeName } from '../interfaces';
-import { lightTheme } from '../theme';
+import { ThemeName } from '@interfaces';
+import { lightTheme } from '@theme';
 
 type ThemeContextType = {
   theme: Theme;

src/web/app/src/components/YouTubeInfo.tsx

@@ -1,4 +1,4 @@
-import { Post } from '../interfaces';
+import { Post } from '@interfaces';
 
 export interface YouTubeInfoContextInterface {
   channelUrl: string;

src/web/app/src/hooks/use-auth.ts

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { AuthContext, AuthContextInterface } from '../components/AuthProvider';
+import { AuthContext, AuthContextInterface } from '@components/AuthProvider';
 
 const useAuth = (): AuthContextInterface => useContext(AuthContext);
 

src/web/app/src/hooks/use-favicon-badge.ts

@@ -2,7 +2,7 @@ import { useState, useEffect, useCallback } from 'react';
 import { useMountedState } from 'react-use';
 import useVisibility from './use-visibility';
 
-import { logoUrl, logoBadgedUrl } from '../components/Logo';
+import { logoUrl, logoBadgedUrl } from '@components/Logo';
 
 const useFaviconBadge = () => {
   const isMounted = useMountedState();

src/web/app/src/hooks/use-genericInfo.ts

@@ -1,8 +1,8 @@
 import { useContext } from 'react';
 import { GitHubInfo } from '@senecacdot/github-url-parser';
 
-import { YouTubeInfoContextInterface } from '../components/YouTubeInfo';
-import { GenericInfoContext } from '../components/GenericInfoProvider';
+import { YouTubeInfoContextInterface } from '@components/YouTubeInfo';
+import { GenericInfoContext } from '@components/GenericInfoProvider';
 
 export const useGithubInfo = (): GitHubInfo => useContext(GenericInfoContext).gitHubInfo;
 export const useYouTubeInfo = (): YouTubeInfoContextInterface =>