feature/create-categories-endpoint: add API route, static fetch, typed transform and tests (#100)

Author: james-cross

package-lock.json

@@ -5,17 +5,24 @@
   "type": "module",
   "scripts": {
     "dev": "next dev",
-    "prebuild": "if [ \"$SKIP_FETCH\" != \"true\" ]; then npm run fetch:locations; else echo '⏭️  Skipping prebuild fetch'; fi",
-    "build": "jest --config ./config/jest.config.cjs && npx playwright test --config=./config/playwright.config.ts && next build",
+
+    "prebuild": "node ./scripts/fetch-prebuild.js",
+
+    "build": "npm run test && npm run test:e2e && next build",
+
     "start": "next start",
     "lint": "next lint",
+
     "test": "jest --config ./config/jest.config.cjs",
     "test:watch": "jest --config ./config/jest.config.cjs --watch",
     "test:ci": "jest --config ./config/jest.config.cjs --ci",
     "test:e2e": "playwright test --config=./config/playwright.config.ts",
     "test:e2e:headed": "playwright test --config=./config/playwright.config.ts --headed",
     "test:e2e:debug": "playwright test --config=./config/playwright.config.ts --debug",
-    "fetch:locations": "cross-env node scripts/fetch-locations.js"
+
+    "fetch:locations": "node ./scripts/fetch-locations.js",
+    "fetch:service-categories": "node ./scripts/fetch-service-categories.js",
+    "fetch:all": "npm-run-all fetch:locations fetch:service-categories"
   },
   "dependencies": {
     "@googlemaps/js-api-loader": "^1.16.8",
@@ -51,6 +58,7 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^30.0.0-beta.3",
     "jest-environment-jsdom": "^30.0.0-beta.3",
+    "npm-run-all": "^4.1.5",
     "playwright": "^1.52.0",
     "postcss": "^8.5.4",
     "tailwindcss": "^4.1.8",

package.json

@@ -0,0 +1,13 @@
+// scripts/fetch-prebuild.js
+
+if (process.env.SKIP_FETCH === 'true') {
+  console.log('⏭️  Skipping prebuild fetch');
+  process.exit(0);
+}
+
+console.log('🔄 Fetching bootstrap data before build...');
+
+// ESM: use dynamic import for node:child_process
+const { execSync } = await import('node:child_process');
+
+execSync('npm run fetch:all', { stdio: 'inherit' });

scripts/fetch-prebuild.js

@@ -0,0 +1,46 @@
+import fs from 'fs';
+import { MongoClient } from 'mongodb';
+import dotenv from 'dotenv';
+
+dotenv.config();
+
+const OUTPUT_FILE = './src/data/service-categories.json';
+const MONGO_URI = process.env.MONGODB_URI;
+const MONGO_DB_NAME = process.env.MONGODB_DB || 'streetsupport';
+
+if (!MONGO_URI) {
+  throw new Error('❌ MONGODB_URI not found in environment');
+}
+
+const client = new MongoClient(MONGO_URI);
+
+const createKey = (name) =>
+  name.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9\-]/g, '');
+
+const formatCategory = (doc) => ({
+  key: createKey(doc.Name || doc.name),
+  name: doc.Name || doc.name,
+  subCategories: (doc.SubCategories || []).map((sc) => ({
+    key: sc.Key || sc.key,
+    name: sc.Name || sc.name,
+  })),
+});
+
+(async () => {
+  try {
+    await client.connect();
+    const db = client.db(MONGO_DB_NAME);
+
+    const raw = await db.collection('NestedServiceCategories').find({}).toArray();
+    const formatted = raw.map(formatCategory);
+
+    fs.writeFileSync(OUTPUT_FILE, JSON.stringify(formatted, null, 2));
+    console.log(`✅ Saved to ${OUTPUT_FILE}`);
+
+    await client.close();
+    process.exit(0);
+  } catch (error) {
+    console.error(`❌ Failed: ${error.message}`);
+    process.exit(1);
+  }
+})();

scripts/fetch-service-categories.js

@@ -1,28 +1,35 @@
 import { NextResponse } from 'next/server';
 import { getClientPromise } from '@/utils/mongodb';
+import { formatCategory } from '@/utils/formatCategories';
+
+interface RawCategory {
+  key: string;
+  name: string;
+  subCategories: { key: string; name: string }[];
+}
+
 
 export async function GET() {
   try {
     const client = await getClientPromise();
     const db = client.db('streetsupport');
 
-    const categories = await db.collection('NestedServiceCategories').find({}).toArray();
+    const categories = await db
+      .collection<RawCategory>('NestedServiceCategories')
+      .find({})
+      .toArray();
 
-    const output = categories.map((cat) => ({
-      key: cat.Key,
-      name: cat.Name,
-      subCategories: (cat.SubCategories || []).map((sub: any) => ({
-        key: sub.Key,
-        name: sub.Name,
-      })),
-    }));
+    const formatted = categories.map(formatCategory);
 
-    return NextResponse.json({ status: 'success', data: output });
-  } catch (error) {
-    console.error(error);
     return NextResponse.json({
-      status: 'error',
-      message: error instanceof Error ? error.message : 'Unknown error',
+      status: 'success',
+      data: formatted,
     });
+  } catch (error) {
+    console.error('Error fetching categories:', error);
+    return NextResponse.json(
+      { status: 'error', message: 'Failed to fetch categories' },
+      { status: 500 }
+    );
   }
 }

src/app/api/categories/route.ts

@@ -16,20 +16,28 @@ interface Props {
   setSelectedSubCategory: (subCategory: string) => void;
 }
 
-const categories = (rawCategories as Category[]).sort((a, b) => a.name.localeCompare(b.name));
+const categories = (rawCategories as Category[]).sort((a, b) =>
+  a.name.localeCompare(b.name)
+);
 
 export default function FilterPanel({
   selectedCategory,
   selectedSubCategory,
   setSelectedCategory,
   setSelectedSubCategory,
 }: Props) {
-  const [subCategories, setSubCategories] = useState<{ key: string; name: string }[]>([]);
+  const [subCategories, setSubCategories] = useState<
+    { key: string; name: string }[]
+  >([]);
 
   useEffect(() => {
     const matched = categories.find((cat) => cat.key === selectedCategory);
     if (matched && matched.subCategories) {
-      setSubCategories([...matched.subCategories].sort((a, b) => a.name.localeCompare(b.name)));
+      setSubCategories(
+        [...matched.subCategories].sort((a, b) =>
+          a.name.localeCompare(b.name)
+        )
+      );
     } else {
       setSubCategories([]);
     }
@@ -47,7 +55,7 @@ export default function FilterPanel({
           value={selectedCategory}
           onChange={(e) => {
             setSelectedCategory(e.target.value);
-            setSelectedSubCategory(''); // reset subcategory when changing category
+            setSelectedSubCategory('');
           }}
         >
           <option value="">All</option>