RapidApi guide

rapidapi.md

@@ -0,0 +1,75 @@
+To create a GitHub Markdown file (`.md`) to present the code snippet and sample response, follow these steps:
+
+1. Create a new Markdown file with a descriptive name, such as `youtube-auto-complete-api.md`.
+2. Open the file in a text editor.
+3. Add the following content to the file:
+
+````markdown
+# YouTube Auto-Complete API Example
+
+This document provides an example of how to use the YouTube Auto-Complete API using Axios and RapidAPI. It includes a code snippet and a sample response.
+
+## Code Snippet
+
+```javascript
+const axios = require("axios");
+
+const options = {
+  method: "GET",
+  url: "https://youtube138.p.rapidapi.com/auto-complete/",
+  params: {
+    q: "desp",
+    hl: "en",
+    gl: "US",
+  },
+  headers: {
+    "X-RapidAPI-Key": "SIGN-UP-FOR-KEY",
+    "X-RapidAPI-Host": "youtube138.p.rapidapi.com",
+  },
+};
+
+try {
+  const response = await axios.request(options);
+  console.log(response.data);
+} catch (error) {
+  console.error(error);
+}
+```
+````
+
+## Sample Response
+
+```json
+{
+  "query": "despacito",
+  "results": [
+    "despacito",
+    "despacito justin bieber",
+    "despacito lyrics",
+    "despacito song",
+    "despacito remix",
+    "despacito slowed",
+    "despacito dance",
+    "despacito english version",
+    "despacito karaoke",
+    "despacito luis fonsi",
+    "despacito piano",
+    "despacito cover",
+    "despacito 1 hour",
+    "despacito guitar"
+  ]
+}
+```
+
+## Explanation
+
+- **Code Snippet**: This JavaScript code demonstrates how to make a GET request to the YouTube Auto-Complete API using Axios and RapidAPI. It sends a request with a query parameter (`q`) set to `'desp'` and retrieves auto-complete suggestions in English from the US region.
+
+- **Sample Response**: This is an example response from the API. It includes a query string and an array of auto-complete suggestions related to the query.
+
+```
+
+4. Save the file with the `.md` extension (e.g., `youtube-auto-complete-api.md`).
+5. Commit the Markdown file to your GitHub repository.
+6. You can now share the link to this Markdown file with beginners who want to understand how to use the YouTube Auto-Complete API.
+```

src/components/SearchFeed.jsx

@@ -1,27 +1,41 @@
-import { useState, useEffect } from "react";
+import React, { useState, useEffect } from "react";
 import { Typography, Box } from "@mui/material";
 import { useParams } from "react-router-dom";
-
 import { fetchFromAPI } from "../utils/fetchFromAPI";
 import { Videos } from "./";
 
 const SearchFeed = () => {
+  // State to hold the videos data
   const [videos, setVideos] = useState(null);
+
+  // Get the search term from URL params
   const { searchTerm } = useParams();
 
+  // Fetch videos data from API when searchTerm changes
   useEffect(() => {
-    fetchFromAPI(`search?part=snippet&q=${searchTerm}`)
-      .then((data) => setVideos(data.items))
+    const fetchVideos = async () => {
+      try {
+        const data = await fetchFromAPI(`search?part=snippet&q=${searchTerm}`);
+        setVideos(data.items);
+      } catch (error) {
+        console.error("Error fetching videos:", error);
+        setVideos([]); // Set videos to empty array in case of error
+      }
+    };
+    fetchVideos();
   }, [searchTerm]);
 
   return (
     <Box p={2} minHeight="95vh">
-      <Typography variant="h4" fontWeight={900}  color="white" mb={3} ml={{ sm: "100px"}}>
+      {/* Display search term and results count */}
+      <Typography variant="h4" fontWeight={900} color="white" mb={3}>
         Search Results for <span style={{ color: "#FC1503" }}>{searchTerm}</span> videos
       </Typography>
       <Box display="flex">
-        <Box sx={{ mr: { sm: '100px' } }}/>
-        {<Videos videos={videos} />}
+        {/* Spacer to align content */}
+        <Box mr={{ sm: '100px' }} />
+        {/* Render videos component with fetched data */}
+        <Videos videos={videos} />
       </Box>
     </Box>
   );