added youtube search

.gitignore

@@ -1,4 +1,5 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+.env
 
 # dependencies
 /node_modules

package.json

@@ -6,13 +6,17 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.4.0",
     "bootstrap": "^5.3.1",
+    "dotenv": "^16.3.1",
     "react": "^18.2.0",
     "react-bootstrap": "^2.8.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
     "split-pane-react": "^0.1.3",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "youtube-search": "^1.1.6",
+    "youtube-search-api": "^1.2.1"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.jsx

@@ -1,4 +1,4 @@
-import Sidebar from "./sections/Sidebar";
+import Chat from "./sections/Chat";
 import Footer from "./sections/Footer";
 import React, { useState, useEffect } from "react";
 import SplitPane, { Pane } from "split-pane-react";
@@ -54,7 +54,7 @@ function App() {
             <button onClick={handleChatToggleOff} className="close-chat-btn">
               x
             </button>
-            <Sidebar />
+            <Chat />
           </div>
         </div>
       </SplitPane>

src/sections/Chat.jsx

@@ -0,0 +1,38 @@
+import React, { useState, useEffect } from "react";
+
+function Chat() {
+  const [searchResults, setSearchResults] = useState([]);
+
+  useEffect(() => {
+    const apiKey = "AIzaSyCk_cO8UzS_H1vab6iGke7RSS0xJt1BAu8";
+    const keyword = "react";
+    const maxResults = 10;
+
+    const apiUrl = `https://www.googleapis.com/youtube/v3/search?part=snippet&q=${keyword}&type=video&maxResults=${maxResults}&key=${apiKey}`;
+
+    const fetchData = async () => {
+      try {
+        const response = await fetch(apiUrl);
+        const data = await response.json();
+        setSearchResults(data.items);
+      } catch (error) {
+        console.error("Error fetching data:", error);
+      }
+    };
+
+    fetchData();
+  }, []);
+  console.log(searchResults[0].snippet);
+  return (
+    <div className="chat">
+      <h3>Chat</h3>
+      <ul>
+        {searchResults.map((result) => (
+          <li key={result.id.videoId}>{result.snippet.title}</li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export default Chat;