style: apply formatter & improve import paths (#254)

pure-js · Sep 26, 2023 · c1fdd04 · c1fdd04
1 parent 1534b1a
commit c1fdd04
Show file tree

Hide file tree

Showing 10 changed files with 59 additions and 44 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+}
diff --git a/index.html b/index.html
@@ -11,6 +11,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="./src/index.jsx"></script>
+    <script type="module" src="./src/index.tsx"></script>
   </body>
 </html>
diff --git a/postcss.config.cjs b/postcss.config.cjs
@@ -1,6 +1,6 @@
 module.exports = {
   plugins: {
-    "postcss-nesting": {},
+    'postcss-nesting': {},
     'tailwindcss/nesting': {},
     tailwindcss: {},
     autoprefixer: {},

diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -26,7 +26,8 @@ function App() {
 
     // Load feature definitions from API
     fetch(
-      `https://cdn.growthbook.io/api/features/${import.meta.env.VITE_GROWTH_BOOK_KEY
+      `https://cdn.growthbook.io/api/features/${
+        import.meta.env.VITE_GROWTH_BOOK_KEY
       }`,
     )
       .then((res) => res.json())
@@ -50,7 +51,7 @@ function App() {
   return (
     <GrowthBookProvider growthbook={growthbook}>
       <Header />
-      { location.pathname !== '/' && <Breadcrumbs /> }
+      {location.pathname !== '/' && <Breadcrumbs />}
       <Alert message="" />
       <Outlet />
     </GrowthBookProvider>

diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx
@@ -1,24 +1,28 @@
-import { useMatches } from "react-router-dom";
+import { useMatches } from 'react-router-dom';
 
 import classes from './breadcrumbs.module.css';
 
 function Breadcrumbs() {
-    const matches = useMatches();
-    const crumbs = matches
-        // first get rid of any matches that don't have handle and crumb
-        .filter((match) => Boolean(match.handle?.crumb))
-        // now map them into an array of elements, passing the loader
-        // data to each one
-        .map((match) => match.handle.crumb(match.data));
+  const matches = useMatches();
+  const crumbs = matches
+    // first get rid of any matches that don't have handle and crumb
+    .filter((match) => Boolean(match.handle?.crumb))
+    // now map them into an array of elements, passing the loader
+    // data to each one
+    .map((match) => match.handle.crumb(match.data));
 
-    return (
-        <ol className={classes.breadcrumbs}>
-            {crumbs.map((crumb, index) => (
-                // eslint-disable-next-line react/no-array-index-key
-                <li className={classes.crumb} key={index}>{crumb}</li>
-            ))}
-        </ol>
-    );
+  return (
+    <div className="container mx-auto px-4">
+      <ol className={classes.breadcrumbs}>
+        {crumbs.map((crumb, index) => (
+          // eslint-disable-next-line react/no-array-index-key
+          <li className={classes.crumb} key={index}>
+            {crumb}
+          </li>
+        ))}
+      </ol>
+    </div>
+  );
 }
 
 export default Breadcrumbs;
diff --git a/src/components/breadcrumbs.module.css b/src/components/breadcrumbs.module.css
@@ -1,18 +1,18 @@
 .breadcrumbs {
-    display: flex;
-    flex-direction: row;
-    gap: .4rem;
+  display: flex;
+  flex-direction: row;
+  gap: 0.4rem;
 }
 
 .crumb {
-    &::after {
-        content: '>';
-        margin-left: .4rem;
-    }
+  &::after {
+    content: '>';
+    margin-left: 0.4rem;
+  }
 
-    &:last-child {
-        &::after {
-            content: '';
-        }
+  &:last-child {
+    &::after {
+      content: '';
     }
+  }
 }
diff --git a/src/index.jsx → src/index.tsx b/src/index.jsx → src/index.tsx
@@ -5,13 +5,13 @@ import { createBrowserRouter, RouterProvider, Link } from 'react-router-dom';
 import './index.css';
 
 const App = lazy(() => import('@components/App'));
-const Home = lazy(() => import('./pages'));
-const NoMatch = lazy(() => import('./pages/[all]'));
+const Home = lazy(() => import('@pages/index'));
+const NoMatch = lazy(() => import('@pages/[all]'));
 
-const NewPost = lazy(() => import('./pages/posts/new'));
-const EditPost = lazy(() => import('./pages/posts/[postId]/edit'));
-const UserInfo = lazy(() => import('./pages/users/[userName]'));
-const BlogPost = lazy(() => import('./pages/posts/[postId]'));
+const NewPost = lazy(() => import('@pages/posts/new'));
+const BlogPost = lazy(() => import('@pages/posts/[postId]'));
+const EditPost = lazy(() => import('@pages/posts/[postId]/edit'));
+const UserInfo = lazy(() => import('@pages/users/[userName]'));
 
 const root = createRoot(document.getElementById('app'));
 

diff --git a/src/pages/[all].tsx b/src/pages/[all].tsx
@@ -1,14 +1,14 @@
-import {
-  useLocation
-} from "react-router-dom";
+import { useLocation } from 'react-router-dom';
 
 function NoMatch() {
   const location = useLocation();
 
   return (
     <div className="container mx-auto px-4">
       <h1 className="text-center mt-3">404</h1>
-      <p>No match for <code>{location.pathname}</code></p>
+      <p>
+        No match for <code>{location.pathname}</code>
+      </p>
     </div>
   );
 }

diff --git a/tsconfig.json b/tsconfig.json
@@ -31,6 +31,7 @@
     // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
     "paths": {
       "@components/*": ["./src/components/*"],
+      "@pages/*": ["./src/pages/*"],
       "@services/*": ["./src/services/*"]
     },                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
     // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */

diff --git a/vite.config.ts b/vite.config.ts
@@ -6,7 +6,10 @@ import { VitePWA } from 'vite-plugin-pwa';
 // const path = require('node:path');
 
 export default defineConfig({
-  base: process.env.NODE_ENV === 'production' ? '/local-microblogging-client/' : '/',
+  base:
+    process.env.NODE_ENV === 'production'
+      ? '/local-microblogging-client/'
+      : '/',
   build: {
     emptyOutDir: true,
   },
@@ -27,12 +30,14 @@ export default defineConfig({
     alias: [
       {
         find: '@components',
-        // replacement: path.resolve(__dirname, './src'),
         replacement: '/src/components',
       },
+      {
+        find: '@pages',
+        replacement: '/src/pages',
+      },
       {
         find: '@services',
-        // replacement: path.resolve(__dirname, './src'),
         replacement: '/src/services',
       },
     ],