not done yet but time over

Author: shubhamhirap

package-lock.json

@@ -7,6 +7,7 @@
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
     "axios": "^0.20.0",
+    "bootstrap": "^4.5.3",
     "react": "^17.0.1",
     "react-bootstrap": "^1.4.0",
     "react-dom": "^17.0.1",

package.json

@@ -0,0 +1,11 @@
+a:hover{
+    text-decoration: none !important;
+}
+.footer{
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 60px;
+    line-height: 60px;
+    background-color: black;
+}

src/App.css

@@ -1,12 +1,22 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React from "react";
+import "./App.css";
+import "bootstrap/dist/css/bootstrap.min.css";
+import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
+import Header from "./Components/Header";
+import Footer from "./Components/Footer"
+import HomeView from "./Pages/HomeView"
 
 function App() {
   return (
-    <div className="App">
-      
-    </div>
+    <Router>
+      <div className="App">
+        <Header />
+        <Switch>
+        <Route exact path="/" component={HomeView}></Route>
+        </Switch>
+        <Footer />
+      </div>
+    </Router>
   );
 }
 

src/App.js

@@ -0,0 +1,31 @@
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+import {Container} from "react-bootstrap";
+
+const Comments = () => {
+  const [comments, setComments] = useState([]);
+
+  useEffect(() => {
+    axios
+      .get("https://jsonplaceholder.typicode.com/comments")
+      .then((res) => setComments(res.data))
+      .catch((err) => console.log(err));
+  });
+
+  const commentStyle = {
+      "height" : "75vh",
+      "overflow" : "auto"
+  }
+
+  return (
+        <Container className="mt-4 border" style={commentStyle}>
+            <ul>
+                {
+                    comments.map(comment=>(<li key={comment.id}>{comment.body}</li>))
+                }
+            </ul>
+        </Container>
+    )
+};
+
+export default Comments;

src/Components/Comments.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import {Container} from "react-bootstrap"
+
+const Footer = () => {
+    return (
+        <footer className="footer">
+            <Container>
+                <span className="text-muted">HEY this is footer</span>
+            </Container>
+        </footer>
+    )
+}
+
+export default Footer

src/Components/Footer.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { Navbar, NavbarBrand } from "react-bootstrap";
+import {Link} from "react-router-dom"
+
+const Header = () => {
+  return (
+    <>
+      <Navbar bg="dark" variant="dark">
+        <NavbarBrand>Codevian</NavbarBrand>
+        <Navbar.Text className="mr-3 ml-3"><Link to="/">Posts</Link></Navbar.Text>
+        <Navbar.Text className="ml-3"><Link to="/photos">Photos</Link></Navbar.Text>
+      </Navbar>
+    </>
+  );
+};
+
+export default Header;

src/Components/Header.js

@@ -0,0 +1,42 @@
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+import {Container} from "react-bootstrap"
+
+const PostsList = () => {
+  const [posts, setPosts] = useState([]);
+
+  useEffect(() => {
+    axios
+      .get("https://jsonplaceholder.typicode.com/posts")
+      .then((res) => setPosts(res.data))
+      .catch((err) => console.log(err));
+  });
+
+  const postsList = {
+      "height" : "75vh",
+      "overflow" : "auto"
+  }
+
+  return (
+    //   <div className="mt-4">
+    //       <ol>
+    //           {
+    //               posts.map(post => (
+    //               <li key={post.id}>{post.title}</li>
+    //               ))
+    //           }
+    //       </ol>
+    //   </div>
+        <Container className="mt-4 border" style={postsList}>
+            <ol>
+                {
+                    posts.map(post => (
+                    <li key={post.id}>{post.title}</li>
+                    ))
+                }
+            </ol>
+        </Container>
+  )
+};
+
+export default PostsList;

src/Components/PostsList.js

@@ -0,0 +1,35 @@
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+import { Container } from "react-bootstrap";
+
+const UserList = () => {
+  const [users, setUsers] = useState([]);
+
+  useEffect(() => {
+    axios
+      .get("https://jsonplaceholder.typicode.com/users")
+      .then((res) => setUsers(res.data))
+      .catch((err) => console.log(err));
+  });
+
+  const listStyle = {
+    listStyleType: "none",
+  };
+  const listClass = {
+    height: "75vh",
+  };
+
+  return (
+    <Container className="mt-4 border ml-2" style={listClass}>
+      <ul style={listStyle}>
+        {users.map((user) => (
+          <li key={user.id}>
+            {user.name}
+          </li>
+        ))}
+      </ul>
+    </Container>
+  );
+};
+
+export default UserList;

src/Components/UserList.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { Row, Col } from "react-bootstrap";
+import UserList from "../Components/UserList";
+import PostsList from "../Components/PostsList";
+import Comments from "../Components/Comments"
+
+const HomeView = () => {
+  return (
+       <Row>
+            <Col md="3">
+                <UserList />
+            </Col>
+            <Col>
+                <PostsList />
+            </Col>
+            <Col md="3">
+                <Comments />
+            </Col>   
+        </Row> 
+  );
+};
+
+export default HomeView;