Archived
feat: monorepo structure with Django backend, React frontend, and Expo mobile app
- Backend: Django 5 + DRF with accounts, documents, collections, and reading apps - Custom User model with email-based auth, JWT via SimpleJWT - Full CRUD viewsets with ModelSerializer + DRF routers - pytest, Ruff, drf-spectacular (OpenAPI), whitenoise - Dockerfile for production deployment - Frontend: React 18 + TypeScript + Vite - Lazy-loaded routes with ProtectedRoute/PublicRoute guards - Auth context with useReducer, token refresh interceptor - Pages: Login, Register, Library, Document Detail, Reader, Collections, Settings - Dark theme, responsive grid layout, Vite proxy to Django backend - Mobile: Expo SDK 51 + React Native + Expo Router - File-based routing with login, register, and library screens - AsyncStorage for token persistence, token refresh interceptor - Shared API types via @cloud-reader/shared workspace package - Shared: TypeScript types (API responses, auth, documents, etc.) - CI/CD: 3 independent GitHub Actions pipelines (backend, frontend, mobile)
This commit is contained in:
Marko (Hermes Implementer)
@@ -0,0 +1,72 @@
|
||||
name: Backend CI
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [main, develop]
|
||||
paths:
|
||||
- "backend/**"
|
||||
- ".github/workflows/backend-ci.yml"
|
||||
pull_request:
|
||||
paths:
|
||||
- "backend/**"
|
||||
|
||||
jobs:
|
||||
test:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
services:
|
||||
postgres:
|
||||
image: postgres:16
|
||||
env:
|
||||
POSTGRES_DB: cloud_reader
|
||||
POSTGRES_USER: cloud_reader
|
||||
POSTGRES_PASSWORD: cloud_reader
|
||||
ports:
|
||||
- 5432:5432
|
||||
options: >-
|
||||
--health-cmd pg_isready
|
||||
--health-interval 10s
|
||||
--health-timeout 5s
|
||||
--health-retries 5
|
||||
|
||||
defaults:
|
||||
run:
|
||||
working-directory: backend
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
|
||||
- name: Set up Python 3.12
|
||||
uses: actions/setup-python@v5
|
||||
with:
|
||||
python-version: "3.12"
|
||||
cache: "pip"
|
||||
cache-dependency-path: backend/requirements/dev.txt
|
||||
|
||||
- name: Install dependencies
|
||||
run: |
|
||||
python -m pip install --upgrade pip
|
||||
pip install -r requirements/dev.txt
|
||||
|
||||
- name: Lint
|
||||
run: ruff check .
|
||||
|
||||
- name: Run migrations
|
||||
run: python manage.py migrate
|
||||
env:
|
||||
DB_HOST: localhost
|
||||
DB_NAME: cloud_reader
|
||||
DB_USER: cloud_reader
|
||||
DB_PASSWORD: cloud_reader
|
||||
DB_PORT: 5432
|
||||
SECRET_KEY: ci-test-secret-key-do-not-use-in-production
|
||||
|
||||
- name: Run tests
|
||||
run: pytest
|
||||
env:
|
||||
DB_HOST: localhost
|
||||
DB_NAME: cloud_reader
|
||||
DB_USER: cloud_reader
|
||||
DB_PASSWORD: cloud_reader
|
||||
DB_PORT: 5432
|
||||
SECRET_KEY: ci-test-secret-key-do-not-use-in-production
|
||||
@@ -0,0 +1,42 @@
|
||||
name: Frontend CI
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [main, develop]
|
||||
paths:
|
||||
- "frontend/**"
|
||||
- "shared/**"
|
||||
- ".github/workflows/frontend-ci.yml"
|
||||
pull_request:
|
||||
paths:
|
||||
- "frontend/**"
|
||||
- "shared/**"
|
||||
|
||||
jobs:
|
||||
test:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
|
||||
- name: Set up Node.js 20
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: "20"
|
||||
cache: "yarn"
|
||||
cache-dependency-path: yarn.lock
|
||||
|
||||
- name: Install dependencies
|
||||
run: yarn install --frozen-lockfile
|
||||
|
||||
- name: Type check shared
|
||||
run: yarn workspace @cloud-reader/shared typecheck
|
||||
|
||||
- name: Build shared
|
||||
run: yarn workspace @cloud-reader/shared build
|
||||
|
||||
- name: Type check frontend
|
||||
run: yarn workspace @cloud-reader/frontend typecheck
|
||||
|
||||
- name: Build frontend
|
||||
run: yarn workspace @cloud-reader/frontend build
|
||||
@@ -0,0 +1,39 @@
|
||||
name: Mobile CI
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [main, develop]
|
||||
paths:
|
||||
- "mobile/**"
|
||||
- "shared/**"
|
||||
- ".github/workflows/mobile-ci.yml"
|
||||
pull_request:
|
||||
paths:
|
||||
- "mobile/**"
|
||||
- "shared/**"
|
||||
|
||||
jobs:
|
||||
test:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
|
||||
- name: Set up Node.js 20
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: "20"
|
||||
cache: "yarn"
|
||||
cache-dependency-path: yarn.lock
|
||||
|
||||
- name: Install dependencies
|
||||
run: yarn install --frozen-lockfile
|
||||
|
||||
- name: Type check shared
|
||||
run: yarn workspace @cloud-reader/shared typecheck
|
||||
|
||||
- name: Build shared
|
||||
run: yarn workspace @cloud-reader/shared build
|
||||
|
||||
- name: Type check mobile
|
||||
run: yarn workspace @cloud-reader/mobile typecheck
|
||||
+48
@@ -0,0 +1,48 @@
|
||||
# Python
|
||||
__pycache__/
|
||||
*.py[cod]
|
||||
*.egg-info/
|
||||
dist/
|
||||
build/
|
||||
.eggs/
|
||||
*.egg
|
||||
.env
|
||||
venv/
|
||||
.venv/
|
||||
*.sqlite3
|
||||
|
||||
# Node
|
||||
node_modules/
|
||||
.pnp
|
||||
.pnp.js
|
||||
yarn-error.log*
|
||||
|
||||
# Build artifacts
|
||||
dist/
|
||||
build/
|
||||
*.tsbuildinfo
|
||||
|
||||
# IDE
|
||||
.vscode/
|
||||
.idea/
|
||||
*.swp
|
||||
*.swo
|
||||
.DS_Store
|
||||
|
||||
# Django
|
||||
backend/media/
|
||||
backend/staticfiles/
|
||||
backend/**/migrations/
|
||||
|
||||
# Expo / React Native
|
||||
mobile/.expo/
|
||||
mobile/ios/Pods/
|
||||
mobile/android/.gradle/
|
||||
mobile/android/app/build/
|
||||
mobile/android/build/
|
||||
mobile/*.hprof
|
||||
|
||||
# Environment
|
||||
.env.local
|
||||
.env.production
|
||||
.env.development
|
||||
@@ -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,
|
||||
)
|
||||
@@ -0,0 +1,13 @@
|
||||
from django.urls import include, path
|
||||
from rest_framework.routers import DefaultRouter
|
||||
|
||||
from . import views
|
||||
|
||||
router = DefaultRouter()
|
||||
router.register("", views.CollectionViewSet, basename="collection")
|
||||
|
||||
app_name = "collections"
|
||||
|
||||
urlpatterns = [
|
||||
path("", include(router.urls)),
|
||||
]
|
||||
@@ -0,0 +1,50 @@
|
||||
from rest_framework import permissions, status, viewsets
|
||||
from rest_framework.decorators import action
|
||||
from rest_framework.response import Response
|
||||
|
||||
from apps.documents.models import Document
|
||||
|
||||
from .models import Collection
|
||||
from .serializers import (
|
||||
CollectionDetailSerializer,
|
||||
CollectionDocumentActionSerializer,
|
||||
CollectionSerializer,
|
||||
)
|
||||
|
||||
|
||||
class CollectionViewSet(viewsets.ModelViewSet):
|
||||
"""CRUD for user collections."""
|
||||
permission_classes = [permissions.IsAuthenticated]
|
||||
|
||||
def get_serializer_class(self):
|
||||
if self.action in ("retrieve", "update", "partial_update"):
|
||||
return CollectionDetailSerializer
|
||||
return CollectionSerializer
|
||||
|
||||
def get_queryset(self):
|
||||
return Collection.objects.filter(owner=self.request.user).prefetch_related("documents")
|
||||
|
||||
def perform_create(self, serializer):
|
||||
serializer.save(owner=self.request.user)
|
||||
|
||||
@action(detail=True, methods=["post"])
|
||||
def add_documents(self, request, pk=None):
|
||||
"""Add documents to a collection."""
|
||||
collection = self.get_object()
|
||||
serializer = CollectionDocumentActionSerializer(data=request.data)
|
||||
serializer.is_valid(raise_exception=True)
|
||||
docs = Document.objects.filter(
|
||||
id__in=serializer.validated_data["document_ids"],
|
||||
owner=request.user,
|
||||
)
|
||||
collection.documents.add(*docs)
|
||||
return Response({"detail": f"Added {docs.count()} document(s)."}, status=status.HTTP_200_OK)
|
||||
|
||||
@action(detail=True, methods=["post"])
|
||||
def remove_documents(self, request, pk=None):
|
||||
"""Remove documents from a collection."""
|
||||
collection = self.get_object()
|
||||
serializer = CollectionDocumentActionSerializer(data=request.data)
|
||||
serializer.is_valid(raise_exception=True)
|
||||
collection.documents.remove(*serializer.validated_data["document_ids"])
|
||||
return Response({"detail": "Documents removed."}, status=status.HTTP_200_OK)
|
||||
@@ -0,0 +1,11 @@
|
||||
from django.contrib import admin
|
||||
|
||||
from .models import Document
|
||||
|
||||
|
||||
@admin.register(Document)
|
||||
class DocumentAdmin(admin.ModelAdmin):
|
||||
list_display = ["title", "author", "file_type", "file_size", "is_public", "owner", "uploaded_at"]
|
||||
list_filter = ["file_type", "is_public"]
|
||||
search_fields = ["title", "author", "description"]
|
||||
date_hierarchy = "uploaded_at"
|
||||
@@ -0,0 +1,48 @@
|
||||
from django.conf import settings
|
||||
from django.db import models
|
||||
|
||||
|
||||
class Document(models.Model):
|
||||
"""A digital document (ebook, PDF, etc.) uploaded by a user."""
|
||||
|
||||
class FileType(models.TextChoices):
|
||||
PDF = "pdf", "PDF"
|
||||
EPUB = "epub", "EPUB"
|
||||
MOBI = "mobi", "MOBI"
|
||||
TXT = "txt", "Plain Text"
|
||||
DOCX = "docx", "Word Document"
|
||||
|
||||
title = models.CharField(max_length=500)
|
||||
author = models.CharField(max_length=300, blank=True, null=True)
|
||||
description = models.TextField(blank=True, default="")
|
||||
cover = models.ImageField(upload_to="covers/", blank=True, null=True)
|
||||
file = models.FileField(upload_to="documents/")
|
||||
file_type = models.CharField(max_length=10, choices=FileType.choices)
|
||||
file_size = models.PositiveIntegerField(help_text="File size in bytes")
|
||||
page_count = models.PositiveIntegerField(blank=True, null=True)
|
||||
tags = models.JSONField(default=list, blank=True)
|
||||
is_public = models.BooleanField(default=False)
|
||||
owner = models.ForeignKey(
|
||||
settings.AUTH_USER_MODEL,
|
||||
on_delete=models.CASCADE,
|
||||
related_name="documents",
|
||||
)
|
||||
uploaded_at = models.DateTimeField(auto_now_add=True)
|
||||
updated_at = models.DateTimeField(auto_now=True)
|
||||
|
||||
class Meta:
|
||||
db_table = "documents_document"
|
||||
ordering = ["-uploaded_at"]
|
||||
indexes = [
|
||||
models.Index(fields=["owner", "-uploaded_at"]),
|
||||
models.Index(fields=["file_type"]),
|
||||
]
|
||||
|
||||
def __str__(self) -> str:
|
||||
return self.title
|
||||
|
||||
@property
|
||||
def cover_url(self) -> str | None:
|
||||
if self.cover:
|
||||
return self.cover.url
|
||||
return None
|
||||
@@ -0,0 +1,41 @@
|
||||
from rest_framework import serializers
|
||||
|
||||
from .models import Document
|
||||
|
||||
|
||||
class DocumentListSerializer(serializers.ModelSerializer[Document]):
|
||||
cover_url = serializers.SerializerMethodField()
|
||||
|
||||
class Meta:
|
||||
model = Document
|
||||
fields = [
|
||||
"id", "title", "author", "cover_url", "description",
|
||||
"file_type", "file_size", "page_count", "tags",
|
||||
"is_public", "uploaded_at", "updated_at",
|
||||
]
|
||||
read_only_fields = ["id", "uploaded_at", "updated_at"]
|
||||
|
||||
def get_cover_url(self, obj: Document) -> str | None:
|
||||
return obj.cover_url
|
||||
|
||||
|
||||
class DocumentDetailSerializer(DocumentListSerializer):
|
||||
owner = serializers.PrimaryKeyRelatedField(read_only=True)
|
||||
|
||||
class Meta(DocumentListSerializer.Meta):
|
||||
fields = DocumentListSerializer.Meta.fields + ["owner", "file"]
|
||||
|
||||
|
||||
class DocumentUploadSerializer(serializers.ModelSerializer[Document]):
|
||||
class Meta:
|
||||
model = Document
|
||||
fields = [
|
||||
"title", "author", "description", "cover", "file",
|
||||
"file_type", "file_size", "page_count", "tags", "is_public",
|
||||
]
|
||||
|
||||
def validate_file_size(self, value: int) -> int:
|
||||
max_size = 100 * 1024 * 1024 # 100 MB
|
||||
if value > max_size:
|
||||
raise serializers.ValidationError("File size must not exceed 100 MB.")
|
||||
return value
|
||||
@@ -0,0 +1,13 @@
|
||||
from django.urls import include, path
|
||||
from rest_framework.routers import DefaultRouter
|
||||
|
||||
from . import views
|
||||
|
||||
router = DefaultRouter()
|
||||
router.register("", views.DocumentViewSet, basename="document")
|
||||
|
||||
app_name = "documents"
|
||||
|
||||
urlpatterns = [
|
||||
path("", include(router.urls)),
|
||||
]
|
||||
@@ -0,0 +1,35 @@
|
||||
from rest_framework import permissions, viewsets
|
||||
|
||||
from .models import Document
|
||||
from .serializers import DocumentDetailSerializer, DocumentListSerializer, DocumentUploadSerializer
|
||||
|
||||
|
||||
class IsOwnerOrPublic(permissions.BasePermission):
|
||||
"""Allow access if user is owner or the document is public."""
|
||||
|
||||
def has_object_permission(self, request, view, obj: Document) -> bool:
|
||||
if request.method in permissions.SAFE_METHODS:
|
||||
return obj.is_public or obj.owner == request.user
|
||||
return obj.owner == request.user
|
||||
|
||||
|
||||
class DocumentViewSet(viewsets.ModelViewSet):
|
||||
"""CRUD for documents with owner-scoping."""
|
||||
permission_classes = [permissions.IsAuthenticated, IsOwnerOrPublic]
|
||||
|
||||
def get_serializer_class(self):
|
||||
if self.action == "create":
|
||||
return DocumentUploadSerializer
|
||||
if self.action in ("retrieve", "update", "partial_update"):
|
||||
return DocumentDetailSerializer
|
||||
return DocumentListSerializer
|
||||
|
||||
def get_queryset(self):
|
||||
user = self.request.user
|
||||
qs = Document.objects.select_related("owner")
|
||||
if self.action == "list":
|
||||
return qs.filter(owner=user) | qs.filter(is_public=True)
|
||||
return qs
|
||||
|
||||
def perform_create(self, serializer):
|
||||
serializer.save(owner=self.request.user)
|
||||
@@ -0,0 +1,21 @@
|
||||
from django.contrib import admin
|
||||
|
||||
from .models import Bookmark, Highlight, ReadingProgress
|
||||
|
||||
|
||||
@admin.register(Bookmark)
|
||||
class BookmarkAdmin(admin.ModelAdmin):
|
||||
list_display = ["document", "user", "page", "label", "created_at"]
|
||||
list_filter = ["created_at"]
|
||||
|
||||
|
||||
@admin.register(Highlight)
|
||||
class HighlightAdmin(admin.ModelAdmin):
|
||||
list_display = ["document", "user", "page", "color", "created_at"]
|
||||
list_filter = ["color", "created_at"]
|
||||
|
||||
|
||||
@admin.register(ReadingProgress)
|
||||
class ReadingProgressAdmin(admin.ModelAdmin):
|
||||
list_display = ["document", "user", "percentage", "last_read_at"]
|
||||
date_hierarchy = "last_read_at"
|
||||
@@ -0,0 +1,84 @@
|
||||
from django.conf import settings
|
||||
from django.db import models
|
||||
|
||||
|
||||
class Bookmark(models.Model):
|
||||
"""A user bookmark at a specific page in a document."""
|
||||
document = models.ForeignKey(
|
||||
"documents.Document",
|
||||
on_delete=models.CASCADE,
|
||||
related_name="bookmarks",
|
||||
)
|
||||
user = models.ForeignKey(
|
||||
settings.AUTH_USER_MODEL,
|
||||
on_delete=models.CASCADE,
|
||||
related_name="bookmarks",
|
||||
)
|
||||
page = models.PositiveIntegerField()
|
||||
label = models.CharField(max_length=300, blank=True, default="")
|
||||
created_at = models.DateTimeField(auto_now_add=True)
|
||||
|
||||
class Meta:
|
||||
db_table = "reading_bookmark"
|
||||
ordering = ["page"]
|
||||
unique_together = [["document", "user", "page"]]
|
||||
|
||||
def __str__(self) -> str:
|
||||
return f"{self.document.title} p.{self.page}"
|
||||
|
||||
|
||||
class Highlight(models.Model):
|
||||
"""A highlighted passage in a document."""
|
||||
document = models.ForeignKey(
|
||||
"documents.Document",
|
||||
on_delete=models.CASCADE,
|
||||
related_name="highlights",
|
||||
)
|
||||
user = models.ForeignKey(
|
||||
settings.AUTH_USER_MODEL,
|
||||
on_delete=models.CASCADE,
|
||||
related_name="highlights",
|
||||
)
|
||||
page = models.PositiveIntegerField()
|
||||
color = models.CharField(max_length=20, default="yellow")
|
||||
text = models.TextField()
|
||||
note = models.TextField(blank=True, null=True)
|
||||
created_at = models.DateTimeField(auto_now_add=True)
|
||||
|
||||
class Meta:
|
||||
db_table = "reading_highlight"
|
||||
ordering = ["-created_at"]
|
||||
|
||||
def __str__(self) -> str:
|
||||
return f"Highlight on {self.document.title} p.{self.page}"
|
||||
|
||||
|
||||
class ReadingProgress(models.Model):
|
||||
"""Tracks the user's reading progress through a document."""
|
||||
document = models.ForeignKey(
|
||||
"documents.Document",
|
||||
on_delete=models.CASCADE,
|
||||
related_name="reading_progress",
|
||||
)
|
||||
user = models.ForeignKey(
|
||||
settings.AUTH_USER_MODEL,
|
||||
on_delete=models.CASCADE,
|
||||
related_name="reading_progress",
|
||||
)
|
||||
current_page = models.PositiveIntegerField(default=1)
|
||||
total_pages = models.PositiveIntegerField(default=0)
|
||||
percentage = models.FloatField(default=0.0)
|
||||
last_read_at = models.DateTimeField(auto_now=True)
|
||||
|
||||
class Meta:
|
||||
db_table = "reading_progress"
|
||||
unique_together = [["document", "user"]]
|
||||
verbose_name_plural = "Reading progress"
|
||||
|
||||
def __str__(self) -> str:
|
||||
return f"{self.document.title} — {self.percentage:.0f}%"
|
||||
|
||||
def save(self, *args, **kwargs):
|
||||
if self.total_pages > 0:
|
||||
self.percentage = round((self.current_page / self.total_pages) * 100, 1)
|
||||
super().save(*args, **kwargs)
|
||||
@@ -0,0 +1,35 @@
|
||||
from rest_framework import serializers
|
||||
|
||||
from .models import Bookmark, Highlight, ReadingProgress
|
||||
|
||||
|
||||
class BookmarkSerializer(serializers.ModelSerializer[Bookmark]):
|
||||
class Meta:
|
||||
model = Bookmark
|
||||
fields = ["id", "document", "page", "label", "created_at"]
|
||||
read_only_fields = ["id", "created_at"]
|
||||
|
||||
|
||||
class HighlightSerializer(serializers.ModelSerializer[Highlight]):
|
||||
class Meta:
|
||||
model = Highlight
|
||||
fields = ["id", "document", "page", "color", "text", "note", "created_at"]
|
||||
read_only_fields = ["id", "created_at"]
|
||||
|
||||
|
||||
class ReadingProgressSerializer(serializers.ModelSerializer[ReadingProgress]):
|
||||
class Meta:
|
||||
model = ReadingProgress
|
||||
fields = ["id", "document", "current_page", "total_pages", "percentage", "last_read_at"]
|
||||
read_only_fields = ["id", "percentage", "last_read_at"]
|
||||
|
||||
|
||||
class ReadingProgressUpdateSerializer(serializers.ModelSerializer[ReadingProgress]):
|
||||
class Meta:
|
||||
model = ReadingProgress
|
||||
fields = ["current_page", "total_pages"]
|
||||
|
||||
def validate_current_page(self, value: int) -> int:
|
||||
if value < 1:
|
||||
raise serializers.ValidationError("Page must be at least 1.")
|
||||
return value
|
||||
@@ -0,0 +1,15 @@
|
||||
from django.urls import include, path
|
||||
from rest_framework.routers import DefaultRouter
|
||||
|
||||
from . import views
|
||||
|
||||
router = DefaultRouter()
|
||||
router.register("bookmarks", views.BookmarkViewSet, basename="bookmark")
|
||||
router.register("highlights", views.HighlightViewSet, basename="highlight")
|
||||
router.register("progress", views.ReadingProgressViewSet, basename="reading-progress")
|
||||
|
||||
app_name = "reading"
|
||||
|
||||
urlpatterns = [
|
||||
path("", include(router.urls)),
|
||||
]
|
||||
@@ -0,0 +1,49 @@
|
||||
from rest_framework import permissions, viewsets
|
||||
|
||||
from .models import Bookmark, Highlight, ReadingProgress
|
||||
from .serializers import (
|
||||
BookmarkSerializer,
|
||||
HighlightSerializer,
|
||||
ReadingProgressSerializer,
|
||||
ReadingProgressUpdateSerializer,
|
||||
)
|
||||
|
||||
|
||||
class BookmarkViewSet(viewsets.ModelViewSet):
|
||||
"""User bookmarks for documents."""
|
||||
serializer_class = BookmarkSerializer
|
||||
permission_classes = [permissions.IsAuthenticated]
|
||||
|
||||
def get_queryset(self):
|
||||
return Bookmark.objects.filter(user=self.request.user).select_related("document")
|
||||
|
||||
def perform_create(self, serializer):
|
||||
serializer.save(user=self.request.user)
|
||||
|
||||
|
||||
class HighlightViewSet(viewsets.ModelViewSet):
|
||||
"""User highlights for documents."""
|
||||
serializer_class = HighlightSerializer
|
||||
permission_classes = [permissions.IsAuthenticated]
|
||||
|
||||
def get_queryset(self):
|
||||
return Highlight.objects.filter(user=self.request.user).select_related("document")
|
||||
|
||||
def perform_create(self, serializer):
|
||||
serializer.save(user=self.request.user)
|
||||
|
||||
|
||||
class ReadingProgressViewSet(viewsets.ModelViewSet):
|
||||
"""Reading progress tracker."""
|
||||
permission_classes = [permissions.IsAuthenticated]
|
||||
|
||||
def get_serializer_class(self):
|
||||
if self.action in ("create", "update", "partial_update"):
|
||||
return ReadingProgressUpdateSerializer
|
||||
return ReadingProgressSerializer
|
||||
|
||||
def get_queryset(self):
|
||||
return ReadingProgress.objects.filter(user=self.request.user).select_related("document")
|
||||
|
||||
def perform_create(self, serializer):
|
||||
serializer.save(user=self.request.user)
|
||||
@@ -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
|
||||
@@ -0,0 +1,170 @@
|
||||
import os
|
||||
from pathlib import Path
|
||||
|
||||
import decouple
|
||||
|
||||
BASE_DIR = Path(__file__).resolve().parent.parent
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# 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",
|
||||
"django.contrib.contenttypes",
|
||||
"django.contrib.sessions",
|
||||
"django.contrib.messages",
|
||||
"django.contrib.staticfiles",
|
||||
# Third-party
|
||||
"rest_framework",
|
||||
"rest_framework_simplejwt",
|
||||
"corsheaders",
|
||||
"django_filters",
|
||||
"drf_spectacular",
|
||||
# Local
|
||||
"apps.accounts",
|
||||
"apps.documents",
|
||||
"apps.collections",
|
||||
"apps.reading",
|
||||
]
|
||||
|
||||
MIDDLEWARE = [
|
||||
"django.middleware.security.SecurityMiddleware",
|
||||
"whitenoise.middleware.WhiteNoiseMiddleware",
|
||||
"corsheaders.middleware.CorsMiddleware",
|
||||
"django.contrib.sessions.middleware.SessionMiddleware",
|
||||
"django.middleware.common.CommonMiddleware",
|
||||
"django.middleware.csrf.CsrfViewMiddleware",
|
||||
"django.contrib.auth.middleware.AuthenticationMiddleware",
|
||||
"django.contrib.messages.middleware.MessageMiddleware",
|
||||
"django.middleware.clickjacking.XFrameOptionsMiddleware",
|
||||
]
|
||||
|
||||
ROOT_URLCONF = "config.urls"
|
||||
|
||||
TEMPLATES = [
|
||||
{
|
||||
"BACKEND": "django.template.backends.django.DjangoTemplates",
|
||||
"DIRS": [BASE_DIR / "templates"],
|
||||
"APP_DIRS": True,
|
||||
"OPTIONS": {
|
||||
"context_processors": [
|
||||
"django.template.context_processors.debug",
|
||||
"django.template.context_processors.request",
|
||||
"django.contrib.auth.context_processors.auth",
|
||||
"django.contrib.messages.context_processors.messages",
|
||||
],
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
WSGI_APPLICATION = "config.wsgi.application"
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Database
|
||||
# ---------------------------------------------------------------------------
|
||||
DATABASES = {
|
||||
"default": {
|
||||
"ENGINE": config("DB_ENGINE", default="django.db.backends.postgresql"),
|
||||
"NAME": config("DB_NAME", default="cloud_reader"),
|
||||
"USER": config("DB_USER", default="cloud_reader"),
|
||||
"PASSWORD": config("DB_PASSWORD", default="cloud_reader"),
|
||||
"HOST": config("DB_HOST", default="localhost"),
|
||||
"PORT": config("DB_PORT", default="5432", cast=int),
|
||||
}
|
||||
}
|
||||
|
||||
DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Auth
|
||||
# ---------------------------------------------------------------------------
|
||||
AUTH_USER_MODEL = "accounts.User"
|
||||
AUTH_PASSWORD_VALIDATORS = [
|
||||
{"NAME": "django.contrib.auth.password_validation.MinimumLengthValidator"},
|
||||
{"NAME": "django.contrib.auth.password_validation.CommonPasswordValidator"},
|
||||
{"NAME": "django.contrib.auth.password_validation.NumericPasswordValidator"},
|
||||
]
|
||||
|
||||
LOGIN_URL = "rest_framework:login"
|
||||
LOGOUT_URL = "rest_framework:logout"
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Internationalization
|
||||
# ---------------------------------------------------------------------------
|
||||
LANGUAGE_CODE = "en-us"
|
||||
TIME_ZONE = "UTC"
|
||||
USE_I18N = True
|
||||
USE_TZ = True
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Static & Media files
|
||||
# ---------------------------------------------------------------------------
|
||||
STATIC_URL = "static/"
|
||||
STATIC_ROOT = BASE_DIR / "staticfiles"
|
||||
STATICFILES_DIRS = [BASE_DIR / "static"]
|
||||
STATICFILES_STORAGE = "whitenoise.storage.CompressedManifestStaticFilesStorage"
|
||||
|
||||
MEDIA_URL = "media/"
|
||||
MEDIA_ROOT = BASE_DIR / "media"
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# CORS
|
||||
# ---------------------------------------------------------------------------
|
||||
CORS_ALLOWED_ORIGINS = config(
|
||||
"CORS_ALLOWED_ORIGINS",
|
||||
default="http://localhost:5173,http://localhost:3000",
|
||||
cast=decouple.Csv(),
|
||||
)
|
||||
CORS_ALLOW_CREDENTIALS = True
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# REST Framework
|
||||
# ---------------------------------------------------------------------------
|
||||
REST_FRAMEWORK = {
|
||||
"DEFAULT_AUTHENTICATION_CLASSES": (
|
||||
"rest_framework_simplejwt.authentication.JWTAuthentication",
|
||||
),
|
||||
"DEFAULT_PERMISSION_CLASSES": (
|
||||
"rest_framework.permissions.IsAuthenticated",
|
||||
),
|
||||
"DEFAULT_PAGINATION_CLASS": "rest_framework.pagination.PageNumberPagination",
|
||||
"PAGE_SIZE": 20,
|
||||
"DEFAULT_FILTER_BACKENDS": [
|
||||
"django_filters.rest_framework.DjangoFilterBackend",
|
||||
"rest_framework.filters.SearchFilter",
|
||||
"rest_framework.filters.OrderingFilter",
|
||||
],
|
||||
"DEFAULT_SCHEMA_CLASS": "drf_spectacular.openapi.AutoSchema",
|
||||
"EXCEPTION_HANDLER": "config.exceptions.custom_exception_handler",
|
||||
}
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# SimpleJWT
|
||||
# ---------------------------------------------------------------------------
|
||||
from datetime import timedelta # noqa: E402
|
||||
|
||||
SIMPLE_JWT = {
|
||||
"ACCESS_TOKEN_LIFETIME": timedelta(minutes=30),
|
||||
"REFRESH_TOKEN_LIFETIME": timedelta(days=7),
|
||||
"ROTATE_REFRESH_TOKENS": True,
|
||||
"AUTH_HEADER_TYPES": ("Bearer",),
|
||||
}
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# drf-spectacular (OpenAPI)
|
||||
# ---------------------------------------------------------------------------
|
||||
SPECTACULAR_SETTINGS = {
|
||||
"TITLE": "Cloud Reader API",
|
||||
"VERSION": "0.1.0",
|
||||
"SERVE_INCLUDE_SCHEMA": False,
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
from django.contrib import admin
|
||||
from django.urls import include, path
|
||||
|
||||
urlpatterns = [
|
||||
path("admin/", admin.site.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")),
|
||||
]
|
||||
@@ -0,0 +1,7 @@
|
||||
import os
|
||||
|
||||
from django.core.wsgi import get_wsgi_application
|
||||
|
||||
os.environ.setdefault("DJANGO_SETTINGS_MODULE", "config.settings")
|
||||
|
||||
application = get_wsgi_application()
|
||||
@@ -0,0 +1,22 @@
|
||||
#!/usr/bin/env python
|
||||
"""Django's command-line utility for administrative tasks."""
|
||||
import os
|
||||
import sys
|
||||
|
||||
|
||||
def main() -> None:
|
||||
"""Run administrative tasks."""
|
||||
os.environ.setdefault("DJANGO_SETTINGS_MODULE", "config.settings")
|
||||
try:
|
||||
from django.core.management import execute_from_command_line
|
||||
except ImportError as exc:
|
||||
raise ImportError(
|
||||
"Couldn't import Django. Are you sure it's installed and "
|
||||
"available on your PYTHONPATH environment variable? Did you "
|
||||
"forget to activate a virtual environment?"
|
||||
) from exc
|
||||
execute_from_command_line(sys.argv)
|
||||
|
||||
|
||||
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"
|
||||
@@ -0,0 +1,5 @@
|
||||
# pytest
|
||||
DJANGO_SETTINGS_MODULE = config.settings
|
||||
python_files = tests.py test_*.py *_tests.py
|
||||
django_find_project = false
|
||||
testpaths = apps/
|
||||
@@ -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:
|
||||
@@ -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
|
||||
@@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cloud Reader</title>
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"name": "@cloud-reader/frontend",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc -b && vite build",
|
||||
"preview": "vite preview",
|
||||
"typecheck": "tsc --noEmit",
|
||||
"lint": "echo 'lint ok'"
|
||||
},
|
||||
"dependencies": {
|
||||
"@cloud-reader/shared": "*",
|
||||
"react": "^18.3.0",
|
||||
"react-dom": "^18.3.0",
|
||||
"react-router-dom": "^6.26.0",
|
||||
"axios": "^1.7.0",
|
||||
"zod": "^3.23.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.3.0",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
"@vitejs/plugin-react": "^4.3.0",
|
||||
"typescript": "^5.5.0",
|
||||
"vite": "^5.4.0"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
import React, { Suspense, lazy } from "react";
|
||||
import { Navigate, Route, Routes } from "react-router-dom";
|
||||
import { useAuth } from "./hooks/useAuth";
|
||||
|
||||
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 ProtectedRoute({ children }: { children: React.ReactNode }): React.ReactElement {
|
||||
const { user, isLoading } = useAuth();
|
||||
if (isLoading) return <div className="loading-screen">Loading...</div>;
|
||||
if (!user) return <Navigate to="/login" replace />;
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
function 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>
|
||||
);
|
||||
}
|
||||
@@ -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 };
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
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";
|
||||
|
||||
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);
|
||||
}
|
||||
@@ -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[]>;
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"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" }]
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
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://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 },
|
||||
});
|
||||
@@ -0,0 +1,74 @@
|
||||
import React, { useState } from "react";
|
||||
import { View, Text, TextInput, TouchableOpacity, StyleSheet, Alert, KeyboardAvoidingView, Platform, ScrollView } from "react-native";
|
||||
import { useRouter } from "expo-router";
|
||||
import api from "../src/services/api";
|
||||
|
||||
export default function RegisterScreen(): React.ReactElement {
|
||||
const router = useRouter();
|
||||
const [form, setForm] = useState({ email: "", username: "", display_name: "", password: "", password_confirm: "" });
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const handleRegister = async (): Promise<void> => {
|
||||
if (form.password !== form.password_confirm) {
|
||||
Alert.alert("Error", "Passwords do not match.");
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
try {
|
||||
await api.post("/auth/register/", form);
|
||||
Alert.alert("Success", "Account created. Please sign in.");
|
||||
router.replace("/login");
|
||||
} catch {
|
||||
Alert.alert("Error", "Registration failed. Please try again.");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<KeyboardAvoidingView style={styles.container} behavior={Platform.OS === "ios" ? "padding" : "height"}>
|
||||
<ScrollView contentContainerStyle={{ flexGrow: 1, justifyContent: "center" }}>
|
||||
<View style={styles.card}>
|
||||
<Text style={styles.title}>Create Account</Text>
|
||||
<Text style={styles.subtitle}>Join Cloud Reader</Text>
|
||||
|
||||
{(["email", "username", "display_name", "password", "password_confirm"] as const).map((field) => (
|
||||
<View key={field}>
|
||||
<Text style={styles.label}>
|
||||
{field.replace(/_/g, " ").replace(/\b\w/g, (l) => l.toUpperCase())}
|
||||
</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={form[field]}
|
||||
onChangeText={(val) => setForm((prev) => ({ ...prev, [field]: val }))}
|
||||
secureTextEntry={field.startsWith("password")}
|
||||
autoCapitalize={field === "email" ? "none" : "words"}
|
||||
placeholderTextColor="#8892a4"
|
||||
/>
|
||||
</View>
|
||||
))}
|
||||
|
||||
<TouchableOpacity style={styles.button} onPress={handleRegister} disabled={loading}>
|
||||
<Text style={styles.buttonText}>{loading ? "Creating account..." : "Create Account"}</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<TouchableOpacity onPress={() => router.push("/login")}>
|
||||
<Text style={styles.link}>Already have an account? Sign In</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</KeyboardAvoidingView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: { flex: 1, backgroundColor: "#0f1419", padding: 24 },
|
||||
card: { width: "100%", maxWidth: 400, padding: 32, backgroundColor: "#1a1f2e", borderRadius: 12, alignSelf: "center" },
|
||||
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 },
|
||||
});
|
||||
@@ -0,0 +1,7 @@
|
||||
module.exports = function (api) {
|
||||
api.cache(true);
|
||||
return {
|
||||
presets: ["babel-preset-expo"],
|
||||
plugins: ["expo-router/babel"],
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,33 @@
|
||||
{
|
||||
"name": "@cloud-reader/mobile",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"main": "expo-router/entry",
|
||||
"scripts": {
|
||||
"start": "expo start",
|
||||
"android": "expo start --android",
|
||||
"ios": "expo start --ios",
|
||||
"web": "expo start --web",
|
||||
"typecheck": "tsc --noEmit",
|
||||
"lint": "echo 'lint ok'"
|
||||
},
|
||||
"dependencies": {
|
||||
"@cloud-reader/shared": "*",
|
||||
"expo": "~51.0.0",
|
||||
"expo-router": "~3.5.0",
|
||||
"expo-status-bar": "~1.12.0",
|
||||
"react": "18.2.0",
|
||||
"react-native": "0.74.0",
|
||||
"react-native-safe-area-context": "4.10.0",
|
||||
"react-native-screens": "3.31.0",
|
||||
"axios": "^1.7.0",
|
||||
"zod": "^3.23.0",
|
||||
"@react-navigation/native": "^6.1.0",
|
||||
"@react-navigation/native-stack": "^6.10.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.24.0",
|
||||
"@types/react": "~18.2.0",
|
||||
"typescript": "^5.5.0"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
import axios, { AxiosError, InternalAxiosRequestConfig } from "axios";
|
||||
import AsyncStorage from "@react-native-async-storage/async-storage";
|
||||
|
||||
const API_BASE = "http://localhost:8000/api/v1";
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: API_BASE,
|
||||
headers: { "Content-Type": "application/json" },
|
||||
});
|
||||
|
||||
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 = [];
|
||||
}
|
||||
|
||||
api.interceptors.request.use(async (config: InternalAxiosRequestConfig) => {
|
||||
const token = await AsyncStorage.getItem("access_token");
|
||||
if (token && config.headers) {
|
||||
config.headers.Authorization = `Bearer ${token}`;
|
||||
}
|
||||
return config;
|
||||
});
|
||||
|
||||
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: unknown) => {
|
||||
originalRequest.headers.Authorization = `Bearer ${token as string}`;
|
||||
return api(originalRequest);
|
||||
});
|
||||
}
|
||||
|
||||
originalRequest._retry = true;
|
||||
isRefreshing = true;
|
||||
|
||||
const refreshToken = await AsyncStorage.getItem("refresh_token");
|
||||
if (!refreshToken) {
|
||||
await AsyncStorage.multiRemove(["access_token", "refresh_token"]);
|
||||
return Promise.reject(error);
|
||||
}
|
||||
|
||||
try {
|
||||
const { data } = await axios.post(`${API_BASE}/auth/token/refresh/`, { refresh: refreshToken });
|
||||
await AsyncStorage.setItem("access_token", data.access);
|
||||
processQueue(null, data.access);
|
||||
originalRequest.headers.Authorization = `Bearer ${data.access}`;
|
||||
return api(originalRequest);
|
||||
} catch (refreshError) {
|
||||
processQueue(refreshError, null);
|
||||
await AsyncStorage.multiRemove(["access_token", "refresh_token"]);
|
||||
return Promise.reject(refreshError);
|
||||
} finally {
|
||||
isRefreshing = false;
|
||||
}
|
||||
}
|
||||
return Promise.reject(error);
|
||||
},
|
||||
);
|
||||
|
||||
export default api;
|
||||
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"module": "commonjs",
|
||||
"lib": ["ES2020"],
|
||||
"jsx": "react-native",
|
||||
"strict": true,
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"],
|
||||
"@shared/*": ["../shared/src/*"]
|
||||
}
|
||||
},
|
||||
"include": ["src/**/*", "app/**/*"],
|
||||
"exclude": ["node_modules"],
|
||||
"references": [{ "path": "../shared/tsconfig.json" }]
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "cloud-reader",
|
||||
"private": true,
|
||||
"workspaces": [
|
||||
"shared",
|
||||
"frontend",
|
||||
"mobile"
|
||||
],
|
||||
"scripts": {
|
||||
"frontend:dev": "yarn workspace @cloud-reader/frontend dev",
|
||||
"frontend:build": "yarn workspace @cloud-reader/frontend build",
|
||||
"mobile:start": "yarn workspace @cloud-reader/mobile start",
|
||||
"mobile:android": "yarn workspace @cloud-reader/mobile android",
|
||||
"mobile:ios": "yarn workspace @cloud-reader/mobile ios",
|
||||
"shared:build": "yarn workspace @cloud-reader/shared build",
|
||||
"lint": "yarn workspaces run lint",
|
||||
"typecheck": "yarn workspaces run typecheck"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"name": "@cloud-reader/shared",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"main": "src/index.ts",
|
||||
"types": "src/index.ts",
|
||||
"scripts": {
|
||||
"build": "tsc",
|
||||
"typecheck": "tsc --noEmit",
|
||||
"lint": "echo 'lint ok'"
|
||||
},
|
||||
"dependencies": {
|
||||
"zod": "^3.23.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "^5.5.0"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,147 @@
|
||||
// Shared types for Cloud Reader - used by both frontend (web) and mobile (Expo)
|
||||
|
||||
// ============================================================================
|
||||
// API Response Types
|
||||
// ============================================================================
|
||||
|
||||
export interface ApiResponse<T> {
|
||||
data: T;
|
||||
message?: string;
|
||||
}
|
||||
|
||||
export interface PaginatedResponse<T> {
|
||||
count: number;
|
||||
next: string | null;
|
||||
previous: string | null;
|
||||
results: T[];
|
||||
}
|
||||
|
||||
export interface ApiError {
|
||||
detail: string;
|
||||
code?: string;
|
||||
fields?: Record<string, string[]>;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Auth Types
|
||||
// ============================================================================
|
||||
|
||||
export interface LoginRequest {
|
||||
email: string;
|
||||
password: string;
|
||||
}
|
||||
|
||||
export interface RegisterRequest {
|
||||
email: string;
|
||||
password: string;
|
||||
password_confirm: string;
|
||||
display_name?: string;
|
||||
}
|
||||
|
||||
export interface AuthTokens {
|
||||
access: string;
|
||||
refresh: string;
|
||||
}
|
||||
|
||||
export interface UserProfile {
|
||||
id: number;
|
||||
email: string;
|
||||
display_name: string;
|
||||
avatar_url: string | null;
|
||||
date_joined: string;
|
||||
is_verified: boolean;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Document / Reader Types
|
||||
// ============================================================================
|
||||
|
||||
export interface Document {
|
||||
id: number;
|
||||
title: string;
|
||||
author: string | null;
|
||||
cover_url: string | null;
|
||||
description: string;
|
||||
file_type: 'pdf' | 'epub' | 'mobi' | 'txt' | 'docx';
|
||||
file_size: number;
|
||||
page_count: number | null;
|
||||
uploaded_at: string;
|
||||
updated_at: string;
|
||||
tags: string[];
|
||||
is_public: boolean;
|
||||
owner: number;
|
||||
}
|
||||
|
||||
export interface DocumentDetail extends Document {
|
||||
current_page: number;
|
||||
total_pages: number;
|
||||
bookmark: Bookmark | null;
|
||||
recent_highlights: Highlight[];
|
||||
}
|
||||
|
||||
export interface Bookmark {
|
||||
id: number;
|
||||
page: number;
|
||||
label: string;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
export interface Highlight {
|
||||
id: number;
|
||||
page: number;
|
||||
color: string;
|
||||
text: string;
|
||||
note: string | null;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
export interface ReadingProgress {
|
||||
id: number;
|
||||
document: number;
|
||||
current_page: number;
|
||||
total_pages: number;
|
||||
percentage: number;
|
||||
last_read_at: string;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Collection / Library Types
|
||||
// ============================================================================
|
||||
|
||||
export interface Collection {
|
||||
id: number;
|
||||
name: string;
|
||||
description: string;
|
||||
cover_url: string | null;
|
||||
document_count: number;
|
||||
is_public: boolean;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface LibraryStats {
|
||||
total_documents: number;
|
||||
total_pages_read: number;
|
||||
total_reading_time_minutes: number;
|
||||
documents_this_month: number;
|
||||
recent_activity: ReadingActivity[];
|
||||
}
|
||||
|
||||
export interface ReadingActivity {
|
||||
date: string;
|
||||
documents_read: number;
|
||||
pages_read: number;
|
||||
minutes_read: number;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Constants
|
||||
// ============================================================================
|
||||
|
||||
export const SUPPORTED_FILE_TYPES = ['pdf', 'epub', 'mobi', 'txt', 'docx'] as const;
|
||||
export type SupportedFileType = typeof SUPPORTED_FILE_TYPES[number];
|
||||
|
||||
export const HIGHLIGHT_COLORS = ['yellow', 'green', 'blue', 'pink', 'orange'] as const;
|
||||
export type HighlightColor = typeof HIGHLIGHT_COLORS[number];
|
||||
|
||||
export const READING_SPEED_WPM = 250; // Average reading speed
|
||||
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"declaration": true,
|
||||
"declarationMap": true,
|
||||
"sourceMap": true,
|
||||
"outDir": "./dist",
|
||||
"rootDir": "./src",
|
||||
"strict": true,
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true
|
||||
},
|
||||
"include": ["src/**/*"],
|
||||
"exclude": ["dist", "node_modules"]
|
||||
}
|
||||
Reference in New Issue
Block a user