Refactor imports

.eslintrc.json

@@ -2,5 +2,21 @@
   "extends": ["next", "next/core-web-vitals", "prettier"],
   "rules": {
     "import/no-anonymous-default-export": "off"
+  },
+  "settings": {
+    "import/resolver": {
+      "alias": {
+        "map": [
+          ["~/components", "./components"],
+          ["~/data", "./data"],
+          ["~/hooks", "./hooks"],
+          ["~/lib", "./lib"],
+          ["~/models", "./models"],
+          ["~/styles", "./styles"],
+          ["~/utils", "./utils"]
+        ],
+        "extensions": [".js"]
+      }
+    }
   }
 }

components/Admin/Context/forms.js

@@ -1,6 +1,6 @@
 import { useContext, createContext } from 'react';
 
-import API from '../../../utils/api';
+import API from '~/lib/api';
 
 export const FormsContext = createContext();
 

components/Admin/Context/index.js

@@ -1,4 +1,4 @@
-import useAsyncReducer from '../../../utils/useAsyncReducer';
+import useAsyncReducer from '~/hooks/useAsyncReducer';
 import { reducer as reducerLinks, LinksContext } from './links';
 import { reducer as reducerForms, FormsContext } from './forms';
 import { reducer as reducerRedirects, RedirectsContext } from './redirects';

components/Admin/Context/links.js

@@ -1,7 +1,7 @@
 import { useContext, createContext } from 'react';
 import { arrayMove } from 'react-sortable-hoc';
 
-import API from '../../../utils/api';
+import API from '~/lib/api';
 
 export const LinksContext = createContext();
 

components/Admin/Context/redirects.js

@@ -1,6 +1,6 @@
 import { useContext, createContext } from 'react';
 
-import API from '../../../utils/api';
+import API from '~/lib/api';
 
 export const RedirectsContext = createContext();
 

components/Admin/FormsTable/index.js

@@ -1,13 +1,13 @@
 import { useEffect, useState } from 'react';
 import { Form, Typography, notification } from 'antd';
 import { DateTime } from 'luxon';
-import useAsyncReducer from '../../../utils/useAsyncReducer';
+import useAsyncReducer from '~/hooks/useAsyncReducer';
 import { EditingContext, reducer as reducerEditing } from './Context';
 import EditableTable from '../../EditableTable';
 import Actions from './Actions';
 import NewForm from './NewForm';
 
-import API from '../../../utils/api';
+import API from '~/lib/api';
 import { useForms } from '../Context';
 
 function FormsTable() {

components/Admin/LinksTable/index.js

@@ -7,7 +7,7 @@ import { sortableContainer, sortableElement, sortableHandle } from 'react-sortab
 import Actions from './Actions';
 import NewLink from './NewLink';
 
-import API from '../../../utils/api';
+import API from '~/lib/api';
 import styles from './style.module.css';
 
 const Dragger = sortableHandle(() => <MenuOutlined style={{ cursor: 'pointer', color: '#999' }} />);

components/Admin/Navbar/index.js

@@ -1,9 +1,9 @@
 import { useEffect, useState } from 'react';
-import LinkTo from '../../utils/LinkTo';
+import LinkTo from '~/components/LinkTo';
 import { Avatar, Col, Menu, Row, Space, Typography } from 'antd';
 import { LinkOutlined, FormOutlined, TagsOutlined, UserOutlined } from '@ant-design/icons';
 
-import API from '../../../utils/api';
+import API from '~/lib/api';
 
 import styles from './style.module.css';
 

components/Admin/RedirectsTable/NewRedirect.js

@@ -23,7 +23,9 @@ function NewRedirect() {
       <Modal title="New Entry" visible={isVisible} onOk={ok} onCancel={() => setVisible(false)}>
         <Form
           form={form}
-          onFinish={(values) => dispatch({ type: 'CREATE', redirect: values }) && form.resetFields()}>
+          onFinish={(values) =>
+            dispatch({ type: 'CREATE', redirect: values }) && form.resetFields()
+          }>
           <Item
             name="name"
             label={

components/Admin/RedirectsTable/index.js

@@ -1,13 +1,13 @@
 import { useEffect, useState } from 'react';
 import { Form, Typography, notification } from 'antd';
 import { DateTime } from 'luxon';
-import useAsyncReducer from '../../../utils/useAsyncReducer';
+import useAsyncReducer from '~/hooks/useAsyncReducer';
 import { EditingContext, reducer as reducerEditing } from './Context';
 import EditableTable from '../../EditableTable';
 import Actions from './Actions';
 import NewRedirect from './NewRedirect';
 
-import API from '../../../utils/api';
+import API from '~/lib/api';
 import { useRedirects } from '../Context';
 
 function RedirectsTable() {

components/Footer/index.js

@@ -7,10 +7,9 @@ import {
   IoHeart
 } from 'react-icons/io5';
 
-import social from '../../data/social.yml';
+import social from '~/data/social.yml';
 
 import styles from './style.module.css';
-
 import logo from '../../public/cesium.svg';
 
 const logos = {

docker-compose.yml

@@ -0,0 +1,15 @@
+version: '3.7'
+services:
+  db:
+    image: mongo:latest
+    environment:
+      MONGO_INITDB_ROOT_USERNAME: root
+      MONGO_INITDB_ROOT_PASSWORD: secret
+    ports:
+      - 27017:27017
+    volumes:
+      - mdbdata:/data/db
+    command: mongod --auth
+
+volumes:
+  mdbdata:

jsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "~/components/*": ["components/*"],
+      "~/data/*": ["data/*"],
+      "~/hooks/*": ["hooks/*"],
+      "~/lib/*": ["lib/*"],
+      "~/models/*": ["models/*"],
+      "~/styles/*": ["styles/*"],
+      "~/utils/*": ["hooks/*"]
+    }
+  }
+}

pages/[redirect]/[key].js

@@ -1,7 +1,7 @@
 import ErrorPage from 'next/error';
-import API from '../../utils/api';
+import API from '~/lib/api';
 
-import { domain, github, gitlab } from '../../data/settings.yml';
+import { domain, github, gitlab } from '~/data/settings.yml';
 
 const repos = {
   gh: github,

pages/[redirect]/index.js

@@ -1,6 +1,6 @@
 import ErrorPage from 'next/error';
 
-import { domain } from '../../data/settings.yml';
+import { domain } from '~/data/settings.yml';
 
 export async function getServerSideProps({ params }) {
   const { redirect } = params;

pages/_app.js

@@ -1,5 +1,5 @@
 import { UserProvider } from '@auth0/nextjs-auth0';
-import '../styles/globals.css';
+import '~/styles/globals.css';
 
 function App({ Component, pageProps }) {
   return (

pages/admin/index.js

@@ -1,11 +1,11 @@
 import { withPageAuthRequired } from '@auth0/nextjs-auth0';
 import { useRouter } from 'next/router';
-import { AdminContextProvider } from '../../components/Admin/Context';
-import FormsTable from '../../components/Admin/FormsTable';
-import LinksTable from '../../components/Admin/LinksTable';
-import RedirectsTable from '../../components/Admin/RedirectsTable';
-import Navbar, { navbar as entries } from '../../components/Admin/Navbar';
-import Footer from '../../components/Footer';
+import { AdminContextProvider } from '~/components/Admin/Context';
+import FormsTable from '~/components/Admin/FormsTable';
+import LinksTable from '~/components/Admin/LinksTable';
+import RedirectsTable from '~/components/Admin/RedirectsTable';
+import Navbar, { navbar as entries } from '~/components/Admin/Navbar';
+import Footer from '~/components/Footer';
 
 import 'antd/dist/antd.css';
 

pages/api/forms/[slug]/index.js

@@ -1,6 +1,6 @@
 import { withApiAuthRequired } from '@auth0/nextjs-auth0';
-import dbConnect from '../../../../utils/database';
-import Form from '../../../../models/Form';
+import dbConnect from '~/lib/database';
+import Form from '~/models/Form';
 
 export default withApiAuthRequired(async (req, res) => {
   const {

pages/api/forms/[slug]/url.js

@@ -1,5 +1,5 @@
-import dbConnect from '../../../../utils/database';
-import Form from '../../../../models/Form';
+import dbConnect from '~/lib/database';
+import Form from '~/models/Form';
 
 export default async (req, res) => {
   const {

pages/api/forms/index.js

@@ -1,6 +1,6 @@
 import { withApiAuthRequired } from '@auth0/nextjs-auth0';
-import dbConnect from '../../../utils/database';
-import Form from '../../../models/Form';
+import dbConnect from '~/lib/database';
+import Form from '~/models/Form';
 
 export default withApiAuthRequired(async (req, res) => {
   const { method } = req;

pages/api/links/[id]/index.js

@@ -1,6 +1,6 @@
 import { withApiAuthRequired } from '@auth0/nextjs-auth0';
-import dbConnect from '../../../../utils/database';
-import Link from '../../../../models/Link';
+import dbConnect from '~/lib/database';
+import Link from '~/models/Link';
 
 export default withApiAuthRequired(async (req, res) => {
   const {

pages/api/links/[id]/url.js

@@ -1,5 +1,5 @@
-import dbConnect from '../../../../utils/database';
-import Link from '../../../../models/Link';
+import dbConnect from '~/lib/database';
+import Link from '~/models/Link';
 
 export default async (req, res) => {
   const {

pages/api/links/index.js

@@ -1,6 +1,6 @@
 import { withApiAuthRequired } from '@auth0/nextjs-auth0';
-import dbConnect from '../../../utils/database';
-import Link from '../../../models/Link';
+import dbConnect from '~/lib/database';
+import Link from '~/models/Link';
 
 export default withApiAuthRequired(async (req, res) => {
   const { method } = req;

pages/api/redirects/[slug]/index.js

@@ -1,6 +1,6 @@
 import { withApiAuthRequired } from '@auth0/nextjs-auth0';
-import dbConnect from '../../../../utils/database';
-import Redirect from '../../../../models/Redirect';
+import dbConnect from '~/lib/database';
+import Redirect from '~/models/Redirect';
 
 export default withApiAuthRequired(async (req, res) => {
   const {

pages/api/redirects/[slug]/url.js

@@ -1,5 +1,5 @@
-import dbConnect from '../../../../utils/database';
-import Redirect from '../../../../models/Redirect';
+import dbConnect from '~/lib/database';
+import Redirect from '~/models/Redirect';
 
 export default async (req, res) => {
   const {
@@ -12,7 +12,11 @@ export default async (req, res) => {
   switch (method) {
     case 'GET':
       try {
-        const redirect = await Redirect.findOneAndUpdate({ slug }, { $inc: { visits: 1 } }, { new: true });
+        const redirect = await Redirect.findOneAndUpdate(
+          { slug },
+          { $inc: { visits: 1 } },
+          { new: true }
+        );
 
         if (!redirect) {
           return res.status(404).json({ success: false, error: { message: 'Redirect not found' } });

pages/api/redirects/index.js

@@ -1,6 +1,6 @@
 import { withApiAuthRequired } from '@auth0/nextjs-auth0';
-import dbConnect from '../../../utils/database';
-import Redirect from '../../../models/Redirect';
+import dbConnect from '~/lib/database';
+import Redirect from '~/models/Redirect';
 
 export default withApiAuthRequired(async (req, res) => {
   const { method } = req;

pages/index.js

@@ -1,11 +1,11 @@
 import Image from 'next/image';
-import Layout from '../components/Layout';
-import Card from '../components/Card';
+import Layout from '~/components/Layout';
+import Card from '~/components/Card';
 
-import dbConnect from '../utils/database';
-import Link from '../models/Link';
+import dbConnect from '~/lib/database';
+import Link from '~/models/Link';
 
-import styles from '../styles/Home.module.css';
+import styles from '~/styles/Home.module.css';
 
 export async function getStaticProps() {
   await dbConnect();