From 9a398d6a7d3396c0ac563efe078808087a253534 Mon Sep 17 00:00:00 2001
From: Maria Adriana <97130795+mariadriana-deemaze@users.noreply.github.com>
Date: Thu, 28 Nov 2024 17:48:56 +0000
Subject: [PATCH] [SOA-43] User verified flag (#45)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat 🎸 (be): add verified flag to user

* styles 💅 : add conditional verified badge to UI
---
 app/interfaces/user.ts                          |  1 +
 app/models/user.ts                              |  3 +++
 app/services/user_notification_service.ts       |  1 +
 app/services/user_service.ts                    |  1 +
 ...13498735_add_verified_flag_to_users_table.ts | 17 +++++++++++++++++
 inertia/components/posts/post_card.tsx          | 12 +++++++++---
 inertia/pages/users/show.tsx                    | 11 +++++++----
 7 files changed, 39 insertions(+), 7 deletions(-)
 create mode 100644 database/migrations/1732813498735_add_verified_flag_to_users_table.ts

diff --git a/app/interfaces/user.ts b/app/interfaces/user.ts
index 5a714d9..fed2b07 100644
--- a/app/interfaces/user.ts
+++ b/app/interfaces/user.ts
@@ -11,6 +11,7 @@ export interface UserResponse extends BaseEntity {
   fullname: string
   username: string
   email: string
+  verified: boolean
   attachments: {
     cover: AttachmentResponse | null
     avatar: AttachmentResponse | null
diff --git a/app/models/user.ts b/app/models/user.ts
index dd9571c..b0d7ebe 100644
--- a/app/models/user.ts
+++ b/app/models/user.ts
@@ -37,6 +37,9 @@ export default class User extends compose(BaseModel, AuthFinder, Notifiable('use
   @column()
   declare email: string
 
+  @column()
+  declare verified: boolean
+
   @column()
   role: AccountRole = AccountRole.USER
 
diff --git a/app/services/user_notification_service.ts b/app/services/user_notification_service.ts
index c23e8bc..2bed510 100644
--- a/app/services/user_notification_service.ts
+++ b/app/services/user_notification_service.ts
@@ -20,6 +20,7 @@ export default class UserNotificationService {
     surname: null,
     fullname: 'Moderation team',
     email: 'info@social-adonis.com',
+    verified: true,
     createdAt: new Date().toISOString(),
     updatedAt: new Date().toISOString(),
     role: AccountRole.ADMIN,
diff --git a/app/services/user_service.ts b/app/services/user_service.ts
index 9c381f0..b30bbb8 100644
--- a/app/services/user_service.ts
+++ b/app/services/user_service.ts
@@ -150,6 +150,7 @@ export class UserService {
     const resource: UserResponse = {
       id: data.id,
       role: data.role,
+      verified: data.verified,
       name: data.name,
       surname: data.surname,
       fullname: data.fullName,
diff --git a/database/migrations/1732813498735_add_verified_flag_to_users_table.ts b/database/migrations/1732813498735_add_verified_flag_to_users_table.ts
new file mode 100644
index 0000000..2823bf5
--- /dev/null
+++ b/database/migrations/1732813498735_add_verified_flag_to_users_table.ts
@@ -0,0 +1,17 @@
+import { BaseSchema } from '@adonisjs/lucid/schema'
+
+export default class extends BaseSchema {
+  protected tableName = 'users'
+
+  async up() {
+    this.schema.alterTable(this.tableName, (table) => {
+      table.boolean('verified').defaultTo(false)
+    })
+  }
+
+  async down() {
+    this.schema.alterTable(this.tableName, (table) => {
+      table.dropColumn('verified')
+    })
+  }
+}
diff --git a/inertia/components/posts/post_card.tsx b/inertia/components/posts/post_card.tsx
index c712ad7..8cacc47 100644
--- a/inertia/components/posts/post_card.tsx
+++ b/inertia/components/posts/post_card.tsx
@@ -11,6 +11,7 @@ import {
   Trash2,
   Flag,
   Pin,
+  BadgeCheck,
 } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import {
@@ -493,9 +494,14 @@ export default function PostCard({
           <div className="flex flex-row gap-3">
             <UserAvatar user={post.user} className="h-8 w-8" />
             <div className="flex flex-col gap-1">
-              <p className="text-xs text-gray-600 text-ellipsis truncate max-w-40 md:max-w-screen-lg">
-                @{post.user.username}
-              </p>
+              <div className="flex flex-row gap-2 items-center">
+                <p className="text-xs text-gray-600 text-ellipsis truncate max-w-40 md:max-w-screen-lg">
+                  @{post.user.username}
+                </p>
+                {post.user.verified && (
+                  <BadgeCheck size={14} className="fill-blue-500 stroke-white" />
+                )}
+              </div>
               <span className="flex text-xs text-gray-400 gap-1 items-center">
                 <Clock size={10} />
                 {formatDistanceToNow(new Date(post.createdAt))} ago
diff --git a/inertia/pages/users/show.tsx b/inertia/pages/users/show.tsx
index 7b5c37d..b6ec405 100644
--- a/inertia/pages/users/show.tsx
+++ b/inertia/pages/users/show.tsx
@@ -5,7 +5,7 @@ import { Card, CardContent } from '@/components/ui/card'
 import { InferPageProps } from '@adonisjs/inertia/types'
 import { lightFormat } from 'date-fns'
 import { Head } from '@inertiajs/react'
-import { CalendarHeart, FilePen } from 'lucide-react'
+import { BadgeCheck, CalendarHeart, FilePen } from 'lucide-react'
 import { CreatePost } from '@/components/posts/create'
 import { UserResponse } from '#interfaces/user'
 import { route } from '@izzyjs/route/client'
@@ -23,9 +23,12 @@ function UserCard({ user, totalPosts }: { user: UserResponse; totalPosts: number
               className="h-28 w-28 lg:h-20 lg:w-20 border-4 border-white shadow-lg"
             />
           </div>
-          <div>
-            <h4 className="text-md">{user.name}</h4>
-            <p className="text-xs max-w-fit truncate text-ellipsis text-muted-foreground">
+          <div className="flex flex-col items-center">
+            <div className="flex flex-row gap-1 items-center justify-center">
+              <h4 className="text-md text-ellipsis truncate max-w-72 lg:max-w-40">{user.name}</h4>
+              {user.verified && <BadgeCheck size={16} className="fill-blue-500 stroke-white" />}
+            </div>
+            <p className="text-xs max-w-72 lg:max-w-40 truncate text-ellipsis text-muted-foreground">
               @{user.username}
             </p>
           </div>