[DRAFT - experimental] Route grouping next.js 13 app dir

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

app/dashboard/layout.js → app/(index)/layout.js

@@ -1,9 +1,12 @@
 import Navbar from '../../components/Navbar';
 import '../../styles/globals.css';
 
+/**
+ * Child layout that wraps the index page -- main page -- with specific styles
+ */
 export default async function Layout({ children }) {
   return (
-    <div id='IndexPage' data-template='IndexPage' className='container'>
+    <div className='container' data-template="IndexPage">
       <Navbar />
       {children}
     </div>

app/(index)/loading.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import ProgressBar from '../../components/ProgressBar';
+
+//Separated Loading components for each grouped route
+//this fixed an issue where sometimes the managed suspense would continue to show the loading status
+//even though the route segment was ready to render. This issue was occurring in dev mode, where there's no route prefetch
+export default function Loading() {
+  return <ProgressBar/>
+}

app/dashboard/page.js → app/(index)/page.js

@@ -18,7 +18,7 @@ const Dashboard = () => {
   const [tooltipSlug, setTooltipSlug] = useState();
 
   const [sample, range, timestamp, setTimestamp] = useSample(samples);
-  const [showBanner, setShowBanner] = useState(true);
+  const [showBanner, setShowBanner] = useState(false);
 
   const hideBanner = () => setShowBanner(false);
 

app/about/page.js → app/(other)/about/page.js

@@ -1,5 +1,5 @@
-import AboutSection from '../../components/AboutSection';
-import content from '../../content';
+import AboutSection from '../../../components/AboutSection';
+import content from '../../../content';
 
 const About = () => {
   const aboutSection = (section, index) => (

app/data/page.js → app/(other)/data/page.js

@@ -1,9 +1,9 @@
 'use client';
 
 import React, { useState, useContext } from 'react';
-import Graphs from '../../components/Graphs';
-import Tooltip from '../../components/Tooltip';
-import { DataContext } from '../../providers/DataProvider';
+import Graphs from '../../../components/Graphs';
+import Tooltip from '../../../components/Tooltip';
+import { DataContext } from '../../../providers/DataProvider';
 
 const Data = () => {
   const { samples, sources, units } = useContext(DataContext);

app/about/layout.js → app/(other)/layout.js

@@ -1,11 +1,16 @@
 import Navbar from '../../components/Navbar';
 import '../../styles/globals.css';
 
+/**
+ * Child layout that wraps all pages that are not index
+ * and has no index specific container styles
+ */
 export default async function Layout({ children }) {
   return (
-    <div className='container' data-template='AboutPage'>
+    <div className='container'>
       <Navbar />
       {children}
     </div>
   );
 }
+

app/(other)/loading.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import ProgressBar from '../../components/ProgressBar';
+
+
+//Separated Loading components for each grouped route
+//this fixed an issue where sometimes the managed suspense would continue to show the loading status
+//even though the route segment was ready to render. This issue was occurring in dev mode, where there's no route prefetch
+export default function Loading() {
+  return <ProgressBar/>
+}

app/googleAnalytics.js

@@ -0,0 +1,25 @@
+'use client' //use client so the script doesn't get loaded on the server
+
+import React from 'react';
+import Script from 'next/script';
+import { GA_TRACKING_ID } from '../helpers/constants';
+
+const GoogleAnalytics = () => (
+  <>
+    <Script
+      async
+      src='https://www.googletagmanager.com/gtag/js?id=UA-17668746-5'
+      strategy='afterInteractive'
+    />
+    <Script id='google-analytics' strategy='afterInteractive'>
+      {`
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', '${GA_TRACKING_ID}');
+    `}
+    </Script>
+  </>
+);
+
+export default GoogleAnalytics;

app/head.js

@@ -5,8 +5,8 @@ export default function Head() {
     <>
       <title>{content.social.title}</title>
       <meta name='viewport' content='initial-scale=1.0, width=device-width' />
-      <link rel='shortcut icon' href='/static/favicon.ico' />
-      <link rel='icon' href='/static/favicon.ico' />
+      <link rel='shortcut icon' href='/favicon.ico' />
+      <link rel='icon' href='/favicon.ico' />
 
       <meta property='og:type' content='website' />
       <meta property='og:url' content={content.social.url} />

app/layout.js

@@ -1,38 +1,23 @@
-import { GA_TRACKING_ID } from '../helpers/constants';
-import Script from 'next/script';
-
+import { getData } from '/helpers/dataLoader';
 import DataContextProvider from '../providers/DataProvider';
-import { getData } from '../helpers/dataLoader';
-
+import GoogleAnalytics from './googleAnalytics';
 import '../styles/globals.css';
 
-const GoogleAnalytics = () => (
-  <>
-    <Script
-      async
-      src='https://www.googletagmanager.com/gtag/js?id=UA-17668746-5'
-      strategy='afterInteractive'
-    />
-    <Script id='google-analytics' strategy='afterInteractive'>
-      {`
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', '${GA_TRACKING_ID}');
-    `}
-    </Script>
-  </>
-);
-
-export default async function RootLayout({ children }) {
+/**
+ * Root Layout that gets data and wraps the app with the Context Provider
+ */
+export default async function RootLayout ({ children }) {
   let data = await getData();
   return (
     <html>
-      <GoogleAnalytics />
-      <head />
-      <body>
-        <DataContextProvider data={data}>{children}</DataContextProvider>
-      </body>
+    <head>
+      <GoogleAnalytics/>
+    </head>
+    <body>
+    <DataContextProvider data={data}>
+      {children}
+    </DataContextProvider>
+    </body>
     </html>
   );
 }

components/AboutSection/index.js

@@ -5,7 +5,7 @@ const AboutSection = ({ side, image, title, body, cta, carousel }) => (
     <div className={styles.container} data-side={side}>
       {image && (
         <div className={styles.image}>
-          <img src={`/static/img/about/${image}`} alt='' />
+          <img src={`/img/about/${image}`} alt='' />
         </div>
       )}
       <div className={styles.text}>

components/Carousel/index.js

@@ -15,7 +15,7 @@ import styles from './Carousel.module.css';
 
 const slides = [
   {
-    image: '/static/img/about/image-billionoyster.jpg',
+    image: '/img/about/image-billionoyster.jpg',
     description:
       'four people, knee deep in a river, frontmost person smiling and holding a basket full of oysters',
     title: 'Billion Oyster Project',
@@ -31,7 +31,7 @@ const slides = [
     ),
   },
   {
-    image: '/static/img/about/image-nywatertrails.jpg',
+    image: '/img/about/image-nywatertrails.jpg',
     title: 'New York Water Trail Association',
     description:
       'four people, knee deep in a river, frontmost person smiling and holding a basket full of oysters',
@@ -53,7 +53,7 @@ const slides = [
     ),
   },
   {
-    image: '/static/img/about/image-riverkeeper.jpg',
+    image: '/img/about/image-riverkeeper.jpg',
     description: 'a 20-foot boat named riverkeeper',
     title: 'Riverkeeper',
     body: (
@@ -76,7 +76,7 @@ const slides = [
     ),
   },
   {
-    image: '/static/img/about/image-newtoncreek.jpg',
+    image: '/img/about/image-newtoncreek.jpg',
     title: 'Newtown Creek Alliance',
     description: 'a 20-foot boat with the manhattan skyline behind it',
     body: (
@@ -100,7 +100,7 @@ const slides = [
     ),
   },
   {
-    image: '/static/img/about/image-gowanuscanal.jpg',
+    image: '/img/about/image-gowanuscanal.jpg',
     description:
       'a two person kayak, paddling in front of an overpass in the gowanus canal',
     title: 'Gowanus Canal Conservancy',
@@ -122,7 +122,7 @@ const slides = [
     ),
   },
   {
-    image: '/static/img/about/image-bronxalliance.jpg',
+    image: '/img/about/image-bronxalliance.jpg',
     description:
       'Four people in the middle of weeds that are taller than all of them. the rightmost person is leaning on a bird house',
     title: 'Bronx River Alliance',
@@ -145,8 +145,9 @@ const slides = [
   },
 ];
 
-const getConfig = () => {
-  const width = typeof window !== 'undefined' ? window.innerWidth : 1200;
+//get width from the component instead of trying to access it on the server
+//and causing hydration errors
+const getConfig = (width) => {
 
   if (width < 560) {
     return {
@@ -188,6 +189,7 @@ const CarouselSlide = ({ index, children }) => (
   </Slide>
 );
 
+
 class Carousel extends React.Component {
   constructor(props) {
     super(props);
@@ -206,7 +208,7 @@ class Carousel extends React.Component {
   }
 
   onResize() {
-    const config = getConfig();
+    const config = getConfig(window.innerWidth);
     this.setState({ config });
   }