From 46c6951c6b11a23d82189b22c00bc746fa85096b Mon Sep 17 00:00:00 2001 From: Vitaliy Bravikov Date: Mon, 19 Oct 2026 10:22:24 +0200 Subject: [PATCH] AGENTS and README updated, BackendStatus is unused and removed --- AGENTS.md | 8 ++-- README.md | 8 ++-- frontend/src/App.tsx | 4 -- frontend/src/components/BackendStatus.css | 10 ----- frontend/src/components/BackendStatus.tsx | 25 ----------- frontend/src/graphql/queries.ts | 14 ------ frontend/src/tests/BackendStatus.test.tsx | 52 ----------------------- 7 files changed, 8 insertions(+), 113 deletions(-) delete mode 100644 frontend/src/components/BackendStatus.css delete mode 100644 frontend/src/components/BackendStatus.tsx delete mode 100644 frontend/src/tests/BackendStatus.test.tsx diff --git a/AGENTS.md b/AGENTS.md index 6a71e04..2bd7e3f 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -5,7 +5,7 @@ - **Name:** UFOund it - **What it is:** UFOund it, is a webapp that displays UFO sightings. - **Dataset:** [NUFORC](https://nuforc.org/) UFO sightings, CSV in `backend/data/ufo_sightings_scrubbed.csv` (the Kaggle page is gone), approx 80,000 reports, approx 15mb. -- **Current state:** The backend is an Apollo Server with `sightings`, `sighting` and `createSighting`, backed by MySQL on the VM. The search and detail pages fetch sightings through Apollo Client, with search, sort and "load more" pagination done in the database. A temporary footer shows whether the backend is reachable. +- **Current state:** The backend is an Apollo Server with `sightings`, `sighting` and `createSighting`, backed by MySQL on the VM. The search and detail pages fetch sightings through Apollo Client, with search, sort and "load more" pagination done in the database. Each page shows its own loading and error states. - **Course context:** NTNU IT2810 project. Must be reproducible, accessible and sustainable. ## Tech stack @@ -43,8 +43,8 @@ python3 backend/data/cleanAndInsertDatatoDb.py insert npm run dev:backend # If port 3001 is taken, move both to another port. The frontend's -# BACKEND_PORT must match the backend's PORT, or the footer shows -# "Backend: unavailable". +# BACKEND_PORT must match the backend's PORT so Vite proxies GraphQL +# requests to the correct port. PORT=3002 npm run dev:backend BACKEND_PORT=3002 npm run dev @@ -80,7 +80,7 @@ npm run test:watch ``` frontend/ src/ - components/ Reusable UI (Banner, SearchBar, SightingList, SightingMap, LocationPicker, BackendStatus) + components/ Reusable UI (Banner, SearchBar, SightingList, SightingMap, LocationPicker) pages/ Route-level components (SearchPage, SightingDetailPage, SubmitSightingPage) hooks/ Custom hooks (debounce, sighting search, single sighting) utils/ Pure helpers (formatting) diff --git a/README.md b/README.md index d00f268..a470a6e 100644 --- a/README.md +++ b/README.md @@ -83,10 +83,10 @@ npm run dev ``` Open the address Vite prints, usually http://localhost:5173/project2/. Vite -forwards `/project2/graphql` to the backend, so no CORS setup is needed. The -footer shows "Backend: unavailable" if the backend is not running or is on -another port. If port 3001 is taken, run `PORT=3002 npm run dev:backend` and -`BACKEND_PORT=3002 npm run dev`. +forwards `/project2/graphql` to the backend, so no CORS setup is needed. +Pages show their own error states if requests fail. If port 3001 is taken, +run `PORT=3002 npm run dev:backend` and `BACKEND_PORT=3002 npm run dev` +so Vite forwards requests to the correct backend port. ### Other commands diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 0ba3a2e..f50d608 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,6 +1,5 @@ import { lazy, Suspense } from 'react' import { Route, Routes } from 'react-router' -import BackendStatus from './components/BackendStatus' import Banner from './components/Banner' import SearchPage from './pages/SearchPage' import './App.css' @@ -23,9 +22,6 @@ function App() { - ) } diff --git a/frontend/src/components/BackendStatus.css b/frontend/src/components/BackendStatus.css deleted file mode 100644 index 69d3e87..0000000 --- a/frontend/src/components/BackendStatus.css +++ /dev/null @@ -1,10 +0,0 @@ -.backend-status { - padding: 16px 32px; - border-top: 1px solid var(--border); - color: var(--text); - font-size: 15px; - - @media (max-width: 1024px) { - padding: 16px; - } -} diff --git a/frontend/src/components/BackendStatus.tsx b/frontend/src/components/BackendStatus.tsx deleted file mode 100644 index bf462ba..0000000 --- a/frontend/src/components/BackendStatus.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { useQuery } from '@apollo/client/react' -import { HEALTH_QUERY } from '../graphql/queries' -import './BackendStatus.css' - -/** - * Temporary check that the frontend can reach the GraphQL backend. - * Remove once real queries show whether the backend is up. - */ -function BackendStatus() { - const { data, loading, error } = useQuery(HEALTH_QUERY) - - let status = 'checking…' - if (error) status = 'unavailable' - else if (!loading && data?.health === 'ok') status = 'connected' - - // role="status" makes screen readers announce the change from - // "checking…" to the result, without moving focus. - return ( -

- Backend: {status} -

- ) -} - -export default BackendStatus diff --git a/frontend/src/graphql/queries.ts b/frontend/src/graphql/queries.ts index 3d39a4a..9e06b6f 100644 --- a/frontend/src/graphql/queries.ts +++ b/frontend/src/graphql/queries.ts @@ -1,20 +1,6 @@ import { gql, type TypedDocumentNode } from '@apollo/client' import type { SightingSortEnum, UfoSighting } from '../types/ufo-sighting' -interface HealthQueryData { - health: string -} - -/** - * Asks the backend's placeholder health field, to check that the frontend - * can reach it. The type parameters let useQuery know the shape of `data`. - */ -export const HEALTH_QUERY: TypedDocumentNode = gql` - query Health { - health - } -` - export interface SightingsQueryData { sightings: { edges: { cursor: string; node: UfoSighting }[] diff --git a/frontend/src/tests/BackendStatus.test.tsx b/frontend/src/tests/BackendStatus.test.tsx deleted file mode 100644 index 5b81468..0000000 --- a/frontend/src/tests/BackendStatus.test.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import { - MockedProvider, - type MockedProviderProps, -} from '@apollo/client/testing/react' -import { render, screen } from '@testing-library/react' -import { describe, expect, it } from 'vitest' -import BackendStatus from '../components/BackendStatus' -import { HEALTH_QUERY } from '../graphql/queries' - -// MockedProvider stands in for ApolloProvider and answers queries from the -// mocks below, so these tests never need a running backend. -function renderWithMocks(mocks: MockedProviderProps['mocks']) { - return render( - - - , - ) -} - -describe('BackendStatus', () => { - it('shows that it is checking while the query is in flight', () => { - renderWithMocks([ - { request: { query: HEALTH_QUERY }, result: { data: { health: 'ok' } } }, - ]) - - expect(screen.getByText('Backend: checking…')).toBeInTheDocument() - }) - - it('is a status region so screen readers announce changes', () => { - renderWithMocks([ - { request: { query: HEALTH_QUERY }, result: { data: { health: 'ok' } } }, - ]) - - expect(screen.getByRole('status')).toHaveTextContent('Backend: checking…') - }) - - it('shows connected when the backend answers ok', async () => { - renderWithMocks([ - { request: { query: HEALTH_QUERY }, result: { data: { health: 'ok' } } }, - ]) - - expect(await screen.findByText('Backend: connected')).toBeInTheDocument() - }) - - it('shows unavailable when the request fails', async () => { - renderWithMocks([ - { request: { query: HEALTH_QUERY }, error: new Error('Network error') }, - ]) - - expect(await screen.findByText('Backend: unavailable')).toBeInTheDocument() - }) -})