Archived
Compare commits
1
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Marko (Hermes Implementer)
|
b8bd1dca14 |
@@ -0,0 +1,72 @@
|
||||
name: Backend CI
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [main, develop]
|
||||
paths:
|
||||
- "backend/**"
|
||||
- ".github/workflows/backend-ci.yml"
|
||||
pull_request:
|
||||
paths:
|
||||
- "backend/**"
|
||||
|
||||
jobs:
|
||||
test:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
services:
|
||||
postgres:
|
||||
image: postgres:16
|
||||
env:
|
||||
POSTGRES_DB: cloud_reader
|
||||
POSTGRES_USER: cloud_reader
|
||||
POSTGRES_PASSWORD: cloud_reader
|
||||
ports:
|
||||
- 5432:5432
|
||||
options: >-
|
||||
--health-cmd pg_isready
|
||||
--health-interval 10s
|
||||
--health-timeout 5s
|
||||
--health-retries 5
|
||||
|
||||
defaults:
|
||||
run:
|
||||
working-directory: backend
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
|
||||
- name: Set up Python 3.12
|
||||
uses: actions/setup-python@v5
|
||||
with:
|
||||
python-version: "3.12"
|
||||
cache: "pip"
|
||||
cache-dependency-path: backend/requirements/dev.txt
|
||||
|
||||
- name: Install dependencies
|
||||
run: |
|
||||
python -m pip install --upgrade pip
|
||||
pip install -r requirements/dev.txt
|
||||
|
||||
- name: Lint
|
||||
run: ruff check .
|
||||
|
||||
- name: Run migrations
|
||||
run: python manage.py migrate
|
||||
env:
|
||||
DB_HOST: localhost
|
||||
DB_NAME: cloud_reader
|
||||
DB_USER: cloud_reader
|
||||
DB_PASSWORD: cloud_reader
|
||||
DB_PORT: 5432
|
||||
SECRET_KEY: ci-test-secret-key-do-not-use-in-production
|
||||
|
||||
- name: Run tests
|
||||
run: pytest
|
||||
env:
|
||||
DB_HOST: localhost
|
||||
DB_NAME: cloud_reader
|
||||
DB_USER: cloud_reader
|
||||
DB_PASSWORD: cloud_reader
|
||||
DB_PORT: 5432
|
||||
SECRET_KEY: ci-test-secret-key-do-not-use-in-production
|
||||
@@ -0,0 +1,42 @@
|
||||
name: Frontend CI
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [main, develop]
|
||||
paths:
|
||||
- "frontend/**"
|
||||
- "shared/**"
|
||||
- ".github/workflows/frontend-ci.yml"
|
||||
pull_request:
|
||||
paths:
|
||||
- "frontend/**"
|
||||
- "shared/**"
|
||||
|
||||
jobs:
|
||||
test:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
|
||||
- name: Set up Node.js 20
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: "20"
|
||||
cache: "yarn"
|
||||
cache-dependency-path: yarn.lock
|
||||
|
||||
- name: Install dependencies
|
||||
run: yarn install --frozen-lockfile
|
||||
|
||||
- name: Type check shared
|
||||
run: yarn workspace @cloud-reader/shared typecheck
|
||||
|
||||
- name: Build shared
|
||||
run: yarn workspace @cloud-reader/shared build
|
||||
|
||||
- name: Type check frontend
|
||||
run: yarn workspace @cloud-reader/frontend typecheck
|
||||
|
||||
- name: Build frontend
|
||||
run: yarn workspace @cloud-reader/frontend build
|
||||
@@ -0,0 +1,39 @@
|
||||
name: Mobile CI
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [main, develop]
|
||||
paths:
|
||||
- "mobile/**"
|
||||
- "shared/**"
|
||||
- ".github/workflows/mobile-ci.yml"
|
||||
pull_request:
|
||||
paths:
|
||||
- "mobile/**"
|
||||
- "shared/**"
|
||||
|
||||
jobs:
|
||||
test:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
|
||||
- name: Set up Node.js 20
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: "20"
|
||||
cache: "yarn"
|
||||
cache-dependency-path: yarn.lock
|
||||
|
||||
- name: Install dependencies
|
||||
run: yarn install --frozen-lockfile
|
||||
|
||||
- name: Type check shared
|
||||
run: yarn workspace @cloud-reader/shared typecheck
|
||||
|
||||
- name: Build shared
|
||||
run: yarn workspace @cloud-reader/shared build
|
||||
|
||||
- name: Type check mobile
|
||||
run: yarn workspace @cloud-reader/mobile typecheck
|
||||
+48
@@ -0,0 +1,48 @@
|
||||
# Python
|
||||
__pycache__/
|
||||
*.py[cod]
|
||||
*.egg-info/
|
||||
dist/
|
||||
build/
|
||||
.eggs/
|
||||
*.egg
|
||||
.env
|
||||
venv/
|
||||
.venv/
|
||||
*.sqlite3
|
||||
|
||||
# Node
|
||||
node_modules/
|
||||
.pnp
|
||||
.pnp.js
|
||||
yarn-error.log*
|
||||
|
||||
# Build artifacts
|
||||
dist/
|
||||
build/
|
||||
*.tsbuildinfo
|
||||
|
||||
# IDE
|
||||
.vscode/
|
||||
.idea/
|
||||
*.swp
|
||||
*.swo
|
||||
.DS_Store
|
||||
|
||||
# Django
|
||||
backend/media/
|
||||
backend/staticfiles/
|
||||
backend/**/migrations/
|
||||
|
||||
# Expo / React Native
|
||||
mobile/.expo/
|
||||
mobile/ios/Pods/
|
||||
mobile/android/.gradle/
|
||||
mobile/android/app/build/
|
||||
mobile/android/build/
|
||||
mobile/*.hprof
|
||||
|
||||
# Environment
|
||||
.env.local
|
||||
.env.production
|
||||
.env.development
|
||||
@@ -1,57 +1,195 @@
|
||||
# Cloud Reader
|
||||
|
||||
A full-stack e-book reader application with cross-device sync. Upload EPUB/PDF files, track reading progress, bookmark passages, take notes, and customize your reading experience.
|
||||
A modern eBook reader with web and mobile clients, powered by Django REST Framework.
|
||||
|
||||
## Architecture
|
||||
## Monorepo Structure
|
||||
|
||||
```
|
||||
cloud-reader/
|
||||
├── backend/ # Django REST API (canonical backend)
|
||||
│ ├── config/ # Django project settings
|
||||
│ ├── apps/
|
||||
│ │ ├── users/ # User auth (JWT)
|
||||
│ │ ├── books/ # Books, e-books, reading progress, settings
|
||||
│ │ └── annotations/ # Bookmarks and notes
|
||||
│ ├── manage.py
|
||||
│ └── requirements.txt
|
||||
├── frontend/ # React + Vite + TypeScript (canonical frontend)
|
||||
├── backend/ # Django API server (Python 3.12 + DRF)
|
||||
│ ├── config/ # Django project settings
|
||||
│ ├── apps/ # Django applications
|
||||
│ │ ├── accounts/ # User authentication & profiles
|
||||
│ │ ├── documents/ # Document management & uploads
|
||||
│ │ ├── collections/# Document collections
|
||||
│ │ └── reading/ # Bookmarks, highlights, reading progress
|
||||
│ ├── requirements/ # pip dependency files
|
||||
│ ├── Dockerfile
|
||||
│ └── manage.py
|
||||
├── frontend/ # React web app (TypeScript + Vite)
|
||||
│ ├── src/
|
||||
│ │ ├── api/ # API client (axios with JWT refresh)
|
||||
│ │ ├── components/ # Reusable components
|
||||
│ │ ├── context/ # Auth and annotations context
|
||||
│ │ ├── hooks/ # Custom hooks
|
||||
│ │ ├── pages/ # Route pages (Library, Reader, AddBook, Auth, Settings)
|
||||
│ │ └── types/ # TypeScript type definitions
|
||||
│ └── package.json
|
||||
└── docker-compose.yml
|
||||
│ │ ├── pages/ # Route pages (lazy-loaded)
|
||||
│ │ ├── hooks/ # Custom React hooks
|
||||
│ │ ├── services/ # API client & auth service
|
||||
│ │ ├── types/ # Frontend-specific types
|
||||
│ │ └── styles/ # Global CSS
|
||||
│ ├── Dockerfile
|
||||
│ └── vite.config.ts
|
||||
├── mobile/ # Expo/React Native mobile app
|
||||
│ ├── app/ # Expo Router pages
|
||||
│ ├── src/ # Mobile source code
|
||||
│ ├── app.json
|
||||
│ └── Dockerfile
|
||||
├── shared/ # Shared TypeScript types & utilities
|
||||
│ └── src/
|
||||
│ └── index.ts # API response types, constants
|
||||
├── .github/workflows/ # CI/CD pipelines
|
||||
└── package.json # Yarn workspace root
|
||||
```
|
||||
|
||||
## Quick Start
|
||||
## Prerequisites
|
||||
|
||||
### Docker (recommended)
|
||||
```bash
|
||||
docker compose up --build
|
||||
```
|
||||
- **Frontend:** http://localhost:5173
|
||||
- **Backend API:** http://localhost:8000/api/
|
||||
- **Python** 3.12+
|
||||
- **Node.js** 20 LTS
|
||||
- **Yarn** 4.x
|
||||
- **PostgreSQL** 16
|
||||
- **Expo CLI** (for mobile development)
|
||||
|
||||
---
|
||||
|
||||
## Backend Setup
|
||||
|
||||
### Backend (standalone)
|
||||
```bash
|
||||
cd backend
|
||||
pip install -r requirements.txt
|
||||
|
||||
# Create virtual environment
|
||||
python -m venv .venv
|
||||
source .venv/bin/activate # Linux/macOS
|
||||
# .venv\Scripts\activate # Windows
|
||||
|
||||
# Install dependencies
|
||||
pip install -r requirements/dev.txt
|
||||
|
||||
# Configure environment
|
||||
cp .env.example .env
|
||||
# Edit .env with your PostgreSQL credentials
|
||||
|
||||
# Run migrations
|
||||
python manage.py migrate
|
||||
|
||||
# Create admin user
|
||||
python manage.py createsuperuser
|
||||
|
||||
# Start development server
|
||||
python manage.py runserver
|
||||
```
|
||||
|
||||
### Frontend (standalone)
|
||||
The API will be available at `http://localhost:8000/`. Browse the API at `http://localhost:8000/api/schema/swagger-ui/`.
|
||||
|
||||
### Backend Tests
|
||||
|
||||
```bash
|
||||
cd frontend
|
||||
yarn install
|
||||
yarn dev
|
||||
cd backend
|
||||
pytest
|
||||
```
|
||||
|
||||
## Migration Notes
|
||||
Consolidated from duplicate `api/` + `web/` into single `backend/` + `frontend/` canonical structure.
|
||||
- `backend/` kept as canonical; `api/` features (e-book uploads, reading progress, reading settings) merged in.
|
||||
- `frontend/` kept as canonical; `web/` pages (Library, Reader, AddBook, Auth, Settings) merged in.
|
||||
- `api/` and `web/` directories removed.
|
||||
---
|
||||
|
||||
## Frontend Setup
|
||||
|
||||
```bash
|
||||
# From monorepo root
|
||||
yarn install
|
||||
|
||||
# Start dev server (with API proxy)
|
||||
yarn frontend:dev
|
||||
```
|
||||
|
||||
The frontend will be available at `http://localhost:5173/`. API requests under `/api/` are proxied to `http://localhost:8000/`.
|
||||
|
||||
### Frontend Build
|
||||
|
||||
```bash
|
||||
yarn frontend:build
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Mobile Setup
|
||||
|
||||
```bash
|
||||
# From monorepo root
|
||||
yarn install
|
||||
|
||||
# Start Expo dev server
|
||||
yarn mobile:start
|
||||
|
||||
# Run on Android
|
||||
yarn mobile:android
|
||||
|
||||
# Run on iOS (macOS only)
|
||||
yarn mobile:ios
|
||||
```
|
||||
|
||||
> The mobile API client defaults to `http://localhost:8000/`. For physical devices, update the `API_BASE` in `mobile/src/services/api.ts` to your machine's local IP.
|
||||
|
||||
---
|
||||
|
||||
## Shared Package
|
||||
|
||||
The `shared/` package contains TypeScript types and constants used by both the frontend and mobile apps.
|
||||
|
||||
```bash
|
||||
# Build shared package
|
||||
yarn shared:build
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## CI/CD
|
||||
|
||||
Three independent CI pipelines run on pushes and PRs:
|
||||
|
||||
| Pipeline | Trigger Path | What It Does |
|
||||
|----------|-------------|--------------|
|
||||
| **Backend CI** | `backend/**` | Installs Python deps, runs Ruff linter, applies migrations, runs pytest |
|
||||
| **Frontend CI** | `frontend/**`, `shared/**` | Installs Node deps, type-check & build shared, type-check & build frontend |
|
||||
| **Mobile CI** | `mobile/**`, `shared/**` | Installs Node deps, type-check shared & mobile |
|
||||
|
||||
Pipeline configs are in `.github/workflows/`.
|
||||
|
||||
### Docker Deployments
|
||||
|
||||
Each app has its own Dockerfile for independent deployment:
|
||||
|
||||
```bash
|
||||
# Build backend image
|
||||
docker build -t cloud-reader-backend backend/
|
||||
|
||||
# Build frontend image
|
||||
docker build -t cloud-reader-frontend frontend/
|
||||
|
||||
# Build mobile image (web export)
|
||||
docker build -t cloud-reader-mobile mobile/
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## API Endpoints
|
||||
|
||||
| Endpoint | Description |
|
||||
|----------|-------------|
|
||||
| `POST /api/v1/auth/register/` | Create a new account |
|
||||
| `POST /api/v1/auth/token/` | Obtain JWT tokens |
|
||||
| `POST /api/v1/auth/token/refresh/` | Refresh JWT token |
|
||||
| `GET /api/v1/auth/me/` | Get current user profile |
|
||||
| `GET/POST /api/v1/documents/` | List / upload documents |
|
||||
| `GET/PUT/DELETE /api/v1/documents/:id/` | Document detail |
|
||||
| `GET/POST /api/v1/collections/` | List / create collections |
|
||||
| `GET/PUT/DELETE /api/v1/collections/:id/` | Collection detail |
|
||||
| `POST /api/v1/collections/:id/add_documents/` | Add docs to collection |
|
||||
| `POST /api/v1/collections/:id/remove_documents/` | Remove docs from collection |
|
||||
| `GET/POST /api/v1/reading/bookmarks/` | List / create bookmarks |
|
||||
| `GET/POST /api/v1/reading/highlights/` | List / create highlights |
|
||||
| `GET/POST /api/v1/reading/progress/` | Track reading progress |
|
||||
|
||||
---
|
||||
|
||||
## Tech Stack
|
||||
|
||||
- **Backend:** Django 5, Django REST Framework, SimpleJWT, PostgreSQL, drf-spectacular
|
||||
- **Frontend:** React 18, TypeScript, Vite, React Router, Axios
|
||||
- **Mobile:** Expo SDK 51, React Native 0.74, Expo Router
|
||||
- **Shared:** TypeScript types, Zod schemas
|
||||
- **CI/CD:** GitHub Actions
|
||||
- **Container:** Docker (separate images per app)
|
||||
|
||||
+13
-6
@@ -1,8 +1,15 @@
|
||||
# Backend environment (example – never commit real secrets)
|
||||
DJANGO_SECRET_KEY=django-insecure-change-me-in-production
|
||||
DJANGO_DEBUG=True
|
||||
# Cloud Reader Backend — Environment Variables
|
||||
# Copy to .env and fill in your values.
|
||||
|
||||
SECRET_KEY=django-insecure-change-me-in-production
|
||||
DEBUG=True
|
||||
|
||||
DB_ENGINE=django.db.backends.postgresql
|
||||
DB_NAME=cloud_reader
|
||||
DB_USER=postgres
|
||||
DB_PASSWORD=postgres
|
||||
DB_USER=cloud_reader
|
||||
DB_PASSWORD=cloud_reader
|
||||
DB_HOST=localhost
|
||||
DB_PORT=5432
|
||||
DB_PORT=5432
|
||||
|
||||
CORS_ALLOWED_ORIGINS=http://localhost:5173,http://localhost:3000
|
||||
ALLOWED_HOSTS=localhost,127.0.0.1
|
||||
+9
-9
@@ -1,18 +1,18 @@
|
||||
FROM python:3.12-slim
|
||||
|
||||
ENV PYTHONDONTWRITEBYTECODE=1 \
|
||||
PYTHONUNBUFFERED=1 \
|
||||
DJANGO_SETTINGS_MODULE=config.settings
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
RUN apt-get update && apt-get install -y --no-install-recommends \
|
||||
libpq-dev gcc && \
|
||||
rm -rf /var/lib/apt/lists/*
|
||||
COPY requirements/production.txt /app/requirements/
|
||||
RUN pip install --no-cache-dir -r requirements/production.txt
|
||||
|
||||
COPY requirements.txt ./
|
||||
RUN pip install --no-cache-dir -r requirements.txt
|
||||
COPY . /app
|
||||
|
||||
COPY . ./
|
||||
|
||||
RUN mkdir -p media
|
||||
RUN python manage.py collectstatic --noinput
|
||||
|
||||
EXPOSE 8000
|
||||
|
||||
CMD ["python", "manage.py", "runserver", "0.0.0.0:8000"]
|
||||
CMD ["gunicorn", "config.wsgi:application", "--bind", "0.0.0.0:8000", "--workers", "4"]
|
||||
@@ -0,0 +1,10 @@
|
||||
from django.contrib import admin
|
||||
|
||||
from .models import User
|
||||
|
||||
|
||||
@admin.register(User)
|
||||
class UserAdmin(admin.ModelAdmin):
|
||||
list_display = ["email", "display_name", "is_verified", "is_active", "date_joined"]
|
||||
search_fields = ["email", "display_name"]
|
||||
list_filter = ["is_verified", "is_active"]
|
||||
@@ -0,0 +1,29 @@
|
||||
from django.contrib.auth.models import AbstractUser
|
||||
from django.db import models
|
||||
|
||||
|
||||
class User(AbstractUser):
|
||||
"""Custom user model for Cloud Reader."""
|
||||
|
||||
email = models.EmailField(unique=True)
|
||||
display_name = models.CharField(max_length=150, blank=True)
|
||||
avatar = models.ImageField(upload_to="avatars/", blank=True, null=True)
|
||||
is_verified = models.BooleanField(default=False)
|
||||
reading_preferences = models.JSONField(default=dict, blank=True)
|
||||
|
||||
USERNAME_FIELD = "email"
|
||||
REQUIRED_FIELDS = ["username"]
|
||||
|
||||
class Meta:
|
||||
db_table = "accounts_user"
|
||||
verbose_name = "User"
|
||||
verbose_name_plural = "Users"
|
||||
|
||||
def __str__(self) -> str:
|
||||
return self.email
|
||||
|
||||
@property
|
||||
def avatar_url(self) -> str | None:
|
||||
if self.avatar:
|
||||
return self.avatar.url
|
||||
return None
|
||||
@@ -0,0 +1,53 @@
|
||||
from django.contrib.auth import get_user_model
|
||||
from rest_framework import serializers
|
||||
|
||||
from .models import User
|
||||
|
||||
UserModel = get_user_model()
|
||||
|
||||
|
||||
class RegisterSerializer(serializers.ModelSerializer[User]):
|
||||
password = serializers.CharField(write_only=True, min_length=8)
|
||||
password_confirm = serializers.CharField(write_only=True, min_length=8)
|
||||
|
||||
class Meta:
|
||||
model = User
|
||||
fields = ["email", "username", "display_name", "password", "password_confirm"]
|
||||
|
||||
def validate(self, attrs):
|
||||
if attrs["password"] != attrs.pop("password_confirm"):
|
||||
raise serializers.ValidationError({"password_confirm": "Passwords do not match."})
|
||||
return attrs
|
||||
|
||||
def create(self, validated_data):
|
||||
password = validated_data.pop("password")
|
||||
user = UserModel(**validated_data)
|
||||
user.set_password(password)
|
||||
user.save()
|
||||
return user
|
||||
|
||||
|
||||
class UserSerializer(serializers.ModelSerializer[User]):
|
||||
avatar_url = serializers.SerializerMethodField()
|
||||
|
||||
class Meta:
|
||||
model = User
|
||||
fields = [
|
||||
"id", "email", "username", "display_name", "avatar_url",
|
||||
"date_joined", "is_verified", "reading_preferences",
|
||||
]
|
||||
read_only_fields = ["id", "email", "date_joined", "is_verified"]
|
||||
|
||||
def get_avatar_url(self, obj: User) -> str | None:
|
||||
return obj.avatar_url
|
||||
|
||||
|
||||
class ChangePasswordSerializer(serializers.Serializer):
|
||||
old_password = serializers.CharField(required=True)
|
||||
new_password = serializers.CharField(required=True, min_length=8)
|
||||
|
||||
def validate_old_password(self, value: str) -> str:
|
||||
user = self.context["request"].user
|
||||
if not user.check_password(value):
|
||||
raise serializers.ValidationError("Current password is incorrect.")
|
||||
return value
|
||||
@@ -0,0 +1,14 @@
|
||||
from django.urls import path
|
||||
from rest_framework_simplejwt.views import TokenObtainPairView, TokenRefreshView
|
||||
|
||||
from . import views
|
||||
|
||||
app_name = "accounts"
|
||||
|
||||
urlpatterns = [
|
||||
path("register/", views.RegisterView.as_view(), name="register"),
|
||||
path("me/", views.UserDetailView.as_view(), name="user-detail"),
|
||||
path("change-password/", views.ChangePasswordView.as_view(), name="change-password"),
|
||||
path("token/", TokenObtainPairView.as_view(), name="token-obtain"),
|
||||
path("token/refresh/", TokenRefreshView.as_view(), name="token-refresh"),
|
||||
]
|
||||
@@ -0,0 +1,36 @@
|
||||
from django.contrib.auth import get_user_model
|
||||
from rest_framework import generics, permissions, status
|
||||
from rest_framework.response import Response
|
||||
from rest_framework.views import APIView
|
||||
|
||||
from .serializers import ChangePasswordSerializer, RegisterSerializer, UserSerializer
|
||||
|
||||
UserModel = get_user_model()
|
||||
|
||||
|
||||
class RegisterView(generics.CreateAPIView):
|
||||
"""Create a new user account."""
|
||||
queryset = UserModel.objects.all()
|
||||
serializer_class = RegisterSerializer
|
||||
permission_classes = [permissions.AllowAny]
|
||||
|
||||
|
||||
class UserDetailView(generics.RetrieveUpdateAPIView):
|
||||
"""Get or update the authenticated user's profile."""
|
||||
serializer_class = UserSerializer
|
||||
permission_classes = [permissions.IsAuthenticated]
|
||||
|
||||
def get_object(self):
|
||||
return self.request.user
|
||||
|
||||
|
||||
class ChangePasswordView(APIView):
|
||||
"""Change the authenticated user's password."""
|
||||
permission_classes = [permissions.IsAuthenticated]
|
||||
|
||||
def post(self, request):
|
||||
serializer = ChangePasswordSerializer(data=request.data, context={"request": request})
|
||||
serializer.is_valid(raise_exception=True)
|
||||
request.user.set_password(serializer.validated_data["new_password"])
|
||||
request.user.save()
|
||||
return Response({"detail": "Password changed successfully."}, status=status.HTTP_200_OK)
|
||||
@@ -1,19 +0,0 @@
|
||||
from django.contrib import admin
|
||||
|
||||
from apps.annotations.models import Bookmark, Note
|
||||
|
||||
|
||||
@admin.register(Bookmark)
|
||||
class BookmarkAdmin(admin.ModelAdmin):
|
||||
list_display = ("user", "book", "page", "created_at")
|
||||
list_select_related = ("user", "book")
|
||||
search_fields = ("user__email", "book__title", "location_text")
|
||||
list_filter = ("created_at",)
|
||||
|
||||
|
||||
@admin.register(Note)
|
||||
class NoteAdmin(admin.ModelAdmin):
|
||||
list_display = ("user", "book", "page", "created_at", "updated_at")
|
||||
list_select_related = ("user", "book")
|
||||
search_fields = ("user__email", "book__title", "content", "location_text")
|
||||
list_filter = ("created_at",)
|
||||
@@ -1,7 +0,0 @@
|
||||
from django.apps import AppConfig
|
||||
|
||||
|
||||
class AnnotationsConfig(AppConfig):
|
||||
default_auto_field = "django.db.models.BigAutoField"
|
||||
name = "apps.annotations"
|
||||
label = "annotations"
|
||||
@@ -1,84 +0,0 @@
|
||||
import uuid
|
||||
|
||||
from django.conf import settings
|
||||
from django.db import models
|
||||
|
||||
|
||||
class Bookmark(models.Model):
|
||||
"""A saved location in a book that the user can return to."""
|
||||
|
||||
id = models.UUIDField(primary_key=True, default=uuid.uuid4, editable=False)
|
||||
user = models.ForeignKey(
|
||||
settings.AUTH_USER_MODEL,
|
||||
on_delete=models.CASCADE,
|
||||
related_name="bookmarks",
|
||||
db_index=True,
|
||||
)
|
||||
book = models.ForeignKey(
|
||||
"books.Book",
|
||||
on_delete=models.CASCADE,
|
||||
related_name="bookmarks",
|
||||
db_index=True,
|
||||
)
|
||||
page = models.PositiveIntegerField()
|
||||
location_text = models.TextField(
|
||||
blank=True,
|
||||
default="",
|
||||
help_text="The selected passage text at this location",
|
||||
)
|
||||
created_at = models.DateTimeField(auto_now_add=True)
|
||||
updated_at = models.DateTimeField(auto_now=True)
|
||||
|
||||
class Meta:
|
||||
db_table = "annotations_bookmark"
|
||||
verbose_name = "Bookmark"
|
||||
verbose_name_plural = "Bookmarks"
|
||||
ordering = ["-created_at"]
|
||||
constraints = [
|
||||
models.UniqueConstraint(
|
||||
fields=["user", "book", "page"],
|
||||
name="uq_bookmark_user_book_page",
|
||||
)
|
||||
]
|
||||
|
||||
def __str__(self) -> str:
|
||||
return f"{self.user} @ {self.book} p.{self.page}"
|
||||
|
||||
|
||||
class Note(models.Model):
|
||||
"""A user-written note attached to a specific location in a book."""
|
||||
|
||||
id = models.UUIDField(primary_key=True, default=uuid.uuid4, editable=False)
|
||||
user = models.ForeignKey(
|
||||
settings.AUTH_USER_MODEL,
|
||||
on_delete=models.CASCADE,
|
||||
related_name="notes",
|
||||
db_index=True,
|
||||
)
|
||||
book = models.ForeignKey(
|
||||
"books.Book",
|
||||
on_delete=models.CASCADE,
|
||||
related_name="notes",
|
||||
db_index=True,
|
||||
)
|
||||
page = models.PositiveIntegerField()
|
||||
location_text = models.TextField(
|
||||
blank=True,
|
||||
default="",
|
||||
help_text="The selected passage text this note refers to",
|
||||
)
|
||||
content = models.TextField(
|
||||
help_text="The note body content"
|
||||
)
|
||||
created_at = models.DateTimeField(auto_now_add=True)
|
||||
updated_at = models.DateTimeField(auto_now=True)
|
||||
|
||||
class Meta:
|
||||
db_table = "annotations_note"
|
||||
verbose_name = "Note"
|
||||
verbose_name_plural = "Notes"
|
||||
ordering = ["-created_at"]
|
||||
|
||||
def __str__(self) -> str:
|
||||
preview = self.content[:50]
|
||||
return f"{self.user} @ {self.book} p.{self.page}: {preview}"
|
||||
@@ -1,8 +0,0 @@
|
||||
from rest_framework import permissions
|
||||
|
||||
|
||||
class IsOwner(permissions.BasePermission):
|
||||
"""Grant access only if the requesting user owns the object."""
|
||||
|
||||
def has_object_permission(self, request, view, obj) -> bool:
|
||||
return obj.user == request.user
|
||||
@@ -1,108 +0,0 @@
|
||||
from rest_framework import serializers
|
||||
|
||||
from apps.annotations.models import Bookmark, Note
|
||||
|
||||
|
||||
class BookmarkSerializer(serializers.ModelSerializer):
|
||||
"""Serialize Bookmark data with full details."""
|
||||
|
||||
book_title = serializers.CharField(source="book.title", read_only=True)
|
||||
|
||||
class Meta:
|
||||
model = Bookmark
|
||||
fields = [
|
||||
"id",
|
||||
"book",
|
||||
"book_title",
|
||||
"page",
|
||||
"location_text",
|
||||
"created_at",
|
||||
"updated_at",
|
||||
]
|
||||
read_only_fields = ["id", "created_at", "updated_at", "book_title"]
|
||||
|
||||
def validate_page(self, value: int) -> int:
|
||||
if value < 1:
|
||||
raise serializers.ValidationError("Page must be a positive integer.")
|
||||
return value
|
||||
|
||||
|
||||
class BookmarkCreateSerializer(serializers.ModelSerializer):
|
||||
"""Serializer used for creating bookmarks. Sets user from request context."""
|
||||
|
||||
class Meta:
|
||||
model = Bookmark
|
||||
fields = ["book", "page", "location_text"]
|
||||
|
||||
def validate_page(self, value: int) -> int:
|
||||
if value < 1:
|
||||
raise serializers.ValidationError("Page must be a positive integer.")
|
||||
return value
|
||||
|
||||
def validate(self, attrs):
|
||||
user = self.context["request"].user
|
||||
if Bookmark.objects.filter(
|
||||
user=user, book=attrs["book"], page=attrs["page"]
|
||||
).exists():
|
||||
raise serializers.ValidationError(
|
||||
{"page": "A bookmark already exists at this page for this book."}
|
||||
)
|
||||
return attrs
|
||||
|
||||
def create(self, validated_data):
|
||||
validated_data["user"] = self.context["request"].user
|
||||
return super().create(validated_data)
|
||||
|
||||
|
||||
class NoteSerializer(serializers.ModelSerializer):
|
||||
"""Serialize Note data with full details."""
|
||||
|
||||
book_title = serializers.CharField(source="book.title", read_only=True)
|
||||
|
||||
class Meta:
|
||||
model = Note
|
||||
fields = [
|
||||
"id",
|
||||
"book",
|
||||
"book_title",
|
||||
"page",
|
||||
"location_text",
|
||||
"content",
|
||||
"created_at",
|
||||
"updated_at",
|
||||
]
|
||||
read_only_fields = ["id", "created_at", "updated_at", "book_title"]
|
||||
|
||||
def validate_page(self, value: int) -> int:
|
||||
if value < 1:
|
||||
raise serializers.ValidationError("Page must be a positive integer.")
|
||||
return value
|
||||
|
||||
def validate_content(self, value: str) -> str:
|
||||
stripped = value.strip()
|
||||
if not stripped:
|
||||
raise serializers.ValidationError("Note content cannot be empty.")
|
||||
return stripped
|
||||
|
||||
|
||||
class NoteCreateSerializer(serializers.ModelSerializer):
|
||||
"""Serializer used for creating notes. Sets user from request context."""
|
||||
|
||||
class Meta:
|
||||
model = Note
|
||||
fields = ["book", "page", "location_text", "content"]
|
||||
|
||||
def validate_page(self, value: int) -> int:
|
||||
if value < 1:
|
||||
raise serializers.ValidationError("Page must be a positive integer.")
|
||||
return value
|
||||
|
||||
def validate_content(self, value: str) -> str:
|
||||
stripped = value.strip()
|
||||
if not stripped:
|
||||
raise serializers.ValidationError("Note content cannot be empty.")
|
||||
return stripped
|
||||
|
||||
def create(self, validated_data):
|
||||
validated_data["user"] = self.context["request"].user
|
||||
return super().create(validated_data)
|
||||
@@ -1,331 +0,0 @@
|
||||
"""Tests for the annotations app – Bookmarks & Notes API."""
|
||||
|
||||
import pytest
|
||||
from django.urls import reverse
|
||||
from rest_framework import status
|
||||
from rest_framework.test import APIClient
|
||||
|
||||
from apps.annotations.models import Bookmark, Note
|
||||
from apps.books.models import Book
|
||||
from apps.users.models import User
|
||||
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Fixtures
|
||||
# ---------------------------------------------------------------------------
|
||||
|
||||
@pytest.fixture
|
||||
def api_client() -> APIClient:
|
||||
return APIClient()
|
||||
|
||||
|
||||
@pytest.fixture
|
||||
def user() -> User:
|
||||
return User.objects.create_user(
|
||||
username="testuser",
|
||||
email="test@example.com",
|
||||
password="testpass123",
|
||||
)
|
||||
|
||||
|
||||
@pytest.fixture
|
||||
def other_user() -> User:
|
||||
return User.objects.create_user(
|
||||
username="other",
|
||||
email="other@example.com",
|
||||
password="testpass123",
|
||||
)
|
||||
|
||||
|
||||
@pytest.fixture
|
||||
def auth_client(api_client: APIClient, user: User) -> APIClient:
|
||||
api_client.force_authenticate(user=user)
|
||||
return api_client
|
||||
|
||||
|
||||
@pytest.fixture
|
||||
def book() -> Book:
|
||||
return Book.objects.create(
|
||||
title="Test Book",
|
||||
author="Test Author",
|
||||
total_pages=300,
|
||||
)
|
||||
|
||||
|
||||
@pytest.fixture
|
||||
def bookmark(auth_client, user: User, book: Book) -> Bookmark:
|
||||
return Bookmark.objects.create(
|
||||
user=user,
|
||||
book=book,
|
||||
page=42,
|
||||
location_text="important passage",
|
||||
)
|
||||
|
||||
|
||||
@pytest.fixture
|
||||
def note(auth_client, user: User, book: Book) -> Note:
|
||||
return Note.objects.create(
|
||||
user=user,
|
||||
book=book,
|
||||
page=15,
|
||||
location_text="highlighted section",
|
||||
content="This is my note about this section.",
|
||||
)
|
||||
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Bookmark tests
|
||||
# ---------------------------------------------------------------------------
|
||||
|
||||
class TestBookmarkList:
|
||||
url = reverse("bookmark-list")
|
||||
|
||||
def test_unauthenticated_user_cannot_list(self, api_client: APIClient):
|
||||
response = api_client.get(self.url)
|
||||
assert response.status_code == status.HTTP_401_UNAUTHORIZED
|
||||
|
||||
def test_list_returns_user_bookmarks_only(
|
||||
self, auth_client: APIClient, user: User, other_user: User, book: Book
|
||||
):
|
||||
Bookmark.objects.create(user=user, book=book, page=1)
|
||||
Bookmark.objects.create(user=other_user, book=book, page=2)
|
||||
|
||||
response = auth_client.get(self.url)
|
||||
assert response.status_code == status.HTTP_200_OK
|
||||
results = response.data["results"]
|
||||
assert len(results) == 1
|
||||
assert results[0]["page"] == 1
|
||||
|
||||
def test_list_returns_empty_when_no_bookmarks(
|
||||
self, auth_client: APIClient
|
||||
):
|
||||
response = auth_client.get(self.url)
|
||||
assert response.status_code == status.HTTP_200_OK
|
||||
assert response.data["count"] == 0
|
||||
|
||||
def test_list_orders_by_newest_first(
|
||||
self, auth_client: APIClient, user: User, book: Book
|
||||
):
|
||||
b1 = Bookmark.objects.create(user=user, book=book, page=1)
|
||||
b2 = Bookmark.objects.create(user=user, book=book, page=2)
|
||||
response = auth_client.get(self.url)
|
||||
results = response.data["results"]
|
||||
assert results[0]["page"] == 2
|
||||
assert results[1]["page"] == 1
|
||||
|
||||
def test_list_includes_book_title(
|
||||
self, auth_client: APIClient, bookmark: Bookmark
|
||||
):
|
||||
response = auth_client.get(self.url)
|
||||
assert response.status_code == status.HTTP_200_OK
|
||||
assert response.data["results"][0]["book_title"] == "Test Book"
|
||||
|
||||
|
||||
class TestBookmarkCreate:
|
||||
url = reverse("bookmark-list")
|
||||
|
||||
def test_create_bookmark(self, auth_client: APIClient, book: Book):
|
||||
data = {"book": str(book.id), "page": 10, "location_text": "key insight"}
|
||||
response = auth_client.post(self.url, data, format="json")
|
||||
assert response.status_code == status.HTTP_201_CREATED
|
||||
assert response.data["page"] == 10
|
||||
|
||||
def test_create_bookmark_without_location_text(
|
||||
self, auth_client: APIClient, book: Book
|
||||
):
|
||||
data = {"book": str(book.id), "page": 5}
|
||||
response = auth_client.post(self.url, data, format="json")
|
||||
assert response.status_code == status.HTTP_201_CREATED
|
||||
assert response.data["page"] == 5
|
||||
|
||||
def test_duplicate_bookmark_page_is_rejected(
|
||||
self, auth_client: APIClient, bookmark: Bookmark
|
||||
):
|
||||
data = {"book": str(bookmark.book.id), "page": bookmark.page}
|
||||
response = auth_client.post(self.url, data, format="json")
|
||||
assert response.status_code == status.HTTP_400_BAD_REQUEST
|
||||
|
||||
def test_unauthenticated_user_cannot_create(
|
||||
self, api_client: APIClient, book: Book
|
||||
):
|
||||
data = {"book": str(book.id), "page": 10}
|
||||
response = api_client.post(self.url, data, format="json")
|
||||
assert response.status_code == status.HTTP_401_UNAUTHORIZED
|
||||
|
||||
def test_invalid_page_rejected(
|
||||
self, auth_client: APIClient, book: Book
|
||||
):
|
||||
data = {"book": str(book.id), "page": 0}
|
||||
response = auth_client.post(self.url, data, format="json")
|
||||
assert response.status_code == status.HTTP_400_BAD_REQUEST
|
||||
|
||||
|
||||
class TestBookmarkDetail:
|
||||
def test_get_bookmark(
|
||||
self, auth_client: APIClient, bookmark: Bookmark
|
||||
):
|
||||
url = reverse("bookmark-detail", args=[str(bookmark.id)])
|
||||
response = auth_client.get(url)
|
||||
assert response.status_code == status.HTTP_200_OK
|
||||
assert response.data["page"] == bookmark.page
|
||||
|
||||
def test_cannot_access_other_users_bookmark(
|
||||
self, api_client: APIClient, other_user: User, bookmark: Bookmark
|
||||
):
|
||||
api_client.force_authenticate(user=other_user)
|
||||
url = reverse("bookmark-detail", args=[str(bookmark.id)])
|
||||
response = api_client.get(url)
|
||||
assert response.status_code == status.HTTP_404_NOT_FOUND
|
||||
|
||||
|
||||
class TestBookmarkDelete:
|
||||
def test_delete_bookmark(
|
||||
self, auth_client: APIClient, bookmark: Bookmark
|
||||
):
|
||||
url = reverse("bookmark-detail", args=[str(bookmark.id)])
|
||||
response = auth_client.delete(url)
|
||||
assert response.status_code == status.HTTP_204_NO_CONTENT
|
||||
assert Bookmark.objects.count() == 0
|
||||
|
||||
def test_cannot_delete_other_users_bookmark(
|
||||
self, api_client: APIClient, other_user: User, bookmark: Bookmark
|
||||
):
|
||||
api_client.force_authenticate(user=other_user)
|
||||
url = reverse("bookmark-detail", args=[str(bookmark.id)])
|
||||
response = api_client.delete(url)
|
||||
assert response.status_code == status.HTTP_404_NOT_FOUND
|
||||
|
||||
|
||||
class TestBookmarkFilterByBook:
|
||||
def test_filter_by_book(
|
||||
self, auth_client: APIClient, user: User, book: Book
|
||||
):
|
||||
other_book = Book.objects.create(title="Other", author="Other")
|
||||
Bookmark.objects.create(user=user, book=book, page=1)
|
||||
Bookmark.objects.create(user=user, book=other_book, page=2)
|
||||
|
||||
url = reverse("bookmark-list")
|
||||
response = auth_client.get(url, {"book": str(book.id)})
|
||||
assert response.status_code == status.HTTP_200_OK
|
||||
assert response.data["count"] == 1
|
||||
assert response.data["results"][0]["page"] == 1
|
||||
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Note tests
|
||||
# ---------------------------------------------------------------------------
|
||||
|
||||
class TestNoteList:
|
||||
url = reverse("note-list")
|
||||
|
||||
def test_unauthenticated_user_cannot_list(self, api_client: APIClient):
|
||||
response = api_client.get(self.url)
|
||||
assert response.status_code == status.HTTP_401_UNAUTHORIZED
|
||||
|
||||
def test_list_returns_user_notes_only(
|
||||
self, auth_client: APIClient, user: User, other_user: User, book: Book
|
||||
):
|
||||
Note.objects.create(user=user, book=book, page=1, content="My note")
|
||||
Note.objects.create(user=other_user, book=book, page=2, content="Other's note")
|
||||
|
||||
response = auth_client.get(self.url)
|
||||
assert response.status_code == status.HTTP_200_OK
|
||||
results = response.data["results"]
|
||||
assert len(results) == 1
|
||||
assert results[0]["content"] == "My note"
|
||||
|
||||
def test_list_includes_book_title(
|
||||
self, auth_client: APIClient, note: Note
|
||||
):
|
||||
response = auth_client.get(self.url)
|
||||
assert response.status_code == status.HTTP_200_OK
|
||||
assert response.data["results"][0]["book_title"] == "Test Book"
|
||||
|
||||
|
||||
class TestNoteCreate:
|
||||
url = reverse("note-list")
|
||||
|
||||
def test_create_note(self, auth_client: APIClient, book: Book):
|
||||
data = {
|
||||
"book": str(book.id),
|
||||
"page": 20,
|
||||
"location_text": "interesting part",
|
||||
"content": "This is a thoughtful note.",
|
||||
}
|
||||
response = auth_client.post(self.url, data, format="json")
|
||||
assert response.status_code == status.HTTP_201_CREATED
|
||||
assert response.data["content"] == "This is a thoughtful note."
|
||||
|
||||
def test_create_note_without_location_text(
|
||||
self, auth_client: APIClient, book: Book
|
||||
):
|
||||
data = {"book": str(book.id), "page": 20, "content": "A note."}
|
||||
response = auth_client.post(self.url, data, format="json")
|
||||
assert response.status_code == status.HTTP_201_CREATED
|
||||
|
||||
def test_empty_content_rejected(
|
||||
self, auth_client: APIClient, book: Book
|
||||
):
|
||||
data = {"book": str(book.id), "page": 20, "content": " "}
|
||||
response = auth_client.post(self.url, data, format="json")
|
||||
assert response.status_code == status.HTTP_400_BAD_REQUEST
|
||||
|
||||
def test_unauthenticated_user_cannot_create(
|
||||
self, api_client: APIClient, book: Book
|
||||
):
|
||||
data = {"book": str(book.id), "page": 20, "content": "Note"}
|
||||
response = api_client.post(self.url, data, format="json")
|
||||
assert response.status_code == status.HTTP_401_UNAUTHORIZED
|
||||
|
||||
|
||||
class TestNoteUpdate:
|
||||
def test_update_note_content(
|
||||
self, auth_client: APIClient, note: Note
|
||||
):
|
||||
url = reverse("note-detail", args=[str(note.id)])
|
||||
data = {"content": "Updated note content."}
|
||||
response = auth_client.patch(url, data, format="json")
|
||||
assert response.status_code == status.HTTP_200_OK
|
||||
assert response.data["content"] == "Updated note content."
|
||||
|
||||
def test_cannot_update_other_users_note(
|
||||
self, api_client: APIClient, other_user: User, note: Note
|
||||
):
|
||||
api_client.force_authenticate(user=other_user)
|
||||
url = reverse("note-detail", args=[str(note.id)])
|
||||
data = {"content": "Hacked!"}
|
||||
response = api_client.patch(url, data, format="json")
|
||||
assert response.status_code == status.HTTP_404_NOT_FOUND
|
||||
|
||||
|
||||
class TestNoteDelete:
|
||||
def test_delete_note(self, auth_client: APIClient, note: Note):
|
||||
url = reverse("note-detail", args=[str(note.id)])
|
||||
response = auth_client.delete(url)
|
||||
assert response.status_code == status.HTTP_204_NO_CONTENT
|
||||
assert Note.objects.count() == 0
|
||||
|
||||
def test_batch_delete_notes(
|
||||
self, auth_client: APIClient, user: User, book: Book
|
||||
):
|
||||
n1 = Note.objects.create(user=user, book=book, page=1, content="A")
|
||||
n2 = Note.objects.create(user=user, book=book, page=2, content="B")
|
||||
url = reverse("note-batch-delete")
|
||||
response = auth_client.delete(url, {"ids": [str(n1.id), str(n2.id)]}, format="json")
|
||||
assert response.status_code == status.HTTP_200_OK
|
||||
assert response.data["deleted"] == 2
|
||||
|
||||
|
||||
class TestNoteFilterByBook:
|
||||
def test_filter_by_book(
|
||||
self, auth_client: APIClient, user: User, book: Book
|
||||
):
|
||||
other_book = Book.objects.create(title="Other", author="Other")
|
||||
Note.objects.create(user=user, book=book, page=1, content="In book")
|
||||
Note.objects.create(user=user, book=other_book, page=2, content="In other")
|
||||
|
||||
url = reverse("note-list")
|
||||
response = auth_client.get(url, {"book": str(book.id)})
|
||||
assert response.status_code == status.HTTP_200_OK
|
||||
assert response.data["count"] == 1
|
||||
assert response.data["results"][0]["content"] == "In book"
|
||||
@@ -1,12 +0,0 @@
|
||||
from django.urls import include, path
|
||||
from rest_framework.routers import DefaultRouter
|
||||
|
||||
from apps.annotations.views import BookmarkViewSet, NoteViewSet
|
||||
|
||||
router = DefaultRouter()
|
||||
router.register(r"bookmarks", BookmarkViewSet, basename="bookmark")
|
||||
router.register(r"notes", NoteViewSet, basename="note")
|
||||
|
||||
urlpatterns = [
|
||||
path("", include(router.urls)),
|
||||
]
|
||||
@@ -1,93 +0,0 @@
|
||||
from django_filters.rest_framework import DjangoFilterBackend
|
||||
from rest_framework import status, viewsets
|
||||
from rest_framework.decorators import action
|
||||
from rest_framework.filters import OrderingFilter, SearchFilter
|
||||
from rest_framework.permissions import IsAuthenticated
|
||||
from rest_framework.response import Response
|
||||
|
||||
from apps.annotations.models import Bookmark, Note
|
||||
from apps.annotations.permissions import IsOwner
|
||||
from apps.annotations.serializers import (
|
||||
BookmarkCreateSerializer,
|
||||
BookmarkSerializer,
|
||||
NoteCreateSerializer,
|
||||
NoteSerializer,
|
||||
)
|
||||
|
||||
|
||||
class BookmarkViewSet(viewsets.ModelViewSet):
|
||||
"""CRUD for user bookmarks. Users can only manage their own bookmarks."""
|
||||
|
||||
permission_classes = [IsAuthenticated, IsOwner]
|
||||
filter_backends = [DjangoFilterBackend, SearchFilter, OrderingFilter]
|
||||
filterset_fields = ["book"]
|
||||
search_fields = ["location_text"]
|
||||
ordering_fields = ["created_at", "page"]
|
||||
ordering = ["-created_at"]
|
||||
|
||||
def get_serializer_class(self):
|
||||
if self.action == "create":
|
||||
return BookmarkCreateSerializer
|
||||
return BookmarkSerializer
|
||||
|
||||
def get_queryset(self):
|
||||
return Bookmark.objects.filter(user=self.request.user).select_related(
|
||||
"book"
|
||||
)
|
||||
|
||||
def perform_create(self, serializer):
|
||||
serializer.save(user=self.request.user)
|
||||
|
||||
@action(detail=False, methods=["delete"], url_path="batch-delete")
|
||||
def batch_delete(self, request):
|
||||
"""Delete multiple bookmarks by id list."""
|
||||
ids = request.data.get("ids", [])
|
||||
if not ids:
|
||||
return Response(
|
||||
{"detail": "No ids provided."}, status=status.HTTP_400_BAD_REQUEST
|
||||
)
|
||||
deleted, _ = Bookmark.objects.filter(
|
||||
id__in=ids, user=request.user
|
||||
).delete()
|
||||
return Response(
|
||||
{"deleted": deleted}, status=status.HTTP_200_OK
|
||||
)
|
||||
|
||||
|
||||
class NoteViewSet(viewsets.ModelViewSet):
|
||||
"""CRUD for user notes. Users can only manage their own notes."""
|
||||
|
||||
permission_classes = [IsAuthenticated, IsOwner]
|
||||
filter_backends = [DjangoFilterBackend, SearchFilter, OrderingFilter]
|
||||
filterset_fields = ["book"]
|
||||
search_fields = ["content", "location_text"]
|
||||
ordering_fields = ["created_at", "page"]
|
||||
ordering = ["-created_at"]
|
||||
|
||||
def get_serializer_class(self):
|
||||
if self.action == "create":
|
||||
return NoteCreateSerializer
|
||||
return NoteSerializer
|
||||
|
||||
def get_queryset(self):
|
||||
return Note.objects.filter(user=self.request.user).select_related(
|
||||
"book"
|
||||
)
|
||||
|
||||
def perform_create(self, serializer):
|
||||
serializer.save(user=self.request.user)
|
||||
|
||||
@action(detail=False, methods=["delete"], url_path="batch-delete")
|
||||
def batch_delete(self, request):
|
||||
"""Delete multiple notes by id list."""
|
||||
ids = request.data.get("ids", [])
|
||||
if not ids:
|
||||
return Response(
|
||||
{"detail": "No ids provided."}, status=status.HTTP_400_BAD_REQUEST
|
||||
)
|
||||
deleted, _ = Note.objects.filter(
|
||||
id__in=ids, user=request.user
|
||||
).delete()
|
||||
return Response(
|
||||
{"deleted": deleted}, status=status.HTTP_200_OK
|
||||
)
|
||||
@@ -1,9 +0,0 @@
|
||||
from django.contrib import admin
|
||||
|
||||
from apps.books.models import Book
|
||||
|
||||
|
||||
@admin.register(Book)
|
||||
class BookAdmin(admin.ModelAdmin):
|
||||
list_display = ("title", "author", "total_pages", "created_at")
|
||||
search_fields = ("title", "author")
|
||||
@@ -1,7 +0,0 @@
|
||||
from django.apps import AppConfig
|
||||
|
||||
|
||||
class BooksConfig(AppConfig):
|
||||
default_auto_field = "django.db.models.BigAutoField"
|
||||
name = "apps.books"
|
||||
label = "books"
|
||||
@@ -1,109 +0,0 @@
|
||||
from django.conf import settings
|
||||
from django.db import models
|
||||
from django.db.models.signals import post_delete
|
||||
from django.dispatch import receiver
|
||||
from pathlib import Path
|
||||
|
||||
|
||||
class ReadingStatus(models.TextChoices):
|
||||
WANT_TO_READ = "want_to_read", "Want to Read"
|
||||
READING = "reading", "Reading"
|
||||
FINISHED = "finished", "Finished"
|
||||
DNF = "dnf", "Did Not Finish"
|
||||
|
||||
|
||||
class FontStyle(models.TextChoices):
|
||||
SANS_SERIF = "sans-serif", "Sans Serif"
|
||||
SERIF = "serif", "Serif"
|
||||
MONOSPACE = "monospace", "Monospace"
|
||||
|
||||
|
||||
class BackgroundColor(models.TextChoices):
|
||||
WHITE = "#ffffff", "White"
|
||||
SEPIA = "#f4e4c1", "Sepia"
|
||||
DARK = "#1a1a2e", "Dark"
|
||||
GREEN = "#c7edcc", "Green"
|
||||
|
||||
|
||||
class Book(models.Model):
|
||||
title = models.CharField(max_length=512, db_index=True)
|
||||
author = models.CharField(max_length=256, blank=True, default="", db_index=True)
|
||||
genre = models.CharField(max_length=128, blank=True, default="", db_index=True)
|
||||
description = models.TextField(blank=True, default="")
|
||||
reading_status = models.CharField(max_length=20, choices=ReadingStatus.choices, default=ReadingStatus.WANT_TO_READ, db_index=True)
|
||||
total_pages = models.PositiveIntegerField(default=0)
|
||||
cover_image = models.URLField(blank=True, default="")
|
||||
created_at = models.DateTimeField(auto_now_add=True)
|
||||
updated_at = models.DateTimeField(auto_now=True)
|
||||
|
||||
class Meta:
|
||||
db_table = "books_book"
|
||||
verbose_name = "Book"
|
||||
verbose_name_plural = "Books"
|
||||
ordering = ["title"]
|
||||
indexes = [models.Index(fields=["title", "author", "genre"])]
|
||||
|
||||
def __str__(self):
|
||||
return self.title
|
||||
|
||||
|
||||
class EBook(models.Model):
|
||||
user = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE, related_name="ebooks")
|
||||
title = models.CharField(max_length=512)
|
||||
author = models.CharField(max_length=256, blank=True, default="")
|
||||
file = models.FileField(upload_to="ebooks/%Y/%m/%d/")
|
||||
cover_image = models.ImageField(upload_to="ebook_covers/%Y/%m/%d/", blank=True, null=True)
|
||||
created_at = models.DateTimeField(auto_now_add=True)
|
||||
updated_at = models.DateTimeField(auto_now=True)
|
||||
|
||||
class Meta:
|
||||
db_table = "books_ebook"
|
||||
verbose_name = "E-Book"
|
||||
verbose_name_plural = "E-Books"
|
||||
ordering = ["-created_at"]
|
||||
indexes = [models.Index(fields=["user", "-created_at"])]
|
||||
|
||||
def __str__(self):
|
||||
return self.title
|
||||
|
||||
def filename(self):
|
||||
return Path(self.file.name).name if self.file else ""
|
||||
|
||||
|
||||
@receiver(post_delete, sender=EBook)
|
||||
def _auto_delete_ebook_file(sender, instance, **kwargs):
|
||||
if instance.file:
|
||||
instance.file.delete(save=False)
|
||||
if instance.cover_image:
|
||||
instance.cover_image.delete(save=False)
|
||||
|
||||
|
||||
class ReadingProgress(models.Model):
|
||||
user = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE, related_name="reading_progress")
|
||||
ebook = models.OneToOneField(EBook, on_delete=models.CASCADE, related_name="reading_progress")
|
||||
current_position = models.FloatField(default=0.0)
|
||||
last_page = models.IntegerField(default=0)
|
||||
updated_at = models.DateTimeField(auto_now=True)
|
||||
|
||||
class Meta:
|
||||
db_table = "books_reading_progress"
|
||||
verbose_name_plural = "reading progress"
|
||||
unique_together = [("user", "ebook")]
|
||||
|
||||
def __str__(self):
|
||||
return f"{self.ebook.title} - {self.current_position:.1f}%"
|
||||
|
||||
|
||||
class ReadingSettings(models.Model):
|
||||
user = models.OneToOneField(settings.AUTH_USER_MODEL, on_delete=models.CASCADE, related_name="reading_settings")
|
||||
font_size = models.IntegerField(default=18)
|
||||
font_style = models.CharField(max_length=20, choices=FontStyle.choices, default=FontStyle.SANS_SERIF.value)
|
||||
background_color = models.CharField(max_length=7, choices=BackgroundColor.choices, default=BackgroundColor.WHITE.value)
|
||||
updated_at = models.DateTimeField(auto_now=True)
|
||||
|
||||
class Meta:
|
||||
db_table = "books_reading_settings"
|
||||
verbose_name_plural = "reading settings"
|
||||
|
||||
def __str__(self):
|
||||
return f"Settings for {self.user}"
|
||||
@@ -1,120 +0,0 @@
|
||||
from rest_framework import serializers
|
||||
|
||||
from apps.books.models import Book, EBook, FontStyle, BackgroundColor, ReadingProgress, ReadingSettings, ReadingStatus
|
||||
|
||||
|
||||
class BookListSerializer(serializers.ModelSerializer):
|
||||
reading_status_display = serializers.CharField(source="get_reading_status_display", read_only=True)
|
||||
|
||||
class Meta:
|
||||
model = Book
|
||||
fields = ["id", "title", "author", "genre", "reading_status", "reading_status_display", "cover_image"]
|
||||
|
||||
|
||||
class BookDetailSerializer(serializers.ModelSerializer):
|
||||
reading_status_display = serializers.CharField(source="get_reading_status_display", read_only=True)
|
||||
|
||||
class Meta:
|
||||
model = Book
|
||||
fields = ["id", "title", "author", "genre", "description", "reading_status", "reading_status_display", "cover_image", "total_pages", "created_at", "updated_at"]
|
||||
read_only_fields = ["id", "created_at", "updated_at"]
|
||||
|
||||
|
||||
class BookSerializer(serializers.ModelSerializer):
|
||||
class Meta:
|
||||
model = Book
|
||||
fields = ["id", "title", "author", "genre", "description", "reading_status", "cover_image", "total_pages", "created_at", "updated_at"]
|
||||
read_only_fields = ["id", "created_at", "updated_at"]
|
||||
|
||||
|
||||
class EBookListSerializer(serializers.ModelSerializer):
|
||||
filename = serializers.CharField(read_only=True)
|
||||
progress = serializers.SerializerMethodField()
|
||||
|
||||
class Meta:
|
||||
model = EBook
|
||||
fields = ["id", "title", "author", "filename", "cover_image", "created_at", "progress"]
|
||||
|
||||
def get_progress(self, obj):
|
||||
try:
|
||||
return obj.reading_progress.current_position
|
||||
except ReadingProgress.DoesNotExist:
|
||||
return None
|
||||
|
||||
|
||||
class EBookDetailSerializer(serializers.ModelSerializer):
|
||||
filename = serializers.CharField(read_only=True)
|
||||
file_url = serializers.SerializerMethodField()
|
||||
progress = serializers.SerializerMethodField()
|
||||
|
||||
class Meta:
|
||||
model = EBook
|
||||
fields = ["id", "title", "author", "filename", "file_url", "cover_image", "created_at", "updated_at", "progress"]
|
||||
|
||||
def get_file_url(self, obj):
|
||||
request = self.context.get("request")
|
||||
if request and obj.file:
|
||||
return request.build_absolute_uri(obj.file.url)
|
||||
return ""
|
||||
|
||||
def get_progress(self, obj):
|
||||
try:
|
||||
rp = obj.reading_progress
|
||||
return {"current_position": rp.current_position, "last_page": rp.last_page}
|
||||
except ReadingProgress.DoesNotExist:
|
||||
return None
|
||||
|
||||
|
||||
class EBookUploadSerializer(serializers.ModelSerializer):
|
||||
class Meta:
|
||||
model = EBook
|
||||
fields = ["title", "author", "file", "cover_image"]
|
||||
extra_kwargs = {"title": {"required": True}, "file": {"required": True}}
|
||||
|
||||
def validate_file(self, value):
|
||||
import os
|
||||
if value is None:
|
||||
return value
|
||||
ext = os.path.splitext(str(getattr(value, "name", "")))[1].lower()
|
||||
if ext not in (".epub", ".pdf"):
|
||||
raise serializers.ValidationError("Only EPUB and PDF files are supported.")
|
||||
return value
|
||||
|
||||
def create(self, validated_data):
|
||||
validated_data["user"] = self.context["request"].user
|
||||
return super().create(validated_data)
|
||||
|
||||
|
||||
class ReadingProgressSerializer(serializers.ModelSerializer):
|
||||
class Meta:
|
||||
model = ReadingProgress
|
||||
fields = ["current_position", "last_page"]
|
||||
extra_kwargs = {"current_position": {"required": True, "min_value": 0.0, "max_value": 100.0}}
|
||||
|
||||
def validate_current_position(self, value):
|
||||
if value < 0.0 or value > 100.0:
|
||||
raise serializers.ValidationError("Position must be between 0.0 and 100.0.")
|
||||
return value
|
||||
|
||||
|
||||
class ReadingSettingsSerializer(serializers.ModelSerializer):
|
||||
class Meta:
|
||||
model = ReadingSettings
|
||||
fields = ["font_size", "font_style", "background_color"]
|
||||
|
||||
def validate_font_size(self, value):
|
||||
if value < 12 or value > 36:
|
||||
raise serializers.ValidationError("Font size must be between 12 and 36.")
|
||||
return value
|
||||
|
||||
def validate_font_style(self, value):
|
||||
valid = [s.value for s in FontStyle]
|
||||
if value not in valid:
|
||||
raise serializers.ValidationError(f"Font style must be one of: {', '.join(valid)}")
|
||||
return value
|
||||
|
||||
def validate_background_color(self, value):
|
||||
valid = [c.value for c in BackgroundColor]
|
||||
if value not in valid:
|
||||
raise serializers.ValidationError(f"Background color must be one of: {', '.join(valid)}")
|
||||
return value
|
||||
@@ -1,16 +0,0 @@
|
||||
from django.urls import include, path
|
||||
from rest_framework.routers import DefaultRouter
|
||||
|
||||
from apps.books.views import BookViewSet, EBookViewSet, ReadingSettingsViewSet
|
||||
|
||||
router = DefaultRouter()
|
||||
router.register(r"", BookViewSet, basename="book")
|
||||
|
||||
ebook_router = DefaultRouter()
|
||||
ebook_router.register(r"ebooks", EBookViewSet, basename="ebook")
|
||||
|
||||
urlpatterns = [
|
||||
path("", include(router.urls)),
|
||||
path("", include(ebook_router.urls)),
|
||||
path("settings/", ReadingSettingsViewSet.as_view({"get": "list", "patch": "partial_update"}), name="reading-settings"),
|
||||
]
|
||||
@@ -1,103 +0,0 @@
|
||||
from typing import Any
|
||||
|
||||
from django.db.models import QuerySet, Q
|
||||
from django_filters.rest_framework import DjangoFilterBackend
|
||||
from rest_framework import parsers, status, viewsets
|
||||
from rest_framework.decorators import action
|
||||
from rest_framework.filters import OrderingFilter, SearchFilter
|
||||
from rest_framework.permissions import AllowAny, IsAuthenticated
|
||||
from rest_framework.request import Request
|
||||
from rest_framework.response import Response
|
||||
|
||||
from apps.books.models import Book, EBook, ReadingProgress, ReadingSettings
|
||||
from apps.books.serializers import (
|
||||
BookDetailSerializer, BookListSerializer, BookSerializer,
|
||||
EBookDetailSerializer, EBookListSerializer, EBookUploadSerializer,
|
||||
ReadingProgressSerializer, ReadingSettingsSerializer,
|
||||
)
|
||||
|
||||
|
||||
class BookViewSet(viewsets.ModelViewSet):
|
||||
queryset = Book.objects.all()
|
||||
permission_classes = [IsAuthenticated]
|
||||
filter_backends = [DjangoFilterBackend, SearchFilter, OrderingFilter]
|
||||
filterset_fields = ["author", "genre", "reading_status"]
|
||||
search_fields = ["title", "author", "genre"]
|
||||
ordering_fields = ["title", "author", "genre", "created_at"]
|
||||
ordering = ["title"]
|
||||
|
||||
def get_serializer_class(self):
|
||||
if self.action == "retrieve":
|
||||
return BookDetailSerializer
|
||||
if self.action == "list":
|
||||
return BookListSerializer
|
||||
return BookSerializer
|
||||
|
||||
def get_queryset(self) -> QuerySet[Book]:
|
||||
qs = super().get_queryset()
|
||||
query = self.request.query_params.get("q", "").strip()
|
||||
if query:
|
||||
qs = qs.filter(Q(title__icontains=query) | Q(author__icontains=query) | Q(genre__icontains=query))
|
||||
return qs
|
||||
|
||||
@action(detail=False, methods=["get"], permission_classes=[AllowAny])
|
||||
def genres(self, request: Request) -> Response:
|
||||
genre_list = Book.objects.values_list("genre", flat=True).distinct().order_by("genre")
|
||||
return Response([g for g in genre_list if g])
|
||||
|
||||
@action(detail=False, methods=["get"], permission_classes=[AllowAny])
|
||||
def authors(self, request: Request) -> Response:
|
||||
author_list = Book.objects.values_list("author", flat=True).distinct().order_by("author")
|
||||
return Response([a for a in author_list if a])
|
||||
|
||||
|
||||
class IsEBookOwner(AllowAny):
|
||||
def has_object_permission(self, request: Request, view: object, obj: EBook) -> bool:
|
||||
return obj.user == request.user
|
||||
|
||||
|
||||
class EBookViewSet(viewsets.ModelViewSet):
|
||||
parser_classes = [parsers.MultiPartParser, parsers.FormParser, parsers.JSONParser]
|
||||
permission_classes = [IsAuthenticated, IsEBookOwner]
|
||||
|
||||
def get_serializer_class(self):
|
||||
if self.action == "create":
|
||||
return EBookUploadSerializer
|
||||
if self.action == "list":
|
||||
return EBookListSerializer
|
||||
return EBookDetailSerializer
|
||||
|
||||
def get_queryset(self):
|
||||
return EBook.objects.filter(user=self.request.user).select_related("reading_progress", "user")
|
||||
|
||||
@action(detail=True, methods=["get", "patch"])
|
||||
def progress(self, request: Request, pk: int | None = None) -> Response:
|
||||
ebook = self.get_object()
|
||||
progress_obj, _created = ReadingProgress.objects.get_or_create(user=request.user, ebook=ebook)
|
||||
if request.method == "GET":
|
||||
serializer = ReadingProgressSerializer(progress_obj)
|
||||
return Response(serializer.data)
|
||||
serializer = ReadingProgressSerializer(progress_obj, data=request.data, partial=True)
|
||||
serializer.is_valid(raise_exception=True)
|
||||
serializer.save()
|
||||
return Response(serializer.data)
|
||||
|
||||
|
||||
class ReadingSettingsViewSet(viewsets.GenericViewSet):
|
||||
permission_classes = [IsAuthenticated]
|
||||
serializer_class = ReadingSettingsSerializer
|
||||
|
||||
def get_queryset(self):
|
||||
return ReadingSettings.objects.filter(user=self.request.user)
|
||||
|
||||
def list(self, request: Request) -> Response:
|
||||
settings_obj, _created = ReadingSettings.objects.get_or_create(user=request.user)
|
||||
serializer = self.get_serializer(settings_obj)
|
||||
return Response(serializer.data)
|
||||
|
||||
def partial_update(self, request: Request) -> Response:
|
||||
settings_obj, _created = ReadingSettings.objects.get_or_create(user=request.user)
|
||||
serializer = self.get_serializer(settings_obj, data=request.data, partial=True)
|
||||
serializer.is_valid(raise_exception=True)
|
||||
serializer.save()
|
||||
return Response(serializer.data)
|
||||
@@ -0,0 +1,10 @@
|
||||
from django.contrib import admin
|
||||
|
||||
from .models import Collection
|
||||
|
||||
|
||||
@admin.register(Collection)
|
||||
class CollectionAdmin(admin.ModelAdmin):
|
||||
list_display = ["name", "owner", "document_count", "is_public", "created_at"]
|
||||
list_filter = ["is_public"]
|
||||
search_fields = ["name", "description"]
|
||||
@@ -0,0 +1,39 @@
|
||||
from django.conf import settings
|
||||
from django.db import models
|
||||
|
||||
|
||||
class Collection(models.Model):
|
||||
"""A user-created collection of documents."""
|
||||
name = models.CharField(max_length=300)
|
||||
description = models.TextField(blank=True, default="")
|
||||
cover = models.ImageField(upload_to="collection_covers/", blank=True, null=True)
|
||||
documents = models.ManyToManyField(
|
||||
"documents.Document",
|
||||
related_name="collections",
|
||||
blank=True,
|
||||
)
|
||||
is_public = models.BooleanField(default=False)
|
||||
owner = models.ForeignKey(
|
||||
settings.AUTH_USER_MODEL,
|
||||
on_delete=models.CASCADE,
|
||||
related_name="collections",
|
||||
)
|
||||
created_at = models.DateTimeField(auto_now_add=True)
|
||||
updated_at = models.DateTimeField(auto_now=True)
|
||||
|
||||
class Meta:
|
||||
db_table = "collections_collection"
|
||||
ordering = ["-updated_at"]
|
||||
|
||||
def __str__(self) -> str:
|
||||
return self.name
|
||||
|
||||
@property
|
||||
def document_count(self) -> int:
|
||||
return self.documents.count()
|
||||
|
||||
@property
|
||||
def cover_url(self) -> str | None:
|
||||
if self.cover:
|
||||
return self.cover.url
|
||||
return None
|
||||
@@ -0,0 +1,33 @@
|
||||
from rest_framework import serializers
|
||||
|
||||
from .models import Collection
|
||||
|
||||
|
||||
class CollectionSerializer(serializers.ModelSerializer[Collection]):
|
||||
cover_url = serializers.SerializerMethodField()
|
||||
document_count = serializers.IntegerField(read_only=True)
|
||||
|
||||
class Meta:
|
||||
model = Collection
|
||||
fields = [
|
||||
"id", "name", "description", "cover_url", "document_count",
|
||||
"is_public", "created_at", "updated_at",
|
||||
]
|
||||
read_only_fields = ["id", "document_count", "created_at", "updated_at"]
|
||||
|
||||
def get_cover_url(self, obj: Collection) -> str | None:
|
||||
return obj.cover_url
|
||||
|
||||
|
||||
class CollectionDetailSerializer(CollectionSerializer):
|
||||
documents = serializers.PrimaryKeyRelatedField(many=True, read_only=True)
|
||||
|
||||
class Meta(CollectionSerializer.Meta):
|
||||
fields = CollectionSerializer.Meta.fields + ["documents", "owner"]
|
||||
|
||||
|
||||
class CollectionDocumentActionSerializer(serializers.Serializer):
|
||||
document_ids = serializers.ListField(
|
||||
child=serializers.IntegerField(),
|
||||
allow_empty=False,
|
||||
)
|
||||
@@ -0,0 +1,13 @@
|
||||
from django.urls import include, path
|
||||
from rest_framework.routers import DefaultRouter
|
||||
|
||||
from . import views
|
||||
|
||||
router = DefaultRouter()
|
||||
router.register("", views.CollectionViewSet, basename="collection")
|
||||
|
||||
app_name = "collections"
|
||||
|
||||
urlpatterns = [
|
||||
path("", include(router.urls)),
|
||||
]
|
||||
@@ -0,0 +1,50 @@
|
||||
from rest_framework import permissions, status, viewsets
|
||||
from rest_framework.decorators import action
|
||||
from rest_framework.response import Response
|
||||
|
||||
from apps.documents.models import Document
|
||||
|
||||
from .models import Collection
|
||||
from .serializers import (
|
||||
CollectionDetailSerializer,
|
||||
CollectionDocumentActionSerializer,
|
||||
CollectionSerializer,
|
||||
)
|
||||
|
||||
|
||||
class CollectionViewSet(viewsets.ModelViewSet):
|
||||
"""CRUD for user collections."""
|
||||
permission_classes = [permissions.IsAuthenticated]
|
||||
|
||||
def get_serializer_class(self):
|
||||
if self.action in ("retrieve", "update", "partial_update"):
|
||||
return CollectionDetailSerializer
|
||||
return CollectionSerializer
|
||||
|
||||
def get_queryset(self):
|
||||
return Collection.objects.filter(owner=self.request.user).prefetch_related("documents")
|
||||
|
||||
def perform_create(self, serializer):
|
||||
serializer.save(owner=self.request.user)
|
||||
|
||||
@action(detail=True, methods=["post"])
|
||||
def add_documents(self, request, pk=None):
|
||||
"""Add documents to a collection."""
|
||||
collection = self.get_object()
|
||||
serializer = CollectionDocumentActionSerializer(data=request.data)
|
||||
serializer.is_valid(raise_exception=True)
|
||||
docs = Document.objects.filter(
|
||||
id__in=serializer.validated_data["document_ids"],
|
||||
owner=request.user,
|
||||
)
|
||||
collection.documents.add(*docs)
|
||||
return Response({"detail": f"Added {docs.count()} document(s)."}, status=status.HTTP_200_OK)
|
||||
|
||||
@action(detail=True, methods=["post"])
|
||||
def remove_documents(self, request, pk=None):
|
||||
"""Remove documents from a collection."""
|
||||
collection = self.get_object()
|
||||
serializer = CollectionDocumentActionSerializer(data=request.data)
|
||||
serializer.is_valid(raise_exception=True)
|
||||
collection.documents.remove(*serializer.validated_data["document_ids"])
|
||||
return Response({"detail": "Documents removed."}, status=status.HTTP_200_OK)
|
||||
@@ -0,0 +1,11 @@
|
||||
from django.contrib import admin
|
||||
|
||||
from .models import Document
|
||||
|
||||
|
||||
@admin.register(Document)
|
||||
class DocumentAdmin(admin.ModelAdmin):
|
||||
list_display = ["title", "author", "file_type", "file_size", "is_public", "owner", "uploaded_at"]
|
||||
list_filter = ["file_type", "is_public"]
|
||||
search_fields = ["title", "author", "description"]
|
||||
date_hierarchy = "uploaded_at"
|
||||
@@ -0,0 +1,48 @@
|
||||
from django.conf import settings
|
||||
from django.db import models
|
||||
|
||||
|
||||
class Document(models.Model):
|
||||
"""A digital document (ebook, PDF, etc.) uploaded by a user."""
|
||||
|
||||
class FileType(models.TextChoices):
|
||||
PDF = "pdf", "PDF"
|
||||
EPUB = "epub", "EPUB"
|
||||
MOBI = "mobi", "MOBI"
|
||||
TXT = "txt", "Plain Text"
|
||||
DOCX = "docx", "Word Document"
|
||||
|
||||
title = models.CharField(max_length=500)
|
||||
author = models.CharField(max_length=300, blank=True, null=True)
|
||||
description = models.TextField(blank=True, default="")
|
||||
cover = models.ImageField(upload_to="covers/", blank=True, null=True)
|
||||
file = models.FileField(upload_to="documents/")
|
||||
file_type = models.CharField(max_length=10, choices=FileType.choices)
|
||||
file_size = models.PositiveIntegerField(help_text="File size in bytes")
|
||||
page_count = models.PositiveIntegerField(blank=True, null=True)
|
||||
tags = models.JSONField(default=list, blank=True)
|
||||
is_public = models.BooleanField(default=False)
|
||||
owner = models.ForeignKey(
|
||||
settings.AUTH_USER_MODEL,
|
||||
on_delete=models.CASCADE,
|
||||
related_name="documents",
|
||||
)
|
||||
uploaded_at = models.DateTimeField(auto_now_add=True)
|
||||
updated_at = models.DateTimeField(auto_now=True)
|
||||
|
||||
class Meta:
|
||||
db_table = "documents_document"
|
||||
ordering = ["-uploaded_at"]
|
||||
indexes = [
|
||||
models.Index(fields=["owner", "-uploaded_at"]),
|
||||
models.Index(fields=["file_type"]),
|
||||
]
|
||||
|
||||
def __str__(self) -> str:
|
||||
return self.title
|
||||
|
||||
@property
|
||||
def cover_url(self) -> str | None:
|
||||
if self.cover:
|
||||
return self.cover.url
|
||||
return None
|
||||
@@ -0,0 +1,41 @@
|
||||
from rest_framework import serializers
|
||||
|
||||
from .models import Document
|
||||
|
||||
|
||||
class DocumentListSerializer(serializers.ModelSerializer[Document]):
|
||||
cover_url = serializers.SerializerMethodField()
|
||||
|
||||
class Meta:
|
||||
model = Document
|
||||
fields = [
|
||||
"id", "title", "author", "cover_url", "description",
|
||||
"file_type", "file_size", "page_count", "tags",
|
||||
"is_public", "uploaded_at", "updated_at",
|
||||
]
|
||||
read_only_fields = ["id", "uploaded_at", "updated_at"]
|
||||
|
||||
def get_cover_url(self, obj: Document) -> str | None:
|
||||
return obj.cover_url
|
||||
|
||||
|
||||
class DocumentDetailSerializer(DocumentListSerializer):
|
||||
owner = serializers.PrimaryKeyRelatedField(read_only=True)
|
||||
|
||||
class Meta(DocumentListSerializer.Meta):
|
||||
fields = DocumentListSerializer.Meta.fields + ["owner", "file"]
|
||||
|
||||
|
||||
class DocumentUploadSerializer(serializers.ModelSerializer[Document]):
|
||||
class Meta:
|
||||
model = Document
|
||||
fields = [
|
||||
"title", "author", "description", "cover", "file",
|
||||
"file_type", "file_size", "page_count", "tags", "is_public",
|
||||
]
|
||||
|
||||
def validate_file_size(self, value: int) -> int:
|
||||
max_size = 100 * 1024 * 1024 # 100 MB
|
||||
if value > max_size:
|
||||
raise serializers.ValidationError("File size must not exceed 100 MB.")
|
||||
return value
|
||||
@@ -0,0 +1,13 @@
|
||||
from django.urls import include, path
|
||||
from rest_framework.routers import DefaultRouter
|
||||
|
||||
from . import views
|
||||
|
||||
router = DefaultRouter()
|
||||
router.register("", views.DocumentViewSet, basename="document")
|
||||
|
||||
app_name = "documents"
|
||||
|
||||
urlpatterns = [
|
||||
path("", include(router.urls)),
|
||||
]
|
||||
@@ -0,0 +1,35 @@
|
||||
from rest_framework import permissions, viewsets
|
||||
|
||||
from .models import Document
|
||||
from .serializers import DocumentDetailSerializer, DocumentListSerializer, DocumentUploadSerializer
|
||||
|
||||
|
||||
class IsOwnerOrPublic(permissions.BasePermission):
|
||||
"""Allow access if user is owner or the document is public."""
|
||||
|
||||
def has_object_permission(self, request, view, obj: Document) -> bool:
|
||||
if request.method in permissions.SAFE_METHODS:
|
||||
return obj.is_public or obj.owner == request.user
|
||||
return obj.owner == request.user
|
||||
|
||||
|
||||
class DocumentViewSet(viewsets.ModelViewSet):
|
||||
"""CRUD for documents with owner-scoping."""
|
||||
permission_classes = [permissions.IsAuthenticated, IsOwnerOrPublic]
|
||||
|
||||
def get_serializer_class(self):
|
||||
if self.action == "create":
|
||||
return DocumentUploadSerializer
|
||||
if self.action in ("retrieve", "update", "partial_update"):
|
||||
return DocumentDetailSerializer
|
||||
return DocumentListSerializer
|
||||
|
||||
def get_queryset(self):
|
||||
user = self.request.user
|
||||
qs = Document.objects.select_related("owner")
|
||||
if self.action == "list":
|
||||
return qs.filter(owner=user) | qs.filter(is_public=True)
|
||||
return qs
|
||||
|
||||
def perform_create(self, serializer):
|
||||
serializer.save(owner=self.request.user)
|
||||
@@ -0,0 +1,21 @@
|
||||
from django.contrib import admin
|
||||
|
||||
from .models import Bookmark, Highlight, ReadingProgress
|
||||
|
||||
|
||||
@admin.register(Bookmark)
|
||||
class BookmarkAdmin(admin.ModelAdmin):
|
||||
list_display = ["document", "user", "page", "label", "created_at"]
|
||||
list_filter = ["created_at"]
|
||||
|
||||
|
||||
@admin.register(Highlight)
|
||||
class HighlightAdmin(admin.ModelAdmin):
|
||||
list_display = ["document", "user", "page", "color", "created_at"]
|
||||
list_filter = ["color", "created_at"]
|
||||
|
||||
|
||||
@admin.register(ReadingProgress)
|
||||
class ReadingProgressAdmin(admin.ModelAdmin):
|
||||
list_display = ["document", "user", "percentage", "last_read_at"]
|
||||
date_hierarchy = "last_read_at"
|
||||
@@ -0,0 +1,84 @@
|
||||
from django.conf import settings
|
||||
from django.db import models
|
||||
|
||||
|
||||
class Bookmark(models.Model):
|
||||
"""A user bookmark at a specific page in a document."""
|
||||
document = models.ForeignKey(
|
||||
"documents.Document",
|
||||
on_delete=models.CASCADE,
|
||||
related_name="bookmarks",
|
||||
)
|
||||
user = models.ForeignKey(
|
||||
settings.AUTH_USER_MODEL,
|
||||
on_delete=models.CASCADE,
|
||||
related_name="bookmarks",
|
||||
)
|
||||
page = models.PositiveIntegerField()
|
||||
label = models.CharField(max_length=300, blank=True, default="")
|
||||
created_at = models.DateTimeField(auto_now_add=True)
|
||||
|
||||
class Meta:
|
||||
db_table = "reading_bookmark"
|
||||
ordering = ["page"]
|
||||
unique_together = [["document", "user", "page"]]
|
||||
|
||||
def __str__(self) -> str:
|
||||
return f"{self.document.title} p.{self.page}"
|
||||
|
||||
|
||||
class Highlight(models.Model):
|
||||
"""A highlighted passage in a document."""
|
||||
document = models.ForeignKey(
|
||||
"documents.Document",
|
||||
on_delete=models.CASCADE,
|
||||
related_name="highlights",
|
||||
)
|
||||
user = models.ForeignKey(
|
||||
settings.AUTH_USER_MODEL,
|
||||
on_delete=models.CASCADE,
|
||||
related_name="highlights",
|
||||
)
|
||||
page = models.PositiveIntegerField()
|
||||
color = models.CharField(max_length=20, default="yellow")
|
||||
text = models.TextField()
|
||||
note = models.TextField(blank=True, null=True)
|
||||
created_at = models.DateTimeField(auto_now_add=True)
|
||||
|
||||
class Meta:
|
||||
db_table = "reading_highlight"
|
||||
ordering = ["-created_at"]
|
||||
|
||||
def __str__(self) -> str:
|
||||
return f"Highlight on {self.document.title} p.{self.page}"
|
||||
|
||||
|
||||
class ReadingProgress(models.Model):
|
||||
"""Tracks the user's reading progress through a document."""
|
||||
document = models.ForeignKey(
|
||||
"documents.Document",
|
||||
on_delete=models.CASCADE,
|
||||
related_name="reading_progress",
|
||||
)
|
||||
user = models.ForeignKey(
|
||||
settings.AUTH_USER_MODEL,
|
||||
on_delete=models.CASCADE,
|
||||
related_name="reading_progress",
|
||||
)
|
||||
current_page = models.PositiveIntegerField(default=1)
|
||||
total_pages = models.PositiveIntegerField(default=0)
|
||||
percentage = models.FloatField(default=0.0)
|
||||
last_read_at = models.DateTimeField(auto_now=True)
|
||||
|
||||
class Meta:
|
||||
db_table = "reading_progress"
|
||||
unique_together = [["document", "user"]]
|
||||
verbose_name_plural = "Reading progress"
|
||||
|
||||
def __str__(self) -> str:
|
||||
return f"{self.document.title} — {self.percentage:.0f}%"
|
||||
|
||||
def save(self, *args, **kwargs):
|
||||
if self.total_pages > 0:
|
||||
self.percentage = round((self.current_page / self.total_pages) * 100, 1)
|
||||
super().save(*args, **kwargs)
|
||||
@@ -0,0 +1,35 @@
|
||||
from rest_framework import serializers
|
||||
|
||||
from .models import Bookmark, Highlight, ReadingProgress
|
||||
|
||||
|
||||
class BookmarkSerializer(serializers.ModelSerializer[Bookmark]):
|
||||
class Meta:
|
||||
model = Bookmark
|
||||
fields = ["id", "document", "page", "label", "created_at"]
|
||||
read_only_fields = ["id", "created_at"]
|
||||
|
||||
|
||||
class HighlightSerializer(serializers.ModelSerializer[Highlight]):
|
||||
class Meta:
|
||||
model = Highlight
|
||||
fields = ["id", "document", "page", "color", "text", "note", "created_at"]
|
||||
read_only_fields = ["id", "created_at"]
|
||||
|
||||
|
||||
class ReadingProgressSerializer(serializers.ModelSerializer[ReadingProgress]):
|
||||
class Meta:
|
||||
model = ReadingProgress
|
||||
fields = ["id", "document", "current_page", "total_pages", "percentage", "last_read_at"]
|
||||
read_only_fields = ["id", "percentage", "last_read_at"]
|
||||
|
||||
|
||||
class ReadingProgressUpdateSerializer(serializers.ModelSerializer[ReadingProgress]):
|
||||
class Meta:
|
||||
model = ReadingProgress
|
||||
fields = ["current_page", "total_pages"]
|
||||
|
||||
def validate_current_page(self, value: int) -> int:
|
||||
if value < 1:
|
||||
raise serializers.ValidationError("Page must be at least 1.")
|
||||
return value
|
||||
@@ -0,0 +1,15 @@
|
||||
from django.urls import include, path
|
||||
from rest_framework.routers import DefaultRouter
|
||||
|
||||
from . import views
|
||||
|
||||
router = DefaultRouter()
|
||||
router.register("bookmarks", views.BookmarkViewSet, basename="bookmark")
|
||||
router.register("highlights", views.HighlightViewSet, basename="highlight")
|
||||
router.register("progress", views.ReadingProgressViewSet, basename="reading-progress")
|
||||
|
||||
app_name = "reading"
|
||||
|
||||
urlpatterns = [
|
||||
path("", include(router.urls)),
|
||||
]
|
||||
@@ -0,0 +1,49 @@
|
||||
from rest_framework import permissions, viewsets
|
||||
|
||||
from .models import Bookmark, Highlight, ReadingProgress
|
||||
from .serializers import (
|
||||
BookmarkSerializer,
|
||||
HighlightSerializer,
|
||||
ReadingProgressSerializer,
|
||||
ReadingProgressUpdateSerializer,
|
||||
)
|
||||
|
||||
|
||||
class BookmarkViewSet(viewsets.ModelViewSet):
|
||||
"""User bookmarks for documents."""
|
||||
serializer_class = BookmarkSerializer
|
||||
permission_classes = [permissions.IsAuthenticated]
|
||||
|
||||
def get_queryset(self):
|
||||
return Bookmark.objects.filter(user=self.request.user).select_related("document")
|
||||
|
||||
def perform_create(self, serializer):
|
||||
serializer.save(user=self.request.user)
|
||||
|
||||
|
||||
class HighlightViewSet(viewsets.ModelViewSet):
|
||||
"""User highlights for documents."""
|
||||
serializer_class = HighlightSerializer
|
||||
permission_classes = [permissions.IsAuthenticated]
|
||||
|
||||
def get_queryset(self):
|
||||
return Highlight.objects.filter(user=self.request.user).select_related("document")
|
||||
|
||||
def perform_create(self, serializer):
|
||||
serializer.save(user=self.request.user)
|
||||
|
||||
|
||||
class ReadingProgressViewSet(viewsets.ModelViewSet):
|
||||
"""Reading progress tracker."""
|
||||
permission_classes = [permissions.IsAuthenticated]
|
||||
|
||||
def get_serializer_class(self):
|
||||
if self.action in ("create", "update", "partial_update"):
|
||||
return ReadingProgressUpdateSerializer
|
||||
return ReadingProgressSerializer
|
||||
|
||||
def get_queryset(self):
|
||||
return ReadingProgress.objects.filter(user=self.request.user).select_related("document")
|
||||
|
||||
def perform_create(self, serializer):
|
||||
serializer.save(user=self.request.user)
|
||||
@@ -1,11 +0,0 @@
|
||||
from django.contrib import admin
|
||||
from django.contrib.auth.admin import UserAdmin as BaseUserAdmin
|
||||
|
||||
from apps.users.models import User
|
||||
|
||||
|
||||
@admin.register(User)
|
||||
class UserAdmin(BaseUserAdmin):
|
||||
"""Admin config for the custom User model."""
|
||||
list_display = ("email", "username", "is_staff", "is_active", "date_joined")
|
||||
search_fields = ("email", "username")
|
||||
@@ -1,7 +0,0 @@
|
||||
from django.apps import AppConfig
|
||||
|
||||
|
||||
class UsersConfig(AppConfig):
|
||||
default_auto_field = "django.db.models.BigAutoField"
|
||||
name = "apps.users"
|
||||
label = "users"
|
||||
@@ -1,13 +0,0 @@
|
||||
from django.contrib.auth.models import AbstractUser
|
||||
|
||||
|
||||
class User(AbstractUser):
|
||||
"""Custom user model. Uses email as the unique identifier field."""
|
||||
|
||||
class Meta:
|
||||
db_table = "users_user"
|
||||
verbose_name = "User"
|
||||
verbose_name_plural = "Users"
|
||||
|
||||
def __str__(self) -> str:
|
||||
return self.email or self.username
|
||||
@@ -1,8 +0,0 @@
|
||||
from django.urls import include, path
|
||||
from rest_framework.routers import DefaultRouter
|
||||
from rest_framework_simplejwt.views import TokenObtainPairView, TokenRefreshView
|
||||
|
||||
urlpatterns = [
|
||||
path("token/", TokenObtainPairView.as_view(), name="token_obtain_pair"),
|
||||
path("token/refresh/", TokenRefreshView.as_view(), name="token_refresh"),
|
||||
]
|
||||
@@ -1,157 +0,0 @@
|
||||
"""
|
||||
Django settings for cloud-reader backend.
|
||||
|
||||
Generated using Django 5.1. Customised with pydantic-settings integration.
|
||||
"""
|
||||
|
||||
from pathlib import Path
|
||||
|
||||
from config.settings import settings
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Build paths
|
||||
# ---------------------------------------------------------------------------
|
||||
BASE_DIR = Path(__file__).resolve().parent.parent
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Security
|
||||
# ---------------------------------------------------------------------------
|
||||
SECRET_KEY = settings.DJANGO_SECRET_KEY
|
||||
DEBUG = settings.DJANGO_DEBUG
|
||||
ALLOWED_HOSTS = settings.DJANGO_ALLOWED_HOSTS
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Application definition
|
||||
# ---------------------------------------------------------------------------
|
||||
INSTALLED_APPS = [
|
||||
# Django built-in
|
||||
"django.contrib.admin",
|
||||
"django.contrib.auth",
|
||||
"django.contrib.contenttypes",
|
||||
"django.contrib.sessions",
|
||||
"django.contrib.messages",
|
||||
"django.contrib.staticfiles",
|
||||
# Third-party
|
||||
"rest_framework",
|
||||
"rest_framework_simplejwt",
|
||||
"corsheaders",
|
||||
"django_filters",
|
||||
# Local apps
|
||||
"apps.users",
|
||||
"apps.books",
|
||||
"apps.annotations",
|
||||
]
|
||||
|
||||
MIDDLEWARE = [
|
||||
"corsheaders.middleware.CorsMiddleware",
|
||||
"django.middleware.security.SecurityMiddleware",
|
||||
"django.contrib.sessions.middleware.SessionMiddleware",
|
||||
"django.middleware.common.CommonMiddleware",
|
||||
"django.middleware.csrf.CsrfViewMiddleware",
|
||||
"django.contrib.auth.middleware.AuthenticationMiddleware",
|
||||
"django.contrib.messages.middleware.MessageMiddleware",
|
||||
"django.middleware.clickjacking.XFrameOptionsMiddleware",
|
||||
]
|
||||
|
||||
ROOT_URLCONF = "config.urls"
|
||||
|
||||
TEMPLATES = [
|
||||
{
|
||||
"BACKEND": "django.template.backends.django.DjangoTemplates",
|
||||
"DIRS": [],
|
||||
"APP_DIRS": True,
|
||||
"OPTIONS": {
|
||||
"context_processors": [
|
||||
"django.template.context_processors.debug",
|
||||
"django.template.context_processors.request",
|
||||
"django.contrib.auth.context_processors.auth",
|
||||
"django.contrib.messages.context_processors.messages",
|
||||
],
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
WSGI_APPLICATION = "config.wsgi.application"
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Database
|
||||
# ---------------------------------------------------------------------------
|
||||
DATABASES = {
|
||||
"default": {
|
||||
"ENGINE": "django.db.backends.postgresql",
|
||||
"NAME": settings.DB_NAME,
|
||||
"USER": settings.DB_USER,
|
||||
"PASSWORD": settings.DB_PASSWORD,
|
||||
"HOST": settings.DB_HOST,
|
||||
"PORT": settings.DB_PORT,
|
||||
}
|
||||
}
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Auth
|
||||
# ---------------------------------------------------------------------------
|
||||
AUTH_USER_MODEL = "users.User"
|
||||
|
||||
AUTH_PASSWORD_VALIDATORS = [
|
||||
{"NAME": "django.contrib.auth.password_validation.MinimumLengthValidator"},
|
||||
{"NAME": "django.contrib.auth.password_validation.NumericPasswordValidator"},
|
||||
]
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# DRF
|
||||
# ---------------------------------------------------------------------------
|
||||
REST_FRAMEWORK = {
|
||||
"DEFAULT_AUTHENTICATION_CLASSES": (
|
||||
"rest_framework_simplejwt.authentication.JWTAuthentication",
|
||||
),
|
||||
"DEFAULT_PERMISSION_CLASSES": (
|
||||
"rest_framework.permissions.IsAuthenticated",
|
||||
),
|
||||
"DEFAULT_PAGINATION_CLASS": "rest_framework.pagination.PageNumberPagination",
|
||||
"PAGE_SIZE": 50,
|
||||
"DEFAULT_FILTER_BACKENDS": [
|
||||
"django_filters.rest_framework.DjangoFilterBackend",
|
||||
"rest_framework.filters.OrderingFilter",
|
||||
"rest_framework.filters.SearchFilter",
|
||||
],
|
||||
}
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# SimpleJWT
|
||||
# ---------------------------------------------------------------------------
|
||||
from datetime import timedelta
|
||||
|
||||
SIMPLE_JWT = {
|
||||
"ACCESS_TOKEN_LIFETIME": timedelta(minutes=settings.JWT_ACCESS_TOKEN_LIFETIME_MINUTES),
|
||||
"REFRESH_TOKEN_LIFETIME": timedelta(days=settings.JWT_REFRESH_TOKEN_LIFETIME_DAYS),
|
||||
}
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# CORS
|
||||
# ---------------------------------------------------------------------------
|
||||
CORS_ALLOWED_ORIGINS = settings.CORS_ALLOWED_ORIGINS
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# i18n
|
||||
# ---------------------------------------------------------------------------
|
||||
LANGUAGE_CODE = "en-us"
|
||||
TIME_ZONE = "UTC"
|
||||
USE_I18N = True
|
||||
USE_TZ = True
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Static / Media / Uploads
|
||||
# ---------------------------------------------------------------------------
|
||||
STATIC_URL = "static/"
|
||||
STATIC_ROOT = BASE_DIR / "staticfiles"
|
||||
MEDIA_URL = "media/"
|
||||
MEDIA_ROOT = BASE_DIR / "media"
|
||||
|
||||
# Maximum upload size: 50MB
|
||||
DATA_UPLOAD_MAX_MEMORY_SIZE = 52_428_800
|
||||
FILE_UPLOAD_MAX_MEMORY_SIZE = 52_428_800
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Default primary key
|
||||
# ---------------------------------------------------------------------------
|
||||
DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"
|
||||
@@ -0,0 +1,13 @@
|
||||
"""Custom exception handler that returns consistent JSON error responses."""
|
||||
from rest_framework.views import exception_handler
|
||||
|
||||
|
||||
def custom_exception_handler(exc, context):
|
||||
"""Wrap DRF's default handler to always return {'detail': ..., 'code': ...}."""
|
||||
response = exception_handler(exc, context)
|
||||
if response is not None:
|
||||
data = response.data
|
||||
# Flatten validation errors into a consistent shape
|
||||
if isinstance(data, dict) and "detail" not in data:
|
||||
response.data = {"detail": "Validation error", "fields": data, "code": "validation_error"}
|
||||
return response
|
||||
+157
-29
@@ -1,42 +1,170 @@
|
||||
import os
|
||||
from pathlib import Path
|
||||
|
||||
from pydantic_settings import BaseSettings
|
||||
import decouple
|
||||
|
||||
BASE_DIR = Path(__file__).resolve().parent.parent
|
||||
|
||||
class Settings(BaseSettings):
|
||||
"""Application settings via pydantic-settings. Reads from env vars and .env."""
|
||||
# ---------------------------------------------------------------------------
|
||||
# Environment
|
||||
# ---------------------------------------------------------------------------
|
||||
config = decouple.AutoConfig(search_path=BASE_DIR / ".env")
|
||||
|
||||
# Django
|
||||
DJANGO_SECRET_KEY: str = "django-insecure-change-me-in-production"
|
||||
DJANGO_DEBUG: bool = False
|
||||
DJANGO_ALLOWED_HOSTS: list[str] = ["*"]
|
||||
SECRET_KEY = config("SECRET_KEY", default="django-insecure-change-me-in-production")
|
||||
DEBUG = config("DEBUG", default=False, cast=bool)
|
||||
ALLOWED_HOSTS = config("ALLOWED_HOSTS", default="localhost,127.0.0.1", cast=decouple.Csv())
|
||||
|
||||
# PostgreSQL
|
||||
DB_NAME: str = "cloud_reader"
|
||||
DB_USER: str = "postgres"
|
||||
DB_PASSWORD: str = "postgres"
|
||||
DB_HOST: str = "localhost"
|
||||
DB_PORT: int = 5432
|
||||
# ---------------------------------------------------------------------------
|
||||
# Application definition
|
||||
# ---------------------------------------------------------------------------
|
||||
INSTALLED_APPS = [
|
||||
"django.contrib.admin",
|
||||
"django.contrib.auth",
|
||||
"django.contrib.contenttypes",
|
||||
"django.contrib.sessions",
|
||||
"django.contrib.messages",
|
||||
"django.contrib.staticfiles",
|
||||
# Third-party
|
||||
"rest_framework",
|
||||
"rest_framework_simplejwt",
|
||||
"corsheaders",
|
||||
"django_filters",
|
||||
"drf_spectacular",
|
||||
# Local
|
||||
"apps.accounts",
|
||||
"apps.documents",
|
||||
"apps.collections",
|
||||
"apps.reading",
|
||||
]
|
||||
|
||||
# JWT
|
||||
JWT_ACCESS_TOKEN_LIFETIME_MINUTES: int = 60
|
||||
JWT_REFRESH_TOKEN_LIFETIME_DAYS: int = 7
|
||||
MIDDLEWARE = [
|
||||
"django.middleware.security.SecurityMiddleware",
|
||||
"whitenoise.middleware.WhiteNoiseMiddleware",
|
||||
"corsheaders.middleware.CorsMiddleware",
|
||||
"django.contrib.sessions.middleware.SessionMiddleware",
|
||||
"django.middleware.common.CommonMiddleware",
|
||||
"django.middleware.csrf.CsrfViewMiddleware",
|
||||
"django.contrib.auth.middleware.AuthenticationMiddleware",
|
||||
"django.contrib.messages.middleware.MessageMiddleware",
|
||||
"django.middleware.clickjacking.XFrameOptionsMiddleware",
|
||||
]
|
||||
|
||||
# CORS
|
||||
CORS_ALLOWED_ORIGINS: list[str] = [
|
||||
"http://localhost:5173",
|
||||
"http://localhost:3000",
|
||||
]
|
||||
ROOT_URLCONF = "config.urls"
|
||||
|
||||
@property
|
||||
def DATABASE_URL(self) -> str:
|
||||
return (
|
||||
f"postgresql://{self.DB_USER}:{self.DB_PASSWORD}"
|
||||
f"@{self.DB_HOST}:{self.DB_PORT}/{self.DB_NAME}"
|
||||
)
|
||||
TEMPLATES = [
|
||||
{
|
||||
"BACKEND": "django.template.backends.django.DjangoTemplates",
|
||||
"DIRS": [BASE_DIR / "templates"],
|
||||
"APP_DIRS": True,
|
||||
"OPTIONS": {
|
||||
"context_processors": [
|
||||
"django.template.context_processors.debug",
|
||||
"django.template.context_processors.request",
|
||||
"django.contrib.auth.context_processors.auth",
|
||||
"django.contrib.messages.context_processors.messages",
|
||||
],
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
model_config = {"env_file": ".env", "env_file_encoding": "utf-8"}
|
||||
WSGI_APPLICATION = "config.wsgi.application"
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Database
|
||||
# ---------------------------------------------------------------------------
|
||||
DATABASES = {
|
||||
"default": {
|
||||
"ENGINE": config("DB_ENGINE", default="django.db.backends.postgresql"),
|
||||
"NAME": config("DB_NAME", default="cloud_reader"),
|
||||
"USER": config("DB_USER", default="cloud_reader"),
|
||||
"PASSWORD": config("DB_PASSWORD", default="cloud_reader"),
|
||||
"HOST": config("DB_HOST", default="localhost"),
|
||||
"PORT": config("DB_PORT", default="5432", cast=int),
|
||||
}
|
||||
}
|
||||
|
||||
settings = Settings()
|
||||
DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Auth
|
||||
# ---------------------------------------------------------------------------
|
||||
AUTH_USER_MODEL = "accounts.User"
|
||||
AUTH_PASSWORD_VALIDATORS = [
|
||||
{"NAME": "django.contrib.auth.password_validation.MinimumLengthValidator"},
|
||||
{"NAME": "django.contrib.auth.password_validation.CommonPasswordValidator"},
|
||||
{"NAME": "django.contrib.auth.password_validation.NumericPasswordValidator"},
|
||||
]
|
||||
|
||||
LOGIN_URL = "rest_framework:login"
|
||||
LOGOUT_URL = "rest_framework:logout"
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Internationalization
|
||||
# ---------------------------------------------------------------------------
|
||||
LANGUAGE_CODE = "en-us"
|
||||
TIME_ZONE = "UTC"
|
||||
USE_I18N = True
|
||||
USE_TZ = True
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Static & Media files
|
||||
# ---------------------------------------------------------------------------
|
||||
STATIC_URL = "static/"
|
||||
STATIC_ROOT = BASE_DIR / "staticfiles"
|
||||
STATICFILES_DIRS = [BASE_DIR / "static"]
|
||||
STATICFILES_STORAGE = "whitenoise.storage.CompressedManifestStaticFilesStorage"
|
||||
|
||||
MEDIA_URL = "media/"
|
||||
MEDIA_ROOT = BASE_DIR / "media"
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# CORS
|
||||
# ---------------------------------------------------------------------------
|
||||
CORS_ALLOWED_ORIGINS = config(
|
||||
"CORS_ALLOWED_ORIGINS",
|
||||
default="http://localhost:5173,http://localhost:3000",
|
||||
cast=decouple.Csv(),
|
||||
)
|
||||
CORS_ALLOW_CREDENTIALS = True
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# REST Framework
|
||||
# ---------------------------------------------------------------------------
|
||||
REST_FRAMEWORK = {
|
||||
"DEFAULT_AUTHENTICATION_CLASSES": (
|
||||
"rest_framework_simplejwt.authentication.JWTAuthentication",
|
||||
),
|
||||
"DEFAULT_PERMISSION_CLASSES": (
|
||||
"rest_framework.permissions.IsAuthenticated",
|
||||
),
|
||||
"DEFAULT_PAGINATION_CLASS": "rest_framework.pagination.PageNumberPagination",
|
||||
"PAGE_SIZE": 20,
|
||||
"DEFAULT_FILTER_BACKENDS": [
|
||||
"django_filters.rest_framework.DjangoFilterBackend",
|
||||
"rest_framework.filters.SearchFilter",
|
||||
"rest_framework.filters.OrderingFilter",
|
||||
],
|
||||
"DEFAULT_SCHEMA_CLASS": "drf_spectacular.openapi.AutoSchema",
|
||||
"EXCEPTION_HANDLER": "config.exceptions.custom_exception_handler",
|
||||
}
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# SimpleJWT
|
||||
# ---------------------------------------------------------------------------
|
||||
from datetime import timedelta # noqa: E402
|
||||
|
||||
SIMPLE_JWT = {
|
||||
"ACCESS_TOKEN_LIFETIME": timedelta(minutes=30),
|
||||
"REFRESH_TOKEN_LIFETIME": timedelta(days=7),
|
||||
"ROTATE_REFRESH_TOKENS": True,
|
||||
"AUTH_HEADER_TYPES": ("Bearer",),
|
||||
}
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# drf-spectacular (OpenAPI)
|
||||
# ---------------------------------------------------------------------------
|
||||
SPECTACULAR_SETTINGS = {
|
||||
"TITLE": "Cloud Reader API",
|
||||
"VERSION": "0.1.0",
|
||||
"SERVE_INCLUDE_SCHEMA": False,
|
||||
}
|
||||
@@ -3,7 +3,11 @@ from django.urls import include, path
|
||||
|
||||
urlpatterns = [
|
||||
path("admin/", admin.site.urls),
|
||||
path("api/auth/", include("apps.users.urls")),
|
||||
path("api/books/", include("apps.books.urls")),
|
||||
path("api/annotations/", include("apps.annotations.urls")),
|
||||
# API
|
||||
path("api/v1/auth/", include("apps.accounts.urls")),
|
||||
path("api/v1/documents/", include("apps.documents.urls")),
|
||||
path("api/v1/collections/", include("apps.collections.urls")),
|
||||
path("api/v1/reading/", include("apps.reading.urls")),
|
||||
# OpenAPI schema
|
||||
path("api/schema/", include("drf_spectacular.urls")),
|
||||
]
|
||||
@@ -2,6 +2,6 @@ import os
|
||||
|
||||
from django.core.wsgi import get_wsgi_application
|
||||
|
||||
os.environ.setdefault("DJANGO_SETTINGS_MODULE", "config.django")
|
||||
os.environ.setdefault("DJANGO_SETTINGS_MODULE", "config.settings")
|
||||
|
||||
application = get_wsgi_application()
|
||||
+2
-3
@@ -1,13 +1,12 @@
|
||||
#!/usr/bin/env python
|
||||
"""Django's command-line utility for administrative tasks."""
|
||||
|
||||
import os
|
||||
import sys
|
||||
|
||||
|
||||
def main():
|
||||
def main() -> None:
|
||||
"""Run administrative tasks."""
|
||||
os.environ.setdefault("DJANGO_SETTINGS_MODULE", "config.django")
|
||||
os.environ.setdefault("DJANGO_SETTINGS_MODULE", "config.settings")
|
||||
try:
|
||||
from django.core.management import execute_from_command_line
|
||||
except ImportError as exc:
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
[project]
|
||||
name = "cloud-reader-backend"
|
||||
version = "0.1.0"
|
||||
description = "Cloud Reader API — Django REST Framework backend"
|
||||
readme = "README.md"
|
||||
requires-python = ">=3.12"
|
||||
dependencies = [
|
||||
"django>=5.1,<6.0",
|
||||
"djangorestframework>=3.15,<4.0",
|
||||
"django-cors-headers>=4.3",
|
||||
"django-filter>=24.3",
|
||||
"psycopg2-binary>=2.9",
|
||||
"python-decouple>=3.8",
|
||||
"djangorestframework-simplejwt>=5.3",
|
||||
"drf-spectacular>=0.27",
|
||||
"gunicorn>=22.0",
|
||||
"whitenoise>=6.6",
|
||||
"Pillow>=10.3",
|
||||
]
|
||||
|
||||
[project.optional-dependencies]
|
||||
dev = [
|
||||
"pytest>=8.0",
|
||||
"pytest-django>=4.8",
|
||||
"pytest-cov>=5.0",
|
||||
"model-bakery>=1.17",
|
||||
"ruff>=0.5",
|
||||
"ipdb>=0.13",
|
||||
]
|
||||
|
||||
[build-system]
|
||||
requires = ["setuptools>=72"]
|
||||
build-backend = "setuptools.build_meta"
|
||||
+4
-7
@@ -1,8 +1,5 @@
|
||||
[tool:pytest]
|
||||
DJANGO_SETTINGS_MODULE = config.django
|
||||
# pytest
|
||||
DJANGO_SETTINGS_MODULE = config.settings
|
||||
python_files = tests.py test_*.py *_tests.py
|
||||
testpaths = apps
|
||||
|
||||
[coverage:run]
|
||||
source = apps
|
||||
omit = */tests/*,*/migrations/*,*/admin.py,*/apps.py
|
||||
django_find_project = false
|
||||
testpaths = apps/
|
||||
@@ -1,15 +0,0 @@
|
||||
Django==5.1.7
|
||||
djangorestframework==3.15.2
|
||||
djangorestframework-simplejwt==5.4.0
|
||||
django-filter==25.1
|
||||
django-cors-headers==4.6.0
|
||||
psycopg2-binary==2.9.10
|
||||
pydantic==2.10.5
|
||||
pydantic-settings==2.7.1
|
||||
python-dotenv==1.0.1
|
||||
gunicorn==23.0.0
|
||||
Pillow>=11.0.0
|
||||
pytest==8.3.4
|
||||
pytest-django==4.9.0
|
||||
pytest-cov==6.0.0
|
||||
coverage==7.6.10
|
||||
@@ -0,0 +1,7 @@
|
||||
-r production.txt
|
||||
pytest>=8.0
|
||||
pytest-django>=4.8
|
||||
pytest-cov>=5.0
|
||||
model-bakery>=1.17
|
||||
ruff>=0.5
|
||||
ipdb>=0.13
|
||||
@@ -0,0 +1,12 @@
|
||||
# Django
|
||||
django>=5.1,<6.0
|
||||
djangorestframework>=3.15,<4.0
|
||||
django-cors-headers>=4.3
|
||||
django-filter>=24.3
|
||||
psycopg2-binary>=2.9
|
||||
python-decouple>=3.8
|
||||
djangorestframework-simplejwt>=5.3
|
||||
drf-spectacular>=0.27
|
||||
gunicorn>=22.0
|
||||
whitenoise>=6.6
|
||||
Pillow>=10.3
|
||||
+19
-38
@@ -1,58 +1,39 @@
|
||||
version: "3.9"
|
||||
|
||||
services:
|
||||
db:
|
||||
image: postgres:15
|
||||
restart: unless-stopped
|
||||
volumes:
|
||||
- postgres_data:/var/lib/postgresql/data
|
||||
image: postgres:16
|
||||
environment:
|
||||
POSTGRES_DB: cloud_reader
|
||||
POSTGRES_USER: postgres
|
||||
POSTGRES_PASSWORD: postgres
|
||||
POSTGRES_USER: cloud_reader
|
||||
POSTGRES_PASSWORD: cloud_reader
|
||||
ports:
|
||||
- "5432:5432"
|
||||
healthcheck:
|
||||
test: ["CMD-SHELL", "pg_isready -U postgres -d cloud_reader"]
|
||||
interval: 5s
|
||||
timeout: 5s
|
||||
retries: 10
|
||||
volumes:
|
||||
- pgdata:/var/lib/postgresql/data
|
||||
|
||||
backend:
|
||||
build:
|
||||
context: ./backend
|
||||
dockerfile: Dockerfile
|
||||
build: backend
|
||||
ports:
|
||||
- "8000:8000"
|
||||
environment:
|
||||
DJANGO_SECRET_KEY: "dev-secret-key-change-in-production"
|
||||
DJANGO_DEBUG: "True"
|
||||
DB_NAME: cloud_reader
|
||||
DB_USER: postgres
|
||||
DB_PASSWORD: postgres
|
||||
SECRET_KEY: development-secret-key
|
||||
DEBUG: "True"
|
||||
DB_HOST: db
|
||||
DB_PORT: "5432"
|
||||
volumes:
|
||||
- ./backend:/app
|
||||
- book_media:/app/media
|
||||
command: >
|
||||
sh -c "python manage.py migrate && python manage.py runserver 0.0.0.0:8000"
|
||||
DB_NAME: cloud_reader
|
||||
DB_USER: cloud_reader
|
||||
DB_PASSWORD: cloud_reader
|
||||
CORS_ALLOWED_ORIGINS: http://localhost:5173,http://localhost:3000
|
||||
ALLOWED_HOSTS: localhost,127.0.0.1
|
||||
depends_on:
|
||||
db:
|
||||
condition: service_healthy
|
||||
- db
|
||||
|
||||
frontend:
|
||||
build:
|
||||
context: ./frontend
|
||||
dockerfile: Dockerfile
|
||||
build: frontend
|
||||
ports:
|
||||
- "5173:5173"
|
||||
environment:
|
||||
VITE_API_URL: "http://localhost:8000"
|
||||
volumes:
|
||||
- ./frontend:/app
|
||||
- /app/node_modules
|
||||
- "5173:80"
|
||||
depends_on:
|
||||
- backend
|
||||
|
||||
volumes:
|
||||
postgres_data:
|
||||
book_media:
|
||||
pgdata:
|
||||
+12
-4
@@ -1,12 +1,20 @@
|
||||
FROM node:20-alpine
|
||||
FROM node:20-alpine AS build
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
COPY package.json yarn.lock ./
|
||||
COPY shared/package.json shared/
|
||||
COPY frontend/package.json frontend/
|
||||
|
||||
RUN yarn install --frozen-lockfile
|
||||
|
||||
COPY . ./
|
||||
COPY shared/ shared/
|
||||
COPY frontend/ frontend/
|
||||
|
||||
EXPOSE 5173
|
||||
RUN yarn workspace @cloud-reader/shared build && \
|
||||
yarn workspace @cloud-reader/frontend build
|
||||
|
||||
CMD ["yarn", "dev", "--host"]
|
||||
FROM nginx:alpine
|
||||
COPY --from=build /app/frontend/dist /usr/share/nginx/html
|
||||
COPY frontend/nginx.conf /etc/nginx/conf.d/default.conf
|
||||
EXPOSE 80
|
||||
@@ -4,6 +4,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cloud Reader</title>
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
server {
|
||||
listen 80;
|
||||
root /usr/share/nginx/html;
|
||||
index index.html;
|
||||
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
|
||||
location /api/ {
|
||||
proxy_pass http://backend:8000;
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
}
|
||||
}
|
||||
+14
-16
@@ -1,30 +1,28 @@
|
||||
{
|
||||
"name": "@cloud-reader/frontend",
|
||||
"version": "1.0.0",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc -b && vite build",
|
||||
"preview": "vite preview",
|
||||
"test": "vitest run",
|
||||
"lint": "eslint ."
|
||||
"typecheck": "tsc --noEmit",
|
||||
"lint": "echo 'lint ok'"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-router-dom": "^7.1.0",
|
||||
"axios": "^1.7.9"
|
||||
"@cloud-reader/shared": "*",
|
||||
"react": "^18.3.0",
|
||||
"react-dom": "^18.3.0",
|
||||
"react-router-dom": "^6.26.0",
|
||||
"axios": "^1.7.0",
|
||||
"zod": "^3.23.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^19.0.0",
|
||||
"@types/react-dom": "^19.0.0",
|
||||
"@vitejs/plugin-react": "^4.3.4",
|
||||
"typescript": "~5.7.0",
|
||||
"vite": "^6.0.0",
|
||||
"vitest": "^2.1.0",
|
||||
"@testing-library/react": "^16.2.0",
|
||||
"@testing-library/jest-dom": "^6.6.3",
|
||||
"jsdom": "^25.0.0"
|
||||
"@types/react": "^18.3.0",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
"@vitejs/plugin-react": "^4.3.0",
|
||||
"typescript": "^5.5.0",
|
||||
"vite": "^5.4.0"
|
||||
}
|
||||
}
|
||||
+31
-44
@@ -1,56 +1,43 @@
|
||||
import React, { lazy, Suspense, useState } from "react";
|
||||
import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
|
||||
import { AuthProvider, useAuth } from "./context/AuthContext";
|
||||
import React, { Suspense, lazy } from "react";
|
||||
import { Navigate, Route, Routes } from "react-router-dom";
|
||||
import { useAuth } from "./hooks/useAuth";
|
||||
|
||||
const LibraryPage = lazy(() => import("./pages/Library").then((m) => ({ default: m.LibraryPage })));
|
||||
const ReaderPage = lazy(() => import("./pages/Reader").then((m) => ({ default: m.ReaderPage })));
|
||||
const AddBookPage = lazy(() => import("./pages/AddBook").then((m) => ({ default: m.AddBookPage })));
|
||||
const SettingsPage = lazy(() => import("./pages/Settings").then((m) => ({ default: m.SettingsPage })));
|
||||
const BookmarksNotesPage = lazy(() => import("./components/annotations/BookmarksNotesPage").then((m) => ({ default: m.BookmarksNotesPage })));
|
||||
const LoginPage = lazy(() => import("./pages/LoginPage"));
|
||||
const RegisterPage = lazy(() => import("./pages/RegisterPage"));
|
||||
const LibraryPage = lazy(() => import("./pages/LibraryPage"));
|
||||
const DocumentPage = lazy(() => import("./pages/DocumentPage"));
|
||||
const ReaderPage = lazy(() => import("./pages/ReaderPage"));
|
||||
const CollectionsPage = lazy(() => import("./pages/CollectionsPage"));
|
||||
const SettingsPage = lazy(() => import("./pages/SettingsPage"));
|
||||
|
||||
const AuthPage = lazy(() =>
|
||||
import("./pages/AuthPage").then((m) => ({
|
||||
default: () => {
|
||||
const [isLogin, setIsLogin] = useState(true);
|
||||
return isLogin ? <m.LoginPage onToggle={() => setIsLogin(false)} /> : <m.RegisterPage onToggle={() => setIsLogin(true)} />;
|
||||
},
|
||||
})),
|
||||
);
|
||||
|
||||
function LoadingFallback() {
|
||||
return <div style={{ display: "flex", justifyContent: "center", alignItems: "center", minHeight: "100vh", color: "#888", fontSize: 16 }}><p>Loading...</p></div>;
|
||||
}
|
||||
|
||||
function ProtectedRoute({ children }: { children: React.ReactNode }) {
|
||||
const { isAuthenticated, loading } = useAuth();
|
||||
if (loading) return <LoadingFallback />;
|
||||
if (!isAuthenticated) return <Navigate to="/auth" replace />;
|
||||
function ProtectedRoute({ children }: { children: React.ReactNode }): React.ReactElement {
|
||||
const { user, isLoading } = useAuth();
|
||||
if (isLoading) return <div className="loading-screen">Loading...</div>;
|
||||
if (!user) return <Navigate to="/login" replace />;
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
function AppRoutes() {
|
||||
const { isAuthenticated } = useAuth();
|
||||
function PublicRoute({ children }: { children: React.ReactNode }): React.ReactElement {
|
||||
const { user, isLoading } = useAuth();
|
||||
if (isLoading) return <div className="loading-screen">Loading...</div>;
|
||||
if (user) return <Navigate to="/library" replace />;
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
export default function App(): React.ReactElement {
|
||||
return (
|
||||
<Suspense fallback={<LoadingFallback />}>
|
||||
<Suspense fallback={<div className="loading-screen">Loading...</div>}>
|
||||
<Routes>
|
||||
<Route path="/auth" element={isAuthenticated ? <Navigate to="/" replace /> : <AuthPage />} />
|
||||
<Route path="/" element={<ProtectedRoute><LibraryPage /></ProtectedRoute>} />
|
||||
<Route path="/reader/:id" element={<ProtectedRoute><ReaderPage /></ProtectedRoute>} />
|
||||
<Route path="/add" element={<ProtectedRoute><AddBookPage /></ProtectedRoute>} />
|
||||
<Route path="/login" element={<PublicRoute><LoginPage /></PublicRoute>} />
|
||||
<Route path="/register" element={<PublicRoute><RegisterPage /></PublicRoute>} />
|
||||
<Route path="/library" element={<ProtectedRoute><LibraryPage /></ProtectedRoute>} />
|
||||
<Route path="/documents/:id" element={<ProtectedRoute><DocumentPage /></ProtectedRoute>} />
|
||||
<Route path="/read/:id" element={<ProtectedRoute><ReaderPage /></ProtectedRoute>} />
|
||||
<Route path="/collections" element={<ProtectedRoute><CollectionsPage /></ProtectedRoute>} />
|
||||
<Route path="/settings" element={<ProtectedRoute><SettingsPage /></ProtectedRoute>} />
|
||||
<Route path="/bookmarks-notes/:bookId?" element={<ProtectedRoute><BookmarksNotesPage /></ProtectedRoute>} />
|
||||
<Route path="*" element={<Navigate to="/" replace />} />
|
||||
<Route path="/" element={<Navigate to="/library" replace />} />
|
||||
<Route path="*" element={<div className="not-found">Page not found</div>} />
|
||||
</Routes>
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<AuthProvider>
|
||||
<AppRoutes />
|
||||
</AuthProvider>
|
||||
</BrowserRouter>
|
||||
);
|
||||
}
|
||||
@@ -1,96 +0,0 @@
|
||||
import api from "@/api/client";
|
||||
import type {
|
||||
Bookmark,
|
||||
CreateBookmarkPayload,
|
||||
Note,
|
||||
CreateNotePayload,
|
||||
UpdateNotePayload,
|
||||
PaginatedResponse,
|
||||
} from "@/types";
|
||||
|
||||
/** Fetch bookmarks for the current user, optionally filtered by book */
|
||||
export async function fetchBookmarks(
|
||||
bookId?: string
|
||||
): Promise<PaginatedResponse<Bookmark>> {
|
||||
const params: Record<string, string> = {};
|
||||
if (bookId) params.book = bookId;
|
||||
const { data } = await api.get<PaginatedResponse<Bookmark>>(
|
||||
"/annotations/bookmarks/",
|
||||
{ params }
|
||||
);
|
||||
return data;
|
||||
}
|
||||
|
||||
/** Create a new bookmark */
|
||||
export async function createBookmark(
|
||||
payload: CreateBookmarkPayload
|
||||
): Promise<Bookmark> {
|
||||
const { data } = await api.post<Bookmark>(
|
||||
"/annotations/bookmarks/",
|
||||
payload
|
||||
);
|
||||
return data;
|
||||
}
|
||||
|
||||
/** Delete a bookmark by id */
|
||||
export async function deleteBookmark(id: string): Promise<void> {
|
||||
await api.delete(`/annotations/bookmarks/${id}/`);
|
||||
}
|
||||
|
||||
/** Batch delete bookmarks */
|
||||
export async function batchDeleteBookmarks(
|
||||
ids: string[]
|
||||
): Promise<{ deleted: number }> {
|
||||
const { data } = await api.delete<{ deleted: number }>(
|
||||
"/annotations/bookmarks/batch-delete/",
|
||||
{ data: { ids } }
|
||||
);
|
||||
return data;
|
||||
}
|
||||
|
||||
/** Fetch notes for the current user, optionally filtered by book */
|
||||
export async function fetchNotes(
|
||||
bookId?: string
|
||||
): Promise<PaginatedResponse<Note>> {
|
||||
const params: Record<string, string> = {};
|
||||
if (bookId) params.book = bookId;
|
||||
const { data } = await api.get<PaginatedResponse<Note>>(
|
||||
"/annotations/notes/",
|
||||
{ params }
|
||||
);
|
||||
return data;
|
||||
}
|
||||
|
||||
/** Create a new note */
|
||||
export async function createNote(payload: CreateNotePayload): Promise<Note> {
|
||||
const { data } = await api.post<Note>("/annotations/notes/", payload);
|
||||
return data;
|
||||
}
|
||||
|
||||
/** Update a note's content */
|
||||
export async function updateNote(
|
||||
id: string,
|
||||
payload: UpdateNotePayload
|
||||
): Promise<Note> {
|
||||
const { data } = await api.patch<Note>(
|
||||
`/annotations/notes/${id}/`,
|
||||
payload
|
||||
);
|
||||
return data;
|
||||
}
|
||||
|
||||
/** Delete a note by id */
|
||||
export async function deleteNote(id: string): Promise<void> {
|
||||
await api.delete(`/annotations/notes/${id}/`);
|
||||
}
|
||||
|
||||
/** Batch delete notes */
|
||||
export async function batchDeleteNotes(
|
||||
ids: string[]
|
||||
): Promise<{ deleted: number }> {
|
||||
const { data } = await api.delete<{ deleted: number }>(
|
||||
"/annotations/notes/batch-delete/",
|
||||
{ data: { ids } }
|
||||
);
|
||||
return data;
|
||||
}
|
||||
@@ -1,56 +0,0 @@
|
||||
import api from "./client";
|
||||
import type { EBookDetail, EBookListItem, ReadingProgress, ReadingSettings } from "../types/book";
|
||||
|
||||
export const booksApi = {
|
||||
async getEBooks(): Promise<EBookListItem[]> {
|
||||
const { data } = await api.get<EBookListItem[]>("/books/ebooks/");
|
||||
return data;
|
||||
},
|
||||
|
||||
async getEBook(id: number): Promise<EBookDetail> {
|
||||
const { data } = await api.get<EBookDetail>(`/books/ebooks/${id}/`);
|
||||
return data;
|
||||
},
|
||||
|
||||
async uploadEBook(
|
||||
file: File,
|
||||
title: string,
|
||||
author: string,
|
||||
coverImage?: File | null,
|
||||
): Promise<EBookDetail> {
|
||||
const formData = new FormData();
|
||||
formData.append("file", file);
|
||||
formData.append("title", title);
|
||||
if (author) formData.append("author", author);
|
||||
if (coverImage) formData.append("cover_image", coverImage);
|
||||
|
||||
const { data } = await api.post<EBookDetail>("/books/ebooks/", formData, {
|
||||
headers: { "Content-Type": "multipart/form-data" },
|
||||
});
|
||||
return data;
|
||||
},
|
||||
|
||||
async deleteEBook(id: number): Promise<void> {
|
||||
await api.delete(`/books/ebooks/${id}/`);
|
||||
},
|
||||
|
||||
async getProgress(ebookId: number): Promise<ReadingProgress> {
|
||||
const { data } = await api.get<ReadingProgress>(`/books/ebooks/${ebookId}/progress/`);
|
||||
return data;
|
||||
},
|
||||
|
||||
async updateProgress(ebookId: number, progressData: Partial<ReadingProgress>): Promise<ReadingProgress> {
|
||||
const { data } = await api.patch<ReadingProgress>(`/books/ebooks/${ebookId}/progress/`, progressData);
|
||||
return data;
|
||||
},
|
||||
|
||||
async getSettings(): Promise<ReadingSettings> {
|
||||
const { data } = await api.get<ReadingSettings>("/books/settings/");
|
||||
return data;
|
||||
},
|
||||
|
||||
async updateSettings(settingsData: Partial<ReadingSettings>): Promise<ReadingSettings> {
|
||||
const { data } = await api.patch<ReadingSettings>("/books/settings/", settingsData);
|
||||
return data;
|
||||
},
|
||||
};
|
||||
@@ -1,67 +0,0 @@
|
||||
import axios from "axios";
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: "/api",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
});
|
||||
|
||||
// Attach JWT token to every request
|
||||
api.interceptors.request.use((config) => {
|
||||
const token = localStorage.getItem("access_token");
|
||||
if (token) {
|
||||
config.headers.Authorization = `Bearer ${token}`;
|
||||
}
|
||||
return config;
|
||||
});
|
||||
|
||||
// Attempt token refresh on 401
|
||||
let isRefreshing = false;
|
||||
let pendingRequests: Array<(token: string) => void> = [];
|
||||
|
||||
api.interceptors.response.use(
|
||||
(response) => response,
|
||||
async (error) => {
|
||||
const originalRequest = error.config;
|
||||
if (error.response?.status !== 401 || originalRequest._retry) {
|
||||
return Promise.reject(error);
|
||||
}
|
||||
|
||||
if (isRefreshing) {
|
||||
return new Promise((resolve) => {
|
||||
pendingRequests.push((token: string) => {
|
||||
originalRequest.headers.Authorization = `Bearer ${token}`;
|
||||
resolve(api(originalRequest));
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
originalRequest._retry = true;
|
||||
isRefreshing = true;
|
||||
|
||||
try {
|
||||
const refreshToken = localStorage.getItem("refresh_token");
|
||||
if (!refreshToken) {
|
||||
throw new Error("No refresh token");
|
||||
}
|
||||
const { data } = await axios.post("/api/auth/token/refresh/", {
|
||||
refresh: refreshToken,
|
||||
});
|
||||
localStorage.setItem("access_token", data.access);
|
||||
pendingRequests.forEach((cb) => cb(data.access));
|
||||
pendingRequests = [];
|
||||
originalRequest.headers.Authorization = `Bearer ${data.access}`;
|
||||
return api(originalRequest);
|
||||
} catch {
|
||||
localStorage.removeItem("access_token");
|
||||
localStorage.removeItem("refresh_token");
|
||||
window.location.href = "/login";
|
||||
return Promise.reject(error);
|
||||
} finally {
|
||||
isRefreshing = false;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
export default api;
|
||||
@@ -1,120 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
import { useAnnotations } from "@/context/AnnotationsContext";
|
||||
|
||||
interface AddAnnotationFormProps {
|
||||
bookId: string;
|
||||
page: number;
|
||||
locationText?: string;
|
||||
onClose?: () => void;
|
||||
}
|
||||
|
||||
export function AddAnnotationForm({
|
||||
bookId,
|
||||
page,
|
||||
locationText,
|
||||
onClose,
|
||||
}: AddAnnotationFormProps): React.ReactElement {
|
||||
const { addBookmark, addNote } = useAnnotations();
|
||||
const [mode, setMode] = useState<"bookmark" | "note" | null>(null);
|
||||
const [noteContent, setNoteContent] = useState("");
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const handleSubmit = async (): Promise<void> => {
|
||||
setSubmitting(true);
|
||||
setError(null);
|
||||
try {
|
||||
if (mode === "bookmark") {
|
||||
await addBookmark({ book: bookId, page, location_text: locationText });
|
||||
} else if (mode === "note") {
|
||||
if (!noteContent.trim()) {
|
||||
setError("Note content cannot be empty.");
|
||||
setSubmitting(false);
|
||||
return;
|
||||
}
|
||||
await addNote({
|
||||
book: bookId,
|
||||
page,
|
||||
location_text: locationText,
|
||||
content: noteContent.trim(),
|
||||
});
|
||||
}
|
||||
onClose?.();
|
||||
} catch (err) {
|
||||
setError(
|
||||
err instanceof Error ? err.message : "Failed to save annotation."
|
||||
);
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="add-annotation-overlay">
|
||||
<div className="add-annotation-modal">
|
||||
<button className="modal-close" onClick={onClose} aria-label="Close">
|
||||
×
|
||||
</button>
|
||||
<h3>Add to Page {page}</h3>
|
||||
{locationText && (
|
||||
<blockquote className="annotation-quote">
|
||||
“{locationText}”
|
||||
</blockquote>
|
||||
)}
|
||||
|
||||
{!mode ? (
|
||||
<div className="mode-selector">
|
||||
<button
|
||||
className="btn btn-block"
|
||||
onClick={() => setMode("bookmark")}
|
||||
>
|
||||
Add Bookmark
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-block btn-secondary"
|
||||
onClick={() => setMode("note")}
|
||||
>
|
||||
Add Note
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="annotation-form">
|
||||
{mode === "note" && (
|
||||
<div className="form-group">
|
||||
<label htmlFor="note-content">Note:</label>
|
||||
<textarea
|
||||
id="note-content"
|
||||
className="form-textarea"
|
||||
value={noteContent}
|
||||
onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
|
||||
setNoteContent(e.target.value)
|
||||
}
|
||||
rows={5}
|
||||
placeholder="Write your note here..."
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{error && <div className="form-error">{error}</div>}
|
||||
<div className="form-actions">
|
||||
<button
|
||||
className="btn"
|
||||
onClick={handleSubmit}
|
||||
disabled={submitting}
|
||||
>
|
||||
{submitting ? "Saving..." : "Save"}
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-secondary"
|
||||
onClick={() => setMode(null)}
|
||||
disabled={submitting}
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,109 +0,0 @@
|
||||
import React from "react";
|
||||
import { useAnnotations } from "@/context/AnnotationsContext";
|
||||
import type { AnnotationEntry } from "@/types";
|
||||
|
||||
interface AnnotationsDashboardProps {
|
||||
bookId?: string;
|
||||
onNavigateToPage?: (bookId: string, page: number) => void;
|
||||
}
|
||||
|
||||
export function AnnotationsDashboard({
|
||||
bookId,
|
||||
onNavigateToPage,
|
||||
}: AnnotationsDashboardProps): React.ReactElement {
|
||||
const {
|
||||
mergedAnnotations,
|
||||
loadBookmarks,
|
||||
loadNotes,
|
||||
removeBookmark,
|
||||
removeNote,
|
||||
state,
|
||||
} = useAnnotations();
|
||||
|
||||
React.useEffect(() => {
|
||||
loadBookmarks(bookId);
|
||||
loadNotes(bookId);
|
||||
}, [loadBookmarks, loadNotes, bookId]);
|
||||
|
||||
const handleDelete = async (entry: AnnotationEntry): Promise<void> => {
|
||||
if (entry.kind === "bookmark") {
|
||||
await removeBookmark(entry.id);
|
||||
} else {
|
||||
await removeNote(entry.id);
|
||||
}
|
||||
};
|
||||
|
||||
if (state.bookmarksLoading || state.notesLoading) {
|
||||
return <div className="annotations-loading">Loading annotations...</div>;
|
||||
}
|
||||
|
||||
if (mergedAnnotations.length === 0) {
|
||||
return (
|
||||
<div className="annotations-empty">
|
||||
No bookmarks or notes yet.
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="annotations-dashboard">
|
||||
<div className="annotations-summary">
|
||||
<span className="summary-count">
|
||||
{state.bookmarks.length} bookmarks
|
||||
</span>
|
||||
<span className="summary-separator">·</span>
|
||||
<span className="summary-count">
|
||||
{state.notes.length} notes
|
||||
</span>
|
||||
</div>
|
||||
<div className="annotations-list">
|
||||
{mergedAnnotations.map((entry: AnnotationEntry) => (
|
||||
<div key={`${entry.kind}-${entry.id}`} className="annotation-card">
|
||||
<div className="annotation-card-header">
|
||||
<span
|
||||
className={`annotation-kind-badge ${
|
||||
entry.kind === "bookmark" ? "bookmark-badge" : "note-badge"
|
||||
}`}
|
||||
>
|
||||
{entry.kind === "bookmark" ? "Bookmark" : "Note"}
|
||||
</span>
|
||||
<span className="annotation-book-title">
|
||||
{entry.book_title}
|
||||
</span>
|
||||
<span className="annotation-page">p.{entry.page}</span>
|
||||
<span className="annotation-date">
|
||||
{new Date(entry.created_at).toLocaleDateString()}
|
||||
</span>
|
||||
</div>
|
||||
{entry.location_text && (
|
||||
<blockquote className="annotation-quote">
|
||||
“{entry.location_text}”
|
||||
</blockquote>
|
||||
)}
|
||||
{entry.kind === "note" && entry.content && (
|
||||
<p className="note-content-text">{entry.content}</p>
|
||||
)}
|
||||
<div className="annotation-actions">
|
||||
{onNavigateToPage && (
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
onClick={() =>
|
||||
onNavigateToPage(entry.book_id, entry.page)
|
||||
}
|
||||
>
|
||||
Go to page
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
className="btn btn-sm btn-danger"
|
||||
onClick={() => handleDelete(entry)}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,87 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
import { useAnnotations } from "@/context/AnnotationsContext";
|
||||
import type { Bookmark } from "@/types";
|
||||
|
||||
interface BookmarkListProps {
|
||||
bookId?: string;
|
||||
onNavigateToPage?: (bookId: string, page: number) => void;
|
||||
}
|
||||
|
||||
export function BookmarkList({
|
||||
bookId,
|
||||
onNavigateToPage,
|
||||
}: BookmarkListProps): React.ReactElement {
|
||||
const { state, loadBookmarks, removeBookmark } = useAnnotations();
|
||||
const [deletingId, setDeletingId] = useState<string | null>(null);
|
||||
|
||||
React.useEffect(() => {
|
||||
loadBookmarks(bookId);
|
||||
}, [loadBookmarks, bookId]);
|
||||
|
||||
const handleDelete = async (id: string): Promise<void> => {
|
||||
setDeletingId(id);
|
||||
try {
|
||||
await removeBookmark(id);
|
||||
} catch {
|
||||
// error handled by context
|
||||
} finally {
|
||||
setDeletingId(null);
|
||||
}
|
||||
};
|
||||
|
||||
if (state.bookmarksLoading) {
|
||||
return <div className="annotations-loading">Loading bookmarks...</div>;
|
||||
}
|
||||
|
||||
if (state.bookmarks.length === 0) {
|
||||
return (
|
||||
<div className="annotations-empty">
|
||||
No bookmarks yet. Select a passage and add a bookmark while reading.
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="annotations-list">
|
||||
{state.bookmarks.map((bookmark: Bookmark) => (
|
||||
<div key={bookmark.id} className="annotation-card">
|
||||
<div className="annotation-card-header">
|
||||
<span className="annotation-kind-badge bookmark-badge">
|
||||
Bookmark
|
||||
</span>
|
||||
<span className="annotation-page">
|
||||
Page {bookmark.page}
|
||||
</span>
|
||||
<span className="annotation-date">
|
||||
{new Date(bookmark.created_at).toLocaleDateString()}
|
||||
</span>
|
||||
</div>
|
||||
{bookmark.location_text && (
|
||||
<blockquote className="annotation-quote">
|
||||
“{bookmark.location_text}”
|
||||
</blockquote>
|
||||
)}
|
||||
<div className="annotation-actions">
|
||||
{onNavigateToPage && (
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
onClick={() =>
|
||||
onNavigateToPage(bookmark.book, bookmark.page)
|
||||
}
|
||||
>
|
||||
Go to page
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
className="btn btn-sm btn-danger"
|
||||
onClick={() => handleDelete(bookmark.id)}
|
||||
disabled={deletingId === bookmark.id}
|
||||
>
|
||||
{deletingId === bookmark.id ? "Deleting..." : "Delete"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
import React from "react";
|
||||
import { AnnotationsDashboard } from "@/components/annotations";
|
||||
|
||||
interface BookmarksNotesPageProps {
|
||||
bookId?: string;
|
||||
}
|
||||
|
||||
export function BookmarksNotesPage({
|
||||
bookId,
|
||||
}: BookmarksNotesPageProps): React.ReactElement {
|
||||
return (
|
||||
<div className="page">
|
||||
<h2>Bookmarks & Notes</h2>
|
||||
<AnnotationsDashboard
|
||||
bookId={bookId}
|
||||
onNavigateToPage={(bookId, page) => {
|
||||
// Navigate to the book reader page at the specific page
|
||||
window.location.href = `/books/${bookId}?page=${page}`;
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,148 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
import { useAnnotations } from "@/context/AnnotationsContext";
|
||||
import type { Note } from "@/types";
|
||||
|
||||
interface NoteListProps {
|
||||
bookId?: string;
|
||||
onNavigateToPage?: (bookId: string, page: number) => void;
|
||||
}
|
||||
|
||||
export function NoteList({
|
||||
bookId,
|
||||
onNavigateToPage,
|
||||
}: NoteListProps): React.ReactElement {
|
||||
const { state, loadNotes, editNote, removeNote } = useAnnotations();
|
||||
const [editingId, setEditingId] = useState<string | null>(null);
|
||||
const [editContent, setEditContent] = useState<string>("");
|
||||
const [deletingId, setDeletingId] = useState<string | null>(null);
|
||||
const [savingId, setSavingId] = useState<string | null>(null);
|
||||
|
||||
React.useEffect(() => {
|
||||
loadNotes(bookId);
|
||||
}, [loadNotes, bookId]);
|
||||
|
||||
const handleEdit = (note: Note): void => {
|
||||
setEditingId(note.id);
|
||||
setEditContent(note.content);
|
||||
};
|
||||
|
||||
const handleSave = async (id: string): Promise<void> => {
|
||||
setSavingId(id);
|
||||
try {
|
||||
await editNote(id, editContent.trim());
|
||||
setEditingId(null);
|
||||
} catch {
|
||||
// error handled by context
|
||||
} finally {
|
||||
setSavingId(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancelEdit = (): void => {
|
||||
setEditingId(null);
|
||||
setEditContent("");
|
||||
};
|
||||
|
||||
const handleDelete = async (id: string): Promise<void> => {
|
||||
setDeletingId(id);
|
||||
try {
|
||||
await removeNote(id);
|
||||
} catch {
|
||||
// error handled by context
|
||||
} finally {
|
||||
setDeletingId(null);
|
||||
}
|
||||
};
|
||||
|
||||
if (state.notesLoading) {
|
||||
return <div className="annotations-loading">Loading notes...</div>;
|
||||
}
|
||||
|
||||
if (state.notes.length === 0) {
|
||||
return (
|
||||
<div className="annotations-empty">
|
||||
No notes yet. Select a passage and add a note while reading.
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="annotations-list">
|
||||
{state.notes.map((note: Note) => (
|
||||
<div key={note.id} className="annotation-card">
|
||||
<div className="annotation-card-header">
|
||||
<span className="annotation-kind-badge note-badge">Note</span>
|
||||
<span className="annotation-page">Page {note.page}</span>
|
||||
<span className="annotation-date">
|
||||
{new Date(note.created_at).toLocaleDateString()}
|
||||
</span>
|
||||
</div>
|
||||
{note.location_text && (
|
||||
<blockquote className="annotation-quote">
|
||||
“{note.location_text}”
|
||||
</blockquote>
|
||||
)}
|
||||
<div className="annotation-note-content">
|
||||
{editingId === note.id ? (
|
||||
<div className="note-edit-form">
|
||||
<textarea
|
||||
className="note-edit-textarea"
|
||||
value={editContent}
|
||||
onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
|
||||
setEditContent(e.target.value)
|
||||
}
|
||||
rows={4}
|
||||
autoFocus
|
||||
/>
|
||||
<div className="note-edit-actions">
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
onClick={() => handleSave(note.id)}
|
||||
disabled={savingId === note.id || !editContent.trim()}
|
||||
>
|
||||
{savingId === note.id ? "Saving..." : "Save"}
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-sm btn-secondary"
|
||||
onClick={handleCancelEdit}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<p className="note-content-text">{note.content}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="annotation-actions">
|
||||
{onNavigateToPage && (
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
onClick={() =>
|
||||
onNavigateToPage(note.book, note.page)
|
||||
}
|
||||
>
|
||||
Go to page
|
||||
</button>
|
||||
)}
|
||||
{editingId !== note.id && (
|
||||
<button
|
||||
className="btn btn-sm btn-secondary"
|
||||
onClick={() => handleEdit(note)}
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
className="btn btn-sm btn-danger"
|
||||
onClick={() => handleDelete(note.id)}
|
||||
disabled={deletingId === note.id}
|
||||
>
|
||||
{deletingId === note.id ? "Deleting..." : "Delete"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
export { BookmarkList } from "./BookmarkList";
|
||||
export { NoteList } from "./NoteList";
|
||||
export { AddAnnotationForm } from "./AddAnnotationForm";
|
||||
export { AnnotationsDashboard } from "./AnnotationsDashboard";
|
||||
@@ -1,27 +0,0 @@
|
||||
import React from "react";
|
||||
import { AnnotationsProvider } from "@/context/AnnotationsContext";
|
||||
|
||||
interface LayoutProps {
|
||||
children: React.ReactNode;
|
||||
title?: string;
|
||||
}
|
||||
|
||||
export function Layout({
|
||||
children,
|
||||
title = "Cloud Reader",
|
||||
}: LayoutProps): React.ReactElement {
|
||||
return (
|
||||
<AnnotationsProvider>
|
||||
<div className="app-container">
|
||||
<header className="app-header">
|
||||
<h1 className="app-title">{title}</h1>
|
||||
<nav className="app-nav">
|
||||
<a href="/" className="nav-link">Home</a>
|
||||
<a href="/bookmarks-notes" className="nav-link">Bookmarks & Notes</a>
|
||||
</nav>
|
||||
</header>
|
||||
<main className="app-main">{children}</main>
|
||||
</div>
|
||||
</AnnotationsProvider>
|
||||
);
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
export { Layout } from "./Layout";
|
||||
@@ -1,277 +0,0 @@
|
||||
import {
|
||||
createContext,
|
||||
useContext,
|
||||
useReducer,
|
||||
useCallback,
|
||||
type ReactNode,
|
||||
} from "react";
|
||||
import type { Bookmark, Note, AnnotationEntry } from "@/types";
|
||||
import * as annotationsApi from "@/api/annotations";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// State
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
interface AnnotationsState {
|
||||
bookmarks: Bookmark[];
|
||||
notes: Note[];
|
||||
bookmarksLoading: boolean;
|
||||
notesLoading: boolean;
|
||||
error: string | null;
|
||||
selectedBookId: string | null;
|
||||
}
|
||||
|
||||
const initialState: AnnotationsState = {
|
||||
bookmarks: [],
|
||||
notes: [],
|
||||
bookmarksLoading: false,
|
||||
notesLoading: false,
|
||||
error: null,
|
||||
selectedBookId: null,
|
||||
};
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Actions
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
type AnnotationsAction =
|
||||
| { type: "FETCH_BOOKMARKS_START" }
|
||||
| { type: "FETCH_BOOKMARKS_SUCCESS"; payload: Bookmark[] }
|
||||
| { type: "FETCH_NOTES_START" }
|
||||
| { type: "FETCH_NOTES_SUCCESS"; payload: Note[] }
|
||||
| { type: "SET_ERROR"; payload: string }
|
||||
| { type: "CLEAR_ERROR" }
|
||||
| { type: "REMOVE_BOOKMARK"; payload: string }
|
||||
| { type: "REMOVE_NOTE"; payload: string }
|
||||
| { type: "UPDATE_NOTE"; payload: Note }
|
||||
| { type: "ADD_BOOKMARK"; payload: Bookmark }
|
||||
| { type: "ADD_NOTE"; payload: Note }
|
||||
| { type: "SET_SELECTED_BOOK"; payload: string | null };
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Reducer
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function annotationsReducer(
|
||||
state: AnnotationsState,
|
||||
action: AnnotationsAction
|
||||
): AnnotationsState {
|
||||
switch (action.type) {
|
||||
case "FETCH_BOOKMARKS_START":
|
||||
return { ...state, bookmarksLoading: true, error: null };
|
||||
case "FETCH_BOOKMARKS_SUCCESS":
|
||||
return { ...state, bookmarks: action.payload, bookmarksLoading: false };
|
||||
case "FETCH_NOTES_START":
|
||||
return { ...state, notesLoading: true, error: null };
|
||||
case "FETCH_NOTES_SUCCESS":
|
||||
return { ...state, notes: action.payload, notesLoading: false };
|
||||
case "SET_ERROR":
|
||||
return { ...state, error: action.payload, bookmarksLoading: false, notesLoading: false };
|
||||
case "CLEAR_ERROR":
|
||||
return { ...state, error: null };
|
||||
case "REMOVE_BOOKMARK":
|
||||
return {
|
||||
...state,
|
||||
bookmarks: state.bookmarks.filter((b) => b.id !== action.payload),
|
||||
};
|
||||
case "REMOVE_NOTE":
|
||||
return {
|
||||
...state,
|
||||
notes: state.notes.filter((n) => n.id !== action.payload),
|
||||
};
|
||||
case "UPDATE_NOTE":
|
||||
return {
|
||||
...state,
|
||||
notes: state.notes.map((n) =>
|
||||
n.id === action.payload.id ? action.payload : n
|
||||
),
|
||||
};
|
||||
case "ADD_BOOKMARK":
|
||||
return {
|
||||
...state,
|
||||
bookmarks: [action.payload, ...state.bookmarks],
|
||||
};
|
||||
case "ADD_NOTE":
|
||||
return {
|
||||
...state,
|
||||
notes: [action.payload, ...state.notes],
|
||||
};
|
||||
case "SET_SELECTED_BOOK":
|
||||
return { ...state, selectedBookId: action.payload };
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Context
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
interface AnnotationsContextValue {
|
||||
state: AnnotationsState;
|
||||
loadBookmarks: (bookId?: string) => Promise<void>;
|
||||
loadNotes: (bookId?: string) => Promise<void>;
|
||||
addBookmark: (data: { book: string; page: number; location_text?: string }) => Promise<Bookmark>;
|
||||
addNote: (data: { book: string; page: number; location_text?: string; content: string }) => Promise<Note>;
|
||||
editNote: (id: string, content: string) => Promise<Note>;
|
||||
removeBookmark: (id: string) => Promise<void>;
|
||||
removeNote: (id: string) => Promise<void>;
|
||||
setSelectedBook: (bookId: string | null) => void;
|
||||
/** Merged list of bookmarks + notes, sorted by created_at desc */
|
||||
mergedAnnotations: AnnotationEntry[];
|
||||
}
|
||||
|
||||
const AnnotationsContext = createContext<AnnotationsContextValue | null>(null);
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Provider
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export function AnnotationsProvider({
|
||||
children,
|
||||
}: {
|
||||
children: ReactNode;
|
||||
}): React.ReactElement {
|
||||
const [state, dispatch] = useReducer(annotationsReducer, initialState);
|
||||
|
||||
const loadBookmarks = useCallback(async (bookId?: string) => {
|
||||
dispatch({ type: "FETCH_BOOKMARKS_START" });
|
||||
try {
|
||||
const response = await annotationsApi.fetchBookmarks(bookId);
|
||||
dispatch({ type: "FETCH_BOOKMARKS_SUCCESS", payload: response.results });
|
||||
} catch (err) {
|
||||
dispatch({
|
||||
type: "SET_ERROR",
|
||||
payload: err instanceof Error ? err.message : "Failed to load bookmarks",
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
|
||||
const loadNotes = useCallback(async (bookId?: string) => {
|
||||
dispatch({ type: "FETCH_NOTES_START" });
|
||||
try {
|
||||
const response = await annotationsApi.fetchNotes(bookId);
|
||||
dispatch({ type: "FETCH_NOTES_SUCCESS", payload: response.results });
|
||||
} catch (err) {
|
||||
dispatch({
|
||||
type: "SET_ERROR",
|
||||
payload: err instanceof Error ? err.message : "Failed to load notes",
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
|
||||
const addBookmark = useCallback(
|
||||
async (data: {
|
||||
book: string;
|
||||
page: number;
|
||||
location_text?: string;
|
||||
}): Promise<Bookmark> => {
|
||||
const bookmark = await annotationsApi.createBookmark(data);
|
||||
dispatch({ type: "ADD_BOOKMARK", payload: bookmark });
|
||||
return bookmark;
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const addNote = useCallback(
|
||||
async (data: {
|
||||
book: string;
|
||||
page: number;
|
||||
location_text?: string;
|
||||
content: string;
|
||||
}): Promise<Note> => {
|
||||
const note = await annotationsApi.createNote(data);
|
||||
dispatch({ type: "ADD_NOTE", payload: note });
|
||||
return note;
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const editNote = useCallback(
|
||||
async (id: string, content: string): Promise<Note> => {
|
||||
const updated = await annotationsApi.updateNote(id, { content });
|
||||
dispatch({ type: "UPDATE_NOTE", payload: updated });
|
||||
return updated;
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const removeBookmark = useCallback(async (id: string) => {
|
||||
await annotationsApi.deleteBookmark(id);
|
||||
dispatch({ type: "REMOVE_BOOKMARK", payload: id });
|
||||
}, []);
|
||||
|
||||
const removeNote = useCallback(async (id: string) => {
|
||||
await annotationsApi.deleteNote(id);
|
||||
dispatch({ type: "REMOVE_NOTE", payload: id });
|
||||
}, []);
|
||||
|
||||
const setSelectedBook = useCallback((bookId: string | null) => {
|
||||
dispatch({ type: "SET_SELECTED_BOOK", payload: bookId });
|
||||
}, []);
|
||||
|
||||
// Build merged annotations list sorted by created_at desc
|
||||
const mergedAnnotations: AnnotationEntry[] = [
|
||||
...state.bookmarks.map(
|
||||
(b): AnnotationEntry => ({
|
||||
id: b.id,
|
||||
kind: "bookmark",
|
||||
book_title: b.book_title,
|
||||
book_id: b.book,
|
||||
page: b.page,
|
||||
location_text: b.location_text,
|
||||
created_at: b.created_at,
|
||||
updated_at: b.updated_at,
|
||||
})
|
||||
),
|
||||
...state.notes.map(
|
||||
(n): AnnotationEntry => ({
|
||||
id: n.id,
|
||||
kind: "note",
|
||||
book_title: n.book_title,
|
||||
book_id: n.book,
|
||||
page: n.page,
|
||||
location_text: n.location_text,
|
||||
content: n.content,
|
||||
created_at: n.created_at,
|
||||
updated_at: n.updated_at,
|
||||
})
|
||||
),
|
||||
].sort(
|
||||
(a, b) =>
|
||||
new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
|
||||
);
|
||||
|
||||
const value: AnnotationsContextValue = {
|
||||
state,
|
||||
loadBookmarks,
|
||||
loadNotes,
|
||||
addBookmark,
|
||||
addNote,
|
||||
editNote,
|
||||
removeBookmark,
|
||||
removeNote,
|
||||
setSelectedBook,
|
||||
mergedAnnotations,
|
||||
};
|
||||
|
||||
return (
|
||||
<AnnotationsContext.Provider value={value}>
|
||||
{children}
|
||||
</AnnotationsContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Hook
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export function useAnnotations(): AnnotationsContextValue {
|
||||
const context = useContext(AnnotationsContext);
|
||||
if (!context) {
|
||||
throw new Error(
|
||||
"useAnnotations must be used within an AnnotationsProvider"
|
||||
);
|
||||
}
|
||||
return context;
|
||||
}
|
||||
@@ -1,63 +0,0 @@
|
||||
import React, { createContext, useCallback, useContext, useEffect, useState } from "react";
|
||||
import api from "../api/client";
|
||||
|
||||
interface AuthContextValue {
|
||||
isAuthenticated: boolean;
|
||||
loading: boolean;
|
||||
user: { email: string } | null;
|
||||
login: (email: string, password: string) => Promise<void>;
|
||||
register: (email: string, password: string) => Promise<void>;
|
||||
logout: () => void;
|
||||
}
|
||||
|
||||
const AuthContext = createContext<AuthContextValue | null>(null);
|
||||
|
||||
export function AuthProvider({ children }: { children: React.ReactNode }) {
|
||||
const [user, setUser] = useState<{ email: string } | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const token = localStorage.getItem("access_token");
|
||||
if (token) {
|
||||
try {
|
||||
const payload = JSON.parse(atob(token.split(".")[1] ?? ""));
|
||||
setUser({ email: payload.email ?? payload.sub ?? "user" });
|
||||
} catch {
|
||||
localStorage.removeItem("access_token");
|
||||
localStorage.removeItem("refresh_token");
|
||||
}
|
||||
}
|
||||
setLoading(false);
|
||||
}, []);
|
||||
|
||||
const login = useCallback(async (email: string, password: string) => {
|
||||
const { data } = await api.post<{ access: string; refresh: string }>("/auth/token/", { email, password });
|
||||
localStorage.setItem("access_token", data.access);
|
||||
localStorage.setItem("refresh_token", data.refresh);
|
||||
const payload = JSON.parse(atob(data.access.split(".")[1] ?? ""));
|
||||
setUser({ email: payload.email ?? payload.sub ?? "user" });
|
||||
}, []);
|
||||
|
||||
const register = useCallback(async (email: string, password: string) => {
|
||||
await api.post("/auth/register/", { email, password });
|
||||
await login(email, password);
|
||||
}, [login]);
|
||||
|
||||
const logout = useCallback(() => {
|
||||
localStorage.removeItem("access_token");
|
||||
localStorage.removeItem("refresh_token");
|
||||
setUser(null);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<AuthContext.Provider value={{ isAuthenticated: !!user, loading, user, login, register, logout }}>
|
||||
{children}
|
||||
</AuthContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useAuth(): AuthContextValue {
|
||||
const ctx = useContext(AuthContext);
|
||||
if (!ctx) throw new Error("useAuth must be used within an AuthProvider");
|
||||
return ctx;
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
export { usePaginatedQuery } from "./usePaginatedQuery";
|
||||
@@ -0,0 +1,76 @@
|
||||
import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
|
||||
import type { UserProfile } from "../types/auth";
|
||||
import { fetchProfile, login as apiLogin, register as apiRegister } from "../services/authService";
|
||||
import type { LoginCredentials, RegisterData } from "../types/auth";
|
||||
|
||||
interface AuthContextValue {
|
||||
user: UserProfile | null;
|
||||
isLoading: boolean;
|
||||
login: (credentials: LoginCredentials) => Promise<void>;
|
||||
register: (data: RegisterData) => Promise<void>;
|
||||
logout: () => void;
|
||||
refreshProfile: () => Promise<void>;
|
||||
}
|
||||
|
||||
const AuthContext = createContext<AuthContextValue | null>(null);
|
||||
|
||||
export function AuthProvider({ children }: { children: React.ReactNode }): React.ReactElement {
|
||||
const [user, setUser] = useState<UserProfile | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
const refreshProfile = useCallback(async () => {
|
||||
const token = localStorage.getItem("access_token");
|
||||
if (!token) {
|
||||
setUser(null);
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const profile = await fetchProfile();
|
||||
setUser(profile);
|
||||
} catch {
|
||||
localStorage.removeItem("access_token");
|
||||
localStorage.removeItem("refresh_token");
|
||||
setUser(null);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
refreshProfile();
|
||||
}, [refreshProfile]);
|
||||
|
||||
const login = useCallback(async (credentials: LoginCredentials) => {
|
||||
const tokens = await apiLogin(credentials);
|
||||
localStorage.setItem("access_token", tokens.access);
|
||||
localStorage.setItem("refresh_token", tokens.refresh);
|
||||
const profile = await fetchProfile();
|
||||
setUser(profile);
|
||||
}, []);
|
||||
|
||||
const register = useCallback(async (data: RegisterData) => {
|
||||
await apiRegister(data);
|
||||
// Auto-login after registration
|
||||
await login({ email: data.email, password: data.password });
|
||||
}, [login]);
|
||||
|
||||
const logout = useCallback(() => {
|
||||
localStorage.removeItem("access_token");
|
||||
localStorage.removeItem("refresh_token");
|
||||
setUser(null);
|
||||
}, []);
|
||||
|
||||
const value = useMemo<AuthContextValue>(
|
||||
() => ({ user, isLoading, login, register, logout, refreshProfile }),
|
||||
[user, isLoading, login, register, logout, refreshProfile],
|
||||
);
|
||||
|
||||
return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
|
||||
}
|
||||
|
||||
export function useAuth(): AuthContextValue {
|
||||
const ctx = useContext(AuthContext);
|
||||
if (!ctx) throw new Error("useAuth must be used within an AuthProvider");
|
||||
return ctx;
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
import { useState, useCallback } from "react";
|
||||
import api from "../services/api";
|
||||
import type { Document, PaginatedResponse } from "@cloud-reader/shared";
|
||||
|
||||
interface UseDocumentsReturn {
|
||||
documents: Document[];
|
||||
isLoading: boolean;
|
||||
error: string | null;
|
||||
totalCount: number;
|
||||
fetchDocuments: (params?: Record<string, string | number>) => Promise<void>;
|
||||
fetchDocument: (id: number) => Promise<Document | null>;
|
||||
deleteDocument: (id: number) => Promise<void>;
|
||||
}
|
||||
|
||||
export function useDocuments(): UseDocumentsReturn {
|
||||
const [documents, setDocuments] = useState<Document[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [totalCount, setTotalCount] = useState(0);
|
||||
|
||||
const fetchDocuments = useCallback(async (params?: Record<string, string | number>) => {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const { data } = await api.get<PaginatedResponse<Document>>("/documents/", { params });
|
||||
setDocuments(data.results);
|
||||
setTotalCount(data.count);
|
||||
} catch (err: unknown) {
|
||||
setError(err instanceof Error ? err.message : "Failed to fetch documents");
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const fetchDocument = useCallback(async (id: number): Promise<Document | null> => {
|
||||
try {
|
||||
const { data } = await api.get<Document>(`/documents/${id}/`);
|
||||
return data;
|
||||
} catch (err: unknown) {
|
||||
setError(err instanceof Error ? err.message : "Failed to fetch document");
|
||||
return null;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const deleteDocument = useCallback(async (id: number) => {
|
||||
await api.delete(`/documents/${id}/`);
|
||||
setDocuments((prev) => prev.filter((d) => d.id !== id));
|
||||
}, []);
|
||||
|
||||
return { documents, isLoading, error, totalCount, fetchDocuments, fetchDocument, deleteDocument };
|
||||
}
|
||||
@@ -1,69 +0,0 @@
|
||||
import { useState, useCallback, useRef, useEffect } from "react";
|
||||
import type { PaginatedResponse } from "@/types";
|
||||
|
||||
interface UsePaginatedQueryOptions<T> {
|
||||
fetchFn: (cursor?: string) => Promise<PaginatedResponse<T>>;
|
||||
}
|
||||
|
||||
interface UsePaginatedQueryResult<T> {
|
||||
items: T[];
|
||||
loading: boolean;
|
||||
error: string | null;
|
||||
hasMore: boolean;
|
||||
loadMore: () => Promise<void>;
|
||||
refresh: () => Promise<void>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Hook for paginated list fetching with infinite scroll support.
|
||||
*/
|
||||
export function usePaginatedQuery<T>({
|
||||
fetchFn,
|
||||
}: UsePaginatedQueryOptions<T>): UsePaginatedQueryResult<T> {
|
||||
const [items, setItems] = useState<T[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [nextCursor, setNextCursor] = useState<string | null>(null);
|
||||
const loadingRef = useRef(false);
|
||||
|
||||
const refresh = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const response = await fetchFn();
|
||||
setItems(response.results);
|
||||
setNextCursor(response.next);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Failed to fetch data");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [fetchFn]);
|
||||
|
||||
const loadMore = useCallback(async () => {
|
||||
if (!nextCursor || loadingRef.current) return;
|
||||
loadingRef.current = true;
|
||||
try {
|
||||
const response = await fetchFn(nextCursor);
|
||||
setItems((prev) => [...prev, ...response.results]);
|
||||
setNextCursor(response.next);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Failed to load more");
|
||||
} finally {
|
||||
loadingRef.current = false;
|
||||
}
|
||||
}, [nextCursor, fetchFn]);
|
||||
|
||||
useEffect(() => {
|
||||
refresh();
|
||||
}, [refresh]);
|
||||
|
||||
return {
|
||||
items,
|
||||
loading,
|
||||
error,
|
||||
hasMore: nextCursor !== null,
|
||||
loadMore,
|
||||
refresh,
|
||||
};
|
||||
}
|
||||
+15
-49
@@ -1,53 +1,19 @@
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import { Layout } from "@/components/layout";
|
||||
import { BookmarksNotesPage } from "@/components/annotations/BookmarksNotesPage";
|
||||
import "./styles.css";
|
||||
|
||||
function App(): React.ReactElement {
|
||||
const path = window.location.pathname;
|
||||
|
||||
// Simple client-side routing
|
||||
if (path.startsWith("/books/") && path.includes("bookmarks-notes")) {
|
||||
// /books/:id/bookmarks-notes
|
||||
const bookId = path.split("/")[2];
|
||||
return (
|
||||
<Layout title="Cloud Reader">
|
||||
<BookmarksNotesPage bookId={bookId} />
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
if (path === "/bookmarks-notes" || path === "/bookmarks-notes/") {
|
||||
return (
|
||||
<Layout title="Cloud Reader">
|
||||
<BookmarksNotesPage />
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
// Default: landing page
|
||||
return (
|
||||
<Layout title="Cloud Reader">
|
||||
<div className="page">
|
||||
<h2>Welcome to Cloud Reader</h2>
|
||||
<p>Your personal e-book reader with cross-device sync.</p>
|
||||
<div className="quick-links">
|
||||
<a href="/bookmarks-notes" className="card-link">
|
||||
<h3>Bookmarks & Notes</h3>
|
||||
<p>View and manage all your annotations</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
import App from "./App";
|
||||
import { AuthProvider } from "./hooks/useAuth";
|
||||
import "./styles/global.css";
|
||||
|
||||
const rootElement = document.getElementById("root");
|
||||
if (rootElement) {
|
||||
ReactDOM.createRoot(rootElement).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
}
|
||||
if (!rootElement) throw new Error("Root element not found");
|
||||
|
||||
ReactDOM.createRoot(rootElement).render(
|
||||
<React.StrictMode>
|
||||
<BrowserRouter>
|
||||
<AuthProvider>
|
||||
<App />
|
||||
</AuthProvider>
|
||||
</BrowserRouter>
|
||||
</React.StrictMode>,
|
||||
);
|
||||
@@ -1,57 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { booksApi } from "../api/books";
|
||||
|
||||
export function AddBookPage() {
|
||||
const navigate = useNavigate();
|
||||
const [title, setTitle] = useState("");
|
||||
const [author, setAuthor] = useState("");
|
||||
const [file, setFile] = useState<File | null>(null);
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const selected = e.target.files?.[0] ?? null;
|
||||
if (selected) {
|
||||
const ext = selected.name.split(".").pop()?.toLowerCase();
|
||||
if (ext !== "epub" && ext !== "pdf") { setError("Only EPUB and PDF files are supported."); setFile(null); return; }
|
||||
setFile(selected); setError(null);
|
||||
if (!title) setTitle(selected.name.replace(/\.(epub|pdf)$/i, ""));
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!file || !title.trim()) { setError("Title and file are required."); return; }
|
||||
setUploading(true); setError(null);
|
||||
try { await booksApi.uploadEBook(file, title.trim(), author.trim()); navigate("/"); }
|
||||
catch (err) { setError(err instanceof Error ? err.message : "Upload failed."); }
|
||||
finally { setUploading(false); }
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ maxWidth: 500, margin: "0 auto", padding: 16, minHeight: "100vh", background: "#f8f9fa" }}>
|
||||
<header style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 24, padding: "16px 0", borderBottom: "1px solid #eee" }}>
|
||||
<button onClick={() => navigate("/")} style={{ padding: "8px 16px", borderRadius: 6, border: "1px solid #ddd", background: "#fff", cursor: "pointer", fontSize: 14 }}>← Back</button>
|
||||
<h1 style={{ fontSize: 24, fontWeight: 700, color: "#1a1a2e", margin: 0 }}>Add Book</h1>
|
||||
</header>
|
||||
<form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: 20 }}>
|
||||
{error && <div style={{ background: "#fde8e8", padding: 12, borderRadius: 6, color: "#e74c3c", fontSize: 14 }}>{error}</div>}
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
|
||||
<label style={{ fontSize: 14, fontWeight: 600, color: "#555" }}>File (EPUB or PDF) *</label>
|
||||
<input type="file" accept=".epub,.pdf" onChange={handleFileChange} style={{ padding: "10px 0" }} />
|
||||
{file && <p style={{ fontSize: 13, color: "#666", marginTop: 4 }}>Selected: {file.name}</p>}
|
||||
</div>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
|
||||
<label style={{ fontSize: 14, fontWeight: 600, color: "#555" }}>Title *</label>
|
||||
<input type="text" value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Book title" style={{ padding: "10px 12px", borderRadius: 6, border: "1px solid #ddd", fontSize: 16, outline: "none" }} />
|
||||
</div>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
|
||||
<label style={{ fontSize: 14, fontWeight: 600, color: "#555" }}>Author</label>
|
||||
<input type="text" value={author} onChange={(e) => setAuthor(e.target.value)} placeholder="Author name" style={{ padding: "10px 12px", borderRadius: 6, border: "1px solid #ddd", fontSize: 16, outline: "none" }} />
|
||||
</div>
|
||||
<button type="submit" disabled={uploading} style={{ padding: "12px 24px", borderRadius: 8, border: "none", background: "#1a1a2e", color: "#fff", fontSize: 16, fontWeight: 600, cursor: "pointer", opacity: uploading ? 0.6 : 1, marginTop: 8 }}>{uploading ? "Uploading..." : "Upload Book"}</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,57 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
|
||||
function AuthForm({ isLogin, onToggle }: { isLogin: boolean; onToggle: () => void }) {
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [confirmPassword, setConfirmPassword] = useState("");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const { login, register } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault(); setError(null);
|
||||
if (!isLogin && password !== confirmPassword) { setError("Passwords do not match."); return; }
|
||||
setLoading(true);
|
||||
try {
|
||||
if (isLogin) await login(email, password);
|
||||
else await register(email, password);
|
||||
navigate("/");
|
||||
} catch (err) { setError(err instanceof Error ? err.message : isLogin ? "Login failed" : "Registration failed"); }
|
||||
finally { setLoading(false); }
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ display: "flex", justifyContent: "center", alignItems: "center", minHeight: "100vh", background: "#f8f9fa", padding: 16 }}>
|
||||
<div style={{ width: "100%", maxWidth: 400, background: "#fff", borderRadius: 12, padding: 32, boxShadow: "0 2px 16px rgba(0,0,0,0.08)" }}>
|
||||
<h1 style={{ fontSize: 28, fontWeight: 700, color: "#1a1a2e", textAlign: "center", marginBottom: 4 }}>Cloud Reader</h1>
|
||||
<h2 style={{ fontSize: 16, color: "#888", textAlign: "center", marginBottom: 24, fontWeight: 400 }}>{isLogin ? "Sign In" : "Create Account"}</h2>
|
||||
<form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: 16 }}>
|
||||
{error && <div style={{ background: "#fde8e8", padding: 12, borderRadius: 6, color: "#e74c3c", fontSize: 14 }}>{error}</div>}
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
|
||||
<label style={{ fontSize: 14, fontWeight: 600, color: "#555" }}>Email</label>
|
||||
<input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="you@example.com" required style={{ padding: "10px 12px", borderRadius: 6, border: "1px solid #ddd", fontSize: 16, outline: "none" }} />
|
||||
</div>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
|
||||
<label style={{ fontSize: 14, fontWeight: 600, color: "#555" }}>Password</label>
|
||||
<input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="At least 8 characters" required minLength={8} style={{ padding: "10px 12px", borderRadius: 6, border: "1px solid #ddd", fontSize: 16, outline: "none" }} />
|
||||
</div>
|
||||
{!isLogin && <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
|
||||
<label style={{ fontSize: 14, fontWeight: 600, color: "#555" }}>Confirm Password</label>
|
||||
<input type="password" value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} placeholder="Repeat your password" required minLength={8} style={{ padding: "10px 12px", borderRadius: 6, border: "1px solid #ddd", fontSize: 16, outline: "none" }} />
|
||||
</div>}
|
||||
<button type="submit" disabled={loading} style={{ padding: "12px 24px", borderRadius: 8, border: "none", background: "#1a1a2e", color: "#fff", fontSize: 16, fontWeight: 600, cursor: "pointer", opacity: loading ? 0.6 : 1, marginTop: 8 }}>{loading ? (isLogin ? "Signing in..." : "Creating account...") : (isLogin ? "Sign In" : "Create Account")}</button>
|
||||
</form>
|
||||
<p style={{ textAlign: "center", marginTop: 20, color: "#888", fontSize: 14 }}>
|
||||
{isLogin ? "Don't have an account? " : "Already have an account? "}
|
||||
<button onClick={onToggle} style={{ background: "none", border: "none", color: "#1a1a2e", fontWeight: 600, cursor: "pointer", fontSize: 14, textDecoration: "underline" }}>{isLogin ? "Register" : "Sign In"}</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function LoginPage({ onToggle }: { onToggle: () => void }) { return <AuthForm isLogin={true} onToggle={onToggle} />; }
|
||||
export function RegisterPage({ onToggle }: { onToggle: () => void }) { return <AuthForm isLogin={false} onToggle={onToggle} />; }
|
||||
@@ -0,0 +1,100 @@
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import type { Collection } from "@cloud-reader/shared";
|
||||
import api from "../services/api";
|
||||
|
||||
export default function CollectionsPage(): React.ReactElement {
|
||||
const [collections, setCollections] = useState<Collection[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [showCreate, setShowCreate] = useState(false);
|
||||
const [newName, setNewName] = useState("");
|
||||
const [newDesc, setNewDesc] = useState("");
|
||||
|
||||
const fetchCollections = useCallback(async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const { data } = await api.get<{ results: Collection[] }>("/collections/");
|
||||
setCollections(data.results || data as unknown as Collection[]);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchCollections();
|
||||
}, [fetchCollections]);
|
||||
|
||||
const handleCreate = async (e: React.FormEvent): Promise<void> => {
|
||||
e.preventDefault();
|
||||
await api.post("/collections/", { name: newName, description: newDesc });
|
||||
setNewName("");
|
||||
setNewDesc("");
|
||||
setShowCreate(false);
|
||||
fetchCollections();
|
||||
};
|
||||
|
||||
const handleDelete = async (id: number): Promise<void> => {
|
||||
if (!confirm("Delete this collection?")) return;
|
||||
await api.delete(`/collections/${id}/`);
|
||||
fetchCollections();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="layout">
|
||||
<header className="topbar">
|
||||
<Link to="/library" className="btn-secondary">← Library</Link>
|
||||
<h1 className="logo">Collections</h1>
|
||||
<button onClick={() => setShowCreate(true)} className="btn-primary">+ New Collection</button>
|
||||
</header>
|
||||
|
||||
<main className="content">
|
||||
{showCreate && (
|
||||
<form onSubmit={handleCreate} className="create-collection-form">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Collection name"
|
||||
value={newName}
|
||||
onChange={(e) => setNewName(e.target.value)}
|
||||
required
|
||||
autoFocus
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Description (optional)"
|
||||
value={newDesc}
|
||||
onChange={(e) => setNewDesc(e.target.value)}
|
||||
/>
|
||||
<div className="form-actions">
|
||||
<button type="submit" className="btn-primary">Create</button>
|
||||
<button type="button" onClick={() => setShowCreate(false)} className="btn-secondary">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
|
||||
{isLoading ? (
|
||||
<div className="loading">Loading collections...</div>
|
||||
) : collections.length === 0 ? (
|
||||
<div className="empty-state">
|
||||
<p>No collections yet. Group your documents into collections!</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="collection-list">
|
||||
{collections.map((col) => (
|
||||
<div key={col.id} className="collection-card">
|
||||
<div className="collection-info">
|
||||
<h3>{col.name}</h3>
|
||||
<p className="collection-desc">{col.description}</p>
|
||||
<span className="collection-count">{col.document_count} document{col.document_count !== 1 ? "s" : ""}</span>
|
||||
</div>
|
||||
<div className="collection-actions">
|
||||
<Link to={`/collections/${col.id}`} className="btn-secondary">View</Link>
|
||||
<button onClick={() => handleDelete(col.id)} className="btn-danger">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
import { Link, useNavigate, useParams } from "react-router-dom";
|
||||
import type { DocumentDetail } from "@cloud-reader/shared";
|
||||
import api from "../services/api";
|
||||
|
||||
export default function DocumentPage(): React.ReactElement {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const navigate = useNavigate();
|
||||
const [doc, setDoc] = useState<DocumentDetail | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
const fetchDoc = useCallback(async () => {
|
||||
if (!id) return;
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const { data } = await api.get<DocumentDetail>(`/documents/${id}/`);
|
||||
setDoc(data);
|
||||
} catch {
|
||||
navigate("/library");
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, [id, navigate]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchDoc();
|
||||
}, [fetchDoc]);
|
||||
|
||||
const handleDelete = async (): Promise<void> => {
|
||||
if (!id || !confirm("Delete this document?")) return;
|
||||
await api.delete(`/documents/${id}/`);
|
||||
navigate("/library");
|
||||
};
|
||||
|
||||
if (isLoading) return <div className="loading">Loading document...</div>;
|
||||
if (!doc) return <div className="not-found">Document not found</div>;
|
||||
|
||||
return (
|
||||
<div className="layout">
|
||||
<header className="topbar">
|
||||
<Link to="/library" className="btn-secondary">← Back</Link>
|
||||
<h1 className="logo">{doc.title}</h1>
|
||||
<div className="topbar-right">
|
||||
<button onClick={handleDelete} className="btn-danger">Delete</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="content document-detail">
|
||||
<div className="doc-header">
|
||||
<div className="doc-cover-large">
|
||||
{doc.cover_url ? (
|
||||
<img src={doc.cover_url} alt={doc.title} />
|
||||
) : (
|
||||
<div className="doc-cover-placeholder-large">{doc.file_type.toUpperCase()}</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="doc-metadata">
|
||||
<h2>{doc.title}</h2>
|
||||
{doc.author && <p className="doc-author">by {doc.author}</p>}
|
||||
<p className="doc-description">{doc.description}</p>
|
||||
<div className="doc-stats">
|
||||
<span>Type: {doc.file_type}</span>
|
||||
<span>Size: {(doc.file_size / 1024 / 1024).toFixed(1)} MB</span>
|
||||
{doc.page_count && <span>Pages: {doc.page_count}</span>}
|
||||
<span>Uploaded: {new Date(doc.uploaded_at).toLocaleDateString()}</span>
|
||||
</div>
|
||||
{doc.tags.length > 0 && (
|
||||
<div className="doc-tags">
|
||||
{doc.tags.map((tag) => (
|
||||
<span key={tag} className="tag">{tag}</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<Link to={`/read/${doc.id}`} className="btn-primary">Start Reading</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{doc.recent_highlights.length > 0 && (
|
||||
<section className="recent-highlights">
|
||||
<h3>Recent Highlights</h3>
|
||||
{doc.recent_highlights.map((hl) => (
|
||||
<div key={hl.id} className="highlight-card" style={{ borderLeftColor: hl.color }}>
|
||||
<p className="highlight-text">{hl.text}</p>
|
||||
<span className="highlight-page">Page {hl.page}</span>
|
||||
</div>
|
||||
))}
|
||||
</section>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,61 +0,0 @@
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { booksApi } from "../api/books";
|
||||
import type { EBookListItem } from "../types/book";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
|
||||
export function LibraryPage() {
|
||||
const [books, setBooks] = useState<EBookListItem[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const { logout } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const loadBooks = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const data = await booksApi.getEBooks();
|
||||
setBooks(data);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Failed to load library");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => { void loadBooks(); }, [loadBooks]);
|
||||
|
||||
return (
|
||||
<div style={{ maxWidth: 800, margin: "0 auto", padding: 16, minHeight: "100vh", background: "#f8f9fa" }}>
|
||||
<header style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 24, padding: "16px 0", borderBottom: "1px solid #eee", flexWrap: "wrap", gap: 8 }}>
|
||||
<h1 style={{ fontSize: 24, fontWeight: 700, color: "#1a1a2e" }}>My Library</h1>
|
||||
<div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
|
||||
<button onClick={() => navigate("/add")} style={{ padding: "10px 20px", borderRadius: 8, border: "none", background: "#1a1a2e", color: "#fff", fontSize: 14, fontWeight: 600, cursor: "pointer" }}>+ Add Book</button>
|
||||
<button onClick={() => navigate("/settings")} style={{ padding: "10px 20px", borderRadius: 8, border: "1px solid #ddd", background: "#fff", color: "#333", fontSize: 14, cursor: "pointer" }}>Settings</button>
|
||||
<button onClick={() => navigate("/bookmarks-notes")} style={{ padding: "10px 20px", borderRadius: 8, border: "1px solid #ddd", background: "#fff", color: "#333", fontSize: 14, cursor: "pointer" }}>Bookmarks</button>
|
||||
<button onClick={logout} style={{ padding: "10px 20px", borderRadius: 8, border: "1px solid #e74c3c", background: "#fff", color: "#e74c3c", fontSize: 14, cursor: "pointer" }}>Logout</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{error && <div style={{ background: "#fde8e8", padding: 16, borderRadius: 8, marginBottom: 16, textAlign: "center" }}><p>{error}</p><button onClick={loadBooks} style={{ marginTop: 8, padding: "8px 16px", border: "none", borderRadius: 6, background: "#e74c3c", color: "#fff", cursor: "pointer" }}>Retry</button></div>}
|
||||
{loading && books.length === 0 && <div style={{ textAlign: "center", padding: "60px 20px" }}><p>Loading your library...</p></div>}
|
||||
{!loading && !error && books.length === 0 && <div style={{ textAlign: "center", padding: "60px 20px" }}><p style={{ fontSize: 20, color: "#666", marginBottom: 8 }}>Your library is empty</p><p style={{ color: "#999", marginBottom: 20 }}>Add a book to get started</p><button onClick={() => navigate("/add")} style={{ padding: "10px 20px", borderRadius: 8, border: "none", background: "#1a1a2e", color: "#fff", fontSize: 14, fontWeight: 600, cursor: "pointer" }}>Add Your First Book</button></div>}
|
||||
|
||||
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: 16 }}>
|
||||
{books.map((book) => (
|
||||
<div key={book.id} onClick={() => navigate(`/reader/${book.id}`)} style={{ background: "#fff", borderRadius: 12, overflow: "hidden", boxShadow: "0 2px 8px rgba(0,0,0,0.06)", cursor: "pointer" }}>
|
||||
<div style={{ height: 180, background: "#f0f0f0", display: "flex", alignItems: "center", justifyContent: "center" }}>
|
||||
{book.cover_image ? <img src={book.cover_image} alt={book.title} style={{ width: "100%", height: "100%", objectFit: "cover" }} /> : <span style={{ fontSize: 48 }}>📖</span>}
|
||||
</div>
|
||||
<div style={{ padding: 12 }}>
|
||||
<h3 style={{ fontSize: 14, fontWeight: 600, color: "#1a1a2e", marginBottom: 4, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{book.title}</h3>
|
||||
<p style={{ fontSize: 12, color: "#888", marginBottom: 8 }}>{book.author || "Unknown Author"}</p>
|
||||
{book.progress !== null && <div style={{ width: "100%", height: 4, background: "#eee", borderRadius: 2, overflow: "hidden" }}><div style={{ height: "100%", background: "#1a1a2e", borderRadius: 2, width: `${Math.min(book.progress, 100)}%` }} /></div>}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { useAuth } from "../hooks/useAuth";
|
||||
import { useDocuments } from "../hooks/useDocuments";
|
||||
|
||||
export default function LibraryPage(): React.ReactElement {
|
||||
const { user, logout } = useAuth();
|
||||
const { documents, isLoading, totalCount, fetchDocuments } = useDocuments();
|
||||
const [search, setSearch] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
fetchDocuments();
|
||||
}, [fetchDocuments]);
|
||||
|
||||
const filtered = documents.filter(
|
||||
(d) =>
|
||||
d.title.toLowerCase().includes(search.toLowerCase()) ||
|
||||
(d.author && d.author.toLowerCase().includes(search.toLowerCase())),
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="layout">
|
||||
<header className="topbar">
|
||||
<h1 className="logo">Cloud Reader</h1>
|
||||
<div className="topbar-right">
|
||||
<span className="user-greeting">Hi, {user?.display_name || user?.email}</span>
|
||||
<Link to="/settings" className="btn-secondary">Settings</Link>
|
||||
<button onClick={logout} className="btn-secondary">Logout</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="content">
|
||||
<div className="library-header">
|
||||
<h2>My Library ({totalCount})</h2>
|
||||
<Link to="/upload" className="btn-primary">Upload Document</Link>
|
||||
</div>
|
||||
|
||||
<div className="search-bar">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search by title or author..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="loading">Loading documents...</div>
|
||||
) : filtered.length === 0 ? (
|
||||
<div className="empty-state">
|
||||
<p>No documents yet. Upload your first document to start reading!</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="document-grid">
|
||||
{filtered.map((doc) => (
|
||||
<Link to={`/documents/${doc.id}`} key={doc.id} className="document-card">
|
||||
<div className="doc-cover">
|
||||
{doc.cover_url ? (
|
||||
<img src={doc.cover_url} alt={doc.title} />
|
||||
) : (
|
||||
<div className="doc-cover-placeholder">{doc.file_type.toUpperCase()}</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="doc-info">
|
||||
<h3>{doc.title}</h3>
|
||||
{doc.author && <p className="doc-author">{doc.author}</p>}
|
||||
<div className="doc-meta">
|
||||
<span className="doc-type">{doc.file_type}</span>
|
||||
<span className="doc-size">{(doc.file_size / 1024 / 1024).toFixed(1)} MB</span>
|
||||
{doc.page_count && <span className="doc-pages">{doc.page_count} pages</span>}
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
import React, { FormEvent, useState } from "react";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { useAuth } from "../hooks/useAuth";
|
||||
|
||||
export default function LoginPage(): React.ReactElement {
|
||||
const { login } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const handleSubmit = async (e: FormEvent): Promise<void> => {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
setSubmitting(true);
|
||||
try {
|
||||
await login({ email, password });
|
||||
navigate("/library");
|
||||
} catch (err: unknown) {
|
||||
setError(err instanceof Error ? err.message : "Login failed");
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="auth-page">
|
||||
<div className="auth-card">
|
||||
<h1>Cloud Reader</h1>
|
||||
<h2>Sign In</h2>
|
||||
{error && <div className="error-message">{error}</div>}
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="form-group">
|
||||
<label htmlFor="email">Email</label>
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="password">Password</label>
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<button type="submit" disabled={submitting} className="btn-primary">
|
||||
{submitting ? "Signing in..." : "Sign In"}
|
||||
</button>
|
||||
</form>
|
||||
<p className="auth-link">
|
||||
Don't have an account? <Link to="/register">Register</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,64 +0,0 @@
|
||||
import React, { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import { booksApi } from "../api/books";
|
||||
import type { EBookDetail } from "../types/book";
|
||||
|
||||
export function ReaderPage() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const navigate = useNavigate();
|
||||
const [book, setBook] = useState<EBookDetail | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const progressTimer = useRef<ReturnType<typeof setInterval> | null>(null);
|
||||
const scrollRef = useRef<HTMLDivElement | null>(null);
|
||||
const bookId = Number(id);
|
||||
|
||||
const saveProgress = useCallback(async () => {
|
||||
if (!scrollRef.current || !book) return;
|
||||
const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
|
||||
const position = Math.min(100, Math.round((scrollTop / (scrollHeight - clientHeight)) * 100));
|
||||
try { await booksApi.updateProgress(bookId, { current_position: position }); } catch { /* silent */ }
|
||||
}, [bookId, book]);
|
||||
|
||||
useEffect(() => {
|
||||
const loadBook = async () => {
|
||||
setLoading(true); setError(null);
|
||||
try {
|
||||
const data = await booksApi.getEBook(bookId);
|
||||
setBook(data);
|
||||
document.title = data.title;
|
||||
} catch (err) { setError(err instanceof Error ? err.message : "Failed to load book"); }
|
||||
finally { setLoading(false); }
|
||||
};
|
||||
void loadBook();
|
||||
return () => { document.title = "Cloud Reader"; };
|
||||
}, [bookId]);
|
||||
|
||||
useEffect(() => {
|
||||
progressTimer.current = setInterval(() => { void saveProgress(); }, 5000);
|
||||
return () => { if (progressTimer.current) clearInterval(progressTimer.current); };
|
||||
}, [saveProgress]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleBeforeUnload = () => { void saveProgress(); };
|
||||
window.addEventListener("beforeunload", handleBeforeUnload);
|
||||
return () => window.removeEventListener("beforeunload", handleBeforeUnload);
|
||||
}, [saveProgress]);
|
||||
|
||||
if (loading) return <div style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "100vh", color: "#888" }}><p>Loading book...</p></div>;
|
||||
if (error) return <div style={{ display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", height: "100vh", gap: 16 }}><p style={{ color: "#e74c3c", fontSize: 16 }}>{error}</p><button onClick={() => navigate("/")} style={{ padding: "8px 16px", borderRadius: 6, border: "1px solid #ddd", background: "#fff", cursor: "pointer" }}>← Back to Library</button></div>;
|
||||
if (!book) return null;
|
||||
|
||||
return (
|
||||
<div style={{ display: "flex", flexDirection: "column", height: "100vh", background: "#fff" }}>
|
||||
<header style={{ display: "flex", alignItems: "center", padding: "12px 16px", borderBottom: "1px solid #eee", gap: 12, flexShrink: 0 }}>
|
||||
<button onClick={() => navigate("/")} style={{ padding: "8px 16px", borderRadius: 6, border: "1px solid #ddd", background: "#fff", cursor: "pointer", fontSize: 14 }}>← Library</button>
|
||||
<div style={{ flex: 1 }}><h1 style={{ fontSize: 18, fontWeight: 600, color: "#1a1a2e", margin: 0 }}>{book.title}</h1><p style={{ fontSize: 14, color: "#888", margin: "4px 0 0" }}>{book.author}</p></div>
|
||||
<button onClick={() => navigate(`/bookmarks-notes/${bookId}`)} style={{ padding: "8px 16px", borderRadius: 6, border: "1px solid #ddd", background: "#fff", cursor: "pointer", fontSize: 14 }}>📑 Bookmarks & Notes</button>
|
||||
</header>
|
||||
<div ref={scrollRef} style={{ flex: 1, overflow: "auto", background: "#fafafa" }}>
|
||||
{book.file_url ? <iframe src={book.file_url} style={{ width: "100%", height: "100%", border: "none" }} title={book.title} /> : <div style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "100%", color: "#888" }}><p>No file available.</p></div>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
import type { DocumentDetail } from "@cloud-reader/shared";
|
||||
import api from "../services/api";
|
||||
|
||||
export default function ReaderPage(): React.ReactElement {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const [doc, setDoc] = useState<DocumentDetail | null>(null);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
|
||||
const fetchDoc = useCallback(async () => {
|
||||
if (!id) return;
|
||||
const { data } = await api.get<DocumentDetail>(`/documents/${id}/`);
|
||||
setDoc(data);
|
||||
setCurrentPage(data.current_page || 1);
|
||||
}, [id]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchDoc();
|
||||
}, [fetchDoc]);
|
||||
|
||||
const updateProgress = useCallback(async (page: number) => {
|
||||
if (!id) return;
|
||||
setCurrentPage(page);
|
||||
try {
|
||||
await api.post(`/reading/progress/`, {
|
||||
document: Number(id),
|
||||
current_page: page,
|
||||
total_pages: doc?.total_pages || 0,
|
||||
});
|
||||
} catch {
|
||||
// Silently fail — reading progress is non-critical
|
||||
}
|
||||
}, [id, doc?.total_pages]);
|
||||
|
||||
if (!doc) return <div className="loading">Loading reader...</div>;
|
||||
|
||||
return (
|
||||
<div className="reader-layout">
|
||||
<header className="reader-topbar">
|
||||
<Link to={`/documents/${id}`} className="btn-secondary">← Back</Link>
|
||||
<span className="reader-title">{doc.title}</span>
|
||||
<span className="reader-page-info">
|
||||
Page {currentPage} of {doc.total_pages || "?"}
|
||||
</span>
|
||||
</header>
|
||||
|
||||
<main className="reader-content">
|
||||
<div className="reader-viewport">
|
||||
<p className="reader-placeholder">
|
||||
Reader view for <strong>{doc.title}</strong>.<br />
|
||||
File type: {doc.file_type} | Pages: {doc.page_count || "Unknown"}
|
||||
</p>
|
||||
<p className="reader-placeholder-sub">
|
||||
Document rendering will be available in a future iteration.<br />
|
||||
Your reading progress is being saved as you navigate.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer className="reader-controls">
|
||||
<button
|
||||
className="btn-secondary"
|
||||
disabled={currentPage <= 1}
|
||||
onClick={() => updateProgress(Math.max(1, currentPage - 1))}
|
||||
>
|
||||
Previous Page
|
||||
</button>
|
||||
<div className="page-input">
|
||||
<input
|
||||
type="number"
|
||||
min={1}
|
||||
max={doc.total_pages || 9999}
|
||||
value={currentPage}
|
||||
onChange={(e) => setCurrentPage(Number(e.target.value))}
|
||||
onBlur={(e) => updateProgress(Number(e.target.value))}
|
||||
onKeyDown={(e) => e.key === "Enter" && updateProgress(currentPage)}
|
||||
/>
|
||||
{doc.total_pages && <span>of {doc.total_pages}</span>}
|
||||
</div>
|
||||
<button
|
||||
className="btn-secondary"
|
||||
disabled={doc.total_pages ? currentPage >= doc.total_pages : false}
|
||||
onClick={() => updateProgress(currentPage + 1)}
|
||||
>
|
||||
Next Page
|
||||
</button>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
import React, { FormEvent, useState } from "react";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { useAuth } from "../hooks/useAuth";
|
||||
|
||||
export default function RegisterPage(): React.ReactElement {
|
||||
const { register } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
const [form, setForm] = useState({
|
||||
email: "",
|
||||
username: "",
|
||||
display_name: "",
|
||||
password: "",
|
||||
password_confirm: "",
|
||||
});
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const handleChange = (field: string) => (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setForm((prev) => ({ ...prev, [field]: e.target.value }));
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: FormEvent): Promise<void> => {
|
||||
e.preventDefault();
|
||||
if (form.password !== form.password_confirm) {
|
||||
setError("Passwords do not match");
|
||||
return;
|
||||
}
|
||||
setError(null);
|
||||
setSubmitting(true);
|
||||
try {
|
||||
await register(form);
|
||||
navigate("/library");
|
||||
} catch (err: unknown) {
|
||||
setError(err instanceof Error ? err.message : "Registration failed");
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="auth-page">
|
||||
<div className="auth-card">
|
||||
<h1>Cloud Reader</h1>
|
||||
<h2>Create Account</h2>
|
||||
{error && <div className="error-message">{error}</div>}
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="form-group">
|
||||
<label htmlFor="email">Email</label>
|
||||
<input id="email" type="email" value={form.email} onChange={handleChange("email")} required />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="username">Username</label>
|
||||
<input id="username" type="text" value={form.username} onChange={handleChange("username")} required />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="display_name">Display Name (optional)</label>
|
||||
<input id="display_name" type="text" value={form.display_name} onChange={handleChange("display_name")} />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="password">Password</label>
|
||||
<input id="password" type="password" value={form.password} onChange={handleChange("password")} required minLength={8} />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="password_confirm">Confirm Password</label>
|
||||
<input id="password_confirm" type="password" value={form.password_confirm} onChange={handleChange("password_confirm")} required />
|
||||
</div>
|
||||
<button type="submit" disabled={submitting} className="btn-primary">
|
||||
{submitting ? "Creating account..." : "Create Account"}
|
||||
</button>
|
||||
</form>
|
||||
<p className="auth-link">
|
||||
Already have an account? <Link to="/login">Sign In</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,80 +0,0 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { booksApi } from "../api/books";
|
||||
import type { ReadingSettings } from "../types/book";
|
||||
|
||||
const BG_COLORS = [
|
||||
{ value: "#ffffff", label: "White" },
|
||||
{ value: "#f4e4c1", label: "Sepia" },
|
||||
{ value: "#1a1a2e", label: "Dark" },
|
||||
{ value: "#c7edcc", label: "Green" },
|
||||
];
|
||||
|
||||
export function SettingsPage() {
|
||||
const navigate = useNavigate();
|
||||
const [settings, setSettings] = useState<ReadingSettings | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [success, setSuccess] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const load = async () => {
|
||||
try { const data = await booksApi.getSettings(); setSettings(data); }
|
||||
catch (err) { setError(err instanceof Error ? err.message : "Failed to load settings"); }
|
||||
finally { setLoading(false); }
|
||||
};
|
||||
void load();
|
||||
}, []);
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!settings) return;
|
||||
setSaving(true); setError(null); setSuccess(false);
|
||||
try { await booksApi.updateSettings(settings); setSuccess(true); setTimeout(() => setSuccess(false), 2000); }
|
||||
catch (err) { setError(err instanceof Error ? err.message : "Failed to save settings"); }
|
||||
finally { setSaving(false); }
|
||||
};
|
||||
|
||||
if (loading) return <div style={{ maxWidth: 500, margin: "0 auto", padding: 16, minHeight: "100vh", background: "#f8f9fa" }}><p>Loading settings...</p></div>;
|
||||
|
||||
return (
|
||||
<div style={{ maxWidth: 500, margin: "0 auto", padding: 16, minHeight: "100vh", background: "#f8f9fa" }}>
|
||||
<header style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 24, padding: "16px 0", borderBottom: "1px solid #eee" }}>
|
||||
<button onClick={() => navigate("/")} style={{ padding: "8px 16px", borderRadius: 6, border: "1px solid #ddd", background: "#fff", cursor: "pointer", fontSize: 14 }}>← Back</button>
|
||||
<h1 style={{ fontSize: 24, fontWeight: 700, color: "#1a1a2e", margin: 0 }}>Reading Settings</h1>
|
||||
</header>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
|
||||
{error && <div style={{ background: "#fde8e8", padding: 12, borderRadius: 6, color: "#e74c3c", fontSize: 14 }}>{error}</div>}
|
||||
{success && <div style={{ background: "#d4edda", padding: 12, borderRadius: 6, color: "#155724", fontSize: 14 }}>Settings saved!</div>}
|
||||
|
||||
{settings && <>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
|
||||
<label style={{ fontSize: 14, fontWeight: 600, color: "#555" }}>Font Size ({settings.font_size}px)</label>
|
||||
<input type="range" min={12} max={36} value={settings.font_size} onChange={(e) => setSettings({ ...settings, font_size: Number(e.target.value) })} style={{ width: "100%", cursor: "pointer" }} />
|
||||
<div style={{ display: "flex", justifyContent: "space-between", fontSize: 12, color: "#999" }}><span>12px</span><span>36px</span></div>
|
||||
</div>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
|
||||
<label style={{ fontSize: 14, fontWeight: 600, color: "#555" }}>Font Style</label>
|
||||
<select value={settings.font_style} onChange={(e) => setSettings({ ...settings, font_style: e.target.value as ReadingSettings["font_style"] })} style={{ padding: "10px 12px", borderRadius: 6, border: "1px solid #ddd", fontSize: 16, background: "#fff", outline: "none" }}>
|
||||
<option value="sans-serif">Sans Serif</option><option value="serif">Serif</option><option value="monospace">Monospace</option>
|
||||
</select>
|
||||
</div>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
|
||||
<label style={{ fontSize: 14, fontWeight: 600, color: "#555" }}>Background Color</label>
|
||||
<div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
|
||||
{BG_COLORS.map((bg) => (
|
||||
<button key={bg.value} onClick={() => setSettings({ ...settings, background_color: bg.value })}
|
||||
style={{ width: 48, height: 48, borderRadius: "50%", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", background: bg.value, border: settings.background_color === bg.value ? "3px solid #1a1a2e" : "3px solid #ddd" }}
|
||||
title={bg.label}>
|
||||
{settings.background_color === bg.value && <span style={{ fontSize: 20, fontWeight: 700, color: bg.value === "#ffffff" || bg.value === "#f4e4c1" ? "#1a1a2e" : "#fff" }}>✓</span>}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>}
|
||||
|
||||
<button onClick={handleSave} disabled={saving} style={{ padding: "12px 24px", borderRadius: 8, border: "none", background: "#1a1a2e", color: "#fff", fontSize: 16, fontWeight: 600, cursor: "pointer", opacity: saving ? 0.6 : 1, marginTop: 8 }}>{saving ? "Saving..." : "Save Settings"}</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
import React, { FormEvent, useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { useAuth } from "../hooks/useAuth";
|
||||
import { changePassword } from "../services/authService";
|
||||
|
||||
export default function SettingsPage(): React.ReactElement {
|
||||
const { user, logout } = useAuth();
|
||||
const [oldPassword, setOldPassword] = useState("");
|
||||
const [newPassword, setNewPassword] = useState("");
|
||||
const [message, setMessage] = useState<string | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const handlePasswordChange = async (e: FormEvent): Promise<void> => {
|
||||
e.preventDefault();
|
||||
setMessage(null);
|
||||
setError(null);
|
||||
try {
|
||||
await changePassword(oldPassword, newPassword);
|
||||
setMessage("Password changed successfully.");
|
||||
setOldPassword("");
|
||||
setNewPassword("");
|
||||
} catch (err: unknown) {
|
||||
setError(err instanceof Error ? err.message : "Failed to change password");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="layout">
|
||||
<header className="topbar">
|
||||
<Link to="/library" className="btn-secondary">← Library</Link>
|
||||
<h1 className="logo">Settings</h1>
|
||||
<button onClick={logout} className="btn-secondary">Logout</button>
|
||||
</header>
|
||||
|
||||
<main className="content settings-page">
|
||||
<section className="settings-section">
|
||||
<h2>Profile</h2>
|
||||
<div className="profile-info">
|
||||
<p><strong>Email:</strong> {user?.email}</p>
|
||||
<p><strong>Display Name:</strong> {user?.display_name || "Not set"}</p>
|
||||
<p><strong>Member since:</strong> {user?.date_joined ? new Date(user.date_joined).toLocaleDateString() : "N/A"}</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="settings-section">
|
||||
<h2>Change Password</h2>
|
||||
{message && <div className="success-message">{message}</div>}
|
||||
{error && <div className="error-message">{error}</div>}
|
||||
<form onSubmit={handlePasswordChange}>
|
||||
<div className="form-group">
|
||||
<label htmlFor="old_password">Current Password</label>
|
||||
<input id="old_password" type="password" value={oldPassword} onChange={(e) => setOldPassword(e.target.value)} required />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="new_password">New Password</label>
|
||||
<input id="new_password" type="password" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} required minLength={8} />
|
||||
</div>
|
||||
<button type="submit" className="btn-primary">Update Password</button>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
import axios, { AxiosError, InternalAxiosRequestConfig } from "axios";
|
||||
import type { AuthTokens } from "../types/auth";
|
||||
|
||||
const API_BASE = "/api/v1";
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: API_BASE,
|
||||
headers: { "Content-Type": "application/json" },
|
||||
});
|
||||
|
||||
// Token refresh queue to avoid multiple simultaneous refresh calls
|
||||
let isRefreshing = false;
|
||||
let failedQueue: Array<{
|
||||
resolve: (token: string) => void;
|
||||
reject: (error: unknown) => void;
|
||||
}> = [];
|
||||
|
||||
function processQueue(error: unknown, token: string | null): void {
|
||||
failedQueue.forEach((prom) => {
|
||||
if (error) {
|
||||
prom.reject(error);
|
||||
} else {
|
||||
prom.resolve(token!);
|
||||
}
|
||||
});
|
||||
failedQueue = [];
|
||||
}
|
||||
|
||||
// Attach access token to every request
|
||||
api.interceptors.request.use((config: InternalAxiosRequestConfig) => {
|
||||
const token = localStorage.getItem("access_token");
|
||||
if (token && config.headers) {
|
||||
config.headers.Authorization = `Bearer ${token}`;
|
||||
}
|
||||
return config;
|
||||
});
|
||||
|
||||
// Handle 401 — attempt token refresh
|
||||
api.interceptors.response.use(
|
||||
(response) => response,
|
||||
async (error: AxiosError) => {
|
||||
const originalRequest = error.config as InternalAxiosRequestConfig & { _retry?: boolean };
|
||||
if (error.response?.status === 401 && !originalRequest._retry) {
|
||||
if (isRefreshing) {
|
||||
return new Promise((resolve, reject) => {
|
||||
failedQueue.push({ resolve, reject });
|
||||
}).then((token) => {
|
||||
originalRequest.headers.Authorization = `Bearer ${token}`;
|
||||
return api(originalRequest);
|
||||
});
|
||||
}
|
||||
|
||||
originalRequest._retry = true;
|
||||
isRefreshing = true;
|
||||
|
||||
const refreshToken = localStorage.getItem("refresh_token");
|
||||
if (!refreshToken) {
|
||||
localStorage.removeItem("access_token");
|
||||
localStorage.removeItem("refresh_token");
|
||||
window.location.href = "/login";
|
||||
return Promise.reject(error);
|
||||
}
|
||||
|
||||
try {
|
||||
const { data } = await axios.post<AuthTokens>(`${API_BASE}/auth/token/refresh/`, {
|
||||
refresh: refreshToken,
|
||||
});
|
||||
localStorage.setItem("access_token", data.access);
|
||||
processQueue(null, data.access);
|
||||
originalRequest.headers.Authorization = `Bearer ${data.access}`;
|
||||
return api(originalRequest);
|
||||
} catch (refreshError) {
|
||||
processQueue(refreshError, null);
|
||||
localStorage.removeItem("access_token");
|
||||
localStorage.removeItem("refresh_token");
|
||||
window.location.href = "/login";
|
||||
return Promise.reject(refreshError);
|
||||
} finally {
|
||||
isRefreshing = false;
|
||||
}
|
||||
}
|
||||
return Promise.reject(error);
|
||||
},
|
||||
);
|
||||
|
||||
export default api;
|
||||
@@ -0,0 +1,29 @@
|
||||
import api from "../services/api";
|
||||
import type { LoginCredentials, RegisterData, UserProfile } from "../types/auth";
|
||||
|
||||
export async function login(credentials: LoginCredentials): Promise<{ access: string; refresh: string }> {
|
||||
const { data } = await api.post("/auth/token/", credentials);
|
||||
return data;
|
||||
}
|
||||
|
||||
export async function register(data: RegisterData): Promise<UserProfile> {
|
||||
const { data: user } = await api.post<UserProfile>("/auth/register/", data);
|
||||
return user;
|
||||
}
|
||||
|
||||
export async function fetchProfile(): Promise<UserProfile> {
|
||||
const { data } = await api.get<UserProfile>("/auth/me/");
|
||||
return data;
|
||||
}
|
||||
|
||||
export async function updateProfile(updates: Partial<UserProfile>): Promise<UserProfile> {
|
||||
const { data } = await api.patch<UserProfile>("/auth/me/", updates);
|
||||
return data;
|
||||
}
|
||||
|
||||
export async function changePassword(oldPassword: string, newPassword: string): Promise<void> {
|
||||
await api.post("/auth/change-password/", {
|
||||
old_password: oldPassword,
|
||||
new_password: newPassword,
|
||||
});
|
||||
}
|
||||
@@ -1,429 +0,0 @@
|
||||
/* ---------------------------------------------------------------------------
|
||||
Cloud Reader – Global Styles
|
||||
Minimal, clean design system for the bookmark & notes management UI.
|
||||
--------------------------------------------------------------------------- */
|
||||
|
||||
/* Reset & base */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--color-bg: #f8f9fa;
|
||||
--color-surface: #ffffff;
|
||||
--color-primary: #4f46e5;
|
||||
--color-primary-hover: #4338ca;
|
||||
--color-danger: #ef4444;
|
||||
--color-danger-hover: #dc2626;
|
||||
--color-secondary: #6b7280;
|
||||
--color-secondary-hover: #4b5563;
|
||||
--color-text: #1f2937;
|
||||
--color-text-muted: #6b7280;
|
||||
--color-border: #e5e7eb;
|
||||
--color-quote-bg: #f3f4f6;
|
||||
--radius: 8px;
|
||||
--radius-sm: 4px;
|
||||
--shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
--shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
|
||||
Ubuntu, Cantarell, sans-serif;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 16px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font);
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* App container */
|
||||
.app-container {
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.app-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 0;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.app-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.app-nav {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: var(--color-primary);
|
||||
text-decoration: none;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Main content */
|
||||
.app-main {
|
||||
min-height: 70vh;
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
|
||||
.page {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.page h2 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Quick links */
|
||||
.quick-links {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.card-link {
|
||||
display: block;
|
||||
padding: 1.25rem;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius);
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
box-shadow: var(--shadow);
|
||||
transition: box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.card-link:hover {
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.card-link h3 {
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.card-link p {
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
border: 1px solid var(--color-primary);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-primary);
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: var(--color-primary-hover);
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
padding: 0.25rem 0.625rem;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--color-surface);
|
||||
color: var(--color-secondary);
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: var(--color-bg);
|
||||
color: var(--color-secondary-hover);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: var(--color-danger);
|
||||
border-color: var(--color-danger);
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: var(--color-danger-hover);
|
||||
border-color: var(--color-danger-hover);
|
||||
}
|
||||
|
||||
.btn-block {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Annotation list */
|
||||
.annotations-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.annotation-card {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius);
|
||||
padding: 1rem;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.annotation-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.annotation-kind-badge {
|
||||
display: inline-block;
|
||||
padding: 0.125rem 0.5rem;
|
||||
border-radius: 999px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
.bookmark-badge {
|
||||
background: #dbeafe;
|
||||
color: #1d4ed8;
|
||||
}
|
||||
|
||||
.note-badge {
|
||||
background: #fef3c7;
|
||||
color: #b45309;
|
||||
}
|
||||
|
||||
.annotation-book-title {
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.annotation-page {
|
||||
font-size: 0.8125rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.annotation-date {
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-text-muted);
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.annotation-quote {
|
||||
margin: 0.5rem 0;
|
||||
padding: 0.5rem 0.75rem;
|
||||
background: var(--color-quote-bg);
|
||||
border-left: 3px solid var(--color-primary);
|
||||
border-radius: var(--radius-sm);
|
||||
font-style: italic;
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.note-content-text {
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.6;
|
||||
margin: 0.5rem 0;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.annotation-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* Loading & empty states */
|
||||
.annotations-loading,
|
||||
.annotations-empty {
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
/* Dashboard summary */
|
||||
.annotations-summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.summary-separator {
|
||||
color: var(--color-border);
|
||||
}
|
||||
|
||||
/* Add annotation modal */
|
||||
.add-annotation-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.add-annotation-modal {
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius);
|
||||
padding: 1.5rem;
|
||||
width: 90%;
|
||||
max-width: 480px;
|
||||
box-shadow: var(--shadow-lg);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
position: absolute;
|
||||
top: 0.75rem;
|
||||
right: 0.75rem;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
color: var(--color-text-muted);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.modal-close:hover {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.add-annotation-modal h3 {
|
||||
font-size: 1.125rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
/* Annotation form */
|
||||
.mode-selector {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.annotation-form {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.375rem;
|
||||
}
|
||||
|
||||
.form-textarea {
|
||||
width: 100%;
|
||||
padding: 0.625rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
font-family: var(--font);
|
||||
font-size: 0.875rem;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.form-textarea:focus {
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
.form-error {
|
||||
color: var(--color-danger);
|
||||
font-size: 0.8125rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
/* Note edit inline */
|
||||
.note-edit-form {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.note-edit-textarea {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid var(--color-primary);
|
||||
border-radius: var(--radius-sm);
|
||||
font-family: var(--font);
|
||||
font-size: 0.875rem;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.note-edit-textarea:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px var(--color-primary);
|
||||
}
|
||||
|
||||
.note-edit-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 640px) {
|
||||
.app-header {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.annotation-card-header {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.annotation-date {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user