fixed warnings in example code

Author: yash-pouranik

examples/social-demo/client/src/components/post/PostCard.jsx

@@ -1,6 +1,7 @@
 import { Heart, MessageCircle, Repeat2, Share, Trash2, MoreHorizontal } from 'lucide-react';
 import { Link, useNavigate } from 'react-router-dom';
 import { formatDistanceToNow } from 'date-fns';
+import { sanitizeUrl } from '../../lib/utils';
 import Avatar from '../ui/Avatar';
 import { useMutation, useQueryClient, useQuery } from '@tanstack/react-query';
 import { dataApi } from '../../lib/api';
@@ -164,7 +165,7 @@ export default function PostCard({ post }) {
               {post.images.map((img, idx) => (
                 <img
                   key={idx}
-                  src={img}
+                  src={sanitizeUrl(img)}
                   alt=""
                   className="w-full object-cover max-h-96"
                   onClick={(e) => e.stopPropagation()}

examples/social-demo/client/src/components/post/TweetComposer.jsx

@@ -3,6 +3,7 @@ import { Image, X } from 'lucide-react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { dataApi, storageApi } from '../../lib/api';
 import { useAuth } from '../../contexts/AuthContext';
+import { sanitizeUrl } from '../../lib/utils';
 import Avatar from '../ui/Avatar';
 import Button from '../ui/Button';
 
@@ -106,7 +107,7 @@ export default function TweetComposer({ onSuccess }) {
             }`}>
               {previewUrls.map((url, idx) => (
                 <div key={idx} className="relative group">
-                  <img src={url} alt="" className="w-full h-48 object-cover" />
+                  <img src={sanitizeUrl(url)} alt="" className="w-full h-48 object-cover" />
                   <button
                     onClick={() => removeImage(idx)}
                     className="absolute top-2 right-2 p-1.5 bg-black/70 rounded-full hover:bg-black/90 transition-colors"

examples/social-demo/client/src/components/ui/Avatar.jsx

@@ -1,4 +1,4 @@
-import { cn } from '../../lib/utils';
+import { cn, sanitizeUrl } from '../../lib/utils';
 
 export default function Avatar({ src, alt, size = 'md', className, verified = false }) {
   const sizes = {
@@ -12,7 +12,7 @@ export default function Avatar({ src, alt, size = 'md', className, verified = fa
     <div className="relative inline-block">
       <div className={cn('rounded-full overflow-hidden bg-gray-200 dark:bg-gray-800', sizes[size], className)}>
         {src ? (
-          <img src={src} alt={alt} className="w-full h-full object-cover" />
+          <img src={sanitizeUrl(src)} alt={alt} className="w-full h-full object-cover" />
         ) : (
           <div className="w-full h-full flex items-center justify-center text-gray-500 dark:text-gray-400 font-bold">
             {alt?.charAt(0)?.toUpperCase() || '?'}

examples/social-demo/client/src/lib/utils.js

@@ -4,3 +4,12 @@ import { twMerge } from "tailwind-merge";
 export function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+
+export function sanitizeUrl(url) {
+  if (!url) return '';
+  const sanitized = url.toString().trim();
+  if (sanitized.toLowerCase().startsWith('javascript:')) {
+    return 'about:blank';
+  }
+  return sanitized;
+}

examples/social-demo/client/src/pages/Profile.jsx

@@ -7,6 +7,7 @@ import Button from '../components/ui/Button';
 import PostCard from '../components/post/PostCard';
 import { Calendar, Link as LinkIcon, MapPin } from 'lucide-react';
 import { formatDistanceToNow } from 'date-fns';
+import { sanitizeUrl } from '../lib/utils';
 
 export default function Profile() {
   const { username } = useParams();
@@ -95,7 +96,7 @@ export default function Profile() {
       {/* Banner */}
       <div className="h-48 bg-gradient-to-r from-primary to-blue-600">
         {profile.banner && (
-          <img src={profile.banner} alt="" className="w-full h-full object-cover" />
+          <img src={sanitizeUrl(profile.banner)} alt="" className="w-full h-full object-cover" />
         )}
       </div>
 

packages/common/src/utils/validateData.js

@@ -68,8 +68,7 @@ function validateData(incomingData, schemaRules) {
         const error = validateField(value, field);
         if (error) return { error };
 
-        // Ensure defined fields are present if required (handled by validateField)
-        // cleanData already has it, but we can be explicit
+
         if (value !== undefined) {
             cleanData[field.key] = value;
         }