Merge branch 'main' into i83-ngo_profile_page

data/db.json

@@ -4,6 +4,7 @@
       "id": 1,
       "website": "www. Reach.com",
       "name": "John Doe",
+
       "location": "Istanbul",
       "date": "10/12/1979",
       "email": "[email protected]",

src/components/AdminDashboardHeroSection/AdminDashboardHeroSection.jsx

@@ -2,33 +2,32 @@ import React, { useState } from "react";
 import "../../App.css";
 import NGOImage from "../../assets/NGOImage.png";
 import "../../App.css";
-import EditInfoForm from "../../components/EditInfoForm/EditInfoForm";
+import EditInfoForm from "./EditInfoForm";
+import { useQuery } from "@tanstack/react-query";
 
 function AdminDashboardHeroSection() {
-    const [isHidden, setIsHidden] = useState(false);
+    const [info, setInfo] = useState([]); //changed {} to []
+    const { isLoading, error, data } = useQuery(["repoData"], () =>
+        fetch("https://reach-capstone.herokuapp.com/api/ngos").then((res) =>
+            res.json().then((data) => setInfo(data.data[0]))
+        )
+    );
+    if (isLoading) return "Loading...";
+
+    // if (error) return error.messag;
 
     return (
         <>
-            {isHidden ? (
-                <EditInfoForm setIsHidden={setIsHidden} isHidden={isHidden} />
-            ) : (
-                ""
-            )}
             <section
                 className={
-                    "flex  flex-col justify-around gap-6  bg-gray p-6 pb-12 md:px-20 lg:flex-row-reverse lg:gap-12 lg:px-10 xl:px-40 "
+                    "flex   flex-col justify-around gap-6  bg-gray p-6 pb-24 md:px-20 lg:flex-row-reverse lg:gap-12 lg:px-10 xl:px-40 "
                 }
             >
-                <main className='md:mr-6 lg:w-2/3 xl:w-2/4 '>
-                    <div className='my-6  flex justify-end gap-6 md:justify-end '>
-                        <button
-                            onClick={() => setIsHidden(!isHidden)}
-                            href=''
-                            className='mw-40 w-36 border border-blue-btn bg-blue-btn  p-1.5 font-semibold text-white  duration-300 ease-linear hover:rounded  hover:border-blue-btn hover:bg-transparent hover:text-blue-btn  hover:shadow md:w-44'
-                        >
-                            Edit
-                        </button>
-                    </div>
+                <main className='relative md:mr-6 lg:w-2/3 xl:w-2/4 '>
+                    <span>
+                        <EditInfoForm />
+                    </span>
+                    <div className='my-6  flex justify-end gap-6 md:justify-end '></div>
                     <div className='row1 grid md:flex md:flex-row-reverse  '>
                         <img
                             src={NGOImage}
@@ -37,36 +36,24 @@ function AdminDashboardHeroSection() {
                         />
                         <ul className='mt-4 grid w-full gap-1.5 justify-self-auto text-left font-SourceSansPro text-sm font-semibold text-light-gray'>
                             <h1 className=' my-2 mb-4 justify-self-center  font-quicksand text-4xl font-semibold text-blue-dark md:justify-self-start'>
-                                Starnation
+                                {info.name}
                             </h1>
-                            <li>Location: Istanbul</li>
-                            <li>Date: 28-03-2023</li>
-                            <li>Email: [email protected]</li>
-                            <li>Website: www.helloworld.com</li>
-                            <li>Phone: +90 535 898 54 45</li>
+                            <li>Location: {info.location}</li>
+                            <li>Date: {info.createdAt.slice(0, 10)}</li>
+                            <li>Email: {info.email}</li>
+                            <li>Website: {info.website}</li>
+                            <li>Phone: +{info.phone}</li>
                         </ul>
                     </div>
                     <div className='row2 my-4 grid text-justify'>
                         <p className='text-md my-2 font-semibold  text-blue-dark'>
-                            It is a long established fact that a reader will be
-                            distracted by the readable content of a page when
-                            looking at its layout. The point of using Lorem
-                            Ipsum is that it has a more-or-less normal
-                            distribution of letters, as opposed to using Content
-                            here, content here, making it look like readable
-                            English. Many desktop publishing packages and web
-                            page editors now use Lorem Ipsum as their default
-                            model text, and a search for will uncover many web
-                            sites still in their infancy. Various versions have
-                            evolved over the years, sometimes by accident,
-                            sometimes on purpose (injected humour and the
-                            like)......
+                            {info.message}
                         </p>
                         <a
-                            href='#'
+                            href={"https://" + info.website}
                             className='font-light-gray mx-4 mt-2 mb-4 justify-self-end font-semibold'
                         >
-                            Read more ...
+                            Read more on our website ...
                         </a>
                     </div>
                 </main>