Fetching data from Backend

IT18021080/Telemedicine-Chat-App/frontend/package-lock.json

@@ -14,6 +14,7 @@
         "@testing-library/jest-dom": "^5.16.3",
         "@testing-library/react": "^12.1.4",
         "@testing-library/user-event": "^13.5.0",
+        "axios": "^0.26.1",
         "framer-motion": "^6.2.10",
         "react": "^18.0.0",
         "react-dom": "^18.0.0",
@@ -5719,6 +5720,14 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "0.26.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.26.1.tgz",
+      "integrity": "sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==",
+      "dependencies": {
+        "follow-redirects": "^1.14.8"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@@ -21694,6 +21703,14 @@
       "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.1.tgz",
       "integrity": "sha512-gd1kmb21kwNuWr6BQz8fv6GNECPBnUasepcoLbekws23NVBLODdsClRZ+bQ8+9Uomf3Sm3+Vwn0oYG9NvwnJCw=="
     },
+    "axios": {
+      "version": "0.26.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.26.1.tgz",
+      "integrity": "sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==",
+      "requires": {
+        "follow-redirects": "^1.14.8"
+      }
+    },
     "axobject-query": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",

IT18021080/Telemedicine-Chat-App/frontend/package.json

@@ -10,6 +10,7 @@
     "@testing-library/jest-dom": "^5.16.3",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^0.26.1",
     "framer-motion": "^6.2.10",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",

IT18021080/Telemedicine-Chat-App/frontend/src/Pages/ChatPage.js

 import React from "react";
+import axios from "axios";
+import { useEffect, useState } from "react";
 
 const ChatPage = () => {
+const [chats, setsChats] = useState([])
+
+    const fetchChats = async () => {
+        const { data } = await axios.get("/api/chat");
+
+        setsChats(data);
+
+    };
+
+    useEffect(() => {
+        fetchChats();
+    
+    }, []);
+    
+    
+
+
     return (
-        <div>Chat Page</div>
+        <div>
+            {chats.map((chat) => (
+                <div key={chat._id}>{chat.chatName}</div>))}
+        </div>
     );
 }