From 5fb796acefc5d04a95e1a5a1288cefd57d491f1a Mon Sep 17 00:00:00 2001
From: lzach83 <lzach83@gmail.com>
Date: Thu, 4 Jan 2024 11:10:58 -0500
Subject: [PATCH] Switched jQuery to Axios and added an AbortController

---
 .../views/components/Profile/Profile.tsx      | 26 ++++++++++++++-----
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/packages/commonwealth/client/scripts/views/components/Profile/Profile.tsx b/packages/commonwealth/client/scripts/views/components/Profile/Profile.tsx
index 85f5e2e1738..39491682659 100644
--- a/packages/commonwealth/client/scripts/views/components/Profile/Profile.tsx
+++ b/packages/commonwealth/client/scripts/views/components/Profile/Profile.tsx
@@ -1,5 +1,5 @@
+import axios from 'axios';
 import 'components/Profile/Profile.scss';
-import $ from 'jquery';
 import React, { useEffect, useState } from 'react';
 import app from 'state';
 import AddressInfo from '../../../models/AddressInfo';
@@ -34,16 +34,22 @@ const Profile = ({ profileId }: ProfileProps) => {
   const [threads, setThreads] = useState<Thread[]>([]);
   const [isOwner, setIsOwner] = useState<boolean>();
 
-  const getProfileData = async (query: string) => {
+  const getProfileData = async (query: string, signal: AbortSignal) => {
     setLoading(true);
     try {
-      const { result } = await $.get(`${app.serverUrl()}/profile/v2`, {
-        profileId: query,
-        jwt: app.user.jwt,
+      const response = await axios.get(`${app.serverUrl()}/profile/v2`, {
+        params: {
+          profileId: query,
+          jwt: app.user.jwt,
+        },
+        signal,
       });
 
+      const { result } = response.data;
+
       setProfile(new NewProfile(result.profile));
       setThreads(result.threads.map((t) => new Thread(t)));
+
       const responseComments = result.comments.map((c) => new Comment(c));
       const commentsWithAssociatedThread = responseComments.map((c) => {
         const thread = result.commentThreads.find(
@@ -52,6 +58,7 @@ const Profile = ({ profileId }: ProfileProps) => {
         return { ...c, thread };
       });
       setComments(commentsWithAssociatedThread);
+
       setAddresses(
         result.addresses.map((a) => {
           try {
@@ -70,6 +77,7 @@ const Profile = ({ profileId }: ProfileProps) => {
           }
         }),
       );
+
       setIsOwner(result.isOwner);
     } catch (err) {
       if (
@@ -83,8 +91,12 @@ const Profile = ({ profileId }: ProfileProps) => {
   };
 
   useEffect(() => {
-    getProfileData(profileId);
-  }, []);
+    const abortController = new AbortController();
+    const signal = abortController.signal;
+    getProfileData(profileId, signal);
+
+    return () => abortController.abort();
+  }, [profileId]);
 
   if (loading)
     return (