test leaving challange invited to

frontend/src/api.js

@@ -148,6 +148,12 @@ class API {
     });
   }
 
+  async leaveChallenge(challengeId) {
+    return this.request(`/challenges/${challengeId}/leave`, {
+      method: 'POST'
+    });
+  }
+
   // TMDB
   async searchShows(query) {
     return this.request(`/tmdb/search?q=${encodeURIComponent(query)}`);

frontend/src/pages/ChallengeDetail.jsx

@@ -25,6 +25,7 @@ export default function ChallengeDetail() {
   const [deleting, setDeleting] = useState(false);
   const [friends, setFriends] = useState([]);
   const [inviting, setInviting] = useState(null);
+  const [leaving, setLeaving] = useState(false);
   const searchRef = useRef(null);
 
   useClickOutside(searchRef, () => setSearchResults([]));
@@ -235,6 +236,22 @@ export default function ChallengeDetail() {
     }
   };
 
+  const handleLeave = async () => {
+    if (!confirm('Are you sure you want to leave this challenge? Your predictions will be removed.')) {
+      return;
+    }
+
+    setLeaving(true);
+    try {
+      await api.leaveChallenge(id);
+      toast.success('Left challenge successfully');
+      navigate('/challenges');
+    } catch (err) {
+      toast.error('Failed to leave challenge: ' + err.message);
+      setLeaving(false);
+    }
+  };
+
   if (loading) {
     return <div className="loading">Loading challenge...</div>;
   }
@@ -271,7 +288,7 @@ export default function ChallengeDetail() {
               >
                 {showInvite ? 'Cancel' : 'Invite Friends'}
               </button>
-              {challenge.challenge.created_by === user.id && (
+              {challenge.challenge.created_by === user.id ? (
                 <button 
                   className="btn btn-danger btn-sm"
                   onClick={handleDelete}
@@ -279,6 +296,14 @@ export default function ChallengeDetail() {
                 >
                   {deleting ? 'Deleting...' : 'Delete Challenge'}
                 </button>
+              ) : (
+                <button 
+                  className="btn btn-danger btn-sm"
+                  onClick={handleLeave}
+                  disabled={leaving}
+                >
+                  {leaving ? 'Leaving...' : 'Leave Challenge'}
+                </button>
               )}
             </div>
           </div>