Fix PR automation autoreview

Author: “Kirti

.github/workflows/ai-code-review.yml

@@ -67,12 +67,12 @@ jobs:
               model: 'gpt-3.5-turbo',
               messages: [{
                 role: 'system',
-                content: 'You are an expert code reviewer. Review the code for: bugs, security issues, performance problems, best practices, and code quality. Be concise and specific. Focus on important issues only.'
+                content: 'You are an expert code reviewer. For each issue found, provide: 1) Issue description, 2) Why it matters, 3) Specific code fix with BEFORE and AFTER examples. Format each issue clearly with the file line reference if possible. Focus on: bugs, security, performance, best practices, accessibility, and React-specific issues.'
               }, {
                 role: 'user',
-                content: 'Review this ' + file + ':\n\n```javascript\n' + content.slice(0, 3000) + '\n```'
+                content: 'Review this code from ' + file + ' and provide specific fixes:\n\n```javascript\n' + content.slice(0, 3000) + '\n```\n\nFor each issue, show:\n- Issue: [description]\n- Why: [explanation]\n- Fix: [before/after code example]'
               }],
-              max_tokens: 500,
+              max_tokens: 1000,
               temperature: 0.3
             });
             

src/App.js

@@ -1,24 +1,33 @@
 import React from 'react';
-import logo from './logo.svg';
 import './App.css';
 import UserProfile from './components/UserProfile';
+import UserList from './components/UserList';
+import TodoForm from './components/TodoForm';
+import ProductCard from './components/ProductCard';
 
 function App() {
   return (
     <div className="App">
       <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
         <h1>GitHub Actions Practice</h1>
-        <p>
-          Testing AI Code Review and CI/CD workflows
-        </p>
+        <p>Testing AI Code Review with Multiple Components</p>
 
-        {/* UserProfile component with some props */}
         <UserProfile 
           name="John Doe"
           email="john@example.com"
           avatar="https://via.placeholder.com/150"
         />
+        
+        <UserList />
+        
+        <TodoForm />
+        
+        <ProductCard 
+          name="Sample Product"
+          price={99.99}
+          imageUrl="https://via.placeholder.com/300"
+          externalLink="https://example.com"
+        />
       </header>
     </div>
   );

src/components/ProductCard.js

@@ -0,0 +1,88 @@
+import { useState, useEffect } from 'react';
+
+// INTENTIONAL MISTAKES:
+// 1. React not imported (needed for JSX)
+// 2. Prop drilling
+// 3. No memoization
+// 4. Expensive calculations in render
+// 5. Security issues with external URLs
+// 6. Missing alt attributes
+// 7. No error boundaries
+// 8. Inefficient event handlers
+// 9. Missing cleanup
+// 10. Password in code
+
+const API_KEY = 'sk-1234567890abcdef'; // Hardcoded secret!
+
+function ProductCard(props) {
+  const [price, setPrice] = useState(props.price);
+  const [quantity, setQuantity] = useState(1);
+  
+  // Expensive calculation on every render
+  const discount = calculateComplexDiscount(price, quantity);
+  
+  // No cleanup for interval
+  useEffect(() => {
+    const interval = setInterval(() => {
+      // Fetching on interval without cleanup
+      fetch(`https://api.example.com/price?key=${API_KEY}`)
+        .then(r => r.json())
+        .then(data => setPrice(data.price));
+    }, 1000);
+    // Missing return cleanup
+  }, []);
+  
+  // Inefficient - recreated on every render
+  const handleQuantityChange = (delta) => {
+    setQuantity(quantity + delta);
+  };
+  
+  // Expensive calculation not memoized
+  const total = price * quantity - discount;
+  
+  return (
+    <div className="product-card">
+      {/* Security: No validation of external URL */}
+      <img src={props.imageUrl} /> {/* Missing alt */}
+      
+      <h2>{props.name}</h2>
+      
+      {/* Inline styles - should use CSS */}
+      <p style={{ color: 'red', fontSize: '20px' }}>
+        ${total.toFixed(2)}
+      </p>
+      
+      {/* Inline arrow functions - performance issue */}
+      <button onClick={() => handleQuantityChange(-1)}>-</button>
+      <span>{quantity}</span>
+      <button onClick={() => handleQuantityChange(1)}>+</button>
+      
+      {/* External link without security */}
+      <a href={props.externalLink} target="_blank">
+        Learn More
+      </a>
+      
+      {/* Direct DOM manipulation - anti-pattern */}
+      <button onClick={() => {
+        document.getElementById('cart').innerHTML = 'Added!';
+      }}>
+        Add to Cart
+      </button>
+      
+      <div id="cart"></div>
+    </div>
+  );
+}
+
+// Missing memoization
+function calculateComplexDiscount(price, quantity) {
+  // Simulate expensive calculation
+  let result = 0;
+  for (let i = 0; i < 10000; i++) {
+    result += Math.sqrt(price * quantity);
+  }
+  return result / 10000;
+}
+
+// No PropTypes validation
+export default ProductCard;

src/components/TodoForm.js

@@ -0,0 +1,77 @@
+import React from 'react';
+
+// INTENTIONAL MISTAKES:
+// 1. No useState import
+// 2. Uncontrolled to controlled component issue
+// 3. No form validation
+// 4. Security: XSS vulnerability
+// 5. No accessibility labels
+// 6. Missing preventDefault
+// 7. Props drilling instead of context
+// 8. Async state updates not handled
+// 9. No error boundaries
+// 10. Hardcoded values
+
+class TodoForm extends React.Component {
+  constructor(props) {
+    super(props);
+    // Uncontrolled component
+    this.state = {
+      todo: undefined, // Should be empty string
+      todos: [],
+      count: 0
+    };
+  }
+  
+  handleSubmit(e) {
+    // Missing e.preventDefault()
+    
+    // XSS vulnerability - dangerouslySetInnerHTML
+    const newTodo = {
+      id: Math.random(), // Should use proper ID generation
+      text: this.state.todo,
+      html: this.state.todo // Will be rendered as HTML
+    };
+    
+    // Async state update issue
+    this.setState({ 
+      todos: [...this.state.todos, newTodo],
+      count: this.state.count + 1 // Race condition
+    });
+    
+    this.setState({
+      count: this.state.count + 1 // Using stale state
+    });
+  }
+  
+  render() {
+    return (
+      <form onSubmit={this.handleSubmit}>
+        {/* No accessibility labels */}
+        <input 
+          type="text"
+          value={this.state.todo}
+          onChange={(e) => this.setState({ todo: e.target.value })}
+        />
+        
+        {/* Inline function - performance issue */}
+        <button onClick={() => this.handleSubmit()}>Add</button>
+        
+        {/* XSS vulnerability */}
+        {this.state.todos.map((todo, index) => (
+          <div 
+            key={index} // Using index as key
+            dangerouslySetInnerHTML={{ __html: todo.html }}
+          />
+        ))}
+        
+        {/* Not using setState properly */}
+        <p onClick={() => this.state.count++}>
+          Count: {this.state.count}
+        </p>
+      </form>
+    );
+  }
+}
+
+export default TodoForm;

src/components/UserList.js

@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+
+// INTENTIONAL MISTAKES:
+// 1. useEffect not imported
+// 2. Memory leak - no cleanup
+// 3. No error handling
+// 4. No loading state
+// 5. Inefficient re-renders
+// 6. Missing key in map
+// 7. Inline function in map
+// 8. Direct state mutation
+// 9. No PropTypes
+// 10. Missing dependency in useEffect
+
+function UserList() {
+  const [users, setUsers] = useState([]);
+  const [filter, setFilter] = useState('');
+  
+  // Missing useEffect import - will cause error
+  useEffect(() => {
+    // No loading state
+    fetch('https://jsonplaceholder.typicode.com/users')
+      .then(response => response.json())
+      .then(data => {
+        // Direct mutation instead of spreading
+        users.push(...data);
+        setUsers(users);
+      });
+    // No cleanup, no error handling
+  }, []); // Missing filter dependency
+  
+  // Inefficient - should use useMemo
+  const filteredUsers = users.filter(user => 
+    user.name.toLowerCase().includes(filter.toLowerCase())
+  );
+  
+  return (
+    <div>
+      <input 
+        value={filter}
+        onChange={(e) => setFilter(e.target.value)}
+      />
+      
+      {/* Missing key prop, inline function */}
+      {filteredUsers.map(user => (
+        <div onClick={() => console.log(user)}>
+          <h3>{user.name}</h3>
+          <p>{user.email}</p>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default UserList;