Merge pull request #518 from CivicDataLab/heat-implementation

Heat implementation

Author: Abhishekfm

app/[locale]/[state]/[module]/analytics/layout.tsx

@@ -0,0 +1,47 @@
+import React, { cache } from 'react';
+import { notFound } from 'next/navigation';
+
+import { AnalyticsSideBarLayout } from '@/components/analytics/analytics-sidebar-layout';
+import { states } from '@/config/site';
+import { fetchStatesList } from '@/lib/analytics/fetch-states-list';
+import { isValidModuleForState } from '@/lib/analytics/module-config';
+
+const getStatesList = cache(async (moduleSlug: string) =>
+  fetchStatesList(moduleSlug)
+);
+
+export default async function ModuleAnalyticsLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: Promise<{ state: string; module: string }>;
+}) {
+  const { state, module } = await params;
+
+  const statesListData = await getStatesList(module);
+
+  const isActiveState = (stateSlug: string) =>
+    states.some(
+      (item) => item.slug === stateSlug && item.status === 'active'
+    );
+  const availableStates = statesListData.filter((item) =>
+    isActiveState(item.slug)
+  );
+  const currentState = statesListData?.find(
+    (item) => item.slug === state && isActiveState(item.slug)
+  );
+
+  if (!currentState) notFound();
+  // The backend's module list for this state is authoritative.
+  if (!isValidModuleForState(currentState.modules, module)) notFound();
+
+  return (
+    <AnalyticsSideBarLayout
+      currentState={currentState}
+      statesList={availableStates}
+    >
+      {children}
+    </AnalyticsSideBarLayout>
+  );
+}

app/[locale]/[state]/[module]/analytics/page.tsx

@@ -0,0 +1,38 @@
+import { dehydrate, HydrationBoundary } from '@tanstack/react-query';
+import { notFound } from 'next/navigation';
+
+import { AnalyticsMainLayout } from '@/components/analytics/analytics-layout';
+import { fetchStatesList } from '@/lib/analytics/fetch-states-list';
+import { isValidModuleForState } from '@/lib/analytics/module-config';
+import { prefetchAnalyticsPageData } from '@/lib/analytics/prefetch';
+
+export default async function ModuleAnalyticsPage({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ state: string; module: string }>;
+  searchParams: Promise<{ [key: string]: string }>;
+}) {
+  const { state: stateSlug, module } = await params;
+  const { indicator } = await searchParams;
+
+  // Validate against the backend's authoritative module list (cached, so this
+  // reuses the same fetch the layout already issued for this request).
+  const statesList = await fetchStatesList(module);
+  const currentState = statesList?.find((item) => item.slug === stateSlug);
+  if (!currentState || !isValidModuleForState(currentState.modules, module)) {
+    notFound();
+  }
+
+  const queryClient = await prefetchAnalyticsPageData({
+    stateSlug,
+    moduleSlug: module,
+    indicator,
+  });
+
+  return (
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <AnalyticsMainLayout />
+    </HydrationBoundary>
+  );
+}

app/[locale]/[state]/analytics/layout.tsx

@@ -0,0 +1,141 @@
+'use client';
+
+import Image from 'next/image';
+import Link from 'next/link';
+import { useParams } from 'next/navigation';
+import { useModuleHubStats } from '@/hooks/use-module-hub-stats';
+import { useStateName } from '@/hooks/use-state-name';
+import { IconArrowRight, IconInfoCircle } from '@tabler/icons-react';
+import type { Module } from 'ids-drr-branding-types';
+import { useTranslations } from 'next-intl';
+import { Tag, Text } from 'opub-ui';
+
+import { states } from '@/config/site';
+import { routes } from '@/lib/routes';
+import NotFound from '../not-found';
+
+function ModuleHubCard({
+  stateSlug,
+  hazardModule,
+}: {
+  stateSlug: string;
+  hazardModule: Module;
+}) {
+  const t = useTranslations('analytics.hub');
+  const tCommon = useTranslations('common');
+  const { districtCount, isLoading, veryHighRiskCount } = useModuleHubStats(
+    stateSlug,
+    hazardModule.slug
+  );
+
+  return (
+    <div className="flex min-w-0 flex-col gap-4 overflow-hidden rounded-2 bg-surfaceDefault p-8 shadow-basicMd md:flex-row ">
+      <Image
+        src={hazardModule.icon}
+        alt=""
+        className=" mx-auto h-20 w-20 shrink-0 object-contain sm:h-20 sm:w-20 md:mx-0 md:h-20 md:w-20"
+      />
+      <div className="flex min-w-0 flex-1 flex-col gap-3">
+        <Text variant="headingLg">{hazardModule.name}</Text>
+        <Text variant="bodyMd" className="block min-h-[2lh]">
+          {hazardModule.description || ''}
+        </Text>
+        {(districtCount != null || veryHighRiskCount != null) && (
+          <div className="flex flex-wrap gap-2">
+            {districtCount != null && districtCount > 0 && (
+              <Tag variation="filled">
+                {t('insights', { count: districtCount })}
+              </Tag>
+            )}
+            {veryHighRiskCount != null &&
+              veryHighRiskCount > 0 &&
+              !isLoading && (
+                <Tag variation="filled" fillColor="#FFF4F4" textColor="red">
+                  {t('veryHighRiskCount', { count: veryHighRiskCount })}
+                </Tag>
+              )}
+            {isLoading && (
+              <Tag variation="filled" fillColor="#FFF4F4" textColor="red">
+                {tCommon('loading')}
+              </Tag>
+            )}
+          </div>
+        )}
+        <Link
+          href={routes.analytics(stateSlug, hazardModule.slug)}
+          className="text-textLink flex items-center justify-end gap-2 hover:text-actionPrimaryBasicPressed"
+        >
+          <p>{t('explore')}</p>
+          <IconArrowRight className="h-4 w-4 shrink-0" />
+        </Link>
+      </div>
+    </div>
+  );
+}
+
+export default function StatePage() {
+  const params = useParams();
+  const t = useTranslations('analytics.hub');
+  const stateName = useStateName();
+  const state = states.find((s) => s.slug === params.state);
+
+  if (!state) {
+    return <NotFound />;
+  }
+
+  return (
+    <div className="p-10 px-4 md:px-20 ">
+      <div className="flex flex-col gap-4">
+        <Text variant="heading3xl" fontWeight="bold">
+          {t('heading', { stateName: stateName(state.slug, state.name) })}
+        </Text>
+        <Text variant="bodyLg">{t('description')}</Text>
+        <Text variant="bodyLg" fontWeight="semibold">
+          {t('emptyPrompt')}
+        </Text>
+      </div>
+      <div className="mt-6 grid grid-cols-1 gap-4 md:grid-cols-2 ">
+        {(state.modules ?? []).map((hazardModule: Module) => {
+          if (hazardModule.status === 'active') {
+            return (
+              <ModuleHubCard
+                key={hazardModule.slug}
+                stateSlug={state.slug}
+                hazardModule={hazardModule}
+              />
+            );
+          }
+        })}
+      </div>
+      <div
+        className="mt-6 box-border flex w-full items-start gap-3 rounded-1 border-1 border-baseGreenSolid6 bg-baseGreenSolid4 p-5"
+        role="note"
+      >
+        <IconInfoCircle className="h-6 w-6 shrink-0 text-iconDefault" />
+        <div className="flex min-w-0 flex-1 flex-col items-start gap-2">
+          <Text variant="bodyMd" fontWeight="bold" className="text-textMedium">
+            {t('notes.divisionAnalytics.label')}
+            <Text
+              variant="bodyMd"
+              fontWeight="regular"
+              className="pl-1 text-textMedium"
+            >
+              {t('notes.divisionAnalytics.description')}
+            </Text>
+          </Text>
+
+          <Text variant="bodyMd" fontWeight="bold" className="text-textMedium">
+            {t('notes.heat.label')}
+            <Text
+              variant="bodyMd"
+              fontWeight="regular"
+              className="pl-1 text-textMedium"
+            >
+              {t('notes.heat.description')}
+            </Text>
+          </Text>
+        </div>
+      </div>
+    </div>
+  );
+}