//index.jsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "bootstrap/dist/css/bootstrap.min.css";
import "./index.css";
import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    <React.StrictMode>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </React.StrictMode>
);

//App.jsx
import AppRouter from "./router/AppRouter";

function App() {
    return (
        <>
            <AppRouter />
            
        </>
    );
}

export default App;


//router/AppRouter.jsx
import Nav from "../components/Nav";
import { Route, Routes } from "react-router-dom";
import Home from "../pages/Home";
import Paths from "../pages/Paths";
import People from "../pages/People";
import PersonDetail from "../pages/PersonDetail";
import Contact from "../pages/Contact";
import NotFound from "../pages/NotFound";
import Footer from "../components/Footer";
import Fullstack from "../pages/Fullstack";
import Aws from "../pages/Aws";
import Next from "../pages/Next";
import React from "../pages/React";
import PrivateRouter from "./PrivateRouter";
import Login from "../pages/Login";
import { useState } from "react";

const AppRouter = () => {
    const [user, setUser] = useState(
        JSON.parse(sessionStorage.getItem("user")) || false
    );
    return (
        <div>
            <Nav user={user} setUser={setUser} />
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/paths" element={<Paths />}>
                    <Route index element={<Fullstack />} />
                    <Route path="fullstack" element={<Fullstack />}>
                        <Route index element={<React />} />
                        <Route path="next" element={<Next />} />
                    </Route>
                    <Route path="aws" element={<Aws />} />
                </Route>
                <Route element={<PrivateRouter user={user} />}>
                    <Route path="/people" element={<People />} />
                    <Route path="/people/:id" element={<PersonDetail />} />
                </Route>
                <Route path="/contact" element={<Contact />} />
                <Route path="/login" element={<Login setUser={setUser} />} />
                <Route path="*" element={<NotFound />} />
            </Routes>
            <Footer />
        </div>
    );
};

export default AppRouter;

import Nav from "../components/Nav";
import { Route, Routes } from "react-router-dom";
import Home from "../pages/Home";
import Paths from "../pages/Paths";
import People from "../pages/People";
import PersonDetail from "../pages/PersonDetail";
import Contact from "../pages/Contact";
import NotFound from "../pages/NotFound";
import Footer from "../components/Footer";
import Fullstack from "../pages/Fullstack";
import Aws from "../pages/Aws";
import Next from "../pages/Next";
import React from "../pages/React";
import PrivateRouter from "./PrivateRouter";
import Login from "../pages/Login";
import { useState } from "react";

const AppRouter = () => {
    const [user, setUser] = useState(
        JSON.parse(sessionStorage.getItem("user")) || false
    );
    return (
        <div>
            <Nav user={user} setUser={setUser} />
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/paths" element={<Paths />}>
                    <Route index element={<Fullstack />} />
                    <Route path="fullstack" element={<Fullstack />}>
                        <Route index element={<React />} />
                        <Route path="next" element={<Next />} />
                    </Route>
                    <Route path="aws" element={<Aws />} />
                </Route>
                <Route element={<PrivateRouter user={user} />}>
                    <Route path="/people" element={<People />} />
                    <Route path="/people/:id" element={<PersonDetail />} />
                </Route>
                <Route path="/contact" element={<Contact />} />
                <Route path="/login" element={<Login setUser={setUser} />} />
                <Route path="*" element={<NotFound />} />
            </Routes>
            <Footer />
        </div>
    );
};

export default AppRouter;

//router/PrivateRouter

import React from "react";
import { Navigate, Outlet } from "react-router-dom";

//? Navigate componenti sayfada gorulmeyen ve programsal olarak bir linkin
//? bir baska linke yonledirilmesi icin kullanilabilir. (v5 -> Redirect)
//? Navigate, Component seviyesi Routing icin kullanilir.

const PrivateRouter = ({ user }) => {
  // const user = true;
  return user ? <Outlet /> : <Navigate to="/login" />;
};

export default PrivateRouter;

//People.jsx

import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";

const People = () => {
    const [people, setPeople] = useState([]);
    let navigate=useNavigate()

    const getPeople = () => {
        fetch("https://reqres.in/api/users")
            .then((res) => res.json())
            .then((data) => setPeople(data.data))
            .catch((err) => console.log(err));
    };
    useEffect(() => {
        getPeople();
    }, []);

    return (
        <div className="container text-center mt-4">
            <h1>PEOPLE LIST</h1>
            <div className="row justify-content-center g-3">
                {people?.map((person) => {
                    const { id, first_name, last_name, avatar } = person;
                    return (
                        <div
                            key={id}
                            className=" col-sm-12 col-md-6 col-lg-4"
                            type="button"
                            onClick={() => navigate(`${id}`, { state: person })}
                        >
                            <img className="rounded" src={avatar} alt="img" />
                            <h6>
                                {first_name} {last_name}
                            </h6>
                        </div>
                    );
                })}
            </div>
        </div>
    );
};

export default People;



//PeopleDetails.jsx
import React, { useEffect, useState } from "react";
// import { useLocation} from "react-router-dom";
import {useNavigate, useParams } from "react-router-dom";
import axios from "axios";
import NotFound from "./NotFound";
import spinner from "../img/Spinner-2.gif";

const PersonDetail = () => {
    //! navigate ile gonderilen state'i yakalamak icin useLocation Hook'u kullanilabilir.
    //! Bu durumda veri, state ile geldigi icin yeniden fetch yapilmasina gerek kalmaz
    // let { state: person } = useLocation();
    let navigate = useNavigate();
    // console.log(person);
    //! Linkteki parametreyi almak icin useParams Hook'u kullanilabilir.
    let { id } = useParams();
    // console.log({ id });
    const [person, setPerson] = useState({});
    const [error, setError] = useState(false);
    const [loading, setLoading] = useState(true);
    // const getPerson = () => {
    //     axios(`https://reqres.in/api/users/${id}`)
    //         .then((res) => setPerson(res.data.data))
    //         .catch((err) => {
    //             setError(true);
    //             console.log(err);
    //         })
    //         .finally(() => setLoading(false));
    // };
    // useEffect(() => {
    //     getPerson();
    //     // eslint-disable-next-line
    //     // !warningden kurtulmak icin ya bunu ekleyebilirsin yada 2.yol seklinde yazabilirsin
    // }, []);
    
    // !2.yol id her degistiginde getPerson fonk calistir

    useEffect(() => {
        const getPerson = () => {
            axios(`https://reqres.in/api/users/${id}`)
                .then((res) => setPerson(res.data.data))
                .catch((err) => {
                    setError(true);
                    console.log(err);
                })
                .finally(() => setLoading(false));
        };
        getPerson();
    }, [id]);

    if (error) {
        return <NotFound />;
    } else if (loading) {
        return (
            <div className="text-center mt-4">
                <img src={spinner} alt="spinner" />
            </div>
        );
    }

    return (
        <div className="container text-center">
            <h3>
                {person?.first_name} {person?.last_name}
            </h3>
            <img className="rounded" src={person?.avatar} alt="" />
            <p>{person?.email}</p>
            <div>
                <button
                    onClick={() => navigate("/")}
                    className="btn btn-success me-2"
                >
                    Go Home
                </button>
                <button
                    onClick={() => navigate(-1)}
                    className="btn btn-warning"
                >
                    Go Back
                </button>
            </div>
        </div>
    );
};

export default PersonDetail;