electricitymaps · madsnedergaard · Nov 4, 2022 · Nov 3, 2022 · Nov 3, 2022 · Nov 3, 2022
diff --git a/web/.eslintrc.json b/web/.eslintrc.json
@@ -133,6 +133,12 @@
  }
  }
  ],
+ "unicorn/prevent-abbreviations": [
+ "error",
+ {
+ "ignore": [".*[pP]rops"]
+ }
+ ],
  "unicorn/no-nested-ternary": ["error"]
  },
  "settings": {
@@ -144,7 +150,7 @@
  {
  "files": ["src/**/*.ts?(x)"],
  "parserOptions": {
- "project": ["./web/tsconfig.json"]
+ "project": ["./tsconfig.json"]
  }
  },
  {

diff --git a/web/.vscode/settings.json b/web/.vscode/settings.json
@@ -16,6 +16,7 @@
  "files.watcherExclude": {
  "**/dist": true
  },
+ "eslint.workingDirectories": [{ "mode": "auto" }],
  "javascript.format.enable": false,
  "typescript.disableAutomaticTypeAcquisition": true,
  "typescript.tsdk": "node_modules/typescript/lib",

diff --git a/web/index.html b/web/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="text-gray-900 antialiased dark:bg-gray-800 dark:text-white">
+<html lang="en" class="antialiased">
  <head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/png" href="/favicon.png" />

diff --git a/web/package.json b/web/package.json
@@ -36,6 +36,7 @@
  "react-dom": "18.2.0",
  "react-map-gl": "^7.0.19",
  "react-router-dom": "6.3.0",
+ "tailwindcss-classnames": "^3.0.6",
  "tiny-invariant": "^1.3.1"
  },
  "devDependencies": {
@@ -81,7 +82,6 @@
  "prettier-plugin-tailwindcss": "0.1.13",
  "start-server-and-test": "1.14.0",
  "tailwindcss": "3.1.8",
- "tailwindcss-classnames": "^3.0.6",
  "typescript": "4.8.4",
  "vite": "3.1.8",
  "vite-plugin-pwa": "0.13.1",

diff --git a/web/public/electricity-maps-logo.svg b/web/public/electricity-maps-logo.svg
diff --git a/web/src/App.tsx b/web/src/App.tsx
@@ -1,15 +1,23 @@
-import LoadingOrError from 'components/LoadingOrError';
-import LeftPanel from 'features/panels/LeftPanel';
+import ErrorBoundary from 'features/error-boundary/ErrorBoundary';
+import Header from 'features/header/Header';
 import type { ReactElement } from 'react';
 import { lazy, Suspense } from 'react';
 
 const Map = lazy(async () => import('features/map/Map'));
+const LeftPanel = lazy(async () => import('features/panels/LeftPanel'));
 
 export default function App(): ReactElement {
  return (
- <Suspense fallback={<LoadingOrError />}>
- <LeftPanel />
- <Map />
+ <Suspense fallback={<div />}>
+ <div className="h-full">
+ <Header />
+ <div className="flex h-screen">
+ <ErrorBoundary>
+ <LeftPanel />
+ <Map />
+ </ErrorBoundary>
+ </div>
+ </div>
  </Suspense>
  );
 }
diff --git a/web/src/features/error-boundary/ErrorBoundary.tsx b/web/src/features/error-boundary/ErrorBoundary.tsx
@@ -0,0 +1,57 @@
+import { Component, ErrorInfo, ReactNode } from 'react';
+
+interface Props {
+ children?: ReactNode;
+}
+
+interface State {
+ hasError: boolean;
+ error: Error | undefined;
+}
+
+class ErrorBoundary extends Component<Props, State> {
+ public state: State = {
+ hasError: false,
+ error: undefined,
+ };
+
+ public static getDerivedStateFromError(error: Error): State {
+ // Update state so the next render will show the fallback UI.
+ return { hasError: true, error: error };
+ }
+
+ public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+ // TODO: Send this to Sentry
+ console.error('Uncaught error:', error, errorInfo);
+ }
+
+ public render() {
+ if (this.state.hasError) {
+ const url = window.location.href;
+ return (
+ <div className="flex w-full flex-col items-center justify-center">
+ <h1>Oh no, something went wrong...</h1>
+ <p>
+ Please let us know <a href="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/electricityMaps/electricitymaps-contrib">on Github</a> so we
+ can fix this!
+ </p>
+ <pre className="rounded-lg bg-gray-300 p-2 text-xs">
+ Error message: {this.state.error?.message}
+ <br />
+ Url: {url}
+ </pre>
+ <a
+ href="/map"
+ className="mt-4 cursor-pointer rounded-lg border border-gray-200 bg-gray-100 p-2 text-base text-black"
+ >
+ Back to map
+ </a>
+ </div>
+ );
+ }
+
+ return this.props.children;
+ }
+}
+
+export default ErrorBoundary;
diff --git a/web/src/features/header/Header.tsx b/web/src/features/header/Header.tsx
@@ -0,0 +1,52 @@
+import * as NavigationMenu from '@radix-ui/react-navigation-menu';
+import { classnames } from 'tailwindcss-classnames';
+
+interface MenuLinkProps {
+ href: string;
+ children: React.ReactNode;
+ active?: boolean;
+}
+function MenuLink({ children, href, active }: MenuLinkProps): JSX.Element {
+ return (
+ <div className="relative flex py-2 ">
+ <NavigationMenu.Item asChild className="rounded-md transition-colors hover:bg-zinc-100">
+ <NavigationMenu.Link
+ active={active}
+ href={href}
+ className={classnames('px-2 py-2 text-sm', active && 'font-bold')}
+ >
+ {children}
+ {active && <div className="absolute left-0 bottom-0 h-[2px] w-full bg-green-500"></div>}
+ </NavigationMenu.Link>
+ </NavigationMenu.Item>
+ </div>
+ );
+}
+
+export default function Header(): JSX.Element {
+ return (
+ <div className="flex items-center justify-between pl-4 pr-8 shadow-md">
+ <img src="/electricity-maps-logo.svg" alt="" className="w-100 h-10" />
+
+ <NavigationMenu.Root>
+ <NavigationMenu.List className="flex space-x-2">
+ <MenuLink href="/" active>
+ Live
+ </MenuLink>
+ <MenuLink href="https://electricitymaps.com/open-source/?utm_source=app.electricitymaps.com&utm_medium=referral">
+ We&apos;re hiring!
+ </MenuLink>
+ <MenuLink href="https://electricitymaps.com/open-source/?utm_source=app.electricitymaps.com&utm_medium=referral">
+ Open Source
+ </MenuLink>
+ <MenuLink href="https://electricitymaps.com/blog/?utm_source=app.electricitymaps.com&utm_medium=referral">
+ Blog
+ </MenuLink>
+ <MenuLink href="https://electricitymaps.com?utm_source=app.electricitymaps.com&utm_medium=referral">
+ Get our data
+ </MenuLink>
+ </NavigationMenu.List>
+ </NavigationMenu.Root>
+ </div>
+ );
+}
diff --git a/web/src/features/panels/LeftPanel.tsx b/web/src/features/panels/LeftPanel.tsx
@@ -1,4 +1,4 @@
-import { BrowserRouter, Navigate, Route, Routes, useParams } from 'react-router-dom';
+import { Navigate, Route, Routes, useParams } from 'react-router-dom';
 import ZoneDetails from './Zone/ZoneDetails';
 
 function ValidZoneIdGuardWrapper({ children }: { children: JSX.Element }): JSX.Element {
@@ -12,21 +12,20 @@ function ValidZoneIdGuardWrapper({ children }: { children: JSX.Element }): JSX.E
 
 export default function LeftPanel(): JSX.Element {
  return (
- <div className="left-panel">
- <BrowserRouter>
- <Routes>
- <Route path="/" element={<p>Ranking</p>} />
- <Route path="/map" element={<p>Ranking</p>} />
- <Route
- path="/zone/:zoneId"
- element={
- <ValidZoneIdGuardWrapper>
- <ZoneDetails />
- </ValidZoneIdGuardWrapper>
- }
- />
- </Routes>
- </BrowserRouter>
+ <div className=" flex w-4/12 bg-zinc-200 shadow-lg">
+ <Routes>
+ <Route path="/" element={<p>Ranking Panel</p>} />
+ <Route
+ path="/zone/:zoneId"
+ element={
+ <ValidZoneIdGuardWrapper>
+ <ZoneDetails />
+ </ValidZoneIdGuardWrapper>
+ }
+ />
+ {/* Alternative: add /map here and have a NotFound component for anything else*/}
+ <Route path="*" element={<p>Ranking Panel</p>} />
+ </Routes>
  </div>
  );
 }
diff --git a/web/src/index.css b/web/src/index.css
@@ -25,3 +25,9 @@
  src: url('/fonts/Inter-Bold.woff2') format('woff2');
  }
 }
+
+html,
+body,
+#root {
+ @apply h-full;
+}
diff --git a/web/src/main.tsx b/web/src/main.tsx
@@ -1,13 +1,16 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { REFETCH_INTERVAL_MS } from 'api/helpers';
 import App from 'App';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { BrowserRouter } from 'react-router-dom';
+import { createConsoleGreeting } from 'utils/createConsoleGreeting';
 import { registerSW } from 'virtual:pwa-register';
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import './index.css';
-import { REFETCH_INTERVAL_MS } from 'api/helpers';
 
 registerSW();
+createConsoleGreeting();
 
 const MAX_RETRIES = 1;
 const queryClient = new QueryClient({
@@ -25,7 +28,9 @@ if (container) {
  root.render(
  <StrictMode>
  <QueryClientProvider client={queryClient}>
- <App />
+ <BrowserRouter>
+ <App />
+ </BrowserRouter>
  <ReactQueryDevtools initialIsOpen={false} />
  </QueryClientProvider>
  </StrictMode>

diff --git a/web/src/utils/createConsoleGreeting.ts b/web/src/utils/createConsoleGreeting.ts
@@ -0,0 +1,15 @@
+// Send a greeting message to the console for curious people
+export function createConsoleGreeting() {
+ console.info(
+ `· · ·
+· ϟ · %cWelcome to Electricity Maps!%c
+· · ·
+🌱 %cReady to work on fixing climate change full-time?
+https://electricitymaps.com/jobs
+🐙 Got comments or want to contribute?
+https://github.com/electricityMaps/electricitymaps-contrib`,
+ 'color: green; font-weight: bold',
+ 'color: inherit',
+ 'color: #666; font-style: italic'
+ );
+}