import { BrowserRouter as Router,Switch,Route,Link } from "react-router-dom";
import { useEffect,useState } from "react";
// import axios from "axios";

export default function App() {
  return (
    <div classname="App">
      <Router>
        <Switch>
          <Route path="/" component={FirstPage} exact />
          <Route path="/:id" component={SecondPage} />
        </Switch>
      </Router>
    </div>
  );
}
function FirstPage() {
  const [post,setPost] = useState({ _id: 5 });
  return (
    <div>
      <div>First Page</div>
      <Link to={`/${post._id}`}>Link</Link>
    </div>
  );
}

function SecondPage(props) {
  const [state,setState] = useState();
  useEffect(() => {
    const id = props.match.params.id;
    setState(id);
    // axios.get(`/post/${id}`).then((res) => {
    //   if (res.data.success) {
    //     setState(res.data.post);
    //   }
    // });
  },[]);
  return <div>SecondPage id: {state}</div>;
}

"use strict";
$(document).ready( () => {
    let nextSlide = $("#slides img:first-child");

    setInterval( () => {   
        $("#caption").fadeOut(1000);
        $("#slide").fadeOut(1000,() => {
                if (nextSlide.next().length == 0) {
                    nextSlide = $("#slides img:first-child");
                }
                else {
                    nextSlide = nextSlide.next();
                }
                const nextSlideSource = nextSlide.attr("src");
                const nextCaption = nextSlide.attr("alt");
                $("#slide").attr("src",nextSlideSource).fadeIn(1000);                    
                $("#caption").text(nextCaption).fadeIn(1000);
            });    // end fadeOut()
    },5000);     
});
document.ready( () => {
    const slider = $("#image_list")

    $("#right_button").click( () => {
        const leftProperty = parseInt(slider.css("left"));
        let newLeftProperty = 0; if (leftProperty - 300 > -900) 
            { newLeftProperty = leftProperty - 300
        slider.animate({left: newLeftProperty},1000);
    });

    $("#left_button").click( () => {
       
        const leftProperty = parseInt(slider.css("left"));
        
        let newLeftProperty = 0; if (leftProperty < 0) {
        newLeftProperty = leftProperty + 300; }
        slider.animate({left: newLeftProperty},1000);
        });  
});

/* Add a black background color to the top navigation */
.topnav {
    background-color: #333;
    overflow: hidden;
  }
  
  .topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }

  .topnav a.active {
    background-color: turquoise;
    color: gray;
  }

#slides img {
    display: none;
}
#slide {
    width: 100%;
}

#display_panel { 
    width: 1000px; 
    overflow: hidden; 
    float: left; 
    height: 300px;
}

#image_list {
    position: relative; 
    width: 300px; 
    list-style: none;
}   

#image_list li { 
    float: left;
    width: 300px;
}

image_list li img { 
    width: 250px;
}