cleanups

Author: ledhed2222

src/App/ContentPortal.tsx

@@ -1,7 +1,7 @@
 import { useLocation, useOutlet } from 'react-router-dom'
 import { SwitchTransition, CSSTransition as CST } from 'react-transition-group'
 
-import ROUTES from '../ROUTES'
+import { ROUTES } from '../routes'
 import './ContentPortal.scss'
 
 export default function ContentPortal() {

src/App/NavBar.tsx

@@ -1,7 +1,7 @@
 import classnames from 'classnames'
 import { NavLink } from 'react-router-dom'
 
-import ROUTES from '../ROUTES'
+import { ROUTES } from '../routes'
 import './NavBar.scss'
 
 export default function NavBar() {

src/ROUTES.tsx

@@ -1,8 +1,11 @@
 import { ReactNode, RefObject, createRef, lazy } from 'react'
+import { createBrowserRouter } from 'react-router-dom'
 
-const Home = lazy(() => import('./Home'))
-const Projects = lazy(() => import('./Projects'))
-const About = lazy(() => import('./About'))
+import App from './App'
+
+const Home = lazy(() => import('./pages/Home'))
+const Projects = lazy(() => import('./pages/Projects'))
+const About = lazy(() => import('./pages/About'))
 
 interface RouteDef {
   path: string
@@ -11,7 +14,7 @@ interface RouteDef {
   nodeRef: RefObject<HTMLDivElement | null>
 }
 
-const ROUTES: RouteDef[] = [
+export const ROUTES: RouteDef[] = [
   {
     path: '/',
     routeName: 'Home',
@@ -27,6 +30,19 @@ const ROUTES: RouteDef[] = [
     routeName: 'About',
     element: <About />,
   },
-].map((route) => Object.assign(route, { nodeRef: createRef<HTMLDivElement>() }))
+].map((route) => ({
+  ...route,
+  nodeRef: createRef<HTMLDivElement>(),
+}))
 
-export default ROUTES
+export const ROUTER = createBrowserRouter([
+  {
+    path: '/',
+    element: <App />,
+    children: ROUTES.map((route) => ({
+      index: route.path === '/',
+      path: route.path === '/' ? undefined : route.path,
+      element: route.element,
+    })),
+  },
+])

src/index.tsx

@@ -1,10 +1,9 @@
 import { StrictMode, Suspense } from 'react'
 import { createRoot } from 'react-dom/client'
-import { RouterProvider, createBrowserRouter } from 'react-router-dom'
+import { RouterProvider } from 'react-router-dom'
 
-import App from './App'
 import { Loading } from './components'
-import ROUTES from './ROUTES'
+import { ROUTER } from './routes'
 import './index.scss'
 
 const container = window.document.getElementById('root')
@@ -14,19 +13,7 @@ if (!container) {
 createRoot(container).render(
   <StrictMode>
     <Suspense fallback={<Loading />}>
-      <RouterProvider
-        router={createBrowserRouter([
-          {
-            path: '/',
-            element: <App />,
-            children: ROUTES.map((route) => ({
-              index: route.path === '/',
-              path: route.path === '/' ? undefined : route.path,
-              element: route.element,
-            })),
-          },
-        ])}
-      />
+      <RouterProvider router={ROUTER} />
     </Suspense>
   </StrictMode>,
 )

src/About/index.tsx src/pages/About/index.tsxsrc/About/index.tsx renamed to src/pages/About/index.tsx

@@ -1,4 +1,4 @@
-import { Header, Paragraph } from '../components'
+import { Header, Paragraph } from '../../components'
 
 export default function About() {
   return (

src/Home/index.tsx src/pages/Home/index.tsxsrc/Home/index.tsx renamed to src/pages/Home/index.tsx

@@ -1,4 +1,4 @@
-import { Header } from '../components'
+import { Header } from '../../components'
 
 export default function Home() {
   return (

src/Projects/Project.tsx src/pages/Projects/Project.tsxsrc/Projects/Project.tsx renamed to src/pages/Projects/Project.tsx

@@ -1,7 +1,6 @@
 import { ReactNode } from 'react'
 
-import ExternalLink from '../components/ExternalLink'
-import Header from '../components/Header'
+import { ExternalLink, Header } from '../../components'
 
 interface Props {
   title: string

src/Projects/ewitool.png src/pages/Projects/ewitool.pngsrc/Projects/ewitool.png renamed to src/pages/Projects/ewitool.png

@@ -1,4 +1,4 @@
-@use "../common";
+@use "../../common";
 
 .Projects {
   .Project {

src/Projects/index.scss src/pages/Projects/index.scsssrc/Projects/index.scss renamed to src/pages/Projects/index.scss

@@ -1,4 +1,4 @@
-import { ExternalLink, Header, Paragraph } from '../components'
+import { ExternalLink, Header, Paragraph } from '../../components'
 
 import ewitool from './ewitool.png'
 import nftDemo from './nftDemo.png'