Merge branch 'main' into mobile-ui-rebase

.github/workflows/fly-deploy-pr.yml

@@ -0,0 +1,159 @@
+name: Fly Deploy Disctictr V2 Pull Request app
+on:
+    pull_request:
+        types: [opened, reopened, synchronize, closed]
+env:
+    FLY_API_TOKEN: ${{ secrets.FLY_ORG_TOTKEN }}
+    SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+    FLY_REGION: "ewr"
+    FLY_ORG: "mggg"
+jobs:
+    pr_review_app:
+        runs-on: ubuntu-latest
+
+        concurrency:
+            group: pr-${{ github.event.number }}
+
+        environment:
+            name: pr-${{ github.event.number }}
+
+        steps:
+            - uses: actions/checkout@v3
+            - uses: superfly/flyctl-actions/setup-flyctl@master
+
+            - name: Set shared environment variables
+              run: |
+                echo "db_name=${{ github.event.repository.name }}-${{ github.event.number }}-db" >> $GITHUB_ENV
+                echo "api_app_name=${{ github.event.repository.name }}-${{ github.event.number }}-api" >> $GITHUB_ENV
+                echo "frontend_app_name=${{ github.event.repository.name }}-${{ github.event.number }}-app" >> $GITHUB_ENV
+
+            - name: Destroy Resources
+              if: github.event.action == 'closed'
+              run: |
+                app_name="${{ github.event.repository.name }}-${{ github.event.number }}-api"
+                frontend_app_name="${{ github.event.repository.name }}-${{ github.event.number }}-app"
+                db_name="${{ github.event.repository.name }}-${{ github.event.number }}-db"
+                
+                echo "Destroying app $app_name"
+                flyctl apps destroy "$app_name" -y
+
+                echo "Destroying frontend app $frontend_app_name"
+                flyctl apps destroy "$frontend_app_name" -y
+
+                echo "Destroying database $db_name"
+                flyctl apps destroy "$db_name" -y
+                
+                echo "Resources for PR #${{ github.event.number }} have been destroyed."
+              env:
+                FLY_API_TOKEN: ${{ secrets.FLY_ORG_TOTKEN }}
+
+            # fork new db from existing production db if it doesn't already exist
+            # eventually we may want to maintain a stage and only fork that
+            - name: Fork From DB
+              id: fork-db
+              if: github.event.action != 'closed'
+              run: |              
+                if flyctl postgres list | grep -q ${{ github.event.repository.name }}-${{ github.event.number }}-db; then
+                  echo "DB already exists"                  
+                else              
+                  flyctl postgres create \
+                  --name ${{ github.event.repository.name }}-${{ github.event.number }}-db \
+                  --region ewr \
+                  --initial-cluster-size 1 \
+                  --vm-size shared-cpu-2x \
+                  -p ${{ secrets.FLY_PR_PG_PASSWORD }} \
+                  --org mggg \
+                  --fork-from districtr-v2-db
+                  
+                  if [ $? -eq 0 ]; then
+                    echo "Database created successfully."                                      
+                  else
+                    echo "Failed to create database."
+                    exit 1
+                  fi                                    
+                fi
+                echo "::set-output name=name::${{ github.event.repository.name }}-${{ github.event.number }}-db"
+
+            # manually launch and deploy the api app
+            - name: Launch API
+              if: github.event.action != 'closed'
+              run: |
+                app="${{ github.event.repository.name }}-${{ github.event.number }}-api"
+                db_name="${{ github.event.repository.name }}-${{ github.event.number }}-db"
+                config="fly.toml"
+            
+                # Check if the app exists
+                if flyctl apps list | grep -q "$app"; then
+                  echo "App $app already exists. Skipping launch."
+                else
+                  flyctl launch \
+                  --no-deploy --copy-config --name "$app" 
+                  echo "App $app launched successfully."
+                fi
+                # Output app name for use in the deploy step
+                echo "api_app_name=$app" >> $GITHUB_ENV
+              working-directory: backend
+
+            - name: Deploy API
+              if: github.event.action != 'closed'
+              run: |
+                    flyctl secrets set \
+                    -a ${{ github.event.repository.name }}-${{ github.event.number }}-api \
+                    POSTGRES_SCHEME="postgresql+psycopg" \
+                    POSTGRES_SERVER="${{ github.event.repository.name }}-${{ github.event.number }}-db.flycast" \
+                    POSTGRES_USER="postgres" \
+                    POSTGRES_PASSWORD=${{ secrets.FLY_PR_PG_PASSWORD }} \
+                    POSTGRES_DB="districtr_v2_api" \
+                    BACKEND_CORS_ORIGINS="https://${{ github.event.repository.name }}-${{ github.event.number }}-app.fly.dev,https://districtr-v2-frontend.fly.dev" \
+                    DATABASE_URL="postgresql://postgres:${{ secrets.FLY_PR_PG_PASSWORD }}@${{ steps.fork-db.outputs.name }}.flycast:5432/districtr_v2_api?sslmode=disable&options=-csearch_path%3Dpublic"
+                    
+                    flyctl deploy \
+                    --config fly.toml --app "${{ github.event.repository.name }}-${{ github.event.number }}-api" \
+                    --strategy immediate '--ha=false' --vm-cpu-kind shared --vm-cpus 1 --vm-memory 256 \
+                    
+              working-directory: backend
+
+            - name: Check and Launch Frontend App
+              id: launch
+              if: github.event.action != 'closed'
+              run: |
+                app="${{ github.event.repository.name }}-${{ github.event.number }}-app"
+                api_app="${{ github.event.repository.name }}-${{ github.event.number }}-api"
+                config="fly.toml"
+            
+                # Check if the app exists
+                if flyctl apps list | grep -q "$app"; then
+                  echo "App $app already exists. Skipping launch."
+                else
+                  echo "Launching app $app."
+                  # Run the flyctl launch command
+                  flyctl launch \
+                  --no-deploy --copy-config --name "${{ github.event.repository.name }}-${{ github.event.number }}-app" \
+                  --build-arg NEXT_PUBLIC_API_URL="https://${{ github.event.repository.name }}-${{ github.event.number }}-api.fly.dev" \
+                  --build-arg NEXT_PUBLIC_S3_BUCKET_URL=https://districtr-v2-dev.s3.amazonaws.com
+
+                  echo "App $app launched successfully."
+                fi
+
+                # Output app name for use in the deploy step
+                echo "frontend_app_name=$app" >> $GITHUB_ENV
+              working-directory: app
+
+            - name: Deploy frontend
+              if: github.event.action != 'closed'
+              run: |
+                app_name="${{ github.event.repository.name }}-${{ github.event.number }}-app"
+                config="fly.toml"
+                
+                flyctl secrets set \
+                -a "${{ github.event.repository.name }}-${{ github.event.number }}-app" \
+                NEXT_PUBLIC_API_URL="https://${{ github.event.repository.name }}-${{ github.event.number }}-api.fly.dev" \
+                NEXT_PUBLIC_S3_BUCKET_URL=https://districtr-v2-dev.s3.amazonaws.com
+            
+                # Deploy the app
+                flyctl deploy --config "$config" --app "${{ github.event.repository.name }}-${{ github.event.number }}-app" \
+                --build-arg NEXT_PUBLIC_API_URL="https://${{ github.event.repository.name }}-${{ github.event.number }}-api.fly.dev" \
+                --build-arg NEXT_PUBLIC_S3_BUCKET_URL=https://districtr-v2-dev.s3.amazonaws.com \
+                --strategy immediate '--ha=false' \
+                --vm-cpu-kind shared --vm-cpus 1 --vm-memory 256
+              working-directory: app

README.md

@@ -64,6 +64,10 @@ When reviewing a PR, use the "HIPPO" method to provide feedback:
 | **PP** - Personal preference | Possible changes requested. Something the reviewer would do but is non-blocking. |
 | **O** - Opinion | Comment for discussion. Non-blocking. Could be a bigger idea that's relevant to the PR. |
 
+Open PRs will spin up a set of test apps for review, following the convention `pr-<pr number>-districtr-districtr-v2-<sub app>`, and would be available for testing at e.g. `https://pr-116-districtr-districtr-v2-app.fly.dev/map`. This behavior can be tweaks via `.github/workflows/fly-deploy-pr.yml`
+
+Updates to PRs will trigger updates to staging apps, including re-running of migrations on the testing db.
+
 ### CI/CD
 
 Deployments are managed with GitHub Actions.

app/.env.dev

@@ -1,2 +1,2 @@
 NEXT_PUBLIC_API_URL=http://localhost:8000
-NEXT_PUBLIC_S3_BUCKET_URL=https://pub-fa71193941a74e14a38eee99f30f53d9.r2.dev
+NEXT_PUBLIC_S3_BUCKET_URL=https://districtr-v2-dev.s3.amazonaws.com

app/.env.docker

@@ -1,2 +1,2 @@
 NEXT_PUBLIC_API_URL=http://localhost:8000
-NEXT_PUBLIC_S3_BUCKET_URL=https://pub-fa71193941a74e14a38eee99f30f53d9.r2.dev
+NEXT_PUBLIC_S3_BUCKET_URL=https://districtr-v2-dev.s3.amazonaws.com

app/.env.production

@@ -1,2 +1,2 @@
 NEXT_PUBLIC_API_URL=https://districtr-v2-api.fly.dev
-NEXT_PUBLIC_S3_BUCKET_URL=https://pub-fa71193941a74e14a38eee99f30f53d9.r2.dev
+NEXT_PUBLIC_S3_BUCKET_URL=https://districtr-v2-dev.s3.amazonaws.com

app/.prettierrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  ...require('prettier-airbnb-config'),
+};

app/Dockerfile

@@ -14,6 +14,8 @@ ENV NODE_ENV="production"
 
 # Throw-away build stage to reduce size of final image
 FROM base as build
+ARG NEXT_PUBLIC_API_URL
+ARG NEXT_PUBLIC_S3_BUCKET_URL
 
 # Install packages needed to build node modules
 RUN apt-get update -qq && \
@@ -23,6 +25,10 @@ RUN apt-get update -qq && \
 COPY --link package-lock.json package.json ./
 RUN npm ci --include=dev
 
+RUN echo NEXT_PUBLIC_API_URL=$NEXT_PUBLIC_API_URL && \
+    echo "NEXT_PUBLIC_API_URL=$NEXT_PUBLIC_API_URL" > .env.production && \
+    echo "NEXT_PUBLIC_S3_BUCKET_URL=$NEXT_PUBLIC_S3_BUCKET_URL" >> .env.production
+
 # Copy application code
 COPY --link . .
 

app/fly.toml

@@ -11,9 +11,9 @@ primary_region = 'ewr'
 [http_service]
   internal_port = 3000
   force_https = true
-  auto_stop_machines = 'stop'
+  auto_stop_machines = "stop"
   auto_start_machines = true
-  min_machines_running = 1
+  min_machines_running = 0
   processes = ['app']
 
 [[vm]]

app/package.json

@@ -46,6 +46,7 @@
     "jest": "^29.7.0",
     "nock": "^13.5.4",
     "postcss": "^8",
+    "prettier-airbnb-config": "^1.0.0",
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
   }

app/src/app/api/sentry-example-api/route.ts

@@ -1,9 +1,9 @@
-import { NextResponse } from "next/server";
+import {NextResponse} from 'next/server';
 
-export const dynamic = "force-dynamic";
+export const dynamic = 'force-dynamic';
 
 // A faulty API route to test Sentry's error monitoring
 export function GET() {
-  throw new Error("Sentry Example API Route Error");
-  return NextResponse.json({ data: "Testing Sentry Error..." });
+  throw new Error('Sentry Example API Route Error');
+  return NextResponse.json({data: 'Testing Sentry Error...'});
 }

app/src/app/components/ContextMenu.tsx

@@ -1,11 +1,11 @@
-import React from "react";
-import { ContextMenu, Text } from "@radix-ui/themes";
-import { useMapStore } from "@/app/store/mapStore";
+import React from 'react';
+import {ContextMenu, Text} from '@radix-ui/themes';
+import {useMapStore} from '@/app/store/mapStore';
 
 export const MapContextMenu: React.FC = () => {
-  const mapDocument = useMapStore((state) => state.mapDocument);
-  const contextMenu = useMapStore((state) => state.contextMenu);
-  const handleShatter = useMapStore((state) => state.handleShatter);
+  const mapDocument = useMapStore(state => state.mapDocument);
+  const contextMenu = useMapStore(state => state.contextMenu);
+  const handleShatter = useMapStore(state => state.handleShatter);
   if (!contextMenu) return null;
 
   const handleSelect = () => {
@@ -27,7 +27,7 @@ export const MapContextMenu: React.FC = () => {
         // also, if in the future we need the context menu outside of the map,
         // this sets us up to do that
         style={{
-          position: "fixed",
+          position: 'fixed',
           top: contextMenu.y,
           left: contextMenu.x,
         }}
@@ -39,10 +39,7 @@ export const MapContextMenu: React.FC = () => {
             </Text>
           </ContextMenu.Label>
         )}
-        <ContextMenu.Item
-          disabled={!mapDocument?.child_layer}
-          onSelect={handleSelect}
-        >
+        <ContextMenu.Item disabled={!mapDocument?.child_layer} onSelect={handleSelect}>
           Shatter
         </ContextMenu.Item>
       </ContextMenu.Content>

app/src/app/components/Map.tsx

@@ -8,18 +8,16 @@ import { Protocol } from "pmtiles";
 import type { MutableRefObject } from "react";
 import React, { useEffect, useRef } from "react";
 import { MAP_OPTIONS } from "../constants/configuration";
-import {
-  mapEvents,
-} from "../utils/events/mapEvents";
+import { mapEvents } from "../utils/events/mapEvents";
 import { INTERACTIVE_LAYERS } from "../constants/layers";
 import { useMapStore } from "../store/mapStore";
 
 export const MapComponent: React.FC = () => {
   const map: MutableRefObject<Map | null> = useRef(null);
   const mapContainer: MutableRefObject<HTMLDivElement | null> = useRef(null);
   const mapLock = useMapStore((state) => state.mapLock);
-
   const setMapRef = useMapStore((state) => state.setMapRef);
+  const mapOptions = useMapStore((state) => state.mapOptions);
 
   useEffect(() => {
     let protocol = new Protocol();
@@ -30,8 +28,18 @@ export const MapComponent: React.FC = () => {
   }, []);
 
   useEffect(() => {
-    if (map.current || !mapContainer.current) return;
+    if (map.current && mapOptions.bounds) {
+      if (mapOptions.bounds) {
+        map.current.fitBounds(mapOptions.bounds, {
+          padding: 20,
+        });
+      }
+    }
+  }, [mapOptions]);
 
+  useEffect(() => {
+    if (map.current || !mapContainer.current) return;
+
     map.current = new maplibregl.Map({
       container: mapContainer.current,
       style: MAP_OPTIONS.style,
@@ -54,7 +62,7 @@ export const MapComponent: React.FC = () => {
             action.action as keyof MapLayerEventType,
             layer, // to be updated with the scale-agnostic layer id
             (e: MapLayerMouseEvent | MapLayerTouchEvent) => {
-              action.handler(e, map);
+              action.handler(e, map.current);
             }
           );
         }
@@ -64,7 +72,7 @@ export const MapComponent: React.FC = () => {
     return () => {
       mapEvents.forEach((action) => {
         map.current?.off(action.action, (e) => {
-          action.handler(e, map);
+          action.handler(e, map.current);
         });
       });
     };