✨ Enhance Application Functionality and Update Configuration

BrightkyEfoo · BrightkyEfoo · commit a1a303c5ef3d · 2025-05-12T01:49:26.000+01:00
- Add new dashboard method in ArticlesController to fetch article statistics for the dashboard view.
- Update package.json to include a new path for enums.
- Modify CORS configuration to allow all origins for improved API accessibility.
- Adjust user migration to change password field to nullable and implement role-based access using enums.
- Update login and register pages to replace Link components with anchor tags for better compatibility.
- Refactor dashboard page to accept individual article statistics as props instead of a single stats object.
- Update routes to link the dashboard to the new controller method for dynamic data rendering.
diff --git a/app/controllers/articles_controller.ts b/app/controllers/articles_controller.ts
@@ -2,6 +2,7 @@ import { HttpContext } from '@adonisjs/core/http'
 import { articleValidator } from '#validators/article_validator'
 import Article from '#models/article'
 import { DateTime } from 'luxon'
+import ArticleStatsService from '#services/article_stats_service'
 
 export default class ArticlesController {
   async index({ inertia, request }: HttpContext) {
@@ -45,4 +46,14 @@ export default class ArticlesController {
 
     return inertia.render('articles/[slug]', { article })
   }
+
+  async dashboard({ inertia }: HttpContext) {
+    const stats = await ArticleStatsService.getStats()
+    return inertia.render('dashboard/index', {
+      publishedArticles: stats.published,
+      draftArticles: stats.drafts,
+      discussions: 0,
+      questions: 0,
+    })
+  }
 }
diff --git a/app/services/article_stats_service.ts b/app/services/article_stats_service.ts
@@ -0,0 +1,12 @@
+import Article from '#models/article'
+
+export default class ArticleStatsService {
+  static async getStats() {
+    const publishedResult = await Article.query().where('is_published', true).count('* as total')
+    const draftResult = await Article.query().where('is_published', false).count('* as total')
+    return {
+      published: Number(publishedResult[0].$extras.total),
+      drafts: Number(draftResult[0].$extras.total),
+    }
+  }
+}
diff --git a/config/cors.ts b/config/cors.ts
@@ -8,7 +8,7 @@ import { defineConfig } from '@adonisjs/cors'
  */
 const corsConfig = defineConfig({
   enabled: true,
-  origin: [],
+  origin: ['*'],
   methods: ['GET', 'HEAD', 'POST', 'PUT', 'DELETE'],
   headers: true,
   exposeHeaders: [],
diff --git a/database/migrations/1736839410875_create_users_table.ts b/database/migrations/1736839410875_create_users_table.ts
@@ -1,4 +1,5 @@
 import { BaseSchema } from '@adonisjs/lucid/schema'
+import { Role, roles } from '#enums/role'
 
 export default class extends BaseSchema {
   protected tableName = 'users'
@@ -9,12 +10,11 @@ export default class extends BaseSchema {
       table.string('username').unique().notNullable()
       table.string('name').nullable()
       table.string('email').unique().notNullable()
-      table.string('password').notNullable()
+      table.string('password').nullable()
       table.string('avatar').nullable()
       table.string('github_id').unique().nullable()
       table.string('twitter_id').unique().nullable()
-      table.boolean('is_admin').defaultTo(false)
-      table.boolean('is_sponsor').defaultTo(false)
+      table.enu('role', roles).notNullable().defaultTo(Role.MEMBER)
       table.timestamp('email_verified_at').nullable()
       table.timestamps(true, true)
     })
diff --git a/enums/role.ts b/enums/role.ts
@@ -0,0 +1,7 @@
+export enum Role {
+  ADMIN = 'ADMIN',
+  SPONSOR = 'SPONSOR',
+  MEMBER = 'MEMBER',
+}
+
+export const roles = Object.values(Role)
diff --git a/inertia/pages/auth/login.tsx b/inertia/pages/auth/login.tsx
@@ -3,6 +3,7 @@ import { FormEvent, useState } from 'react'
 import { router } from '@inertiajs/react'
 import Navbar from '../../components/navbar'
 import Footer from '../../components/footer'
+import { demoUsers } from '../../../mock-data/users'
 
 interface PageProps {
   errors: {
@@ -40,6 +41,32 @@ export default function Login() {
             </h2>
           </div>
 
+          {/* Demo Buttons */}
+          <div className="flex gap-2 justify-center mb-2">
+            <button
+              type="button"
+              className="px-3 py-1 bg-blue-100 text-blue-800 rounded hover:bg-blue-200 text-sm"
+              onClick={() => setData({
+                ...data,
+                email: demoUsers[0].email,
+                password: demoUsers[0].password,
+              })}
+            >
+              Demo Admin
+            </button>
+            <button
+              type="button"
+              className="px-3 py-1 bg-green-100 text-green-800 rounded hover:bg-green-200 text-sm"
+              onClick={() => setData({
+                ...data,
+                email: demoUsers[1].email,
+                password: demoUsers[1].password,
+              })}
+            >
+              Demo Member
+            </button>
+          </div>
+
           {/* Flash Messages */}
           {(flash?.error || pageErrors?.form) && (
             <div className="rounded-md bg-red-50 p-4">
@@ -83,7 +110,7 @@ export default function Login() {
 
           {/* Social Login */}
           <div className="space-y-3">
-            <Link
+            <a
               href="/auth/github"
               className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gray-800 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
             >
@@ -95,7 +122,7 @@ export default function Login() {
                 />
               </svg>
               Continue with GitHub
-            </Link>
+            </a>
           </div>
 
           <div className="relative">
diff --git a/inertia/pages/auth/register.tsx b/inertia/pages/auth/register.tsx
@@ -231,7 +231,7 @@ export default function Register() {
                     </div>
 
                     <div className="mt-6">
-                      <Link
+                      <a
                         href="/auth/github"
                         className="flex w-full items-center justify-center gap-3 rounded-md bg-[#24292F] px-3 py-1.5 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#24292F]"
                       >
@@ -243,7 +243,7 @@ export default function Register() {
                           />
                         </svg>
                         <span className="text-sm font-semibold leading-6">GitHub</span>
-                      </Link>
+                      </a>
                     </div>
                   </div>
                 </div>
diff --git a/inertia/pages/dashboard/index.tsx b/inertia/pages/dashboard/index.tsx
@@ -2,14 +2,13 @@ import { Head, Link } from '@inertiajs/react'
 import DashboardLayout from '../../layouts/dashboard'
 
 interface DashboardProps {
-  stats: {
-    articles: number
-    discussions: number
-    questions: number
-  }
+  publishedArticles: number
+  draftArticles: number
+  discussions: number
+  questions: number
 }
 
-export default function Dashboard({ stats }: DashboardProps) {
+export default function Dashboard({ publishedArticles, draftArticles, discussions, questions }: DashboardProps) {
   return (
     <DashboardLayout>
       <Head title="Dashboard - JavaScript Cameroun" />
@@ -18,21 +17,27 @@ export default function Dashboard({ stats }: DashboardProps) {
         {/* Stats */}
         <div className="grid grid-cols-1 gap-5 sm:grid-cols-3">
           <div className="overflow-hidden rounded-lg bg-white px-4 py-5 shadow sm:p-6">
-            <dt className="truncate text-sm font-medium text-gray-500">Total Articles</dt>
+            <dt className="truncate text-sm font-medium text-gray-500">Articles publiés</dt>
             <dd className="mt-1 text-3xl font-semibold tracking-tight text-gray-900">
-              {stats.articles}
+              {publishedArticles}
+            </dd>
+          </div>
+          <div className="overflow-hidden rounded-lg bg-white px-4 py-5 shadow sm:p-6">
+            <dt className="truncate text-sm font-medium text-gray-500">Brouillons</dt>
+            <dd className="mt-1 text-3xl font-semibold tracking-tight text-gray-900">
+              {draftArticles}
             </dd>
           </div>
           <div className="overflow-hidden rounded-lg bg-white px-4 py-5 shadow sm:p-6">
             <dt className="truncate text-sm font-medium text-gray-500">Total Discussions</dt>
             <dd className="mt-1 text-3xl font-semibold tracking-tight text-gray-900">
-              {stats.discussions}
+              {discussions}
             </dd>
           </div>
           <div className="overflow-hidden rounded-lg bg-white px-4 py-5 shadow sm:p-6">
             <dt className="truncate text-sm font-medium text-gray-500">Total Questions</dt>
             <dd className="mt-1 text-3xl font-semibold tracking-tight text-gray-900">
-              {stats.questions}
+              {questions}
             </dd>
           </div>
         </div>
diff --git a/mock-data/users.ts b/mock-data/users.ts
@@ -0,0 +1,18 @@
+import { Role } from '#enums/role'
+
+export const demoUsers = [
+  {
+    username: 'admin',
+    name: 'admin',
+    email: 'admin@example.com',
+    password: 'password123',
+    role: Role.ADMIN,
+  },
+  {
+    username: 'regularuser',
+    name: 'Regular User',
+    email: 'regular@example.com',
+    password: 'password123',
+    role: Role.MEMBER,
+  },
+]
diff --git a/nomenclature.md b/nomenclature.md
@@ -0,0 +1,56 @@
+## 🚀 Nomenclature des noms de branches
+
+Les branches doivent décrire leur objectif. Utilise un **préfixe** suivi d’un **slug** clair et concis.
+
+### 📂 Types de branches :
+
+| Type     | Préfixe     | Exemple                           |
+| -------- | ----------- | --------------------------------- |
+| Feature  | `feature/`  | `feature/user-authentication`     |
+| Bug fix  | `fix/`      | `fix/login-redirect-bug`          |
+| Hotfix   | `hotfix/`   | `hotfix/crash-on-startup`         |
+| Refactor | `refactor/` | `refactor/user-service-structure` |
+| Chore    | `chore/`    | `chore/update-dependencies`       |
+| Test     | `test/`     | `test/add-login-unit-tests`       |
+| Docs     | `docs/`     | `docs/api-auth-docs`              |
+| Release  | `release/`  | `release/v1.0.0`                  |
+
+**Bonus :** Ajoute un identifiant de ticket si tu travailles avec un outil comme Jira, Notion ou Linear :
+
+```
+feature/1234-user-authentication
+fix/BUG-982-login-crash
+```
+
+---
+
+## 📝 Nomenclature des messages de commit
+
+Utilise le **format conventionnel** `type(scope): message`, inspiré de [Conventional Commits](https://www.conventionalcommits.org/), très apprécié dans les projets pro, surtout avec les outils d’intégration continue (CI/CD).
+
+### 🔠 Types courants de commits
+
+| Type       | Utilisation                                            | Exemple                                         |
+| ---------- | ------------------------------------------------------ | ----------------------------------------------- |
+| `feat`     | Nouvelle fonctionnalité                                | `feat(auth): add GitHub OAuth login`            |
+| `fix`      | Correction de bug                                      | `fix(api): prevent crash on empty payload`      |
+| `docs`     | Changement de documentation                            | `docs(readme): add usage instructions`          |
+| `style`    | Changement sans impact sur le code (indentation, etc.) | `style(ui): reindent login form`                |
+| `refactor` | Refactoring sans changement fonctionnel                | `refactor(db): simplify user query`             |
+| `perf`     | Amélioration des performances                          | `perf(api): reduce response time for dashboard` |
+| `test`     | Ajout ou mise à jour de tests                          | `test(user): add signup unit tests`             |
+| `chore`    | Tâches diverses (build, dépendances, scripts, etc.)    | `chore: update eslint config`                   |
+| `ci`       | Configuration de l’intégration continue                | `ci(github): add action for test coverage`      |
+
+### 🎯 Bonnes pratiques
+
+* **Présent** : Utilise l’impératif présent → `add`, `fix`, `update` (pas `added` ou `adds`)
+* **Court et clair** : Max 50-60 caractères pour le titre
+* **Optionnel** : Ajoute une description en dessous si nécessaire
+
+```bash
+git commit -m "feat(profile): add profile picture upload"
+
+# ou avec un corps :
+git commit -m "fix(auth): handle empty token on refresh" -m "Previously, the app crashed when the token was null. This ensures a fallback redirect."
+```
diff --git a/package.json b/package.json
@@ -29,7 +29,8 @@
     "#database/*": "./database/*.js",
     "#tests/*": "./tests/*.js",
     "#start/*": "./start/*.js",
-    "#config/*": "./config/*.js"
+    "#config/*": "./config/*.js",
+    "#enums/*": "./enums/*.js"
   },
   "devDependencies": {
     "@adonisjs/assembler": "^7.8.2",
diff --git a/start/routes.ts b/start/routes.ts
@@ -54,15 +54,7 @@ router.get('/:username', [ProfileController, 'show']).where('username', '@.*').a
 router
   .group(() => {
     router
-      .get('dashboard', async ({ inertia }) => {
-        return inertia.render('dashboard/index', {
-          stats: {
-            articles: 0,
-            discussions: 0,
-            questions: 0,
-          },
-        })
-      })
+      .get('dashboard', [ArticlesController, 'dashboard'])
       .as('dashboard')
   })
   .middleware(middleware.auth())
diff --git a/tsconfig.json b/tsconfig.json
@@ -3,7 +3,9 @@
   "compilerOptions": {
     "rootDir": "./",
     "outDir": "./build",
+    "paths": {
+      "@/*": ["./inertia/lib/*"]
+    }
   },
-  "exclude": ["./inertia/**/*", "node_modules", "build"],
-  
+  "exclude": ["./inertia/**/*", "node_modules", "build"]
 }
