Adds basic layout and very lightly styled header

electricitymaps · madsnedergaard · Nov 4, 2022 · Nov 3, 2022 · Nov 3, 2022 · Nov 3, 2022
commit 9bb8691383acde21157d5b5dd6c00b905e417838
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
@@ -25,7 +25,9 @@ if (container) {
  root.render(
  <StrictMode>
  <QueryClientProvider client={queryClient}>
- <App />
+ <BrowserRouter>
+ <App />
+ </BrowserRouter>
  <ReactQueryDevtools initialIsOpen={false} />
  </QueryClientProvider>
  </StrictMode>