fetch problem solved

Author: pushpraj15295

unsplash_clone/src/Components/Menubar.jsx

@@ -23,7 +23,7 @@ const Menubar = () => {
           borderRight="2px solid lightgrey"
         >
           <Box className="border-b">
-            <Link to="/editorial">Editorial</Link>
+            <Link to="/">Editorial</Link>
           </Box>
 
           <Box className="border-b">

unsplash_clone/src/Components/Navbar.jsx

@@ -23,7 +23,7 @@ import {
 
 import "../App.css";
 
-import React, { useRef, useState } from "react";
+import React, { useContext, useRef, useState } from "react";
 import unIcon from "../icons/icon1.png";
 import bell from "../icons/bell.png";
 import hemb from "../icons/hemb.png";
@@ -36,9 +36,16 @@ import SubmitPhoto from "../PopOver/SubmitPhoto.jsx";
 import ExtraLink from "../PopOver/ExtraLink";
 import Recomandation from "../PopOver/Recomandation";
 import Menubar from "./Menubar";
+import { ImgContext } from "../Context/ImgContext";
+import { useNavigate } from "react-router-dom";
 
 //////////////////////////////////////////////////////////////////////////////////
 const Navbar = () => {
+ 
+  const {fetchdata} = useContext(ImgContext)
+
+  const nav = useNavigate()
+
   const { isOpen, onOpen, onClose } = useDisclosure();
   const [scrollBehavior, setScrollBehavior] = useState("inside");
 
@@ -79,6 +86,12 @@ const Navbar = () => {
                   placeholder="     Search free high resolution-photos"
                   borderRadius="40px"
                   bgColor="rgb(238,238,238)"
+                  // value={query}
+                  onKeyPress={(e) => {
+                    if (e.key === "Enter") {
+                        fetchdata(e.target.value)
+                        nav("/search")
+                    }}}
                 />
               </PopoverTrigger>
 

unsplash_clone/src/Context/ImgContext.jsx

@@ -1,18 +1,38 @@
 import { Box, Text } from "@chakra-ui/react";
-import { createContext, useEffect } from "react";
+import { createContext, useEffect, useState } from "react";
 
 export const ImgContext = createContext();
 
+
+
 function ImgContextProvider({ children }) {
-  return <ImgContext.Provider>{children}</ImgContext.Provider>;
+
+  const [fdata,setFdata] = useState([])
+
+  // let query = "cars"
+
+  function fetchdata(query){
+     
+    fetch(`https://api.unsplash.com/search/photos/?client_id=EzVvR2dvr-RYFFKN-LL8BgG-tneKy3hCT4dts2kqu_g&query=${query}`)
+    .then(r => r.json())
+    .then( data => setFdata(data.results))
+
+  }
+
+   useEffect(()=>{
+    fetchdata()
+   
+   },[])
+  
+   console.log(fdata)
+
+  return(<ImgContext.Provider value={{fetchdata,fdata}} >{children}</ImgContext.Provider>)
 }
 
 export default ImgContextProvider;
 
 //EzVvR2dvr-RYFFKN-LL8BgG-tneKy3hCT4dts2kqu_g
 
-// sequerty
-//9n43FlEse2MkigATyuLB9Yj17diDm5apvz-yJb13NiU
 
 //https://api.unsplash.com/photos/?client_id=YOUR_ACCESS_KEY
 

unsplash_clone/src/Demo/Demo.jsx

@@ -1,9 +1,13 @@
-import React from "react";
+import React, { useContext } from "react";
 import { useState } from "react";
 import { editorial } from "../Api";
 import "../App.css";
+import { ImgContext } from "../Context/ImgContext";
 
 const Demo = () => {
+
+  const {fetchdata} = useContext(ImgContext)
+
   const [model, setModel] = useState(false);
 
   const [tempimgSrc, setTempImgSrc] = useState("");
@@ -14,6 +18,8 @@ const Demo = () => {
   };
 
   return (
+     <>
+
     <div style={{ width: "90%", margin: "auto" }}>
       <div className={model ? "model open" : "model"}>
         <img src={tempimgSrc} />
@@ -38,6 +44,7 @@ const Demo = () => {
         })}
       </div>
     </div>
+    </>
   );
 };
 

unsplash_clone/src/Pages/Editorial.jsx

@@ -14,12 +14,19 @@ import Recomandation from "../PopOver/Recomandation";
 import imgsearch from "../icons/imgs.png";
 import search from "../icons/search.png";
 
-import React from "react";
+import React, { useContext } from "react";
 import { useState } from "react";
 import { editorial } from "../Api";
 import "../App.css";
+import { ImgContext } from "../Context/ImgContext";
+import { useNavigate } from "react-router-dom";
 
 const Editorial = () => {
+  
+  const {fetchdata} = useContext(ImgContext)
+
+  const nav = useNavigate()
+
   const [model, setModel] = useState(false);
 
   const [tempimgSrc, setTempImgSrc] = useState("");
@@ -78,6 +85,11 @@ const Editorial = () => {
                     padding="25px"
                     placeholder="     Search free high resolution-photos"
                     bgColor="rgb(238,238,238)"
+                    onKeyPress={(e) => {
+                      if (e.key === "Enter") {
+                          fetchdata(e.target.value)
+                          nav("/search")
+                      }}}
                   />
                 </PopoverTrigger>
 

unsplash_clone/src/Routes/AllRoutes.jsx

@@ -24,20 +24,21 @@ import StreetPhotograph from "../Pages/StreetPhotography";
 import TexturesPatterns from "../Pages/TexturesPatterns";
 import Travel from "../Pages/Travel";
 import Wallpapers from "../Pages/Wallpapers";
+import Search from "../Search";
 
 const AllRoutes = () => {
   return (
     <>
       <Routes>
-        <Route path="/" element={<Home />} />
+        {/* <Route path="/" element={<Home />} /> */}
         <Route path="/renders" element={<Renders />} />
         <Route path="/animals" element={<Animals />} />
         <Route path="/architecture" element={<Architecture />} />
         <Route path="/artsCulture" element={<ArtsCulture />} />
         <Route path="/athletics" element={<Athletics />} />
         <Route path="/businessWork" element={<BusinessWork />} />
         <Route path="/currentEvents" element={<CurrentEvents />} />
-        <Route path="/editorial" element={<Editorial />} />
+        <Route path="/" element={<Editorial />} />
         <Route path="/experimental" element={<Experimental />} />
         <Route path="/fashion" element={<Fashion />} />
         <Route path="/film" element={<Film />} />
@@ -53,6 +54,7 @@ const AllRoutes = () => {
         <Route path="/texturesPatterns" element={<TexturesPatterns />} />
         <Route path="/travel" element={<Travel />} />
         <Route path="/wallpapers" element={<Wallpapers />} />
+        <Route path="/search" element={<Search />} />
       </Routes>
     </>
   );

unsplash_clone/src/Search.jsx

@@ -0,0 +1,46 @@
+import React, { useContext, useState } from 'react'
+import { ImgContext } from './Context/ImgContext'
+import "./App.css"
+
+const Search = () => {
+    const {fdata} = useContext(ImgContext)
+
+    const [model, setModel] = useState(false);
+
+  const [tempimgSrc, setTempImgSrc] = useState("");
+
+  const getImg = (imgsrc) => {
+    setTempImgSrc(imgsrc);
+    setModel(true);
+  };
+  return (
+    <>
+       <div style={{ width: "90%", margin: "auto" }}>
+      <div className={model ? "model open" : "model"}>
+        <img src={tempimgSrc} />
+        <i
+          onClick={() => setModel(false)}
+          style={{ backgroundColor: "white", color: "black" }}
+          class="fa-solid fa-xmark-large"
+        ></i>
+      </div>
+
+      <div className="gallery">
+        {fdata.map((item) => {
+          return (
+            <div className="pics" key={item.id}>
+              <img
+                src={item.urls.full}
+                style={{ width: "100%" }}
+                onClick={() => getImg(item.urls.full)}
+              />
+            </div>
+          );
+        })}
+      </div>
+    </div>
+    </>
+  )
+}
+
+export default Search