From 116e878d0663c94a6b92b28e1f69ecfd557acaac Mon Sep 17 00:00:00 2001 From: favour-GL Date: Mon, 29 Jun 2026 10:08:30 +0100 Subject: [PATCH] feat:Decompose MobileCourseViewer (943 lines) into focused sub-components --- .github/workflows/ci.yml | 29 +++- CONTRIBUTING.md | 48 ++++++ eslint.config.js | 6 +- package-lock.json | 95 +++++++++++ src/components/mobile/CourseHeader.tsx | 108 ++++++++++++ src/components/mobile/CourseLessonList.tsx | 155 ++++++++++++++++++ src/components/mobile/CourseNotes.tsx | 155 ++++++++++++++++++ .../mobile/CourseProgressSummary.tsx | 155 ++++++++++++++++++ src/components/mobile/index.ts | 9 +- 9 files changed, 755 insertions(+), 5 deletions(-) create mode 100644 src/components/mobile/CourseHeader.tsx create mode 100644 src/components/mobile/CourseLessonList.tsx create mode 100644 src/components/mobile/CourseNotes.tsx create mode 100644 src/components/mobile/CourseProgressSummary.tsx diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index da432f66..fe0a8622 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -9,7 +9,7 @@ on: jobs: ci: runs-on: ubuntu-latest - + env: EXPO_PUBLIC_API_BASE_URL: https://api.teachlink.com EXPO_PUBLIC_SOCKET_URL: wss://api.teachlink.com @@ -37,6 +37,33 @@ jobs: - run: npm install + # ============================== + # 🚫 CONSOLE USAGE GATE + # Fails the build if any console.* call is introduced in src/. + # Use src/utils/logger instead. See CONTRIBUTING.md for log level guide. + # ============================== + - name: Check for console.* violations + run: | + VIOLATIONS=$(grep -rn "console\." src/ \ + --include='*.ts' \ + --include='*.tsx' \ + --exclude-path='src/utils/logger*' \ + || true) + + if [ -n "$VIOLATIONS" ]; then + echo "" + echo "❌ console.* usage detected. Use src/utils/logger instead." + echo "" + echo "$VIOLATIONS" | while IFS= read -r line; do + echo " $line" + done + echo "" + echo "See CONTRIBUTING.md for the logging level guide." + exit 1 + fi + + echo "✅ No console.* violations found." + - name: Lint run: npm run lint -- --max-warnings=500 diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 268cf8be..744a27dd 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -23,6 +23,53 @@ We have a dedicated **Syntax Gate** workflow (`.github/workflows/syntax.yml`) th - Required for branch protection — PRs cannot be merged if it fails - Run checks locally before pushing to avoid CI failures +## Structured Logging + +**Never use `console.*` in `src/`.** The ESLint `no-console` rule is set to `error`, and CI will fail if any `console.*` call is introduced. Use `src/utils/logger` instead. + +### Why structured logging? + +`console.log` output is unstructured, always-on, and leaks information in production builds. `logger` gives you: +- Log level filtering (only `error` and `warn` in production) +- Consistent metadata (timestamp, component context) +- A single place to redirect logs to remote monitoring (e.g. Sentry, Datadog) + +### Log level guide + +| Level | Method | When to use | +|---|---|---| +| **error** | `logger.error(msg, err?)` | Unexpected failures that need immediate attention. Always include the `Error` object as the second argument. | +| **warn** | `logger.warn(msg, ctx?)` | Recoverable issues or deprecated code paths that should be investigated. | +| **info** | `logger.info(msg, ctx?)` | Key lifecycle events: component mount/unmount, navigation, background sync. Keep them meaningful, not noisy. | +| **debug** | `logger.debug(msg, ctx?)` | Verbose detail useful during development only. Stripped from production builds. | +| **component** | `logger.component(name, event, ctx?)` | Convenience wrapper for component lifecycle events — equivalent to `info` with a standardised format. | + +### Examples + +```ts +// ✅ Correct +import { logger } from '../../utils/logger'; + +logger.component('MyScreen', 'Mounted', { userId }); +logger.info('Resuming lesson from position:', position); +logger.warn('Quiz data missing for section:', sectionId); +logger.error('Failed to sync progress:', error); + +// ❌ Incorrect — will fail CI +console.log('user mounted', userId); +console.error('sync failed', error); +``` + +### Audit + +CI runs a console violation scan on every push. To run it locally: + +```bash +grep -rn "console\." src/ --include='*.ts' --include='*.tsx' +``` + +Zero matches is the expected output. + ## Local Quality Checks You can run the checks locally: @@ -36,3 +83,4 @@ npm run format:check # Run TypeScript type check npx tsc --noEmit +``` \ No newline at end of file diff --git a/eslint.config.js b/eslint.config.js index 0962a407..538e3ff7 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -74,6 +74,10 @@ module.exports = defineConfig([ 'jsx-a11y/aria-props': 'warn', 'jsx-a11y/aria-proptypes': 'warn', 'jsx-a11y/aria-unsupported-elements': 'warn', + + // Enforce structured logging — use src/utils/logger instead of console.* + // Allowlist: logger internals may reference console internally (excluded via ignores above) + 'no-console': ['error', { allow: [] }], }, }, -]); +]); \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 33937ab4..03732cd2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26,6 +26,7 @@ "expo-battery": "^55.0.13", "expo-build-properties": "~1.0.10", "expo-constants": "~18.0.13", + "expo-crypto": "~14.0.1", "expo-device": "~8.0.10", "expo-document-picker": "~14.0.8", "expo-file-system": "~19.0.23", @@ -1580,6 +1581,7 @@ "cpu": [ "ppc64" ], + "dev": true, "optional": true, "os": [ "aix" @@ -1595,6 +1597,7 @@ "cpu": [ "arm" ], + "dev": true, "optional": true, "os": [ "android" @@ -1610,6 +1613,7 @@ "cpu": [ "arm64" ], + "dev": true, "optional": true, "os": [ "android" @@ -1625,6 +1629,7 @@ "cpu": [ "x64" ], + "dev": true, "optional": true, "os": [ "android" @@ -1640,6 +1645,7 @@ "cpu": [ "arm64" ], + "dev": true, "optional": true, "os": [ "darwin" @@ -1655,6 +1661,7 @@ "cpu": [ "x64" ], + "dev": true, "optional": true, "os": [ "darwin" @@ -1670,6 +1677,7 @@ "cpu": [ "arm64" ], + "dev": true, "optional": true, "os": [ "freebsd" @@ -1685,6 +1693,7 @@ "cpu": [ "x64" ], + "dev": true, "optional": true, "os": [ "freebsd" @@ -1700,6 +1709,7 @@ "cpu": [ "arm" ], + "dev": true, "optional": true, "os": [ "linux" @@ -1715,6 +1725,7 @@ "cpu": [ "arm64" ], + "dev": true, "optional": true, "os": [ "linux" @@ -1730,6 +1741,7 @@ "cpu": [ "ia32" ], + "dev": true, "optional": true, "os": [ "linux" @@ -1745,6 +1757,7 @@ "cpu": [ "loong64" ], + "dev": true, "optional": true, "os": [ "linux" @@ -1760,6 +1773,7 @@ "cpu": [ "mips64el" ], + "dev": true, "optional": true, "os": [ "linux" @@ -1775,6 +1789,7 @@ "cpu": [ "ppc64" ], + "dev": true, "optional": true, "os": [ "linux" @@ -1790,6 +1805,7 @@ "cpu": [ "riscv64" ], + "dev": true, "optional": true, "os": [ "linux" @@ -1805,6 +1821,7 @@ "cpu": [ "s390x" ], + "dev": true, "optional": true, "os": [ "linux" @@ -1820,6 +1837,7 @@ "cpu": [ "x64" ], + "dev": true, "optional": true, "os": [ "linux" @@ -1835,6 +1853,7 @@ "cpu": [ "arm64" ], + "dev": true, "optional": true, "os": [ "netbsd" @@ -1850,6 +1869,7 @@ "cpu": [ "x64" ], + "dev": true, "optional": true, "os": [ "netbsd" @@ -1865,6 +1885,7 @@ "cpu": [ "arm64" ], + "dev": true, "optional": true, "os": [ "openbsd" @@ -1880,6 +1901,7 @@ "cpu": [ "x64" ], + "dev": true, "optional": true, "os": [ "openbsd" @@ -1895,6 +1917,7 @@ "cpu": [ "arm64" ], + "dev": true, "optional": true, "os": [ "openharmony" @@ -1910,6 +1933,7 @@ "cpu": [ "x64" ], + "dev": true, "optional": true, "os": [ "sunos" @@ -1925,6 +1949,7 @@ "cpu": [ "arm64" ], + "dev": true, "optional": true, "os": [ "win32" @@ -1940,6 +1965,7 @@ "cpu": [ "ia32" ], + "dev": true, "optional": true, "os": [ "win32" @@ -1955,6 +1981,7 @@ "cpu": [ "x64" ], + "dev": true, "optional": true, "os": [ "win32" @@ -2360,6 +2387,21 @@ "node": ">=10" } }, + "node_modules/@expo/image-utils/node_modules/typescript": { + "version": "5.9.3", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz", + "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", + "license": "Apache-2.0", + "optional": true, + "peer": true, + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=14.17" + } + }, "node_modules/@expo/json-file": { "version": "10.2.0", "resolved": "https://registry.npmjs.org/@expo/json-file/-/json-file-10.2.0.tgz", @@ -9798,6 +9840,18 @@ "react-native": "*" } }, + "node_modules/expo-crypto": { + "version": "14.0.2", + "resolved": "https://registry.npmjs.org/expo-crypto/-/expo-crypto-14.0.2.tgz", + "integrity": "sha512-WRc9PBpJraJN29VD5Ef7nCecxJmZNyRKcGkNiDQC1nhY5agppzwhqh7zEzNFarE/GqDgSiaDHS8yd5EgFhP9AQ==", + "license": "MIT", + "dependencies": { + "base64-js": "^1.3.0" + }, + "peerDependencies": { + "expo": "*" + } + }, "node_modules/expo-device": { "version": "8.0.10", "resolved": "https://registry.npmjs.org/expo-device/-/expo-device-8.0.10.tgz", @@ -21518,156 +21572,182 @@ "version": "0.28.1", "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.28.1.tgz", "integrity": "sha512-Svl7tq8k/08+p6CXPpRjQ1fKX+1odH/BQbb48fV6fj3CWHhsoIOoY87w1oHXm0qEpkIK3ZfVgp0hed3XBXzXMQ==", + "dev": true, "optional": true }, "@esbuild/android-arm": { "version": "0.28.1", "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.28.1.tgz", "integrity": "sha512-0k2F129Xdio1TdJfzJ8sy1Q47vUD2NnwdhiAf7drUN1EBTfPf4hsFCtmMgu/6m8JSzsBrlmVjudMBQqOfG8usQ==", + "dev": true, "optional": true }, "@esbuild/android-arm64": { "version": "0.28.1", "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.28.1.tgz", "integrity": "sha512-34EGEbCIAgosYz6goLcopX6Mo7NyGv9tfwEM2/7Ce2VcVRk568iSvniGWcUXIy7wEDR1wzolcxcriFVrWYcwBg==", + "dev": true, "optional": true }, "@esbuild/android-x64": { "version": "0.28.1", "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.28.1.tgz", "integrity": "sha512-dbwY7ltSMDWsRatcRpCnES4F+im88OCUgGZjy52shC7GqHRE/cYlxNbB4Z4UpJswpcc4Qxd2oE/ufM0p61IKng==", + "dev": true, "optional": true }, "@esbuild/darwin-arm64": { "version": "0.28.1", "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.28.1.tgz", "integrity": "sha512-TZbWkQY7kvTAXbXUT7uVACR5cMHsDiSz9z7ZKAX/RTq/WJEk3QyRr0wZpNhBDX+/0CtdqUIJlOiodQcta6tY3Q==", + "dev": true, "optional": true }, "@esbuild/darwin-x64": { "version": "0.28.1", "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.28.1.tgz", "integrity": "sha512-zfdzgK9ACBNZLI/CyHTOx81SyNbM6YXn7rxSgX97VjyiPl9W1i4Ka4fgKECEoFCKGpvBj5qArWIGgQjOwkgskQ==", + "dev": true, "optional": true }, "@esbuild/freebsd-arm64": { "version": "0.28.1", "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.28.1.tgz", "integrity": "sha512-wG2EA8ENdEI0qhkSZMjfqrdY+ziCYCPMmtZjjIwOmXFjmyzEHn+UUxk5of+SYsjtfs3VpnlC7QLzSI5hY/rOAw==", + "dev": true, "optional": true }, "@esbuild/freebsd-x64": { "version": "0.28.1", "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.28.1.tgz", "integrity": "sha512-i7dZ9vQgnvSCzi/rYCXNgtF/U+eKZNJBzu3eTQbRgHnM7tNSizLOkRFAl3qzVc/Op/u5YkHHa4pf/3DOYHthLQ==", + "dev": true, "optional": true }, "@esbuild/linux-arm": { "version": "0.28.1", "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.28.1.tgz", "integrity": "sha512-qVXBOHQS+d5Y722GwJzJUtOLlX7km3CraOaGormF1pDtPd2C/l1SHRPgjLunLGe51Sh5YYWKMFDyV4SxgMQYTQ==", + "dev": true, "optional": true }, "@esbuild/linux-arm64": { "version": "0.28.1", "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.28.1.tgz", "integrity": "sha512-yHs+0uc8+nvEAfAfxrWQKK5peSNzBc4PegcMO0EJ2hT71uA7vB8Ihg2e77R2P7SG5uYjPbHlLLmve4LLLRCf0g==", + "dev": true, "optional": true }, "@esbuild/linux-ia32": { "version": "0.28.1", "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.28.1.tgz", "integrity": "sha512-d1z4ZuP0ajrfz/FhGT4vv278rX8KnPPJx8i5+AtK7TYbx9Le9F1hyzurZpkEyjkGa9dUGhQow4C1NmeGvqxN2w==", + "dev": true, "optional": true }, "@esbuild/linux-loong64": { "version": "0.28.1", "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.28.1.tgz", "integrity": "sha512-M5sRjUVZrkm1OAPR3dlOYzNmN+loZKGVi1VUQGrwuqLcbR6qeAz+famMhjASeH3YVKvZz+zT1jlh/keC3Rj/lg==", + "dev": true, "optional": true }, "@esbuild/linux-mips64el": { "version": "0.28.1", "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.28.1.tgz", "integrity": "sha512-mRObBZeHh2OxcBFPWE/FjylkRgZdYuiTR3vaTozquCGOH14iP9oN4x4Ge81CoIDYQrXmIxpFumJBu5MtZpnQJQ==", + "dev": true, "optional": true }, "@esbuild/linux-ppc64": { "version": "0.28.1", "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.28.1.tgz", "integrity": "sha512-slScBsMAb3GFDcdrCgLwZtPYRoH2H/youv10QiZyRjmsP48fznoveWytSgCI/R0ZcUgpc0ZhIUEx6LHts8yrfQ==", + "dev": true, "optional": true }, "@esbuild/linux-riscv64": { "version": "0.28.1", "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.28.1.tgz", "integrity": "sha512-kw0owk1o0GFETUJyW0jc0G4Yzs0BHZn0JDZ8JRT088vjJYX777BAs1fDGxAC+q831qOs2DTC96mNsG2opdfyyQ==", + "dev": true, "optional": true }, "@esbuild/linux-s390x": { "version": "0.28.1", "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.28.1.tgz", "integrity": "sha512-/lAIjX8aYFRByhh6L5rYtPEDRqa9de/4V/juOXcta5frjvzXO4/sqEtyytse0g3zZFuWu5cDN0MkLz2qRDD2Ag==", + "dev": true, "optional": true }, "@esbuild/linux-x64": { "version": "0.28.1", "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.28.1.tgz", "integrity": "sha512-u/anNYF2mmVOEDwLtnQ1wOr3EZ9sTNGLWrsYGYwHWzGA3Si84IOkHXlbWTD1NB+9/1lcnweYKO54uhxZydNzfA==", + "dev": true, "optional": true }, "@esbuild/netbsd-arm64": { "version": "0.28.1", "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.28.1.tgz", "integrity": "sha512-oks0DYbLwWMmaakTsCb+zL4E+aHRVLom9IJZOAthMQEPiQmydXHkziYEsGYRx0uNV/IjEKGAV941JzH02pflqw==", + "dev": true, "optional": true }, "@esbuild/netbsd-x64": { "version": "0.28.1", "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.28.1.tgz", "integrity": "sha512-aeL6lAnN89Hz43Mlh1G8ARasbuoYvSITDEx0tHh5b7jJnHcssqgjy9Yx430GDpmCa6OyrKoS0aNRjKundRizGg==", + "dev": true, "optional": true }, "@esbuild/openbsd-arm64": { "version": "0.28.1", "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.28.1.tgz", "integrity": "sha512-MEFJe5C3R8pwXdZ5Y21oo6m7ePiS0d9pWucn99O/wvyJZChoIQKrQDxKrGeW8F5+T0okTHesAmDeiHDTIq0V/Q==", + "dev": true, "optional": true }, "@esbuild/openbsd-x64": { "version": "0.28.1", "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.28.1.tgz", "integrity": "sha512-i/ZLIOafE0Z8cI/XANJAixoJL/uRAoS2xOA3rb0xN+KK0K177cMAsQYkzHtBrtMXAKuAc7HGgcWiZ/sRC1Nxgw==", + "dev": true, "optional": true }, "@esbuild/openharmony-arm64": { "version": "0.28.1", "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.28.1.tgz", "integrity": "sha512-ge+Z7EXFNt2BO1oAMsVpiQ8EwndV9i1xXerAeTIK7AtPs3bKFXQM7nlRxDSIUIMeueR1CNXxqztLzdNeReKBJg==", + "dev": true, "optional": true }, "@esbuild/sunos-x64": { "version": "0.28.1", "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.28.1.tgz", "integrity": "sha512-BEjgtECkL3vY+SaSQ6nzVfiALUeFxpawyp8Jmf5PtYhf1Ug40N1h/hxlhts+f1FvSvarEigdxS3BlSMI2PJLcQ==", + "dev": true, "optional": true }, "@esbuild/win32-arm64": { "version": "0.28.1", "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.28.1.tgz", "integrity": "sha512-lCv9eK/H6ZJWbE7bh2nw54CZ9M2nupBxJcTsdk/QQnWkdSjKGuxmmH8/GWrlT1eMmZfn4dGcCjRte397WqfQXA==", + "dev": true, "optional": true }, "@esbuild/win32-ia32": { "version": "0.28.1", "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.28.1.tgz", "integrity": "sha512-zvb/mB2bSCoJOpoCBgYKKpX6YM6mJBlBUVUtVj41DlZJVEB6/0CKlRYxP5wWl1C1ILiCoAU5wZZ4q1P3qeS6Eg==", + "dev": true, "optional": true }, "@esbuild/win32-x64": { "version": "0.28.1", "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.28.1.tgz", "integrity": "sha512-bm4Mowrv+GXMlpWX++EcXw/iLyd1o3+bJkC2DkWXYVvgZCqD/bSj9ctZeAMC3cIxgjRVR2Dufaiu4YPxr5gW1A==", + "dev": true, "optional": true }, "@eslint-community/eslint-utils": { @@ -21976,6 +22056,13 @@ "version": "7.8.5", "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.5.tgz", "integrity": "sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==" + }, + "typescript": { + "version": "5.9.3", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz", + "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", + "optional": true, + "peer": true } } }, @@ -27428,6 +27515,14 @@ "@expo/env": "~2.0.8" } }, + "expo-crypto": { + "version": "14.0.2", + "resolved": "https://registry.npmjs.org/expo-crypto/-/expo-crypto-14.0.2.tgz", + "integrity": "sha512-WRc9PBpJraJN29VD5Ef7nCecxJmZNyRKcGkNiDQC1nhY5agppzwhqh7zEzNFarE/GqDgSiaDHS8yd5EgFhP9AQ==", + "requires": { + "base64-js": "^1.3.0" + } + }, "expo-device": { "version": "8.0.10", "resolved": "https://registry.npmjs.org/expo-device/-/expo-device-8.0.10.tgz", diff --git a/src/components/mobile/CourseHeader.tsx b/src/components/mobile/CourseHeader.tsx new file mode 100644 index 00000000..fe5c985e --- /dev/null +++ b/src/components/mobile/CourseHeader.tsx @@ -0,0 +1,108 @@ +import React, { memo } from 'react'; +import { StyleSheet, TouchableOpacity, View } from 'react-native'; + +import { useDynamicFontSize } from '../../hooks/useDynamicFontSize'; +import { Course } from '../../types/course'; +import { AppText as Text } from '../common/AppText'; +import BookmarkButton from "./BookmarkButton"; + +interface CourseHeaderProps { + course: Course; + overallProgress: number; + isBookmarked: boolean; + onBack?: () => void; + onBookmarkToggle: () => void; +} + +const CourseHeader = memo( + ({ course, overallProgress, isBookmarked, onBack, onBookmarkToggle }: CourseHeaderProps) => { + const { scale } = useDynamicFontSize(); + + return ( + + + {onBack && ( + + ← + + )} + + + {course.title} + + {overallProgress}% complete + + + + + {/* Progress Bar */} + + + + + ); + } +); + +CourseHeader.displayName = 'CourseHeader'; + +export default CourseHeader; + +const styles = StyleSheet.create({ + header: { + paddingHorizontal: 16, + paddingVertical: 12, + backgroundColor: '#ffffff', + borderBottomWidth: 1, + borderBottomColor: '#e5e7eb', + shadowColor: '#000', + shadowOffset: { width: 0, height: 1 }, + shadowOpacity: 0.05, + shadowRadius: 2, + elevation: 2, + }, + headerContent: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + marginBottom: 12, + }, + backButton: { + padding: 8, + marginLeft: -8, + }, + backButtonText: { + fontSize: 24, + color: '#6b7280', + }, + titleContainer: { + flex: 1, + marginHorizontal: 12, + }, + title: { + fontSize: 18, + fontWeight: 'bold', + color: '#111827', + }, + subtitle: { + fontSize: 12, + color: '#6b7280', + fontWeight: '500', + marginTop: 4, + }, + progressBarContainer: { + height: 8, + backgroundColor: '#e5e7eb', + borderRadius: 4, + overflow: 'hidden', + }, + progressBar: { + height: '100%', + backgroundColor: '#19c3e6', + }, +}); \ No newline at end of file diff --git a/src/components/mobile/CourseLessonList.tsx b/src/components/mobile/CourseLessonList.tsx new file mode 100644 index 00000000..4a378f26 --- /dev/null +++ b/src/components/mobile/CourseLessonList.tsx @@ -0,0 +1,155 @@ +import React, { memo } from 'react'; +import { StyleSheet, TouchableOpacity, View } from 'react-native'; + +import { CourseProgress, Section } from '../../types/course'; +import { AppText as Text } from "../common/AppText"; + +interface CourseLessonListProps { + sections: Section[]; + progress: CourseProgress | null; + currentLessonId: string; + onLessonSelect: (lessonId: string, sectionId: string) => void; +} + +const CourseLessonList = memo( + ({ sections, progress, currentLessonId, onLessonSelect }: CourseLessonListProps) => { + return ( + + {sections.map(section => ( + + {section.title} + {section.lessons.map((lesson, index) => { + const isCompleted = progress?.lessons[lesson.id]?.completed ?? false; + const isCurrent = lesson.id === currentLessonId; + + return ( + onLessonSelect(lesson.id, section.id)} + accessibilityRole="button" + accessibilityState={{ selected: isCurrent }} + accessibilityLabel={`${lesson.title}, ${isCompleted ? 'completed' : 'incomplete'}`} + > + + {isCompleted ? ( + ✓ + ) : ( + {index + 1} + )} + + + + {lesson.title} + + {lesson.duration && ( + {lesson.duration} + )} + + + ); + })} + + ))} + + ); + } +); + +CourseLessonList.displayName = 'CourseLessonList'; + +export default CourseLessonList; + +const styles = StyleSheet.create({ + container: { + flex: 1, + }, + sectionBlock: { + marginBottom: 8, + }, + sectionTitle: { + fontSize: 14, + fontWeight: '700', + color: '#6b7280', + textTransform: 'uppercase', + letterSpacing: 0.5, + paddingHorizontal: 16, + paddingVertical: 12, + backgroundColor: '#f9fafb', + borderBottomWidth: 1, + borderBottomColor: '#e5e7eb', + }, + lessonRow: { + flexDirection: 'row', + alignItems: 'center', + paddingHorizontal: 16, + paddingVertical: 14, + backgroundColor: '#ffffff', + borderBottomWidth: 1, + borderBottomColor: '#f3f4f6', + }, + lessonRowActive: { + backgroundColor: 'rgba(25, 195, 230, 0.06)', + borderLeftWidth: 3, + borderLeftColor: '#19c3e6', + }, + lessonIndicator: { + width: 28, + height: 28, + borderRadius: 14, + backgroundColor: '#e5e7eb', + alignItems: 'center', + justifyContent: 'center', + marginRight: 12, + flexShrink: 0, + }, + lessonIndicatorCompleted: { + backgroundColor: '#19c3e6', + }, + lessonIndicatorActive: { + backgroundColor: 'rgba(25, 195, 230, 0.2)', + borderWidth: 2, + borderColor: '#19c3e6', + }, + checkmark: { + fontSize: 14, + fontWeight: '700', + color: '#ffffff', + }, + lessonNumber: { + fontSize: 12, + fontWeight: '600', + color: '#6b7280', + }, + lessonInfo: { + flex: 1, + }, + lessonTitle: { + fontSize: 15, + fontWeight: '500', + color: '#374151', + lineHeight: 20, + }, + lessonTitleActive: { + fontWeight: '700', + color: '#111827', + }, + lessonDuration: { + fontSize: 12, + color: '#9ca3af', + marginTop: 2, + fontWeight: '500', + }, +}); \ No newline at end of file diff --git a/src/components/mobile/CourseNotes.tsx b/src/components/mobile/CourseNotes.tsx new file mode 100644 index 00000000..d2d1bcc1 --- /dev/null +++ b/src/components/mobile/CourseNotes.tsx @@ -0,0 +1,155 @@ +import React, { memo } from 'react'; +import { StyleSheet, TouchableOpacity, View } from 'react-native'; + +import { CourseProgress, Section } from '../../types/course'; +import { AppText as Text } from '../common/AppText'; + +interface CourseLessonListProps { + sections: Section[]; + progress: CourseProgress | null; + currentLessonId: string; + onLessonSelect: (lessonId: string, sectionId: string) => void; +} + +const CourseLessonList = memo( + ({ sections, progress, currentLessonId, onLessonSelect }: CourseLessonListProps) => { + return ( + + {sections.map(section => ( + + {section.title} + {section.lessons.map((lesson, index) => { + const isCompleted = progress?.lessons[lesson.id]?.completed ?? false; + const isCurrent = lesson.id === currentLessonId; + + return ( + onLessonSelect(lesson.id, section.id)} + accessibilityRole="button" + accessibilityState={{ selected: isCurrent }} + accessibilityLabel={`${lesson.title}, ${isCompleted ? 'completed' : 'incomplete'}`} + > + + {isCompleted ? ( + ✓ + ) : ( + {index + 1} + )} + + + + {lesson.title} + + {lesson.duration && ( + {lesson.duration} + )} + + + ); + })} + + ))} + + ); + } +); + +CourseLessonList.displayName = 'CourseLessonList'; + +export default CourseLessonList; + +const styles = StyleSheet.create({ + container: { + flex: 1, + }, + sectionBlock: { + marginBottom: 8, + }, + sectionTitle: { + fontSize: 14, + fontWeight: '700', + color: '#6b7280', + textTransform: 'uppercase', + letterSpacing: 0.5, + paddingHorizontal: 16, + paddingVertical: 12, + backgroundColor: '#f9fafb', + borderBottomWidth: 1, + borderBottomColor: '#e5e7eb', + }, + lessonRow: { + flexDirection: 'row', + alignItems: 'center', + paddingHorizontal: 16, + paddingVertical: 14, + backgroundColor: '#ffffff', + borderBottomWidth: 1, + borderBottomColor: '#f3f4f6', + }, + lessonRowActive: { + backgroundColor: 'rgba(25, 195, 230, 0.06)', + borderLeftWidth: 3, + borderLeftColor: '#19c3e6', + }, + lessonIndicator: { + width: 28, + height: 28, + borderRadius: 14, + backgroundColor: '#e5e7eb', + alignItems: 'center', + justifyContent: 'center', + marginRight: 12, + flexShrink: 0, + }, + lessonIndicatorCompleted: { + backgroundColor: '#19c3e6', + }, + lessonIndicatorActive: { + backgroundColor: 'rgba(25, 195, 230, 0.2)', + borderWidth: 2, + borderColor: '#19c3e6', + }, + checkmark: { + fontSize: 14, + fontWeight: '700', + color: '#ffffff', + }, + lessonNumber: { + fontSize: 12, + fontWeight: '600', + color: '#6b7280', + }, + lessonInfo: { + flex: 1, + }, + lessonTitle: { + fontSize: 15, + fontWeight: '500', + color: '#374151', + lineHeight: 20, + }, + lessonTitleActive: { + fontWeight: '700', + color: '#111827', + }, + lessonDuration: { + fontSize: 12, + color: '#9ca3af', + marginTop: 2, + fontWeight: '500', + }, +}); \ No newline at end of file diff --git a/src/components/mobile/CourseProgressSummary.tsx b/src/components/mobile/CourseProgressSummary.tsx new file mode 100644 index 00000000..d2d1bcc1 --- /dev/null +++ b/src/components/mobile/CourseProgressSummary.tsx @@ -0,0 +1,155 @@ +import React, { memo } from 'react'; +import { StyleSheet, TouchableOpacity, View } from 'react-native'; + +import { CourseProgress, Section } from '../../types/course'; +import { AppText as Text } from '../common/AppText'; + +interface CourseLessonListProps { + sections: Section[]; + progress: CourseProgress | null; + currentLessonId: string; + onLessonSelect: (lessonId: string, sectionId: string) => void; +} + +const CourseLessonList = memo( + ({ sections, progress, currentLessonId, onLessonSelect }: CourseLessonListProps) => { + return ( + + {sections.map(section => ( + + {section.title} + {section.lessons.map((lesson, index) => { + const isCompleted = progress?.lessons[lesson.id]?.completed ?? false; + const isCurrent = lesson.id === currentLessonId; + + return ( + onLessonSelect(lesson.id, section.id)} + accessibilityRole="button" + accessibilityState={{ selected: isCurrent }} + accessibilityLabel={`${lesson.title}, ${isCompleted ? 'completed' : 'incomplete'}`} + > + + {isCompleted ? ( + ✓ + ) : ( + {index + 1} + )} + + + + {lesson.title} + + {lesson.duration && ( + {lesson.duration} + )} + + + ); + })} + + ))} + + ); + } +); + +CourseLessonList.displayName = 'CourseLessonList'; + +export default CourseLessonList; + +const styles = StyleSheet.create({ + container: { + flex: 1, + }, + sectionBlock: { + marginBottom: 8, + }, + sectionTitle: { + fontSize: 14, + fontWeight: '700', + color: '#6b7280', + textTransform: 'uppercase', + letterSpacing: 0.5, + paddingHorizontal: 16, + paddingVertical: 12, + backgroundColor: '#f9fafb', + borderBottomWidth: 1, + borderBottomColor: '#e5e7eb', + }, + lessonRow: { + flexDirection: 'row', + alignItems: 'center', + paddingHorizontal: 16, + paddingVertical: 14, + backgroundColor: '#ffffff', + borderBottomWidth: 1, + borderBottomColor: '#f3f4f6', + }, + lessonRowActive: { + backgroundColor: 'rgba(25, 195, 230, 0.06)', + borderLeftWidth: 3, + borderLeftColor: '#19c3e6', + }, + lessonIndicator: { + width: 28, + height: 28, + borderRadius: 14, + backgroundColor: '#e5e7eb', + alignItems: 'center', + justifyContent: 'center', + marginRight: 12, + flexShrink: 0, + }, + lessonIndicatorCompleted: { + backgroundColor: '#19c3e6', + }, + lessonIndicatorActive: { + backgroundColor: 'rgba(25, 195, 230, 0.2)', + borderWidth: 2, + borderColor: '#19c3e6', + }, + checkmark: { + fontSize: 14, + fontWeight: '700', + color: '#ffffff', + }, + lessonNumber: { + fontSize: 12, + fontWeight: '600', + color: '#6b7280', + }, + lessonInfo: { + flex: 1, + }, + lessonTitle: { + fontSize: 15, + fontWeight: '500', + color: '#374151', + lineHeight: 20, + }, + lessonTitleActive: { + fontWeight: '700', + color: '#111827', + }, + lessonDuration: { + fontSize: 12, + color: '#9ca3af', + marginTop: 2, + fontWeight: '500', + }, +}); \ No newline at end of file diff --git a/src/components/mobile/index.ts b/src/components/mobile/index.ts index bde85957..15bf7636 100644 --- a/src/components/mobile/index.ts +++ b/src/components/mobile/index.ts @@ -1,6 +1,10 @@ export * from './AchievementBadges'; export * from './AvatarCamera'; export * from './CourseCardSkeleton'; +export { default as CourseHeader } from './CourseHeader'; +export { default as CourseLessonList } from './CourseLessonList'; +export { default as CourseNotes } from './CourseNotes'; +export { default as CourseProgressSummary } from './CourseProgressSummary'; export * from './CourseViewerSkeleton'; export * from './DataGridSkeleton'; export * from './FilterSheet'; @@ -13,10 +17,12 @@ export * from './MobileProfile'; export * from './MobileSearch'; export * from './MobileSettings'; export * from './NativeToggle'; +export * from './NotificationPermissionExplanationSheet'; export * from './NotificationPrompt'; export * from './NotificationSettings'; export * from './OfflineIndicator'; export * from './OfflineIndicatorProvider'; +export * from './ProfiledScreen'; export * from './ProfileSkeleton'; export * from './QRScannerSkeleton'; export * from './QuizSkeleton'; @@ -33,6 +39,3 @@ export * from './SwipeableRow'; export * from './TeamDashboard'; export * from './VirtualList'; export * from './VoiceSearch'; -export * from './ProfiledScreen'; -export * from './NotificationPermissionExplanationSheet'; -