Refactor API endpoint URLs to use relative paths and remove unused code in DogList and DogDetails components; simplify app.py by removing CORS and unnecessary request handling.

Author: GeekTrainer

client/astro.config.mjs

@@ -8,7 +8,15 @@ import node from '@astrojs/node';
 // https://astro.build/config
 export default defineConfig({
   vite: {
-      plugins: [tailwindcss(), svelte()]
+    plugins: [tailwindcss(), svelte()],
+    server: {
+      proxy: {
+        '/api': {
+          target: 'http://localhost:5100',
+          changeOrigin: true,
+        }
+      }
+    }
   },
 
   adapter: node({

client/src/components/DogDetails.svelte

@@ -30,7 +30,7 @@
         // Otherwise fetch data using dogId
         if (dogId) {
             try {
-                const response = await fetch(`http://localhost:5100/api/dogs/${dogId}`);
+                const response = await fetch(`/api/dogs/${dogId}`);
                 if (response.ok) {
                     dogData = await response.json();
                 } else {

client/src/components/DogList.svelte

@@ -7,26 +7,14 @@
         breed: string;
     }
 
-    interface Breed {
-        id: number;
-        name: string;
-    }
-
     export let dogs: Dog[] = [];
     let loading = true;
     let error: string | null = null;
-    let breeds: Breed[] = [];
-    let selectedBreed = '';
-    let onlyAvailable = false;
 
     async function fetchDogs() {
         loading = true;
         try {
-            let url = 'http://localhost:5100/api/dogs?';
-            if (selectedBreed) url += `breed=${encodeURIComponent(selectedBreed)}&`;
-            if (onlyAvailable) url += 'status=available&';
-            
-            const response = await fetch(url);
+            const response = await fetch('/api/dogs');
             if(response.ok) {
                 dogs = await response.json();
             } else {
@@ -39,55 +27,14 @@
         }
     }
 
-    async function fetchBreeds() {
-        try {
-            const response = await fetch('http://localhost:5100/api/breeds');
-            if(response.ok) {
-                breeds = await response.json();
-            }
-        } catch (err) {
-            console.error('Failed to fetch breeds:', err);
-        }
-    }
-
-    $: {
-        if (selectedBreed !== undefined || onlyAvailable !== undefined) {
-            fetchDogs();
-        }
-    }
-
     onMount(() => {
-        fetchBreeds();
         fetchDogs();
     });
 </script>
 
 <div>
     <h2 class="text-2xl font-medium mb-6 text-slate-100">Available Dogs</h2>
 
-    <!-- Filter controls -->
-    <div class="mb-6 flex gap-4 items-center bg-slate-800/60 backdrop-blur-sm rounded-xl p-4 border border-slate-700/50">
-        <div class="flex-1">
-            <select
-                bind:value={selectedBreed}
-                class="w-full bg-slate-700 text-slate-100 rounded-lg px-3 py-2 border border-slate-600 focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
-            >
-                <option value="">All Breeds</option>
-                {#each breeds as breed}
-                    <option value={breed.name}>{breed.name}</option>
-                {/each}
-            </select>
-        </div>
-        <label class="flex items-center gap-2 text-slate-100">
-            <input
-                type="checkbox"
-                bind:checked={onlyAvailable}
-                class="form-checkbox h-5 w-5 text-blue-500 rounded border-slate-600 bg-slate-700 focus:ring-blue-500"
-            >
-            Available Only
-        </label>
-    </div>
-    
     {#if loading}
         <!-- loading animation -->
         <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">

server/app.py

@@ -1,8 +1,7 @@
 # filepath: server/app.py
 import os
-from flask import Flask, jsonify, request
+from flask import Flask, jsonify
 from models import init_db, db, Dog, Breed
-from flask_cors import CORS
 
 # Get the server directory path
 base_dir = os.path.abspath(os.path.dirname(__file__))
@@ -11,30 +10,17 @@
 app.config['SQLALCHEMY_DATABASE_URI'] = f'sqlite:///{os.path.join(base_dir, "dogshelter.db")}'
 app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
 
-# Enable CORS for all routes with specific origin
-CORS(app, resources={r"/*": {"origins": "*"}})
-
 # Initialize the database with the app
 init_db(app)
 
 @app.route('/api/dogs', methods=['GET'])
 def get_dogs():
-    # Start with base query
     query = db.session.query(
         Dog.id, 
         Dog.name, 
         Breed.name.label('breed')
     ).join(Breed, Dog.breed_id == Breed.id)
 
-    # Apply filters based on query parameters
-    breed = request.args.get('breed')
-    if breed:
-        query = query.filter(Breed.name == breed)
-        
-    status = request.args.get('status')
-    if status == 'available':
-        query = query.filter(Dog.status == 'AVAILABLE')
-    
     dogs_query = query.all()
 
     # Convert the result to a list of dictionaries