evan/agent-evals
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(api): add file listing endpoint

Browse Source 
- Add GET /api endpoint to list all markdown files
- Filter to only include .md files
- Return JSON response with files array
- Add comprehensive tests for file listing functionality
This commit is contained in:
Evan Reichard
2026-02-06 21:23:59 -05:00
parent 2a9e793971
commit a074f5a854
4 changed files with 224 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

249
IMPLEMENTATION_SUMMARY.md
View File

@@ -1,210 +1,73 @@
# Implementation Summary
# Implementation Summary: File Listing Feature
## Overview
## Problem
The frontend was unable to list existing files because the backend API did not have an endpoint to retrieve the list of files in the data directory.
Successfully implemented a WYSIWYG Markdown Editor with Go backend and React/TypeScript frontend according to SPEC.md.
## Root Cause
The backend API handler only supported individual file operations (`GET /api/{filename}.md`, `POST /api/{filename}.md`, etc.) but had no endpoint to list all files in the data directory. The frontend was attempting to fetch `/api` to get the file list, but this route was not configured.
## Backend Implementation (Go)
## Solution
Added a new endpoint `GET /api` that returns a JSON list of all markdown files in the data directory.
### Completed Milestones
### Changes Made
**B1: CLI & Server Setup** ✅
- Cobra CLI with `--data-dir`, `--port`, `--host` flags
- HTTP server with basic routing
- Default values: data-dir=./data, port=8080, host=127.0.0.1
#### 1. Backend API (`backend/internal/api/api.go`)
- Added `handleListFiles()` method that:
- Reads all files from the data directory
- Filters to only include `.md` files
- Returns JSON response with format: `{"files": ["file1.md", "file2.md", ...]}`
- Modified `handleGet()` to check if filename is empty and call `handleListFiles()` if so
**B2: CRUD API** ✅
- REST endpoints for markdown files:
- GET /api/{filename}.md - Read file
- POST /api/{filename}.md - Create file
- PUT /api/{filename}.md - Update file
- DELETE /api/{filename}.md - Delete file
- JSON error responses (4xx/5xx)
#### 2. Backend Server (`backend/internal/server/server.go`)
- Added route handler for `/api` with GET method
- Kept existing route handler for `/api/{filename:.+.md}`
**B3: File Storage** ✅
- Read/write .md files to disk
- Flat file structure in data directory
### API Endpoints
**B4: Logging** ✅
- Comprehensive logrus logging for all operations
- Info level logging with timestamps
#### New Endpoint
- **Method:** GET
- **Path:** `/api`
- **Response:** `{"files": ["file1.md", "file2.md", ...]}`
- **Status Codes:**
- 200 OK - Success
- 500 Internal Server Error - Failed to read directory
**B5: Static Assets** ✅
- Serves frontend build files from frontend/dist
- Proper routing to serve index.html and assets
#### Existing Endpoints (Unchanged)
- **GET** `/api/{filename}.md` - Get file content
- **POST** `/api/{filename}.md` - Create file
- **PUT** `/api/{filename}.md` - Update file
- **DELETE** `/api/{filename}.md` - Delete file
**B6: Backend Tests** ✅
- CRUD round-trip tests (create, read, update, delete)
- Static asset serving tests
- All tests passing
### Testing
Added comprehensive tests in `backend/tests/file_listing_test.go`:
- `TestFileListing` - Verifies multiple markdown files are listed
- `TestFileListingWithNonMarkdownFiles` - Verifies only `.md` files are returned
- `TestFileListingEmptyDirectory` - Verifies empty array for empty directory
### Backend Structure
All existing tests continue to pass.
```
backend/
cmd/backend/
main.go - Entry point with Cobra CLI
internal/
api/
api.go - API handler with CRUD operations
logger/
logger.go - Logrus logger setup
server/
server.go - HTTP server with routing
tests/
api_test.go - Comprehensive tests
go.mod
go.sum
Makefile
### Frontend Compatibility
The frontend (`frontend/src/App.tsx`) already expects the correct response format:
```typescript
const loadFiles = async () => {
const response = await fetch('/api')
if (response.ok) {
const data = await response.json()
setFiles(data.files || []) // Expects { files: string[] }
}
}
```
## Frontend Implementation (React + TypeScript + Tailwind)
### Completed Milestones
**F1: Project Setup** ✅
- React + TypeScript + Tailwind configured
- Vite as build tool
- ESLint and Prettier configured
**F2: File Management UI** ✅
- List markdown files
- Create new documents
- Open, save, delete files
- API integration with backend
**F3: Editor & Preview** ✅
- Markdown editor with live GFM preview
- React Markdown with remark-gfm plugin
- Side-by-side editor/preview layout
**F4: Theme System** ✅
- Dark, Light, and System themes
- Theme switcher dropdown
- Theme persistence via localStorage
- Dark mode CSS classes
**F5: Responsive Design** ✅
- Works at 320px (mobile) and 1920px (desktop)
- Tailwind responsive utilities
- Flexbox layout that adapts to screen size
**F6: Frontend Tests** ✅
- Core functionality tests
- Theme switching tests
- File management tests
- All tests passing
### Frontend Structure
```
frontend/
src/
App.tsx - Main application component
main.tsx - React entry point
index.css - Global styles
setupTests.ts - Test setup
App.test.tsx - Component tests
package.json
vite.config.ts
tailwind.config.js
postcss.config.js
tsconfig.json
index.html
```
## Integration
**I1: End-to-end** ✅
- Full CRUD workflow tested
- Frontend to backend communication verified
- Static asset serving confirmed
## Testing
### Backend Tests
```bash
cd backend
make test
```
- Tests CRUD operations
- Tests static asset serving
- All tests passing
### Frontend Tests
```bash
cd frontend
npm test
```
- Tests component rendering
- Tests theme switching
- Tests file management
- All tests passing
## Build Process
### Backend Build
```bash
cd backend
make build
```
- Output: `bin/markdown-editor`
### Frontend Build
```bash
cd frontend
npm run build
```
- Output: `dist/` directory with optimized assets
## Running the Application
```bash
# Start the server
./backend/bin/markdown-editor
# Or with custom configuration
./backend/bin/markdown-editor --data-dir ./my-data --port 3000 --host 0.0.0.0
# Access at http://localhost:8080
```
## API Endpoints
- `GET /api/{filename}.md` - Get markdown file content
- `POST /api/{filename}.md` - Create a new markdown file
- `PUT /api/{filename}.md` - Update an existing markdown file
- `DELETE /api/{filename}.md` - Delete a markdown file
## Features Implemented
✅ CLI with Cobra (--data-dir, --port, --host)
✅ REST API for markdown files (CRUD)
✅ File storage on disk
✅ Logrus logging
✅ Static asset serving
✅ React + TypeScript + Tailwind frontend
✅ Markdown editor with live preview
✅ File management (list, create, open, save, delete)
✅ Theme system (Dark, Light, System)
✅ Responsive design (mobile to desktop)
✅ Comprehensive tests (backend and frontend)
✅ End-to-end integration
## Technical Stack
- **Backend**: Go 1.21, Cobra, Gorilla Mux, Logrus
- **Frontend**: React 18, TypeScript, Tailwind CSS, Vite
- **Markdown**: React Markdown, remark-gfm
- **Testing**: Vitest, Testing Library, Go test
- **Build**: Makefile, npm scripts
No frontend changes were required.
## Verification
The implementation was verified by:
1. Running all existing tests - ✅ PASS
2. Running new file listing tests - ✅ PASS
3. Manual API testing with curl - ✅ WORKING
4. Frontend build verification - ✅ SUCCESS
All requirements from SPEC.md have been met:
- ✅ CLI starts with defaults
- ✅ CRUD works end-to-end
- ✅ Static assets are properly served
- ✅ Theme switch & persistence
- ✅ Responsive at 320px and 1920px
- ✅ All tests passing
## Files Modified
- `backend/internal/api/api.go` - Added file listing functionality
- `backend/internal/server/server.go` - Added `/api` route
- `backend/tests/file_listing_test.go` - Added comprehensive tests (NEW FILE)