Archived
Compare 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
|
||||
+24
-10
@@ -3,32 +3,46 @@ __pycache__/
|
||||
*.py[cod]
|
||||
*.egg-info/
|
||||
dist/
|
||||
build/
|
||||
.eggs/
|
||||
*.egg
|
||||
.venv/
|
||||
.env
|
||||
venv/
|
||||
.venv/
|
||||
*.sqlite3
|
||||
|
||||
# Node
|
||||
node_modules/
|
||||
.pnp
|
||||
.pnp.js
|
||||
yarn-error.log*
|
||||
|
||||
# Build artifacts
|
||||
dist/
|
||||
build/
|
||||
.yarn/
|
||||
yarn-error.log
|
||||
*.tsbuildinfo
|
||||
|
||||
# IDE
|
||||
.vscode/
|
||||
.idea/
|
||||
*.swp
|
||||
*.swo
|
||||
|
||||
# OS
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
|
||||
# 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
|
||||
.env.local
|
||||
.env.production
|
||||
|
||||
# Build artifacts (generated)
|
||||
frontend/dist/
|
||||
.env.development
|
||||
@@ -0,0 +1,195 @@
|
||||
# Cloud Reader
|
||||
|
||||
A modern eBook reader with web and mobile clients, powered by Django REST Framework.
|
||||
|
||||
## Monorepo Structure
|
||||
|
||||
```
|
||||
cloud-reader/
|
||||
├── 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/
|
||||
│ │ ├── 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
|
||||
```
|
||||
|
||||
## Prerequisites
|
||||
|
||||
- **Python** 3.12+
|
||||
- **Node.js** 20 LTS
|
||||
- **Yarn** 4.x
|
||||
- **PostgreSQL** 16
|
||||
- **Expo CLI** (for mobile development)
|
||||
|
||||
---
|
||||
|
||||
## Backend Setup
|
||||
|
||||
```bash
|
||||
cd backend
|
||||
|
||||
# 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
|
||||
```
|
||||
|
||||
The API will be available at `http://localhost:8000/`. Browse the API at `http://localhost:8000/api/schema/swagger-ui/`.
|
||||
|
||||
### Backend Tests
|
||||
|
||||
```bash
|
||||
cd backend
|
||||
pytest
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 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)
|
||||
@@ -0,0 +1,15 @@
|
||||
# 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=cloud_reader
|
||||
DB_PASSWORD=cloud_reader
|
||||
DB_HOST=localhost
|
||||
DB_PORT=5432
|
||||
|
||||
CORS_ALLOWED_ORIGINS=http://localhost:5173,http://localhost:3000
|
||||
ALLOWED_HOSTS=localhost,127.0.0.1
|
||||
@@ -0,0 +1,18 @@
|
||||
FROM python:3.12-slim
|
||||
|
||||
ENV PYTHONDONTWRITEBYTECODE=1 \
|
||||
PYTHONUNBUFFERED=1 \
|
||||
DJANGO_SETTINGS_MODULE=config.settings
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
COPY requirements/production.txt /app/requirements/
|
||||
RUN pip install --no-cache-dir -r requirements/production.txt
|
||||
|
||||
COPY . /app
|
||||
|
||||
RUN python manage.py collectstatic --noinput
|
||||
|
||||
EXPOSE 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)
|
||||
@@ -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,
|
||||
)
|
||||
@@ -1,12 +1,12 @@
|
||||
from __future__ import annotations
|
||||
|
||||
from django.urls import include, path
|
||||
from rest_framework.routers import DefaultRouter
|
||||
|
||||
from books.views import BookViewSet
|
||||
from . import views
|
||||
|
||||
router = DefaultRouter()
|
||||
router.register(r"books", BookViewSet, basename="book")
|
||||
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,16 +0,0 @@
|
||||
from __future__ import annotations
|
||||
|
||||
from django.contrib import admin
|
||||
|
||||
from books.models import Book
|
||||
|
||||
|
||||
@admin.register(Book)
|
||||
class BookAdmin(admin.ModelAdmin):
|
||||
"""Admin configuration for the Book model."""
|
||||
|
||||
list_display = ["title", "author", "genre", "reading_status", "reading_progress", "owner", "updated_at"]
|
||||
list_filter = ["reading_status", "genre"]
|
||||
search_fields = ["title", "author"]
|
||||
readonly_fields = ["reading_progress", "created_at", "updated_at"]
|
||||
raw_id_fields = ["owner"]
|
||||
@@ -1,5 +0,0 @@
|
||||
from django.apps import AppConfig
|
||||
|
||||
|
||||
class BooksConfig(AppConfig):
|
||||
name = 'books'
|
||||
@@ -1,41 +0,0 @@
|
||||
# Generated by Django 6.0.5 on 2026-05-26 00:49
|
||||
|
||||
import django.db.models.deletion
|
||||
from django.conf import settings
|
||||
from django.db import migrations, models
|
||||
|
||||
|
||||
class Migration(migrations.Migration):
|
||||
|
||||
initial = True
|
||||
|
||||
dependencies = [
|
||||
migrations.swappable_dependency(settings.AUTH_USER_MODEL),
|
||||
]
|
||||
|
||||
operations = [
|
||||
migrations.CreateModel(
|
||||
name='Book',
|
||||
fields=[
|
||||
('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
|
||||
('title', models.CharField(max_length=500, verbose_name='Title')),
|
||||
('author', models.CharField(max_length=500, verbose_name='Author')),
|
||||
('genre', models.CharField(blank=True, default='', max_length=200, verbose_name='Genre')),
|
||||
('description', models.TextField(blank=True, default='', verbose_name='Description')),
|
||||
('cover_image_url', models.URLField(blank=True, default='', verbose_name='Cover Image URL')),
|
||||
('isbn', models.CharField(blank=True, default='', max_length=20, verbose_name='ISBN')),
|
||||
('total_pages', models.PositiveIntegerField(default=0, verbose_name='Total Pages')),
|
||||
('current_page', models.PositiveIntegerField(default=0, verbose_name='Current Page')),
|
||||
('reading_status', models.CharField(choices=[('not_started', 'Not Started'), ('reading', 'Reading'), ('finished', 'Finished'), ('dnf', 'Did Not Finish')], default='not_started', max_length=20, verbose_name='Reading Status')),
|
||||
('created_at', models.DateTimeField(auto_now_add=True, verbose_name='Created At')),
|
||||
('updated_at', models.DateTimeField(auto_now=True, verbose_name='Updated At')),
|
||||
('owner', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='books', to=settings.AUTH_USER_MODEL, verbose_name='Owner')),
|
||||
],
|
||||
options={
|
||||
'verbose_name': 'Book',
|
||||
'verbose_name_plural': 'Books',
|
||||
'ordering': ['-updated_at'],
|
||||
'indexes': [models.Index(fields=['owner', 'reading_status'], name='books_book_owner_i_424622_idx'), models.Index(fields=['owner', 'title'], name='books_book_owner_i_350794_idx'), models.Index(fields=['owner', 'author'], name='books_book_owner_i_f90626_idx')],
|
||||
},
|
||||
),
|
||||
]
|
||||
@@ -1,66 +0,0 @@
|
||||
from __future__ import annotations
|
||||
|
||||
from django.db import models
|
||||
from django.utils.translation import gettext_lazy as _
|
||||
|
||||
|
||||
class ReadingStatus(models.TextChoices):
|
||||
"""Enumeration of possible reading statuses for a book."""
|
||||
|
||||
NOT_STARTED = "not_started", _("Not Started")
|
||||
READING = "reading", _("Reading")
|
||||
FINISHED = "finished", _("Finished")
|
||||
DNF = "dnf", _("Did Not Finish")
|
||||
|
||||
|
||||
class Book(models.Model):
|
||||
"""Represents a book in the user's library."""
|
||||
|
||||
title = models.CharField(max_length=500, verbose_name=_("Title"))
|
||||
author = models.CharField(max_length=500, verbose_name=_("Author"))
|
||||
genre = models.CharField(max_length=200, blank=True, default="", verbose_name=_("Genre"))
|
||||
description = models.TextField(blank=True, default="", verbose_name=_("Description"))
|
||||
cover_image_url = models.URLField(blank=True, default="", verbose_name=_("Cover Image URL"))
|
||||
isbn = models.CharField(max_length=20, blank=True, default="", verbose_name=_("ISBN"))
|
||||
total_pages = models.PositiveIntegerField(default=0, verbose_name=_("Total Pages"))
|
||||
current_page = models.PositiveIntegerField(default=0, verbose_name=_("Current Page"))
|
||||
reading_status = models.CharField(
|
||||
max_length=20,
|
||||
choices=ReadingStatus.choices,
|
||||
default=ReadingStatus.NOT_STARTED,
|
||||
verbose_name=_("Reading Status"),
|
||||
)
|
||||
owner = models.ForeignKey(
|
||||
"auth.User",
|
||||
on_delete=models.CASCADE,
|
||||
related_name="books",
|
||||
verbose_name=_("Owner"),
|
||||
)
|
||||
created_at = models.DateTimeField(auto_now_add=True, verbose_name=_("Created At"))
|
||||
updated_at = models.DateTimeField(auto_now=True, verbose_name=_("Updated At"))
|
||||
|
||||
class Meta:
|
||||
ordering = ["-updated_at"]
|
||||
verbose_name = _("Book")
|
||||
verbose_name_plural = _("Books")
|
||||
indexes = [
|
||||
models.Index(fields=["owner", "reading_status"]),
|
||||
models.Index(fields=["owner", "title"]),
|
||||
models.Index(fields=["owner", "author"]),
|
||||
]
|
||||
|
||||
def __str__(self) -> str:
|
||||
return f"{self.title} by {self.author}"
|
||||
|
||||
@property
|
||||
def reading_progress(self) -> float:
|
||||
"""Calculate reading progress as a percentage (0.0 - 100.0)."""
|
||||
if self.total_pages == 0:
|
||||
return 0.0
|
||||
return round((self.current_page / self.total_pages) * 100, 1)
|
||||
|
||||
def mark_as_finished(self) -> None:
|
||||
"""Mark the book as finished, setting progress to 100%."""
|
||||
self.reading_status = ReadingStatus.FINISHED
|
||||
self.current_page = self.total_pages
|
||||
self.save(update_fields=["reading_status", "current_page", "updated_at"])
|
||||
@@ -1,95 +0,0 @@
|
||||
from __future__ import annotations
|
||||
|
||||
from rest_framework import serializers
|
||||
|
||||
from books.models import Book, ReadingStatus
|
||||
|
||||
|
||||
class BookListSerializer(serializers.ModelSerializer):
|
||||
"""Lightweight serializer for list views — avoids heavy field serialization."""
|
||||
|
||||
reading_progress = serializers.FloatField(read_only=True)
|
||||
|
||||
class Meta:
|
||||
model = Book
|
||||
fields = [
|
||||
"id",
|
||||
"title",
|
||||
"author",
|
||||
"genre",
|
||||
"reading_status",
|
||||
"reading_progress",
|
||||
"cover_image_url",
|
||||
"created_at",
|
||||
"updated_at",
|
||||
]
|
||||
|
||||
|
||||
class BookDetailSerializer(serializers.ModelSerializer):
|
||||
"""Full serializer for book detail views including all metadata."""
|
||||
|
||||
reading_progress = serializers.FloatField(read_only=True)
|
||||
owner = serializers.ReadOnlyField(source="owner.username")
|
||||
|
||||
class Meta:
|
||||
model = Book
|
||||
fields = [
|
||||
"id",
|
||||
"title",
|
||||
"author",
|
||||
"genre",
|
||||
"description",
|
||||
"cover_image_url",
|
||||
"isbn",
|
||||
"total_pages",
|
||||
"current_page",
|
||||
"reading_status",
|
||||
"reading_progress",
|
||||
"owner",
|
||||
"created_at",
|
||||
"updated_at",
|
||||
]
|
||||
read_only_fields = ["owner", "created_at", "updated_at", "reading_progress"]
|
||||
|
||||
def validate_title(self, value: str) -> str:
|
||||
"""Ensure title is not just whitespace."""
|
||||
stripped = value.strip()
|
||||
if not stripped:
|
||||
msg = "Title cannot be empty."
|
||||
raise serializers.ValidationError(msg)
|
||||
return stripped
|
||||
|
||||
def validate_author(self, value: str) -> str:
|
||||
"""Ensure author is not just whitespace."""
|
||||
stripped = value.strip()
|
||||
if not stripped:
|
||||
msg = "Author cannot be empty."
|
||||
raise serializers.ValidationError(msg)
|
||||
return stripped
|
||||
|
||||
def validate(self, attrs: dict) -> dict:
|
||||
"""Business rules — handles both full creates and partial updates."""
|
||||
# Resolve effective values: use provided attrs, fall back to instance
|
||||
current_total = getattr(self.instance, "total_pages", None)
|
||||
current_current = getattr(self.instance, "current_page", None)
|
||||
total_pages = attrs.get("total_pages", current_total) or 0
|
||||
current_page = attrs.get("current_page", current_current) or 0
|
||||
reading_status = attrs.get("reading_status", None)
|
||||
|
||||
if current_page > total_pages > 0:
|
||||
msg = "Current page cannot exceed total pages."
|
||||
raise serializers.ValidationError({"current_page": msg})
|
||||
|
||||
if reading_status == ReadingStatus.FINISHED:
|
||||
if total_pages > 0:
|
||||
attrs["current_page"] = total_pages
|
||||
elif self.instance and self.instance.total_pages > 0:
|
||||
attrs["current_page"] = self.instance.total_pages
|
||||
|
||||
return attrs
|
||||
|
||||
|
||||
class BookWriteSerializer(BookDetailSerializer):
|
||||
"""Alias for detail serializer — used for write operations with full validation."""
|
||||
|
||||
pass
|
||||
@@ -1,325 +0,0 @@
|
||||
"""Tests for the books app — API endpoints, models, serializers, and permissions."""
|
||||
|
||||
from __future__ import annotations
|
||||
|
||||
from django.contrib.auth.models import User
|
||||
from django.test import TestCase, override_settings
|
||||
from rest_framework import status
|
||||
from rest_framework.test import APIClient
|
||||
|
||||
from books.models import Book, ReadingStatus
|
||||
|
||||
|
||||
class BookModelTests(TestCase):
|
||||
"""Tests for the Book model."""
|
||||
|
||||
def setUp(self) -> None:
|
||||
self.user = User.objects.create_user(username="testuser", password="testpass123")
|
||||
self.book = Book.objects.create(
|
||||
title="Test Book",
|
||||
author="Test Author",
|
||||
total_pages=200,
|
||||
current_page=50,
|
||||
reading_status=ReadingStatus.READING,
|
||||
owner=self.user,
|
||||
)
|
||||
|
||||
def test_reading_progress_calculates_correctly(self) -> None:
|
||||
"""Reading progress should be (current_page / total_pages) * 100."""
|
||||
assert self.book.reading_progress == 25.0
|
||||
|
||||
def test_reading_progress_returns_zero_when_no_pages(self) -> None:
|
||||
"""When total_pages is 0, reading_progress should be 0.0."""
|
||||
book = Book.objects.create(
|
||||
title="No Pages",
|
||||
author="Author",
|
||||
total_pages=0,
|
||||
current_page=50,
|
||||
owner=self.user,
|
||||
)
|
||||
assert book.reading_progress == 0.0
|
||||
|
||||
def test_mark_as_finished_sets_progress_to_100(self) -> None:
|
||||
"""mark_as_finished should set status to FINISHED and progress to 100%."""
|
||||
self.book.mark_as_finished()
|
||||
self.book.refresh_from_db()
|
||||
assert self.book.reading_status == ReadingStatus.FINISHED
|
||||
assert self.book.current_page == self.book.total_pages
|
||||
|
||||
def test_mark_as_finished_with_zero_pages(self) -> None:
|
||||
"""mark_as_finished with total_pages=0 should set 0/0."""
|
||||
book = Book.objects.create(
|
||||
title="Empty",
|
||||
author="Author",
|
||||
total_pages=0,
|
||||
current_page=0,
|
||||
owner=self.user,
|
||||
)
|
||||
book.mark_as_finished()
|
||||
book.refresh_from_db()
|
||||
assert book.reading_status == ReadingStatus.FINISHED
|
||||
assert book.current_page == 0
|
||||
|
||||
def test_str_method(self) -> None:
|
||||
"""__str__ should return 'Title by Author'."""
|
||||
assert str(self.book) == "Test Book by Test Author"
|
||||
|
||||
|
||||
class BookAPITests(TestCase):
|
||||
"""Tests for the Book API endpoints."""
|
||||
|
||||
def setUp(self) -> None:
|
||||
self.client = APIClient()
|
||||
self.user = User.objects.create_user(username="testuser", password="testpass123")
|
||||
self.other_user = User.objects.create_user(username="other", password="testpass123")
|
||||
self.client.force_authenticate(user=self.user)
|
||||
|
||||
self.book = Book.objects.create(
|
||||
title="My Book",
|
||||
author="My Author",
|
||||
genre="Fiction",
|
||||
description="A great book",
|
||||
total_pages=200,
|
||||
current_page=50,
|
||||
reading_status=ReadingStatus.READING,
|
||||
owner=self.user,
|
||||
)
|
||||
# Other user's book (should not be visible)
|
||||
Book.objects.create(
|
||||
title="Other Book",
|
||||
author="Other Author",
|
||||
total_pages=100,
|
||||
owner=self.other_user,
|
||||
)
|
||||
|
||||
# --- List ---
|
||||
|
||||
def test_list_books_returns_owned_books_only(self) -> None:
|
||||
"""GET /api/books/ should only return books owned by the current user."""
|
||||
resp = self.client.get("/api/books/")
|
||||
assert resp.status_code == status.HTTP_200_OK
|
||||
assert resp.data["count"] == 1
|
||||
assert resp.data["results"][0]["title"] == "My Book"
|
||||
|
||||
def test_list_books_requires_authentication(self) -> None:
|
||||
"""GET /api/books/ without auth should return 403."""
|
||||
self.client.force_authenticate(user=None)
|
||||
resp = self.client.get("/api/books/")
|
||||
assert resp.status_code == status.HTTP_403_FORBIDDEN
|
||||
|
||||
# --- Create ---
|
||||
|
||||
def test_create_book_sets_owner(self) -> None:
|
||||
"""POST /api/books/ should create a book owned by the current user."""
|
||||
resp = self.client.post("/api/books/", {
|
||||
"title": "New Book",
|
||||
"author": "New Author",
|
||||
}, format="json")
|
||||
assert resp.status_code == status.HTTP_201_CREATED
|
||||
assert resp.data["owner"] == "testuser"
|
||||
assert Book.objects.filter(title="New Book", owner=self.user).exists()
|
||||
|
||||
def test_create_book_validates_required_fields(self) -> None:
|
||||
"""POST /api/books/ with missing title should fail."""
|
||||
resp = self.client.post("/api/books/", {
|
||||
"author": "Author Only",
|
||||
}, format="json")
|
||||
assert resp.status_code == status.HTTP_400_BAD_REQUEST
|
||||
|
||||
# --- Retrieve ---
|
||||
|
||||
def test_retrieve_book(self) -> None:
|
||||
"""GET /api/books/{id}/ should return full book details."""
|
||||
resp = self.client.get(f"/api/books/{self.book.id}/")
|
||||
assert resp.status_code == status.HTTP_200_OK
|
||||
assert resp.data["title"] == "My Book"
|
||||
assert resp.data["reading_progress"] == 25.0
|
||||
assert resp.data["owner"] == "testuser"
|
||||
|
||||
def test_retrieve_other_users_book_returns_404(self) -> None:
|
||||
"""GET /api/books/{other_id}/ should return 404 for another user's book."""
|
||||
other_book = Book.objects.get(title="Other Book")
|
||||
resp = self.client.get(f"/api/books/{other_book.id}/")
|
||||
assert resp.status_code == status.HTTP_404_NOT_FOUND
|
||||
|
||||
# --- Update ---
|
||||
|
||||
def test_update_book(self) -> None:
|
||||
"""PATCH /api/books/{id}/ should update book fields."""
|
||||
resp = self.client.patch(f"/api/books/{self.book.id}/", {
|
||||
"title": "Updated Title",
|
||||
"current_page": 100,
|
||||
}, format="json")
|
||||
assert resp.status_code == status.HTTP_200_OK
|
||||
assert resp.data["title"] == "Updated Title"
|
||||
assert resp.data["reading_progress"] == 50.0
|
||||
|
||||
def test_update_current_page_exceeds_total(self) -> None:
|
||||
"""PATCH with current_page > total_pages should fail."""
|
||||
resp = self.client.patch(f"/api/books/{self.book.id}/", {
|
||||
"current_page": 999,
|
||||
}, format="json")
|
||||
assert resp.status_code == status.HTTP_400_BAD_REQUEST
|
||||
|
||||
# --- Delete ---
|
||||
|
||||
def test_delete_book(self) -> None:
|
||||
"""DELETE /api/books/{id}/ should delete the book."""
|
||||
resp = self.client.delete(f"/api/books/{self.book.id}/")
|
||||
assert resp.status_code == status.HTTP_204_NO_CONTENT
|
||||
assert not Book.objects.filter(id=self.book.id).exists()
|
||||
|
||||
# --- Mark Finished ---
|
||||
|
||||
def test_mark_finished_sets_100_percent(self) -> None:
|
||||
"""POST /api/books/{id}/mark_finished/ should set progress to 100%."""
|
||||
resp = self.client.post(f"/api/books/{self.book.id}/mark_finished/")
|
||||
assert resp.status_code == status.HTTP_200_OK
|
||||
assert resp.data["reading_status"] == ReadingStatus.FINISHED
|
||||
assert resp.data["reading_progress"] == 100.0
|
||||
|
||||
def test_mark_finished_idempotent(self) -> None:
|
||||
"""Calling mark_finished twice should be safe."""
|
||||
self.client.post(f"/api/books/{self.book.id}/mark_finished/")
|
||||
resp = self.client.post(f"/api/books/{self.book.id}/mark_finished/")
|
||||
assert resp.status_code == status.HTTP_200_OK
|
||||
|
||||
def test_mark_finished_other_users_book(self) -> None:
|
||||
"""POST mark_finished on another user's book should return 404."""
|
||||
other_book = Book.objects.get(title="Other Book")
|
||||
resp = self.client.post(f"/api/books/{other_book.id}/mark_finished/")
|
||||
assert resp.status_code == status.HTTP_404_NOT_FOUND
|
||||
|
||||
# --- Stats ---
|
||||
|
||||
def test_stats_returns_counts(self) -> None:
|
||||
"""GET /api/books/stats/ should return aggregate counts."""
|
||||
resp = self.client.get("/api/books/stats/")
|
||||
assert resp.status_code == status.HTTP_200_OK
|
||||
assert resp.data["total_books"] == 1
|
||||
assert resp.data["finished"] == 0
|
||||
assert resp.data["reading"] == 1
|
||||
assert resp.data["not_started"] == 0
|
||||
|
||||
# --- Filtering & Sorting ---
|
||||
|
||||
def test_filter_by_reading_status(self) -> None:
|
||||
"""GET /api/books/?reading_status=reading should filter correctly."""
|
||||
resp = self.client.get("/api/books/", {"reading_status": "reading"})
|
||||
assert resp.status_code == status.HTTP_200_OK
|
||||
assert resp.data["count"] == 1
|
||||
|
||||
resp = self.client.get("/api/books/", {"reading_status": "finished"})
|
||||
assert resp.status_code == status.HTTP_200_OK
|
||||
assert resp.data["count"] == 0
|
||||
|
||||
def test_search_by_title(self) -> None:
|
||||
"""GET /api/books/?search=My should filter by title."""
|
||||
resp = self.client.get("/api/books/", {"search": "My"})
|
||||
assert resp.status_code == status.HTTP_200_OK
|
||||
assert resp.data["count"] == 1
|
||||
|
||||
resp = self.client.get("/api/books/", {"search": "Nonexistent"})
|
||||
assert resp.status_code == status.HTTP_200_OK
|
||||
assert resp.data["count"] == 0
|
||||
|
||||
def test_search_by_author(self) -> None:
|
||||
"""GET /api/books/?search=My should filter by author."""
|
||||
resp = self.client.get("/api/books/", {"search": "My Author"})
|
||||
assert resp.status_code == status.HTTP_200_OK
|
||||
assert resp.data["count"] == 1
|
||||
|
||||
def test_sort_by_title(self) -> None:
|
||||
"""GET /api/books/?sort_by=title should sort alphabetically."""
|
||||
Book.objects.create(title="Aardvark", author="Author", owner=self.user)
|
||||
Book.objects.create(title="Zebra", author="Author", owner=self.user)
|
||||
resp = self.client.get("/api/books/", {"sort_by": "title"})
|
||||
assert resp.status_code == status.HTTP_200_OK
|
||||
titles = [b["title"] for b in resp.data["results"]]
|
||||
assert titles == sorted(titles)
|
||||
|
||||
def test_sort_by_author_desc(self) -> None:
|
||||
"""GET /api/books/?sort_by=-author should sort by author desc."""
|
||||
resp = self.client.get("/api/books/", {"sort_by": "-author"})
|
||||
assert resp.status_code == status.HTTP_200_OK
|
||||
|
||||
# --- Pagination ---
|
||||
|
||||
def test_pagination_default_page_size(self) -> None:
|
||||
"""Books should be paginated with default page size."""
|
||||
for i in range(25):
|
||||
Book.objects.create(
|
||||
title=f"Book {i}",
|
||||
author="Author",
|
||||
owner=self.user,
|
||||
)
|
||||
resp = self.client.get("/api/books/")
|
||||
assert resp.status_code == status.HTTP_200_OK
|
||||
assert len(resp.data["results"]) == 20 # PAGE_SIZE = 20
|
||||
assert resp.data["count"] == 26 # 1 original + 25 new
|
||||
|
||||
def test_pagination_second_page(self) -> None:
|
||||
"""GET /api/books/?page=2 should return remaining items."""
|
||||
for i in range(25):
|
||||
Book.objects.create(
|
||||
title=f"Book {i}",
|
||||
author="Author",
|
||||
owner=self.user,
|
||||
)
|
||||
resp = self.client.get("/api/books/", {"page": 2})
|
||||
assert resp.status_code == status.HTTP_200_OK
|
||||
assert len(resp.data["results"]) == 6
|
||||
|
||||
|
||||
class BookSerializerTests(TestCase):
|
||||
"""Tests for serializers — validation rules."""
|
||||
|
||||
def setUp(self) -> None:
|
||||
self.user = User.objects.create_user(username="testuser", password="testpass123")
|
||||
|
||||
def test_current_page_cannot_exceed_total(self) -> None:
|
||||
"""Serializer should reject current_page > total_pages."""
|
||||
from books.serializers import BookDetailSerializer
|
||||
data = {
|
||||
"title": "Test",
|
||||
"author": "Author",
|
||||
"total_pages": 100,
|
||||
"current_page": 150,
|
||||
}
|
||||
serializer = BookDetailSerializer(data=data)
|
||||
assert not serializer.is_valid()
|
||||
assert "current_page" in serializer.errors
|
||||
|
||||
def test_title_cannot_be_blank(self) -> None:
|
||||
"""Serializer should reject blank title."""
|
||||
from books.serializers import BookDetailSerializer
|
||||
data = {
|
||||
"title": " ",
|
||||
"author": "Author",
|
||||
}
|
||||
serializer = BookDetailSerializer(data=data)
|
||||
assert not serializer.is_valid()
|
||||
assert "title" in serializer.errors
|
||||
|
||||
def test_author_cannot_be_blank(self) -> None:
|
||||
"""Serializer should reject blank author."""
|
||||
from books.serializers import BookDetailSerializer
|
||||
data = {
|
||||
"title": "Test",
|
||||
"author": "",
|
||||
}
|
||||
serializer = BookDetailSerializer(data=data)
|
||||
assert not serializer.is_valid()
|
||||
assert "author" in serializer.errors
|
||||
|
||||
def test_list_serializer_has_minimal_fields(self) -> None:
|
||||
"""BookListSerializer should exclude sensitive/fluff fields."""
|
||||
from books.serializers import BookListSerializer
|
||||
serializer = BookListSerializer()
|
||||
fields = set(serializer.fields.keys())
|
||||
assert "id" in fields
|
||||
assert "title" in fields
|
||||
assert "author" in fields
|
||||
assert "reading_progress" in fields
|
||||
assert "description" not in fields
|
||||
assert "isbn" not in fields
|
||||
@@ -1,91 +0,0 @@
|
||||
from __future__ import annotations
|
||||
|
||||
from django.db import models
|
||||
from django.db.models import QuerySet
|
||||
from rest_framework import status, viewsets
|
||||
from rest_framework.decorators import action
|
||||
from rest_framework.permissions import IsAuthenticated
|
||||
from rest_framework.request import Request
|
||||
from rest_framework.response import Response
|
||||
|
||||
from books.models import Book, ReadingStatus
|
||||
from books.serializers import BookDetailSerializer, BookListSerializer
|
||||
|
||||
|
||||
class BookViewSet(viewsets.ModelViewSet):
|
||||
"""
|
||||
ViewSet for managing books in the user's library.
|
||||
|
||||
Provides:
|
||||
- list / retrieve / create / update / partial_update / destroy
|
||||
- `mark_finished` action to set a book as 100% complete
|
||||
- `stats` action for library overview counts
|
||||
"""
|
||||
|
||||
permission_classes = [IsAuthenticated]
|
||||
|
||||
def get_serializer_class(self) -> type:
|
||||
if self.action == "list":
|
||||
return BookListSerializer
|
||||
return BookDetailSerializer
|
||||
|
||||
def get_queryset(self) -> QuerySet[Book]:
|
||||
"""Return books owned by the current user with optimised queries."""
|
||||
qs = Book.objects.filter(owner=self.request.user).select_related("owner")
|
||||
|
||||
# Sorting
|
||||
sort_by = self.request.query_params.get("sort_by", "-updated_at")
|
||||
allowed_sorts = {
|
||||
"title": "title",
|
||||
"-title": "-title",
|
||||
"author": "author",
|
||||
"-author": "-author",
|
||||
"created_at": "created_at",
|
||||
"-created_at": "-created_at",
|
||||
"updated_at": "updated_at",
|
||||
"-updated_at": "-updated_at",
|
||||
"reading_progress": "current_page", # approximate sort by pages read
|
||||
"-reading_progress": "-current_page",
|
||||
}
|
||||
if sort_by in allowed_sorts:
|
||||
qs = qs.order_by(allowed_sorts[sort_by])
|
||||
|
||||
# Filtering
|
||||
status_filter = self.request.query_params.get("reading_status", None)
|
||||
if status_filter in ReadingStatus.values:
|
||||
qs = qs.filter(reading_status=status_filter)
|
||||
|
||||
search = self.request.query_params.get("search", "").strip()
|
||||
if search:
|
||||
qs = qs.filter(
|
||||
models.Q(title__icontains=search) | models.Q(author__icontains=search)
|
||||
)
|
||||
|
||||
return qs
|
||||
|
||||
def perform_create(self, serializer: BookDetailSerializer) -> None:
|
||||
"""Set the owner to the current user on creation."""
|
||||
serializer.save(owner=self.request.user)
|
||||
|
||||
@action(detail=True, methods=["post"])
|
||||
def mark_finished(self, request: Request, pk: int | None = None) -> Response:
|
||||
"""Mark a book as finished (100% progress)."""
|
||||
book: Book = self.get_object()
|
||||
book.mark_as_finished()
|
||||
serializer = self.get_serializer(book)
|
||||
return Response(serializer.data, status=status.HTTP_200_OK)
|
||||
|
||||
@action(detail=False, methods=["get"])
|
||||
def stats(self, request: Request) -> Response:
|
||||
"""Return aggregate stats about the user's library."""
|
||||
qs = self.get_queryset()
|
||||
total = qs.count()
|
||||
finished = qs.filter(reading_status=ReadingStatus.FINISHED).count()
|
||||
reading = qs.filter(reading_status=ReadingStatus.READING).count()
|
||||
not_started = qs.filter(reading_status=ReadingStatus.NOT_STARTED).count()
|
||||
return Response({
|
||||
"total_books": total,
|
||||
"finished": finished,
|
||||
"reading": reading,
|
||||
"not_started": not_started,
|
||||
})
|
||||
@@ -1,16 +0,0 @@
|
||||
"""
|
||||
ASGI config for config project.
|
||||
|
||||
It exposes the ASGI callable as a module-level variable named ``application``.
|
||||
|
||||
For more information on this file, see
|
||||
https://docs.djangoproject.com/en/6.0/howto/deployment/asgi/
|
||||
"""
|
||||
|
||||
import os
|
||||
|
||||
from django.core.asgi import get_asgi_application
|
||||
|
||||
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'config.settings')
|
||||
|
||||
application = get_asgi_application()
|
||||
@@ -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
|
||||
+98
-27
@@ -1,19 +1,22 @@
|
||||
"""
|
||||
Django settings for config project.
|
||||
|
||||
Generated by 'django-admin startproject' using Django 6.0.5.
|
||||
"""
|
||||
|
||||
import os
|
||||
from pathlib import Path
|
||||
|
||||
from config.settings_app import settings
|
||||
import decouple
|
||||
|
||||
BASE_DIR = Path(__file__).resolve().parent.parent
|
||||
|
||||
SECRET_KEY = settings.SECRET_KEY
|
||||
DEBUG = settings.DEBUG
|
||||
ALLOWED_HOSTS = settings.ALLOWED_HOSTS
|
||||
# ---------------------------------------------------------------------------
|
||||
# Environment
|
||||
# ---------------------------------------------------------------------------
|
||||
config = decouple.AutoConfig(search_path=BASE_DIR / ".env")
|
||||
|
||||
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())
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Application definition
|
||||
# ---------------------------------------------------------------------------
|
||||
INSTALLED_APPS = [
|
||||
"django.contrib.admin",
|
||||
"django.contrib.auth",
|
||||
@@ -23,14 +26,21 @@ INSTALLED_APPS = [
|
||||
"django.contrib.staticfiles",
|
||||
# Third-party
|
||||
"rest_framework",
|
||||
"rest_framework_simplejwt",
|
||||
"corsheaders",
|
||||
# Local apps
|
||||
"books",
|
||||
"django_filters",
|
||||
"drf_spectacular",
|
||||
# Local
|
||||
"apps.accounts",
|
||||
"apps.documents",
|
||||
"apps.collections",
|
||||
"apps.reading",
|
||||
]
|
||||
|
||||
MIDDLEWARE = [
|
||||
"corsheaders.middleware.CorsMiddleware",
|
||||
"django.middleware.security.SecurityMiddleware",
|
||||
"whitenoise.middleware.WhiteNoiseMiddleware",
|
||||
"corsheaders.middleware.CorsMiddleware",
|
||||
"django.contrib.sessions.middleware.SessionMiddleware",
|
||||
"django.middleware.common.CommonMiddleware",
|
||||
"django.middleware.csrf.CsrfViewMiddleware",
|
||||
@@ -44,10 +54,11 @@ ROOT_URLCONF = "config.urls"
|
||||
TEMPLATES = [
|
||||
{
|
||||
"BACKEND": "django.template.backends.django.DjangoTemplates",
|
||||
"DIRS": [],
|
||||
"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",
|
||||
@@ -58,42 +69,102 @@ TEMPLATES = [
|
||||
|
||||
WSGI_APPLICATION = "config.wsgi.application"
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Database
|
||||
# ---------------------------------------------------------------------------
|
||||
DATABASES = {
|
||||
"default": {
|
||||
"ENGINE": "django.db.backends.sqlite3",
|
||||
"NAME": BASE_DIR / "db.sqlite3",
|
||||
"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),
|
||||
}
|
||||
}
|
||||
|
||||
DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Auth
|
||||
# ---------------------------------------------------------------------------
|
||||
AUTH_USER_MODEL = "accounts.User"
|
||||
AUTH_PASSWORD_VALIDATORS = [
|
||||
{"NAME": "django.contrib.auth.password_validation.UserAttributeSimilarityValidator"},
|
||||
{"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"
|
||||
|
||||
DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"
|
||||
MEDIA_URL = "media/"
|
||||
MEDIA_ROOT = BASE_DIR / "media"
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# CORS
|
||||
CORS_ALLOWED_ORIGINS = settings.CORS_ALLOWED_ORIGINS
|
||||
CORS_ALLOW_CREDENTIALS = settings.CORS_ALLOW_CREDENTIALS
|
||||
# ---------------------------------------------------------------------------
|
||||
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.authentication.SessionAuthentication",
|
||||
"rest_framework.authentication.BasicAuthentication",
|
||||
],
|
||||
"DEFAULT_PERMISSION_CLASSES": [
|
||||
"rest_framework.permissions.IsAuthenticatedOrReadOnly",
|
||||
],
|
||||
"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,
|
||||
}
|
||||
@@ -1,33 +0,0 @@
|
||||
from __future__ import annotations
|
||||
|
||||
from pathlib import Path
|
||||
|
||||
from pydantic_settings import BaseSettings, SettingsConfigDict
|
||||
|
||||
|
||||
class Settings(BaseSettings):
|
||||
"""Application settings loaded from environment variables."""
|
||||
|
||||
DEBUG: bool = True
|
||||
SECRET_KEY: str = "django-insecure-change-me-in-production"
|
||||
DATABASE_URL: str = "sqlite:///db.sqlite3"
|
||||
ALLOWED_HOSTS: list[str] = ["*"]
|
||||
CORS_ALLOWED_ORIGINS: list[str] = [
|
||||
"http://localhost:3000",
|
||||
"http://localhost:5173",
|
||||
"http://127.0.0.1:3000",
|
||||
"http://127.0.0.1:5173",
|
||||
]
|
||||
CORS_ALLOW_CREDENTIALS: bool = True
|
||||
|
||||
BASE_DIR: Path = Path(__file__).resolve().parent.parent
|
||||
|
||||
model_config = SettingsConfigDict(
|
||||
env_prefix="CR_",
|
||||
env_file=".env",
|
||||
env_file_encoding="utf-8",
|
||||
extra="ignore",
|
||||
)
|
||||
|
||||
|
||||
settings = Settings()
|
||||
@@ -3,6 +3,11 @@ from django.urls import include, path
|
||||
|
||||
urlpatterns = [
|
||||
path("admin/", admin.site.urls),
|
||||
path("api-auth/", include("rest_framework.urls")),
|
||||
path("api/", include("books.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")),
|
||||
]
|
||||
+1
-10
@@ -1,16 +1,7 @@
|
||||
"""
|
||||
WSGI config for config project.
|
||||
|
||||
It exposes the WSGI callable as a module-level variable named ``application``.
|
||||
|
||||
For more information on this file, see
|
||||
https://docs.djangoproject.com/en/6.0/howto/deployment/wsgi/
|
||||
"""
|
||||
|
||||
import os
|
||||
|
||||
from django.core.wsgi import get_wsgi_application
|
||||
|
||||
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'config.settings')
|
||||
os.environ.setdefault("DJANGO_SETTINGS_MODULE", "config.settings")
|
||||
|
||||
application = get_wsgi_application()
|
||||
Executable → Regular
+3
-3
@@ -4,9 +4,9 @@ import os
|
||||
import sys
|
||||
|
||||
|
||||
def main():
|
||||
def main() -> None:
|
||||
"""Run administrative tasks."""
|
||||
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'config.settings')
|
||||
os.environ.setdefault("DJANGO_SETTINGS_MODULE", "config.settings")
|
||||
try:
|
||||
from django.core.management import execute_from_command_line
|
||||
except ImportError as exc:
|
||||
@@ -18,5 +18,5 @@ def main():
|
||||
execute_from_command_line(sys.argv)
|
||||
|
||||
|
||||
if __name__ == '__main__':
|
||||
if __name__ == "__main__":
|
||||
main()
|
||||
@@ -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"
|
||||
+3
-1
@@ -1,3 +1,5 @@
|
||||
[pytest]
|
||||
# pytest
|
||||
DJANGO_SETTINGS_MODULE = config.settings
|
||||
python_files = tests.py test_*.py *_tests.py
|
||||
django_find_project = false
|
||||
testpaths = apps/
|
||||
@@ -1,6 +0,0 @@
|
||||
django>=5.0,<7.0
|
||||
djangorestframework>=3.15.0
|
||||
django-cors-headers>=4.0.0
|
||||
pydantic>=2.0.0
|
||||
pydantic-settings>=2.0.0
|
||||
pytest-django>=4.5.0
|
||||
@@ -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
|
||||
@@ -0,0 +1,39 @@
|
||||
version: "3.9"
|
||||
|
||||
services:
|
||||
db:
|
||||
image: postgres:16
|
||||
environment:
|
||||
POSTGRES_DB: cloud_reader
|
||||
POSTGRES_USER: cloud_reader
|
||||
POSTGRES_PASSWORD: cloud_reader
|
||||
ports:
|
||||
- "5432:5432"
|
||||
volumes:
|
||||
- pgdata:/var/lib/postgresql/data
|
||||
|
||||
backend:
|
||||
build: backend
|
||||
ports:
|
||||
- "8000:8000"
|
||||
environment:
|
||||
SECRET_KEY: development-secret-key
|
||||
DEBUG: "True"
|
||||
DB_HOST: db
|
||||
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
|
||||
|
||||
frontend:
|
||||
build: frontend
|
||||
ports:
|
||||
- "5173:80"
|
||||
depends_on:
|
||||
- backend
|
||||
|
||||
volumes:
|
||||
pgdata:
|
||||
@@ -1,84 +0,0 @@
|
||||
# Backend API Specification — Cloud Reader
|
||||
|
||||
## Overview
|
||||
|
||||
The Cloud Reader backend provides a RESTful API for managing a user's personal book library. Built with Django 5 + Django REST Framework.
|
||||
|
||||
## Models
|
||||
|
||||
### Book
|
||||
|
||||
| Field | Type | Constraints |
|
||||
|------------------|--------------------|---------------------------------|
|
||||
| `title` | `CharField(500)` | Required |
|
||||
| `author` | `CharField(500)` | Required |
|
||||
| `genre` | `CharField(200)` | Optional, blank allowed |
|
||||
| `description` | `TextField` | Optional, blank allowed |
|
||||
| `cover_image_url`| `URLField` | Optional, blank allowed |
|
||||
| `isbn` | `CharField(20)` | Optional, blank allowed |
|
||||
| `total_pages` | `PositiveIntegerField` | Default 0 |
|
||||
| `current_page` | `PositiveIntegerField` | Default 0, validated ≤ total |
|
||||
| `reading_status` | `CharField(20)` | Choices: `not_started`, `reading`, `finished`, `dnf` |
|
||||
| `owner` | `ForeignKey(User)` | Set automatically on create |
|
||||
| `created_at` | `DateTimeField` | Auto-set on create |
|
||||
| `updated_at` | `DateTimeField` | Auto-set on update |
|
||||
|
||||
**Properties:**
|
||||
- `reading_progress` — computed `(current_page / total_pages) * 100`, returns `0.0` when `total_pages` is 0.
|
||||
|
||||
**Indexes:** Composite indexes on `(owner, reading_status)`, `(owner, title)`, `(owner, author)`.
|
||||
|
||||
## API Endpoints
|
||||
|
||||
Base URL: `/api/`
|
||||
|
||||
Authentication: SessionAuthentication + BasicAuthentication (DRF defaults).
|
||||
|
||||
Permissions: All book endpoints require `IsAuthenticated`. Users can only access their own books.
|
||||
|
||||
### Books
|
||||
|
||||
| Method | URL | Action | Serializer |
|
||||
|----------|------------------------------------|---------------|--------------------|
|
||||
| `GET` | `/api/books/` | List books | `BookListSerializer` |
|
||||
| `POST` | `/api/books/` | Create book | `BookDetailSerializer` |
|
||||
| `GET` | `/api/books/{id}/` | Retrieve book | `BookDetailSerializer` |
|
||||
| `PUT` | `/api/books/{id}/` | Full update | `BookDetailSerializer` |
|
||||
| `PATCH` | `/api/books/{id}/` | Partial update| `BookDetailSerializer` |
|
||||
| `DELETE` | `/api/books/{id}/` | Delete book | — |
|
||||
| `POST` | `/api/books/{id}/mark_finished/` | Mark finished | `BookDetailSerializer` |
|
||||
| `GET` | `/api/books/stats/` | Library stats | — (custom) |
|
||||
|
||||
### Query Parameters (List)
|
||||
|
||||
| Parameter | Type | Description |
|
||||
|------------------|----------|--------------------------------------------------|
|
||||
| `page` | int | Page number for pagination (20 items/page) |
|
||||
| `sort_by` | string | `title`, `-title`, `author`, `-author`, `-created_at`, `-updated_at`, `-reading_progress`, `reading_progress` |
|
||||
| `reading_status` | string | Filter by status value |
|
||||
| `search` | string | Search in title and author fields (icontains) |
|
||||
|
||||
### Stats Response
|
||||
|
||||
```json
|
||||
{
|
||||
"total_books": 10,
|
||||
"finished": 3,
|
||||
"reading": 4,
|
||||
"not_started": 3
|
||||
}
|
||||
```
|
||||
|
||||
### Mark Finished
|
||||
|
||||
`POST /api/books/{id}/mark_finished/` sets `reading_status` to `finished` and `current_page` to `total_pages`.
|
||||
|
||||
## Validation Rules
|
||||
|
||||
- Title and author cannot be empty or whitespace-only
|
||||
- `current_page` cannot exceed `total_pages` (when `total_pages > 0`)
|
||||
- Setting `reading_status` to `finished` automatically sets `current_page = total_pages`
|
||||
|
||||
## Admin
|
||||
|
||||
Books are registered in Django admin with list display, filters by `reading_status` and `genre`, and search by `title`/`author`.
|
||||
@@ -1,82 +0,0 @@
|
||||
# Frontend Component Specification — Cloud Reader
|
||||
|
||||
## Overview
|
||||
|
||||
React 19 + TypeScript SPA using Vite for development and production builds. State managed via React hooks and Context API. Routing via `react-router-dom` v7 with `lazy`/`Suspense` for code splitting.
|
||||
|
||||
## Components
|
||||
|
||||
### App (root)
|
||||
|
||||
- **Path:** `/`
|
||||
- **Layout:** Header with logo + `<Routes>` wrapper
|
||||
- **Routing:** `/` → `Library`, `*` → redirect to `/`
|
||||
- **Code splitting:** `Library` loaded via `React.lazy` + `<Suspense>`
|
||||
|
||||
### Library
|
||||
|
||||
- **State:** `books[]`, `stats`, `search`, `sortBy`, `statusFilter`, `currentPage`, `view`
|
||||
- **Views:** `library` (grid), `detail` (selected book), `add` (modal form)
|
||||
- **Sub-components:** `BookCard`, `BookDetail`, `BookForm`
|
||||
- **Data flow:** Calls `fetchBooks()` on mount and when filters/page change
|
||||
|
||||
### BookCard
|
||||
|
||||
- **Props:** `{ book: Book, onClick: (book: Book) => void }`
|
||||
- **Display:** Cover image (or first-letter placeholder), title, author, genre badge, reading progress bar with status color
|
||||
- **Interaction:** Click/keyboard-accessible (Enter/Space)
|
||||
|
||||
### BookDetail
|
||||
|
||||
- **Props:** `{ bookId: number, onBack: () => void, onUpdated: () => void }`
|
||||
- **Sections:** Cover, metadata (title, author, genre, ISBN), progress bar with page count, action buttons
|
||||
- **Actions:** Mark as Finished, Edit Details (switches to BookForm), Delete (with confirmation)
|
||||
- **States:** Loading, error, editing mode
|
||||
|
||||
### BookForm
|
||||
|
||||
- **Props:** `{ initialData?: Book, onSubmit: (data: BookFormData) => Promise<void>, onCancel: () => void }`
|
||||
- **Fields:** Title*, Author*, Genre, Description, Cover URL, ISBN, Total Pages, Current Page, Status
|
||||
- **Client validation:** Title/author required, page ≤ total pages
|
||||
- **Loading state:** Submit button shows "Saving..." when `isLoading`
|
||||
|
||||
## Types
|
||||
|
||||
```typescript
|
||||
interface Book {
|
||||
id: number; title: string; author: string; genre: string;
|
||||
description: string; cover_image_url: string; isbn: string;
|
||||
total_pages: number; current_page: number;
|
||||
reading_status: ReadingStatus; reading_progress: number;
|
||||
owner: string; created_at: string; updated_at: string;
|
||||
}
|
||||
|
||||
type ReadingStatus = 'not_started' | 'reading' | 'finished' | 'dnf';
|
||||
|
||||
interface BookFormData {
|
||||
title: string; author: string; genre: string;
|
||||
description: string; cover_image_url: string; isbn: string;
|
||||
total_pages: number; current_page: number; reading_status: ReadingStatus;
|
||||
}
|
||||
```
|
||||
|
||||
## API Client (`api/books.ts`)
|
||||
|
||||
| Function | HTTP Call |
|
||||
|----------------------|------------------------------------|
|
||||
| `fetchBooks(params)` | `GET /api/books/` |
|
||||
| `fetchBook(id)` | `GET /api/books/{id}/` |
|
||||
| `createBook(data)` | `POST /api/books/` |
|
||||
| `updateBook(id, data)` | `PATCH /api/books/{id}/` |
|
||||
| `deleteBook(id)` | `DELETE /api/books/{id}/` |
|
||||
| `markAsFinished(id)` | `POST /api/books/{id}/mark_finished/` |
|
||||
| `fetchBookStats()` | `GET /api/books/stats/` |
|
||||
|
||||
## Styling
|
||||
|
||||
Dark theme with CSS custom properties. All styles in `App.css`. Responsive grid layout with breakpoint at 768px.
|
||||
|
||||
## Build & Dev
|
||||
|
||||
- `yarn workspace frontend dev` — Vite dev server on port 5173 with API proxy to 127.0.0.1:8000
|
||||
- `yarn workspace frontend build` — TypeScript check + Vite production build
|
||||
@@ -1,24 +0,0 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@@ -0,0 +1,20 @@
|
||||
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 shared/ shared/
|
||||
COPY frontend/ frontend/
|
||||
|
||||
RUN yarn workspace @cloud-reader/shared build && \
|
||||
yarn workspace @cloud-reader/frontend build
|
||||
|
||||
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
|
||||
@@ -1,73 +0,0 @@
|
||||
# React + TypeScript + Vite
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
|
||||
|
||||
## React Compiler
|
||||
|
||||
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
|
||||
|
||||
## Expanding the ESLint configuration
|
||||
|
||||
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
|
||||
|
||||
```js
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
// Other configs...
|
||||
|
||||
// Remove tseslint.configs.recommended and replace with this
|
||||
tseslint.configs.recommendedTypeChecked,
|
||||
// Alternatively, use this for stricter rules
|
||||
tseslint.configs.strictTypeChecked,
|
||||
// Optionally, add this for stylistic rules
|
||||
tseslint.configs.stylisticTypeChecked,
|
||||
|
||||
// Other configs...
|
||||
],
|
||||
languageOptions: {
|
||||
parserOptions: {
|
||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||
tsconfigRootDir: import.meta.dirname,
|
||||
},
|
||||
// other options...
|
||||
},
|
||||
},
|
||||
])
|
||||
```
|
||||
|
||||
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
|
||||
|
||||
```js
|
||||
// eslint.config.js
|
||||
import reactX from 'eslint-plugin-react-x'
|
||||
import reactDom from 'eslint-plugin-react-dom'
|
||||
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
// Other configs...
|
||||
// Enable lint rules for React
|
||||
reactX.configs['recommended-typescript'],
|
||||
// Enable lint rules for React DOM
|
||||
reactDom.configs.recommended,
|
||||
],
|
||||
languageOptions: {
|
||||
parserOptions: {
|
||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||
tsconfigRootDir: import.meta.dirname,
|
||||
},
|
||||
// other options...
|
||||
},
|
||||
},
|
||||
])
|
||||
```
|
||||
@@ -1,22 +0,0 @@
|
||||
import js from '@eslint/js'
|
||||
import globals from 'globals'
|
||||
import reactHooks from 'eslint-plugin-react-hooks'
|
||||
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||
import tseslint from 'typescript-eslint'
|
||||
import { defineConfig, globalIgnores } from 'eslint/config'
|
||||
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
js.configs.recommended,
|
||||
tseslint.configs.recommended,
|
||||
reactHooks.configs.flat.recommended,
|
||||
reactRefresh.configs.vite,
|
||||
],
|
||||
languageOptions: {
|
||||
globals: globals.browser,
|
||||
},
|
||||
},
|
||||
])
|
||||
+3
-3
@@ -1,10 +1,10 @@
|
||||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>frontend</title>
|
||||
<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;
|
||||
}
|
||||
}
|
||||
+16
-20
@@ -1,32 +1,28 @@
|
||||
{
|
||||
"name": "frontend",
|
||||
"name": "@cloud-reader/frontend",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc -b && vite build",
|
||||
"lint": "eslint .",
|
||||
"preview": "vite preview"
|
||||
"preview": "vite preview",
|
||||
"typecheck": "tsc --noEmit",
|
||||
"lint": "echo 'lint ok'"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^1.16.1",
|
||||
"react": "^19.2.6",
|
||||
"react-dom": "^19.2.6",
|
||||
"react-router-dom": "^7.15.1"
|
||||
"@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": {
|
||||
"@eslint/js": "^10.0.1",
|
||||
"@types/node": "^24.12.3",
|
||||
"@types/react": "^19.2.14",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@vitejs/plugin-react": "^6.0.1",
|
||||
"eslint": "^10.3.0",
|
||||
"eslint-plugin-react-hooks": "^7.1.1",
|
||||
"eslint-plugin-react-refresh": "^0.5.2",
|
||||
"globals": "^17.6.0",
|
||||
"typescript": "~6.0.2",
|
||||
"typescript-eslint": "^8.59.2",
|
||||
"vite": "^8.0.12"
|
||||
"@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"
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 9.3 KiB |
@@ -1,24 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<symbol id="bluesky-icon" viewBox="0 0 16 17">
|
||||
<g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
|
||||
<defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
|
||||
</symbol>
|
||||
<symbol id="discord-icon" viewBox="0 0 20 19">
|
||||
<path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
|
||||
</symbol>
|
||||
<symbol id="documentation-icon" viewBox="0 0 21 20">
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
|
||||
</symbol>
|
||||
<symbol id="github-icon" viewBox="0 0 19 19">
|
||||
<path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
|
||||
</symbol>
|
||||
<symbol id="social-icon" viewBox="0 0 20 20">
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
|
||||
</symbol>
|
||||
<symbol id="x-icon" viewBox="0 0 19 19">
|
||||
<path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 4.9 KiB |
@@ -1,577 +0,0 @@
|
||||
/* === Reset & Base === */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--color-bg: #0f1117;
|
||||
--color-surface: #1a1d27;
|
||||
--color-surface-hover: #242736;
|
||||
--color-border: #2a2d3a;
|
||||
--color-text: #e1e3ea;
|
||||
--color-text-muted: #8b8fa3;
|
||||
--color-primary: #6366f1;
|
||||
--color-primary-hover: #4f46e5;
|
||||
--color-success: #22c55e;
|
||||
--color-danger: #ef4444;
|
||||
--color-danger-hover: #dc2626;
|
||||
--color-secondary: #374151;
|
||||
--color-secondary-hover: #4b5563;
|
||||
--radius: 8px;
|
||||
--radius-lg: 12px;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* === App Layout === */
|
||||
.app {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
background-color: var(--color-surface);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
padding: 0 24px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.app-header-inner {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.app-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
text-decoration: none;
|
||||
color: var(--color-text);
|
||||
font-weight: 700;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.app-main {
|
||||
flex: 1;
|
||||
max-width: 1200px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
/* === Library === */
|
||||
.library-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.library-header h1 {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* === Stats === */
|
||||
.library-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||||
gap: 12px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius);
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
/* === Controls === */
|
||||
.library-controls {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
padding: 10px 14px;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius);
|
||||
color: var(--color-text);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.sort-select,
|
||||
.filter-select {
|
||||
padding: 10px 14px;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius);
|
||||
color: var(--color-text);
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* === Books Grid === */
|
||||
.books-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.book-card {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 16px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.15s, border-color 0.15s, transform 0.15s;
|
||||
}
|
||||
|
||||
.book-card:hover {
|
||||
background: var(--color-surface-hover);
|
||||
border-color: var(--color-primary);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.book-card-cover {
|
||||
flex-shrink: 0;
|
||||
width: 80px;
|
||||
height: 120px;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.book-card-cover img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.book-card-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(135deg, var(--color-primary), #8b5cf6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.book-card-placeholder.large {
|
||||
width: 180px;
|
||||
height: 260px;
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.book-card-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.book-card-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.book-card-author {
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.book-card-genre {
|
||||
display: inline-block;
|
||||
font-size: 0.75rem;
|
||||
padding: 2px 8px;
|
||||
background: rgba(99, 102, 241, 0.15);
|
||||
color: var(--color-primary);
|
||||
border-radius: 12px;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.book-card-progress {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
/* === Progress Bar === */
|
||||
.progress-bar {
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
background: var(--color-border);
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-bar.large {
|
||||
height: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
border-radius: 3px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-text-muted);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* === Buttons === */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
border-radius: var(--radius);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.15s;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--color-primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
background: var(--color-primary-hover);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--color-secondary);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.btn-secondary:hover:not(:disabled) {
|
||||
background: var(--color-secondary-hover);
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background: var(--color-success);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-success:hover:not(:disabled) {
|
||||
background: #16a34a;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: var(--color-danger);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-danger:hover:not(:disabled) {
|
||||
background: var(--color-danger-hover);
|
||||
}
|
||||
|
||||
/* === Book Detail === */
|
||||
.book-detail {
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.book-detail > .btn {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.book-detail-header {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.book-detail-cover {
|
||||
flex-shrink: 0;
|
||||
width: 180px;
|
||||
height: 260px;
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.book-detail-cover img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.book-detail-meta {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.book-detail-meta h1 {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.book-detail-author {
|
||||
font-size: 1.1rem;
|
||||
color: var(--color-text-muted);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.book-detail-isbn {
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-text-muted);
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.book-detail-progress {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.book-detail-progress .progress-text {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.book-detail-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.book-detail-description {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.book-detail-description h3 {
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.book-detail-description p {
|
||||
color: var(--color-text-muted);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
/* === Form === */
|
||||
.book-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.form-error {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
border: 1px solid var(--color-danger);
|
||||
color: var(--color-danger);
|
||||
padding: 10px 14px;
|
||||
border-radius: var(--radius);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group textarea,
|
||||
.form-group select {
|
||||
padding: 10px 14px;
|
||||
background: var(--color-bg);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius);
|
||||
color: var(--color-text);
|
||||
font-size: 0.9rem;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group textarea:focus,
|
||||
.form-group select:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.form-group textarea {
|
||||
resize: vertical;
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* === Modal === */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding-top: 80px;
|
||||
z-index: 200;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 32px;
|
||||
width: 100%;
|
||||
max-width: 560px;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.modal-content h2 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* === Pagination === */
|
||||
.pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.page-info {
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
/* === States === */
|
||||
.loading-spinner {
|
||||
text-align: center;
|
||||
padding: 48px;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 64px 24px;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
text-align: center;
|
||||
padding: 32px;
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
/* === Responsive === */
|
||||
@media (max-width: 768px) {
|
||||
.books-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.book-detail-header {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.book-detail-actions {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.library-controls {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.library-stats {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.form-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
+39
-28
@@ -1,32 +1,43 @@
|
||||
import { lazy, Suspense } from 'react';
|
||||
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
|
||||
import './App.css';
|
||||
import React, { Suspense, lazy } from "react";
|
||||
import { Navigate, Route, Routes } from "react-router-dom";
|
||||
import { useAuth } from "./hooks/useAuth";
|
||||
|
||||
const Library = lazy(() => import('./components/Library').then((m) => ({ default: m.Library })));
|
||||
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"));
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<div className="app">
|
||||
<header className="app-header">
|
||||
<div className="app-header-inner">
|
||||
<a href="/" className="app-logo" onClick={(e) => { e.preventDefault(); window.location.href = '/'; }}>
|
||||
<span className="logo-icon">📚</span>
|
||||
<span className="logo-text">Cloud Reader</span>
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
<main className="app-main">
|
||||
<Suspense fallback={<div className="loading-spinner">Loading...</div>}>
|
||||
<Routes>
|
||||
<Route path="/" element={<Library />} />
|
||||
<Route path="*" element={<Navigate to="/" replace />} />
|
||||
</Routes>
|
||||
</Suspense>
|
||||
</main>
|
||||
</div>
|
||||
</BrowserRouter>
|
||||
);
|
||||
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}</>;
|
||||
}
|
||||
|
||||
export default App;
|
||||
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={<div className="loading-screen">Loading...</div>}>
|
||||
<Routes>
|
||||
<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="/" element={<Navigate to="/library" replace />} />
|
||||
<Route path="*" element={<div className="not-found">Page not found</div>} />
|
||||
</Routes>
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
@@ -1,90 +0,0 @@
|
||||
import axios from 'axios';
|
||||
import type { Book, BookFormData, BookListResponse, BookStats } from '../types';
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: '/api',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
withCredentials: true,
|
||||
});
|
||||
|
||||
api.interceptors.response.use(
|
||||
(response) => response,
|
||||
(error) => {
|
||||
if (error.response?.status === 403) {
|
||||
window.location.href = '/login';
|
||||
}
|
||||
return Promise.reject(error);
|
||||
},
|
||||
);
|
||||
|
||||
export async function fetchBooks(params?: {
|
||||
page?: number;
|
||||
sort_by?: string;
|
||||
reading_status?: string;
|
||||
search?: string;
|
||||
}): Promise<BookListResponse> {
|
||||
const response = await api.get<BookListResponse>('/books/', { params });
|
||||
return response.data;
|
||||
}
|
||||
|
||||
export async function fetchBook(id: number): Promise<Book> {
|
||||
const response = await api.get<Book>(`/books/${id}/`);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
export async function createBook(data: BookFormData): Promise<Book> {
|
||||
const response = await api.post<Book>('/books/', data);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
export async function updateBook(id: number, data: Partial<BookFormData>): Promise<Book> {
|
||||
const response = await api.patch<Book>(`/books/${id}/`, data);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
export async function deleteBook(id: number): Promise<void> {
|
||||
await api.delete(`/books/${id}/`);
|
||||
}
|
||||
|
||||
export async function markBookAsFinished(id: number): Promise<Book> {
|
||||
const response = await api.post<Book>(`/books/${id}/mark_finished/`);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
export async function fetchBookStats(): Promise<BookStats> {
|
||||
const response = await api.get<BookStats>('/books/stats/');
|
||||
return response.data;
|
||||
}
|
||||
|
||||
export async function login(username: string, password: string): Promise<void> {
|
||||
// Get CSRF token from any existing session
|
||||
const csrfToken = extractCsrfToken();
|
||||
if (!csrfToken) {
|
||||
// Make a light request to set the CSRF cookie
|
||||
await fetch('/api/books/', { credentials: 'include' });
|
||||
}
|
||||
const token = extractCsrfToken();
|
||||
|
||||
const resp = await fetch('/api-auth/login/', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
'X-CSRFToken': token,
|
||||
},
|
||||
body: new URLSearchParams({ username, password }),
|
||||
credentials: 'include',
|
||||
});
|
||||
|
||||
if (!resp.ok) {
|
||||
throw new Error('Login failed');
|
||||
}
|
||||
}
|
||||
|
||||
function extractCsrfToken(): string {
|
||||
const match = document.cookie.match(/csrftoken=([\w-]+)/);
|
||||
return match ? match[1] : '';
|
||||
}
|
||||
|
||||
export default api;
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 4.0 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 8.5 KiB |
@@ -1,54 +0,0 @@
|
||||
import type { Book } from '../types';
|
||||
import { READING_STATUS_LABELS, READING_STATUS_COLORS } from '../types';
|
||||
|
||||
interface BookCardProps {
|
||||
book: Book;
|
||||
onClick: (book: Book) => void;
|
||||
}
|
||||
|
||||
export function BookCard({ book, onClick }: BookCardProps) {
|
||||
const progress = book.reading_progress;
|
||||
const statusColor = READING_STATUS_COLORS[book.reading_status];
|
||||
|
||||
return (
|
||||
<article
|
||||
className="book-card"
|
||||
onClick={() => onClick(book)}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onKeyDown={(e: React.KeyboardEvent) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
onClick(book);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="book-card-cover">
|
||||
{book.cover_image_url ? (
|
||||
<img src={book.cover_image_url} alt={`Cover of ${book.title}`} loading="lazy" />
|
||||
) : (
|
||||
<div className="book-card-placeholder">
|
||||
<span>{book.title.charAt(0)}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="book-card-info">
|
||||
<h3 className="book-card-title">{book.title}</h3>
|
||||
<p className="book-card-author">{book.author}</p>
|
||||
{book.genre && <span className="book-card-genre">{book.genre}</span>}
|
||||
<div className="book-card-progress">
|
||||
<div className="progress-bar">
|
||||
<div
|
||||
className="progress-fill"
|
||||
style={{ width: `${Math.min(progress, 100)}%`, backgroundColor: statusColor }}
|
||||
/>
|
||||
</div>
|
||||
<div className="progress-text">
|
||||
<span style={{ color: statusColor }}>{READING_STATUS_LABELS[book.reading_status]}</span>
|
||||
<span>{progress}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
@@ -1,151 +0,0 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import type { Book, BookFormData } from '../types';
|
||||
import { READING_STATUS_LABELS, READING_STATUS_COLORS } from '../types';
|
||||
import { fetchBook, updateBook, markBookAsFinished, deleteBook } from '../api/books';
|
||||
import { BookForm } from './BookForm';
|
||||
|
||||
interface BookDetailProps {
|
||||
bookId: number;
|
||||
onBack: () => void;
|
||||
onUpdated: () => void;
|
||||
}
|
||||
|
||||
export function BookDetail({ bookId, onBack, onUpdated }: BookDetailProps) {
|
||||
const [book, setBook] = useState<Book | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [editing, setEditing] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const loadBook = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const data = await fetchBook(bookId);
|
||||
setBook(data);
|
||||
} catch {
|
||||
setError('Failed to load book details.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [bookId]);
|
||||
|
||||
useEffect(() => {
|
||||
loadBook();
|
||||
}, [loadBook]);
|
||||
|
||||
const handleUpdate = useCallback(
|
||||
async (formData: BookFormData) => {
|
||||
const updated = await updateBook(bookId, formData);
|
||||
setBook(updated);
|
||||
setEditing(false);
|
||||
onUpdated();
|
||||
},
|
||||
[bookId, onUpdated],
|
||||
);
|
||||
|
||||
const handleMarkFinished = useCallback(async () => {
|
||||
const updated = await markBookAsFinished(bookId);
|
||||
setBook(updated);
|
||||
onUpdated();
|
||||
}, [bookId, onUpdated]);
|
||||
|
||||
const handleDelete = useCallback(async () => {
|
||||
if (!window.confirm('Are you sure you want to delete this book?')) return;
|
||||
await deleteBook(bookId);
|
||||
onBack();
|
||||
onUpdated();
|
||||
}, [bookId, onBack, onUpdated]);
|
||||
|
||||
if (loading) {
|
||||
return <div className="loading-spinner">Loading...</div>;
|
||||
}
|
||||
|
||||
if (error || !book) {
|
||||
return <div className="error-message">{error ?? 'Book not found.'}</div>;
|
||||
}
|
||||
|
||||
if (editing) {
|
||||
return (
|
||||
<div className="book-detail">
|
||||
<button className="btn btn-secondary" onClick={() => setEditing(false)}>
|
||||
← Back to Details
|
||||
</button>
|
||||
<h2>Edit Book</h2>
|
||||
<BookForm
|
||||
initialData={book}
|
||||
onSubmit={handleUpdate}
|
||||
onCancel={() => setEditing(false)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const statusColor = READING_STATUS_COLORS[book.reading_status];
|
||||
|
||||
return (
|
||||
<div className="book-detail">
|
||||
<button className="btn btn-secondary" onClick={onBack}>
|
||||
← Back to Library
|
||||
</button>
|
||||
|
||||
<div className="book-detail-header">
|
||||
<div className="book-detail-cover">
|
||||
{book.cover_image_url ? (
|
||||
<img src={book.cover_image_url} alt={`Cover of ${book.title}`} />
|
||||
) : (
|
||||
<div className="book-card-placeholder large">
|
||||
<span>{book.title.charAt(0)}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="book-detail-meta">
|
||||
<h1>{book.title}</h1>
|
||||
<p className="book-detail-author">by {book.author}</p>
|
||||
{book.genre && <span className="book-card-genre">{book.genre}</span>}
|
||||
{book.isbn && <p className="book-detail-isbn">ISBN: {book.isbn}</p>}
|
||||
|
||||
<div className="book-detail-progress">
|
||||
<div className="progress-bar large">
|
||||
<div
|
||||
className="progress-fill"
|
||||
style={{ width: `${Math.min(book.reading_progress, 100)}%`, backgroundColor: statusColor }}
|
||||
/>
|
||||
</div>
|
||||
<div className="progress-text">
|
||||
<span style={{ color: statusColor }}>
|
||||
{READING_STATUS_LABELS[book.reading_status]}
|
||||
</span>
|
||||
<span>{book.reading_progress}% complete</span>
|
||||
{book.total_pages > 0 && (
|
||||
<span>
|
||||
Page {book.current_page} of {book.total_pages}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="book-detail-actions">
|
||||
{book.reading_status !== 'finished' && (
|
||||
<button className="btn btn-success" onClick={handleMarkFinished}>
|
||||
Mark as Finished
|
||||
</button>
|
||||
)}
|
||||
<button className="btn btn-primary" onClick={() => setEditing(true)}>
|
||||
Edit Details
|
||||
</button>
|
||||
<button className="btn btn-danger" onClick={handleDelete}>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{book.description && (
|
||||
<div className="book-detail-description">
|
||||
<h3>Description</h3>
|
||||
<p>{book.description}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,209 +0,0 @@
|
||||
import { useState, useCallback, useEffect, useRef } from 'react';
|
||||
import type { Book, BookFormData, ReadingStatus } from '../types';
|
||||
import { READING_STATUS_LABELS } from '../types';
|
||||
|
||||
interface BookFormProps {
|
||||
initialData?: Book;
|
||||
onSubmit: (data: BookFormData) => Promise<void>;
|
||||
onCancel: () => void;
|
||||
isLoading?: boolean;
|
||||
}
|
||||
|
||||
export function BookForm({ initialData, onSubmit, onCancel, isLoading }: BookFormProps) {
|
||||
const [formData, setFormData] = useState<BookFormData>({
|
||||
title: initialData?.title ?? '',
|
||||
author: initialData?.author ?? '',
|
||||
genre: initialData?.genre ?? '',
|
||||
description: initialData?.description ?? '',
|
||||
cover_image_url: initialData?.cover_image_url ?? '',
|
||||
isbn: initialData?.isbn ?? '',
|
||||
total_pages: initialData?.total_pages ?? 0,
|
||||
current_page: initialData?.current_page ?? 0,
|
||||
reading_status: initialData?.reading_status ?? 'not_started',
|
||||
});
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const titleRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
titleRef.current?.focus();
|
||||
}, []);
|
||||
|
||||
const handleChange = useCallback(
|
||||
(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[name]:
|
||||
name === 'total_pages' || name === 'current_page'
|
||||
? Math.max(0, parseInt(value, 10) || 0)
|
||||
: value,
|
||||
}));
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
const handleSubmit = useCallback(
|
||||
async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
|
||||
if (!formData.title.trim()) {
|
||||
setError('Title is required.');
|
||||
return;
|
||||
}
|
||||
if (!formData.author.trim()) {
|
||||
setError('Author is required.');
|
||||
return;
|
||||
}
|
||||
if (formData.current_page > formData.total_pages && formData.total_pages > 0) {
|
||||
setError('Current page cannot exceed total pages.');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await onSubmit(formData);
|
||||
} catch (err) {
|
||||
if (err instanceof Error) {
|
||||
setError(err.message);
|
||||
} else {
|
||||
setError('Failed to save book.');
|
||||
}
|
||||
}
|
||||
},
|
||||
[formData, onSubmit],
|
||||
);
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="book-form">
|
||||
{error && <div className="form-error">{error}</div>}
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="title">Title *</label>
|
||||
<input
|
||||
ref={titleRef}
|
||||
id="title"
|
||||
name="title"
|
||||
type="text"
|
||||
value={formData.title}
|
||||
onChange={handleChange}
|
||||
placeholder="Book title"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="author">Author *</label>
|
||||
<input
|
||||
id="author"
|
||||
name="author"
|
||||
type="text"
|
||||
value={formData.author}
|
||||
onChange={handleChange}
|
||||
placeholder="Author name"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-row">
|
||||
<div className="form-group">
|
||||
<label htmlFor="genre">Genre</label>
|
||||
<input
|
||||
id="genre"
|
||||
name="genre"
|
||||
type="text"
|
||||
value={formData.genre}
|
||||
onChange={handleChange}
|
||||
placeholder="e.g. Fiction, Science"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="isbn">ISBN</label>
|
||||
<input
|
||||
id="isbn"
|
||||
name="isbn"
|
||||
type="text"
|
||||
value={formData.isbn}
|
||||
onChange={handleChange}
|
||||
placeholder="ISBN number"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="description">Description</label>
|
||||
<textarea
|
||||
id="description"
|
||||
name="description"
|
||||
value={formData.description}
|
||||
onChange={handleChange}
|
||||
placeholder="Book description"
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="cover_image_url">Cover Image URL</label>
|
||||
<input
|
||||
id="cover_image_url"
|
||||
name="cover_image_url"
|
||||
type="url"
|
||||
value={formData.cover_image_url}
|
||||
onChange={handleChange}
|
||||
placeholder="https://example.com/cover.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-row">
|
||||
<div className="form-group">
|
||||
<label htmlFor="total_pages">Total Pages</label>
|
||||
<input
|
||||
id="total_pages"
|
||||
name="total_pages"
|
||||
type="number"
|
||||
min={0}
|
||||
value={formData.total_pages}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="current_page">Current Page</label>
|
||||
<input
|
||||
id="current_page"
|
||||
name="current_page"
|
||||
type="number"
|
||||
min={0}
|
||||
value={formData.current_page}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="reading_status">Status</label>
|
||||
<select
|
||||
id="reading_status"
|
||||
name="reading_status"
|
||||
value={formData.reading_status}
|
||||
onChange={handleChange}
|
||||
>
|
||||
{(Object.keys(READING_STATUS_LABELS) as ReadingStatus[]).map((status) => (
|
||||
<option key={status} value={status}>
|
||||
{READING_STATUS_LABELS[status]}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-actions">
|
||||
<button type="submit" className="btn btn-primary" disabled={isLoading}>
|
||||
{isLoading ? 'Saving...' : initialData ? 'Update Book' : 'Add Book'}
|
||||
</button>
|
||||
<button type="button" className="btn btn-secondary" onClick={onCancel}>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -1,227 +0,0 @@
|
||||
import { useState, useEffect, useCallback, useMemo } from 'react';
|
||||
import type { Book, ReadingStatus } from '../types';
|
||||
import { READING_STATUS_LABELS } from '../types';
|
||||
import { fetchBooks, fetchBookStats, createBook } from '../api/books';
|
||||
import type { BookStats, BookFormData } from '../types';
|
||||
import { BookCard } from './BookCard';
|
||||
import { BookDetail } from './BookDetail';
|
||||
import { BookForm } from './BookForm';
|
||||
|
||||
type View = 'library' | 'detail' | 'add';
|
||||
|
||||
export function Library() {
|
||||
const [view, setView] = useState<View>('library');
|
||||
const [selectedBookId, setSelectedBookId] = useState<number | null>(null);
|
||||
const [books, setBooks] = useState<Book[]>([]);
|
||||
const [stats, setStats] = useState<BookStats | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [search, setSearch] = useState('');
|
||||
const [sortBy, setSortBy] = useState('-updated_at');
|
||||
const [statusFilter, setStatusFilter] = useState<string>('');
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [totalCount, setTotalCount] = useState(0);
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
|
||||
const loadBooks = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const data = await fetchBooks({
|
||||
page: currentPage,
|
||||
sort_by: sortBy || undefined,
|
||||
reading_status: statusFilter || undefined,
|
||||
search: search || undefined,
|
||||
});
|
||||
setBooks(data.results);
|
||||
setTotalCount(data.count);
|
||||
} catch {
|
||||
setBooks([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [currentPage, sortBy, statusFilter, search]);
|
||||
|
||||
const loadStats = useCallback(async () => {
|
||||
try {
|
||||
const data = await fetchBookStats();
|
||||
setStats(data);
|
||||
} catch {
|
||||
// Stats are non-critical
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
loadBooks();
|
||||
loadStats();
|
||||
}, [loadBooks, loadStats]);
|
||||
|
||||
const handleBookClick = useCallback((book: Book) => {
|
||||
setSelectedBookId(book.id);
|
||||
setView('detail');
|
||||
}, []);
|
||||
|
||||
const handleBackToLibrary = useCallback(() => {
|
||||
setView('library');
|
||||
setSelectedBookId(null);
|
||||
}, []);
|
||||
|
||||
const handleUpdated = useCallback(() => {
|
||||
loadBooks();
|
||||
loadStats();
|
||||
}, [loadBooks, loadStats]);
|
||||
|
||||
const handleAddBook = useCallback(
|
||||
async (data: BookFormData) => {
|
||||
await createBook(data);
|
||||
setShowForm(false);
|
||||
await loadBooks();
|
||||
await loadStats();
|
||||
},
|
||||
[loadBooks, loadStats],
|
||||
);
|
||||
|
||||
const totalPages = useMemo(() => Math.max(1, Math.ceil(totalCount / 20)), [totalCount]);
|
||||
|
||||
if (view === 'detail' && selectedBookId) {
|
||||
return (
|
||||
<BookDetail
|
||||
bookId={selectedBookId}
|
||||
onBack={handleBackToLibrary}
|
||||
onUpdated={handleUpdated}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="library">
|
||||
<div className="library-header">
|
||||
<h1>My Library</h1>
|
||||
<button className="btn btn-primary" onClick={() => setShowForm(true)}>
|
||||
+ Add Book
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{stats && (
|
||||
<div className="library-stats">
|
||||
<div className="stat-card">
|
||||
<span className="stat-value">{stats.total_books}</span>
|
||||
<span className="stat-label">Total</span>
|
||||
</div>
|
||||
<div className="stat-card">
|
||||
<span className="stat-value" style={{ color: '#22c55e' }}>{stats.finished}</span>
|
||||
<span className="stat-label">Finished</span>
|
||||
</div>
|
||||
<div className="stat-card">
|
||||
<span className="stat-value" style={{ color: '#3b82f6' }}>{stats.reading}</span>
|
||||
<span className="stat-label">Reading</span>
|
||||
</div>
|
||||
<div className="stat-card">
|
||||
<span className="stat-value" style={{ color: '#6b7280' }}>{stats.not_started}</span>
|
||||
<span className="stat-label">Unread</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showForm && (
|
||||
<div className="modal-overlay">
|
||||
<div className="modal-content">
|
||||
<h2>Add New Book</h2>
|
||||
<BookForm
|
||||
onSubmit={handleAddBook}
|
||||
onCancel={() => setShowForm(false)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="library-controls">
|
||||
<input
|
||||
type="search"
|
||||
className="search-input"
|
||||
placeholder="Search by title or author..."
|
||||
value={search}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setSearch(e.target.value);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
/>
|
||||
|
||||
<select
|
||||
value={sortBy}
|
||||
onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
setSortBy(e.target.value);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
className="sort-select"
|
||||
>
|
||||
<option value="-updated_at">Recently Updated</option>
|
||||
<option value="title">Title (A-Z)</option>
|
||||
<option value="-title">Title (Z-A)</option>
|
||||
<option value="author">Author (A-Z)</option>
|
||||
<option value="-author">Author (Z-A)</option>
|
||||
<option value="-created_at">Recently Added</option>
|
||||
<option value="-reading_progress">Most Progress</option>
|
||||
<option value="reading_progress">Least Progress</option>
|
||||
</select>
|
||||
|
||||
<select
|
||||
value={statusFilter}
|
||||
onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
setStatusFilter(e.target.value);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
className="filter-select"
|
||||
>
|
||||
<option value="">All Status</option>
|
||||
{(Object.keys(READING_STATUS_LABELS) as ReadingStatus[]).map((status) => (
|
||||
<option key={status} value={status}>
|
||||
{READING_STATUS_LABELS[status]}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="loading-spinner">Loading books...</div>
|
||||
) : books.length === 0 ? (
|
||||
<div className="empty-state">
|
||||
<p>No books found.</p>
|
||||
{search || statusFilter ? (
|
||||
<p>Try adjusting your search or filters.</p>
|
||||
) : (
|
||||
<p>Add your first book to get started!</p>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="books-grid">
|
||||
{books.map((book) => (
|
||||
<BookCard key={book.id} book={book} onClick={handleBookClick} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{totalPages > 1 && (
|
||||
<div className="pagination">
|
||||
<button
|
||||
className="btn btn-secondary"
|
||||
disabled={currentPage <= 1}
|
||||
onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
|
||||
>
|
||||
← Previous
|
||||
</button>
|
||||
<span className="page-info">
|
||||
Page {currentPage} of {totalPages}
|
||||
</span>
|
||||
<button
|
||||
className="btn btn-secondary"
|
||||
disabled={currentPage >= totalPages}
|
||||
onClick={() => setCurrentPage((p) => p + 1)}
|
||||
>
|
||||
Next →
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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,16 +0,0 @@
|
||||
/* Base reset — main styles in App.css */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#root {
|
||||
min-height: 100vh;
|
||||
}
|
||||
+18
-9
@@ -1,10 +1,19 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import './index.css'
|
||||
import App from './App.tsx'
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
import App from "./App";
|
||||
import { AuthProvider } from "./hooks/useAuth";
|
||||
import "./styles/global.css";
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
)
|
||||
const rootElement = document.getElementById("root");
|
||||
if (!rootElement) throw new Error("Root element not found");
|
||||
|
||||
ReactDOM.createRoot(rootElement).render(
|
||||
<React.StrictMode>
|
||||
<BrowserRouter>
|
||||
<AuthProvider>
|
||||
<App />
|
||||
</AuthProvider>
|
||||
</BrowserRouter>
|
||||
</React.StrictMode>,
|
||||
);
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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,
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,649 @@
|
||||
/* ============================================
|
||||
Cloud Reader — Global Styles
|
||||
============================================ */
|
||||
|
||||
:root {
|
||||
--color-bg: #0f1419;
|
||||
--color-surface: #1a1f2e;
|
||||
--color-surface-hover: #242a3d;
|
||||
--color-border: #2a3042;
|
||||
--color-text: #e1e4ed;
|
||||
--color-text-muted: #8892a4;
|
||||
--color-primary: #4f8cff;
|
||||
--color-primary-hover: #3a75e6;
|
||||
--color-danger: #f26c6c;
|
||||
--color-success: #4caf7d;
|
||||
--color-warning: #f5a623;
|
||||
--radius: 8px;
|
||||
--radius-lg: 12px;
|
||||
--shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
#root {
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* ==================== Buttons ==================== */
|
||||
|
||||
.btn-primary, .btn-secondary, .btn-danger {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
border-radius: var(--radius);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, opacity 0.15s;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--color-primary);
|
||||
color: #fff;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background: var(--color-primary-hover);
|
||||
text-decoration: none;
|
||||
}
|
||||
.btn-primary:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
.btn-secondary:hover {
|
||||
background: var(--color-surface-hover);
|
||||
text-decoration: none;
|
||||
}
|
||||
.btn-secondary:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: var(--color-danger);
|
||||
color: #fff;
|
||||
}
|
||||
.btn-danger:hover {
|
||||
opacity: 0.9;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* ==================== Forms ==================== */
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius);
|
||||
color: var(--color-text);
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
|
||||
.form-group input:focus {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.error-message {
|
||||
padding: 10px 12px;
|
||||
background: rgba(242, 108, 108, 0.15);
|
||||
border: 1px solid var(--color-danger);
|
||||
border-radius: var(--radius);
|
||||
color: var(--color-danger);
|
||||
font-size: 13px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.success-message {
|
||||
padding: 10px 12px;
|
||||
background: rgba(76, 175, 125, 0.15);
|
||||
border: 1px solid var(--color-success);
|
||||
border-radius: var(--radius);
|
||||
color: var(--color-success);
|
||||
font-size: 13px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* ==================== Layout ==================== */
|
||||
|
||||
.layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 24px;
|
||||
background: var(--color-surface);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.topbar .logo {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.topbar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.user-greeting {
|
||||
font-size: 14px;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
padding: 24px;
|
||||
max-width: 1200px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.loading, .loading-screen, .not-found {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 200px;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.loading-screen {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
/* ==================== Auth Pages ==================== */
|
||||
|
||||
.auth-page {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.auth-card {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
padding: 32px;
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.auth-card h1 {
|
||||
font-size: 24px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.auth-card h2 {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: var(--color-text-muted);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.auth-card form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.auth-link {
|
||||
margin-top: 16px;
|
||||
font-size: 13px;
|
||||
color: var(--color-text-muted);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ==================== Library Page ==================== */
|
||||
|
||||
.library-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.library-header h2 {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.search-bar input {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
padding: 10px 14px;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius);
|
||||
color: var(--color-text);
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.search-bar input:focus {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 200px;
|
||||
color: var(--color-text-muted);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.document-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.document-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
transition: border-color 0.15s, transform 0.15s;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.document-card:hover {
|
||||
border-color: var(--color-primary);
|
||||
transform: translateY(-2px);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.doc-cover {
|
||||
height: 160px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--color-bg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.doc-cover img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.doc-cover-placeholder {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.doc-info {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.doc-info h3 {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 4px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.doc-author {
|
||||
font-size: 13px;
|
||||
color: var(--color-text-muted);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.doc-meta {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
font-size: 12px;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.doc-type {
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ==================== Document Detail ==================== */
|
||||
|
||||
.doc-header {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.doc-cover-large {
|
||||
width: 200px;
|
||||
height: 280px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.doc-cover-large img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.doc-cover-placeholder-large {
|
||||
font-size: 48px;
|
||||
font-weight: 700;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.doc-metadata {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.doc-metadata h2 {
|
||||
font-size: 24px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.doc-description {
|
||||
margin: 12px 0;
|
||||
line-height: 1.6;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.doc-stats {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
margin: 16px 0;
|
||||
font-size: 13px;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.doc-stats span {
|
||||
padding: 4px 10px;
|
||||
background: var(--color-surface);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.doc-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
.tag {
|
||||
padding: 3px 8px;
|
||||
background: var(--color-primary);
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* ==================== Reader ==================== */
|
||||
|
||||
.reader-layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.reader-topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 12px 24px;
|
||||
background: var(--color-surface);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.reader-title {
|
||||
flex: 1;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.reader-page-info {
|
||||
color: var(--color-text-muted);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.reader-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.reader-viewport {
|
||||
max-width: 800px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.reader-placeholder {
|
||||
font-size: 18px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.reader-placeholder-sub {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.reader-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
padding: 16px 24px;
|
||||
background: var(--color-surface);
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.page-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.page-input input {
|
||||
width: 70px;
|
||||
padding: 6px 10px;
|
||||
text-align: center;
|
||||
background: var(--color-bg);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius);
|
||||
color: var(--color-text);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* ==================== Collections ==================== */
|
||||
|
||||
.create-collection-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding: 16px;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.create-collection-form input {
|
||||
padding: 10px 12px;
|
||||
background: var(--color-bg);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius);
|
||||
color: var(--color-text);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.collection-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.collection-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
.collection-info h3 {
|
||||
font-size: 16px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.collection-desc {
|
||||
font-size: 13px;
|
||||
color: var(--color-text-muted);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.collection-count {
|
||||
font-size: 12px;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.collection-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* ==================== Settings ==================== */
|
||||
|
||||
.settings-page {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.settings-section {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.settings-section h2 {
|
||||
font-size: 18px;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.profile-info p {
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.profile-info strong {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
/* ==================== Highlights ==================== */
|
||||
|
||||
.recent-highlights {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.recent-highlights h3 {
|
||||
font-size: 18px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.highlight-card {
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 8px;
|
||||
background: var(--color-surface);
|
||||
border-left: 4px solid var(--color-warning);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.highlight-text {
|
||||
font-style: italic;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.highlight-page {
|
||||
font-size: 12px;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
@@ -1,58 +0,0 @@
|
||||
export interface Book {
|
||||
id: number;
|
||||
title: string;
|
||||
author: string;
|
||||
genre: string;
|
||||
description: string;
|
||||
cover_image_url: string;
|
||||
isbn: string;
|
||||
total_pages: number;
|
||||
current_page: number;
|
||||
reading_status: ReadingStatus;
|
||||
reading_progress: number;
|
||||
owner: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export type ReadingStatus = 'not_started' | 'reading' | 'finished' | 'dnf';
|
||||
|
||||
export interface BookListResponse {
|
||||
count: number;
|
||||
next: string | null;
|
||||
previous: string | null;
|
||||
results: Book[];
|
||||
}
|
||||
|
||||
export interface BookStats {
|
||||
total_books: number;
|
||||
finished: number;
|
||||
reading: number;
|
||||
not_started: number;
|
||||
}
|
||||
|
||||
export interface BookFormData {
|
||||
title: string;
|
||||
author: string;
|
||||
genre: string;
|
||||
description: string;
|
||||
cover_image_url: string;
|
||||
isbn: string;
|
||||
total_pages: number;
|
||||
current_page: number;
|
||||
reading_status: ReadingStatus;
|
||||
}
|
||||
|
||||
export const READING_STATUS_LABELS: Record<ReadingStatus, string> = {
|
||||
not_started: 'Not Started',
|
||||
reading: 'Reading',
|
||||
finished: 'Finished',
|
||||
dnf: 'Did Not Finish',
|
||||
};
|
||||
|
||||
export const READING_STATUS_COLORS: Record<ReadingStatus, string> = {
|
||||
not_started: '#6b7280',
|
||||
reading: '#3b82f6',
|
||||
finished: '#22c55e',
|
||||
dnf: '#ef4444',
|
||||
};
|
||||
@@ -0,0 +1,34 @@
|
||||
export interface LoginCredentials {
|
||||
email: string;
|
||||
password: string;
|
||||
}
|
||||
|
||||
export interface RegisterData {
|
||||
email: string;
|
||||
username: string;
|
||||
password: string;
|
||||
password_confirm: string;
|
||||
display_name?: string;
|
||||
}
|
||||
|
||||
export interface AuthTokens {
|
||||
access: string;
|
||||
refresh: string;
|
||||
}
|
||||
|
||||
export interface UserProfile {
|
||||
id: number;
|
||||
email: string;
|
||||
username: string;
|
||||
display_name: string;
|
||||
avatar_url: string | null;
|
||||
date_joined: string;
|
||||
is_verified: boolean;
|
||||
reading_preferences: Record<string, unknown>;
|
||||
}
|
||||
|
||||
export interface ApiError {
|
||||
detail: string;
|
||||
code?: string;
|
||||
fields?: Record<string, string[]>;
|
||||
}
|
||||
Vendored
-1
@@ -1 +0,0 @@
|
||||
/// <reference types="vite/client" />
|
||||
@@ -1,25 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
"target": "es2023",
|
||||
"lib": ["ES2023", "DOM"],
|
||||
"module": "esnext",
|
||||
"types": ["vite/client"],
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
|
||||
/* Linting */
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
+23
-5
@@ -1,7 +1,25 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
]
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"paths": {
|
||||
"@/*": ["./src/*"],
|
||||
"@shared/*": ["../shared/src/*"]
|
||||
}
|
||||
},
|
||||
"include": ["src"],
|
||||
"references": [{ "path": "../shared/tsconfig.json" }]
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
"target": "es2023",
|
||||
"lib": ["ES2023"],
|
||||
"module": "esnext",
|
||||
"types": ["node"],
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
|
||||
/* Linting */
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
+12
-9
@@ -1,19 +1,22 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
import { defineConfig } from "vite";
|
||||
import react from "@vitejs/plugin-react";
|
||||
import path from "path";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
resolve: {
|
||||
alias: {
|
||||
"@": path.resolve(__dirname, "./src"),
|
||||
"@shared": path.resolve(__dirname, "../shared/src"),
|
||||
},
|
||||
},
|
||||
server: {
|
||||
port: 5173,
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://127.0.0.1:8000',
|
||||
changeOrigin: true,
|
||||
},
|
||||
'/admin': {
|
||||
target: 'http://127.0.0.1:8000',
|
||||
"/api": {
|
||||
target: "http://localhost:8000",
|
||||
changeOrigin: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
});
|
||||
@@ -0,0 +1,21 @@
|
||||
FROM node:20-alpine AS build
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
COPY package.json yarn.lock ./
|
||||
COPY shared/package.json shared/
|
||||
COPY mobile/package.json mobile/
|
||||
|
||||
RUN yarn install --frozen-lockfile
|
||||
|
||||
COPY shared/ shared/
|
||||
COPY mobile/ mobile/
|
||||
|
||||
RUN yarn workspace @cloud-reader/shared build
|
||||
|
||||
# Expo export for web deployment
|
||||
RUN yarn workspace @cloud-reader/mobile expo export --platform web
|
||||
|
||||
FROM nginx:alpine
|
||||
COPY --from=build /app/mobile/dist /usr/share/nginx/html
|
||||
EXPOSE 80
|
||||
@@ -0,0 +1,22 @@
|
||||
{
|
||||
"expo": {
|
||||
"name": "Cloud Reader",
|
||||
"slug": "cloud-reader",
|
||||
"version": "0.1.0",
|
||||
"orientation": "portrait",
|
||||
"icon": "./assets/icon.png",
|
||||
"scheme": "cloudreader",
|
||||
"userInterfaceStyle": "dark",
|
||||
"splash": {
|
||||
"backgroundColor": "#0f1419"
|
||||
},
|
||||
"ios": {
|
||||
"supportsTablet": true,
|
||||
"bundleIdentifier": "com.cloudreader.app"
|
||||
},
|
||||
"android": {
|
||||
"package": "com.cloudreader.app"
|
||||
},
|
||||
"plugins": ["expo-router"]
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
import React from "react";
|
||||
import { Stack } from "expo-router";
|
||||
import { StatusBar } from "expo-status-bar";
|
||||
|
||||
export default function RootLayout(): React.ReactElement {
|
||||
return (
|
||||
<>
|
||||
<StatusBar style="light" />
|
||||
<Stack
|
||||
screenOptions={{
|
||||
headerStyle: { backgroundColor: "#1a1f2e" },
|
||||
headerTintColor: "#e1e4ed",
|
||||
headerTitleStyle: { fontWeight: "600" },
|
||||
contentStyle: { backgroundColor: "#0f1419" },
|
||||
}}
|
||||
>
|
||||
<Stack.Screen name="index" options={{ headerShown: false }} />
|
||||
<Stack.Screen name="login" options={{ title: "Sign In" }} />
|
||||
<Stack.Screen name="register" options={{ title: "Create Account" }} />
|
||||
<Stack.Screen name="library" options={{ title: "My Library" }} />
|
||||
<Stack.Screen name="collections" options={{ title: "Collections" }} />
|
||||
<Stack.Screen name="settings" options={{ title: "Settings" }} />
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { Redirect } from "expo-router";
|
||||
|
||||
export default function IndexPage(): React.ReactElement {
|
||||
return <Redirect href="/login" />;
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { View, Text, FlatList, TouchableOpacity, StyleSheet, ActivityIndicator } from "react-native";
|
||||
import { useRouter } from "expo-router";
|
||||
import api from "../src/services/api";
|
||||
import type { Document } from "@cloud-reader/shared";
|
||||
|
||||
export default function LibraryScreen(): React.ReactElement {
|
||||
const router = useRouter();
|
||||
const [documents, setDocuments] = useState<Document[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const fetch = async (): Promise<void> => {
|
||||
try {
|
||||
const { data } = await api.get("/documents/");
|
||||
setDocuments(data.results || []);
|
||||
} catch {
|
||||
// Not authenticated
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
fetch();
|
||||
}, []);
|
||||
|
||||
const renderDoc = ({ item }: { item: Document }): React.ReactElement => (
|
||||
<TouchableOpacity style={styles.card} onPress={() => router.push(`/documents/${item.id}`)}>
|
||||
<View style={styles.cardContent}>
|
||||
<Text style={styles.cardTitle}>{item.title}</Text>
|
||||
{item.author && <Text style={styles.cardAuthor}>{item.author}</Text>}
|
||||
<View style={styles.cardMeta}>
|
||||
<Text style={styles.badge}>{item.file_type.toUpperCase()}</Text>
|
||||
<Text style={styles.metaText}>{(item.file_size / (1024 * 1024)).toFixed(1)} MB</Text>
|
||||
</View>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<View style={styles.center}>
|
||||
<ActivityIndicator size="large" color="#4f8cff" />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<View style={styles.header}>
|
||||
<Text style={styles.headerTitle}>My Library ({documents.length})</Text>
|
||||
</View>
|
||||
{documents.length === 0 ? (
|
||||
<View style={styles.center}>
|
||||
<Text style={styles.emptyText}>No documents yet.</Text>
|
||||
</View>
|
||||
) : (
|
||||
<FlatList
|
||||
data={documents}
|
||||
keyExtractor={(item) => String(item.id)}
|
||||
renderItem={renderDoc}
|
||||
contentContainerStyle={styles.list}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: { flex: 1, backgroundColor: "#0f1419" },
|
||||
center: { flex: 1, justifyContent: "center", alignItems: "center" },
|
||||
header: { padding: 16, backgroundColor: "#1a1f2e", borderBottomWidth: 1, borderBottomColor: "#2a3042" },
|
||||
headerTitle: { fontSize: 20, fontWeight: "700", color: "#e1e4ed" },
|
||||
list: { padding: 16 },
|
||||
card: { backgroundColor: "#1a1f2e", borderRadius: 12, padding: 16, marginBottom: 12, borderWidth: 1, borderColor: "#2a3042" },
|
||||
cardContent: {},
|
||||
cardTitle: { fontSize: 16, fontWeight: "600", color: "#e1e4ed", marginBottom: 4 },
|
||||
cardAuthor: { fontSize: 14, color: "#8892a4", marginBottom: 8 },
|
||||
cardMeta: { flexDirection: "row", gap: 10 },
|
||||
badge: { fontSize: 12, fontWeight: "600", color: "#4f8cff" },
|
||||
metaText: { fontSize: 12, color: "#8892a4" },
|
||||
emptyText: { color: "#8892a4", fontSize: 16 },
|
||||
});
|
||||
@@ -0,0 +1,78 @@
|
||||
import React, { useState } from "react";
|
||||
import { View, Text, TextInput, TouchableOpacity, StyleSheet, Alert, KeyboardAvoidingView, Platform } from "react-native";
|
||||
import { useRouter } from "expo-router";
|
||||
import AsyncStorage from "@react-native-async-storage/async-storage";
|
||||
import api from "../src/services/api";
|
||||
|
||||
export default function LoginScreen(): React.ReactElement {
|
||||
const router = useRouter();
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const handleLogin = async (): Promise<void> => {
|
||||
if (!email || !password) {
|
||||
Alert.alert("Error", "Please fill in all fields.");
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
try {
|
||||
const { data } = await api.post("/auth/token/", { email, password });
|
||||
await AsyncStorage.setItem("access_token", data.access);
|
||||
await AsyncStorage.setItem("refresh_token", data.refresh);
|
||||
router.replace("/library");
|
||||
} catch {
|
||||
Alert.alert("Error", "Invalid email or password.");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<KeyboardAvoidingView style={styles.container} behavior={Platform.OS === "ios" ? "padding" : "height"}>
|
||||
<View style={styles.card}>
|
||||
<Text style={styles.title}>Cloud Reader</Text>
|
||||
<Text style={styles.subtitle}>Sign in to continue</Text>
|
||||
|
||||
<Text style={styles.label}>Email</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={email}
|
||||
onChangeText={setEmail}
|
||||
autoCapitalize="none"
|
||||
keyboardType="email-address"
|
||||
placeholderTextColor="#8892a4"
|
||||
/>
|
||||
|
||||
<Text style={styles.label}>Password</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={password}
|
||||
onChangeText={setPassword}
|
||||
secureTextEntry
|
||||
placeholderTextColor="#8892a4"
|
||||
/>
|
||||
|
||||
<TouchableOpacity style={styles.button} onPress={handleLogin} disabled={loading}>
|
||||
<Text style={styles.buttonText}>{loading ? "Signing in..." : "Sign In"}</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<TouchableOpacity onPress={() => router.push("/register")}>
|
||||
<Text style={styles.link}>Don't have an account? Register</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</KeyboardAvoidingView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: { flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: "#0f1419", padding: 24 },
|
||||
card: { width: "100%", maxWidth: 400, padding: 32, backgroundColor: "#1a1f2e", borderRadius: 12 },
|
||||
title: { fontSize: 24, fontWeight: "700", color: "#e1e4ed", marginBottom: 4 },
|
||||
subtitle: { fontSize: 16, color: "#8892a4", marginBottom: 24 },
|
||||
label: { fontSize: 13, fontWeight: "500", color: "#8892a4", marginBottom: 6 },
|
||||
input: { backgroundColor: "#0f1419", borderWidth: 1, borderColor: "#2a3042", borderRadius: 8, padding: 12, color: "#e1e4ed", fontSize: 14, marginBottom: 16 },
|
||||
button: { backgroundColor: "#4f8cff", borderRadius: 8, padding: 14, alignItems: "center", marginTop: 8 },
|
||||
buttonText: { color: "#fff", fontWeight: "600", fontSize: 16 },
|
||||
link: { color: "#4f8cff", textAlign: "center", marginTop: 16, fontSize: 14 },
|
||||
});
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user