fetching apis

.gitignore

@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+.env

package.json

@@ -10,6 +10,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.7.2",
+    "dotenv": "^16.4.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.52.0",

src/App.tsx

@@ -1,13 +1,25 @@
-import Input from "./components/Input"
-import Navbar from "./components/Navbar"
+import { useState } from "react";
+import Calculator from "./api/Calculator";
+import Input from "./components/Input";
+import Navbar from "./components/Navbar";
 
 function App() {
+  const [id, setid] = useState<string>("");
+
+  const handleID = (id: string) => {
+    if (id === "") {
+      throw new Error("Invalid URL");
+    }
+    setid(id);
+  };
+
   return (
     <div className="bg-zinc-900 text-zinc-200 h-screen font-mono">
       <Navbar />
-      <Input />
+      <Input sendID={handleID} />
+      <Calculator pID={id} />
     </div>
-  )
+  );
 }
 
-export default App
+export default App;

src/api/Calculator.tsx

@@ -1,9 +1,44 @@
-function Calculator() {
+import React, { useEffect } from 'react';
+import axios from 'axios';
+
+type CalculatorProps = {
+  pID: string;
+};
+
+const Calculator: React.FC<CalculatorProps> = ({ pID }) => {
+  useEffect(() => {
+    const getVideoIDs = async () => {
+      try {
+        const response = await axios.get(`https://www.googleapis.com/youtube/v3/playlistItems`, {
+          params: {
+            part: 'snippet',
+            playlistId: pID,
+            key: import.meta.env.VITE_API_KEY
+          },
+          headers: {
+            'x-api-key': import.meta.env.VITE_API_KEY
+          }
+        });
+
+        console.log('Playlist Items:', response.data.items);
+      } catch (error) {
+        console.error('Error fetching playlist items:', error);
+      }
+    };
+
+    if (pID) {
+      getVideoIDs();
+    }
+  }, [pID]);
+
+  console.log('Playlist ID:', pID);
+
   return (
     <div>
-
+      <p>Playlist ID: {pID}</p>
+      <p>Video ID: {pID}</p>
     </div>
-  )
-}
+  );
+};
 
-export default Calculator
+export default Calculator;