Day01

src/components/Card.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+const Card = ({movie}) => {
+    const { Title, Year, imdbID, Poster } = movie
+    console.log("Card", Title, Year, imdbID, Poster)
+    return (
+        <div className="h-16 w-10">
+            <img src={Poster} alt={Title} className="h-12 w-full" />
+            <h6 className="text-quadnary">{Title}</h6>
+            <p className="text-quadnary">{Year}</p>
+        </div>
+    );
+};
+
+export default Card;

src/hooks/useFetch.jsx

@@ -1,16 +1,16 @@
 import axios from "axios";
 import { useState, useEffect } from "react";
 
-const useFetch = ({ url }) => {
+const useFetch = (url) => {
     const [data, setData] = useState({});
-    // const [error, setError] = useState("");
     useEffect(() => {
+        // console.log("Inside fetch")
         const fetch = async () => {
             let response;
             try {
-                 response = await axios.get(url);
-                 console.log("USEFETCH:",response)
-                 setData(response);
+                response = await axios.get(url);
+                // console.log("USEFETCH:", response?.data);
+                setData(response?.data);
             } catch {
                 console.log("Error in useFetch: ");
                 return "Error Fetching Data";
@@ -21,6 +21,4 @@ const useFetch = ({ url }) => {
     return data;
 };
 
-
-
 export default useFetch;

src/pages/HomePage.jsx

@@ -1,16 +1,17 @@
 import React, { useEffect, useState } from "react";
 import useFetch from "../hooks/useFetch";
 
+import Card from "../components/Card";
+
 const HomePage = () => {
-    const [inputValue, setInputValue] = useState("")
-    const [searchValue, setSearchValue] = useState("")
+    const [inputValue, setInputValue] = useState("");
+    const [searchValue, setSearchValue] = useState("");
+    const [data, setData] = useState("");
 
     const url = import.meta.env.VITE_BASE_URL;
-    console.log("URL =", `${url}s=${searchValue}`)
-    const data = useFetch(`${url}s=${searchValue}`);
-
-    // console.log("DATA = ", data)
-
+    const response = useFetch(url + "s=" + searchValue);
+    console.log(response)
+    useEffect(() => setData(response), [data]);
     const handleSearch = (event) => {
         event.preventDefault();
         setSearchValue(inputValue);
@@ -24,14 +25,25 @@ const HomePage = () => {
                         name="search"
                         id="search"
                         value={inputValue}
-                        onChange={(event) => setInputValue(event?.target?.value)}
+                        onChange={(event) =>
+                            setInputValue(event?.target?.value)
+                        }
                         className="p-1 text-quadnary bg-primary rounded outline-none border border-ternary"
                     />
-                    <button type="button"  className="text-quadnary" onClick={handleSearch}>
+                    <button
+                        type="button"
+                        className="text-quadnary"
+                        onClick={handleSearch}
+                    >
                         Search
                     </button>
                 </form>
             </div>
+            {data?.Search?.length > 0 && 
+                <div>
+                    {data?.Search?.map((movie) => <Card key={movie?.imdbID} movie={movie}/>)}
+                </div>
+            }
         </div>
     );
 };