ways to remove and delete

frontend/src/api.js

@@ -136,6 +136,18 @@ class API {
     return this.request('/friends/requests');
   }
 
+  async removeFriend(friendId) {
+    return this.request(`/friends/${friendId}`, {
+      method: 'DELETE'
+    });
+  }
+
+  async deleteChallenge(challengeId) {
+    return this.request(`/challenges/${challengeId}`, {
+      method: 'DELETE'
+    });
+  }
+
   // TMDB
   async searchShows(query) {
     return this.request(`/tmdb/search?q=${encodeURIComponent(query)}`);

frontend/src/pages/ChallengeDetail.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
-import { useParams, Link } from 'react-router-dom';
+import { useParams, Link, useNavigate } from 'react-router-dom';
 import toast from 'react-hot-toast';
 import { useAuth } from '../AuthContext';
 import { useSocket } from '../SocketContext';
@@ -8,6 +8,7 @@ import { useClickOutside } from '../hooks/useClickOutside';
 
 export default function ChallengeDetail() {
   const { id } = useParams();
+  const navigate = useNavigate();
   const { user } = useAuth();
   const { socket, joinChallenge, leaveChallenge } = useSocket();
   const [challenge, setChallenge] = useState(null);
@@ -21,6 +22,7 @@ export default function ChallengeDetail() {
   const [searchTimeout, setSearchTimeout] = useState(null);
   const [submitting, setSubmitting] = useState(false);
   const [validating, setValidating] = useState(null);
+  const [deleting, setDeleting] = useState(false);
   const searchRef = useRef(null);
 
   useClickOutside(searchRef, () => setSearchResults([]));
@@ -199,6 +201,22 @@ export default function ChallengeDetail() {
     }
   };
 
+  const handleDelete = async () => {
+    if (!confirm('Are you sure you want to delete this challenge? This action cannot be undone.')) {
+      return;
+    }
+
+    setDeleting(true);
+    try {
+      await api.deleteChallenge(id);
+      toast.success('Challenge deleted successfully');
+      navigate('/challenges');
+    } catch (err) {
+      toast.error('Failed to delete challenge: ' + err.message);
+      setDeleting(false);
+    }
+  };
+
   if (loading) {
     return <div className="loading">Loading challenge...</div>;
   }
@@ -228,12 +246,23 @@ export default function ChallengeDetail() {
             <p style={{ color: 'var(--text-muted)', marginBottom: '1rem' }}>
               Created by {challenge.challenge.creator_username}
             </p>
-            <button 
-              className="btn btn-secondary btn-sm"
-              onClick={() => setShowInvite(!showInvite)}
-            >
-              {showInvite ? 'Cancel' : 'Invite Friends'}
-            </button>
+            <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
+              <button 
+                className="btn btn-secondary btn-sm"
+                onClick={() => setShowInvite(!showInvite)}
+              >
+                {showInvite ? 'Cancel' : 'Invite Friends'}
+              </button>
+              {challenge.challenge.created_by === user.id && (
+                <button 
+                  className="btn btn-danger btn-sm"
+                  onClick={handleDelete}
+                  disabled={deleting}
+                >
+                  {deleting ? 'Deleting...' : 'Delete Challenge'}
+                </button>
+              )}
+            </div>
           </div>
         </div>