Fix API fetching and posting by replacing node-fetch with Axios module

hanichris · Jul 15, 2023 · 46aba79 · 46aba79
1 parent 0c5b735
commit 46aba79
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 51 deletions.
diff --git a/frontend/src/pages/history.page.tsx b/frontend/src/pages/history.page.tsx
@@ -20,10 +20,10 @@ function HistoryPage() {
   useEffect(() => {
     const SERVER_ENDPOINT = import.meta.env.VITE_BACKEND_ENDPOINT;
     const fetchVideos = async () => {
-      await axios.get(
-        `${SERVER_ENDPOINT}/users/${user?._id}/history`,
-        { withCredentials: true },
-      )
+      await axios
+        .get(`${SERVER_ENDPOINT}/users/${user?._id}/history`, {
+          withCredentials: true,
+        })
         .then((data) => {
           setVideos(data.data);
         });

diff --git a/frontend/src/pages/profile.page.tsx b/frontend/src/pages/profile.page.tsx
@@ -25,12 +25,13 @@ function ProfilePage() {
   const fetchUser = async () => {
     try {
       store.setRequestLoading(true);
-      await axios.get(`${SERVER_ENDPOINT}/users/me`, {
-        withCredentials: true,
-        headers: {
-          'Content-Type': 'application/json',
-        },
-      })
+      await axios
+        .get(`${SERVER_ENDPOINT}/users/me`, {
+          withCredentials: true,
+          headers: {
+            'Content-Type': 'application/json',
+          },
+        })
         .then((data) => {
           if (data.status !== 200) {
             throw new Error(data.statusText);
@@ -150,16 +151,16 @@ function ProfilePage() {
                 <p className="mb-3">
                   Subscriptions:
                   {' '}
-                  {user?.subscriptions.length}
+                  {user?.subscriptions?.length}
                 </p>
                 <p className="mb-3">
                   Channels:
-                  {user.channels.length}
+                  {user.channels?.length}
                 </p>
                 <p className="mb-3">
                   Default Channel:
                   {' '}
-                  {user.channels.length > 0
+                  {user.channels?.length > 0
                     ? (user.channels[0] as unknown as IChannel)._id
                     : ''}
                 </p>

diff --git a/frontend/src/pages/subscriptions.page.tsx b/frontend/src/pages/subscriptions.page.tsx
@@ -20,10 +20,10 @@ function SubscriptionsPage() {
   useEffect(() => {
     const SERVER_ENDPOINT = import.meta.env.VITE_BACKEND_ENDPOINT;
     const fetchVideos = async () => {
-      await axios.get(
-        `${SERVER_ENDPOINT}/users/${user?._id}/subscriptions`,
-        { withCredentials: true },
-      )
+      await axios
+        .get(`${SERVER_ENDPOINT}/users/${user?._id}/subscriptions`, {
+          withCredentials: true,
+        })
         .then((data) => {
           setChannels(data.data);
         });

diff --git a/frontend/src/pages/video.page.tsx b/frontend/src/pages/video.page.tsx
@@ -126,29 +126,26 @@ function VideoPage() {
   const currentVideo = useStore((state) => state.currentVideo);
   const authUser = useStore((state) => state.authUser);
   useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const videoRes = await axios.get(
-          `${SERVER_ENDPOINT}/videos/${id}/view`,
-        )
-          .then((data: any) => {
-            store.setCurrentVideo(data.data);
-            return data.data;
-          });
-
-        await axios.get(
-          `${SERVER_ENDPOINT}/channels/${videoRes.channelId}/view`,
-        )
-          .then((data: any) => {
-            store.setCurrentChannel(data.data);
-            return data.data;
-          });
-      } catch (err) {
-        console.error(err);
-      }
-    };
-    fetchData();
-  }, []);
+  const fetchData = async () => {
+    try {
+      // Fetch video data
+      const videoResponse = await axios.get(`${SERVER_ENDPOINT}/videos/${id}/view`);
+      const videoData = videoResponse.data;
+      store.setCurrentVideo(videoData);
+
+      // Fetch channel data
+      const channelResponse = await axios.get(`${SERVER_ENDPOINT}/channels/${videoData.channelId}/view`);
+      const channelData = channelResponse.data;
+      store.setCurrentChannel(channelData);
+
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  fetchData();
+}, [id]);
+
 
   const handleLike = async () => {
     try {
@@ -357,12 +354,9 @@ function VideoPage() {
             <ChannelDetail>
               <ChannelName>{currentChannel?.name}</ChannelName>
               <ChannelCounter>
-                {
-                  currentChannel?.subscribers
-                  && currentChannel?.subscribers > 0
-                    ? currentChannel?.subscribers
-                    : 0
-                }
+                {currentChannel?.subscribers && currentChannel?.subscribers > 0
+                  ? currentChannel?.subscribers
+                  : 0}
                 {' '}
                 subscribers
               </ChannelCounter>
@@ -378,11 +372,9 @@ function VideoPage() {
         <Hr />
         <Comments videoId={id} />
       </Content>
-      {
-        currentVideo?.tags
-          ? <Recommendation tags={Array.from(currentVideo?.tags)} />
-          : null
-      }
+      {currentVideo?.tags ? (
+        <Recommendation tags={Array.from(currentVideo?.tags)} />
+      ) : null}
     </Container>
   );
 }