Tweak webpack resolution to make it easier to import hooks

components/card/card.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import Link from 'next/link'
 
-import useCart from '../../hooks/useCart'
+import useCart from '~/hooks/useCart'
 import styles from './style.module.css'
 import axios from 'axios'
 

components/header/header.js

@@ -2,8 +2,8 @@ import Link from "next/link"
 import PropTypes from "prop-types"
 import React from "react"
 
-import useUser from '../../hooks/useUser'
-import useCart from '../../hooks/useCart'
+import useUser from '~/hooks/useUser'
+import useCart from '~/hooks/useCart'
 import logo from './sos-logo.png'
 import styles from './style.module.css'
 

next.config.js

@@ -1,3 +1,4 @@
+const fs = require('fs')
 const path = require('path')
 const withImages = require('next-images')
 
@@ -12,17 +13,46 @@ class CustomResolver {
 		resolver
 			.getHook(this.source)
 			.tapAsync("CustomResolver", (request, resolveContext, callback) => {
+
         // request.request is the string path we're resolving
-        // match ~/[dir]/[component]
-        const match = request.request.match(/^\~\/([^/]*)\/([^/]*)$/)
-        if(!match)
+        // match ~/[dir]/[path]
+        const match = request.request.match(/^(?:\.\/|)\~\/(?<dir>[^/]*)\/(?<path>.+)$/)
+
+        const allowedShortcutDirs = [
+          'styles',
+          'hooks',
+          'components'
+        ]
+
+        // If it's not the right pattern, or it's outside our list of directories
+        // handle normally
+        if(!match || !allowedShortcutDirs.includes(match.groups.dir))
           return callback();
 
-        // Create a new request, and turn it into
-        // ./[dir]/[component]/[component].js
+        const dirPath = match.groups.path.split('/')
+        const componentDir = dirPath.pop()
+
+        const resolvedDir =
+          path.join(__dirname, match.groups.dir, dirPath.join('/'))
+
+        let selectedPath = request.request
+
+        const pathsToCheck = [
+          path.join(resolvedDir, componentDir, componentDir + '.js'),
+          path.join(resolvedDir, componentDir + '.js'),
+          path.join(resolvedDir, componentDir)
+        ]
+
+        for(const path of pathsToCheck)
+          if(fs.existsSync(path)){
+            selectedPath = path
+            break
+          }
+
+        // Forge new request to pass to the resolver
         const newRequest = {
           ...request,
-          request: path.join(__dirname, match[1], match[2], match[2] + '.js')
+          request: selectedPath
         }
 
 				resolver.doResolve(target, newRequest, null, resolveContext, callback);

pages/_app.js

@@ -2,12 +2,12 @@ import React, {useState} from "react"
 import PropTypes from "prop-types"
 import axios from 'axios'
 
-import {UserContextProvider} from '../hooks/useUser'
-import {CartContextProvider} from '../hooks/useCart'
+import {UserContextProvider} from '~/hooks/useUser'
+import {CartContextProvider} from '~/hooks/useCart'
 import Header from '~/components/header'
 import Footer from '~/components/footer'
 import ErrorBoundary from '~/components/errorBoundary'
-import "../styles/layout.css"
+import "~/styles/layout.css"
 
 Layout.getInitialProps = async ({Component, ctx}) => {
   // Configure axios instance

pages/admin/index.js

@@ -1,4 +1,4 @@
-import useRequireAdmin from '../../hooks/useRequireAdmin'
+import useRequireAdmin from '~/hooks/useRequireAdmin'
 
 export default function AdminDashboard(){
   useRequireAdmin()

pages/index.js

@@ -14,7 +14,7 @@ export default function Index({items}){
       <Hero/>
       <div className="cardContainer">
         {items.map(item=>
-          <Card item={item}/>
+          <Card key={item.uuid} item={item}/>
         )}
       </div>
     </>

pages/login.js

@@ -4,7 +4,7 @@ import Router from 'next/router'
 import isEmail from 'validator/lib/isEmail'
 
 import {FormController, Input, Button} from '~/components/form'
-import useAccountRedirect from '../hooks/useAccountRedirect'
+import useAccountRedirect from '~/hooks/useAccountRedirect'
 
 export default function Login(){
   useAccountRedirect()

pages/register.js

@@ -4,7 +4,7 @@ import Router from 'next/router'
 import isEmail from 'validator/lib/isEmail'
 
 import {FormController, Input, Button} from '~/components/form'
-import useAccountRedirect from '../hooks/useAccountRedirect'
+import useAccountRedirect from '~/hooks/useAccountRedirect'
 
 export default function Register(){
   useAccountRedirect()

pages/store/cart.js

@@ -3,7 +3,7 @@ import Link from 'next/link'
 import axios from 'axios'
 import Head from 'next/head'
 
-import useCart from '../../hooks/useCart'
+import useCart from '~/hooks/useCart'
 import {FormController, Input, Button} from '~/components/form'
 import Table from '~/components/table'
 

pages/store/item/[slug].js

@@ -4,7 +4,7 @@ import Router from 'next/router'
 import {FormController, IntegerInput, Button} from '~/components/form'
 import isNum from 'validator/lib/isNumeric'
 
-import useCart from '../../../hooks/useCart'
+import useCart from '~/hooks/useCart'
 import styles from './style.module.css'
 
 Item.getInitialProps = async function({ctx: {axios, query: {slug}}}){