Verified

package.json

@@ -20,8 +20,11 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "start": "NODE_OPTIONS=--openssl-legacy-provider react-scripts start",
+  "build": "NODE_OPTIONS=--openssl-legacy-provider react-scripts build"
   },
+
   "eslintConfig": {
     "extends": "react-app"
   },

src/App.js

@@ -16,7 +16,7 @@ import Footer from './components/Footer/Footer'
 
 function App() {
   return (
-    <div className="App">
+    <div className="App" style={{ backgroundColor: '#e5eaf5' }}>
       <Router>
         <NavigationBar />
         <Switch>

src/Context/Context.jsx

@@ -0,0 +1,6 @@
+import { useContext } from "react";
+import { createContext } from "react";
+
+const Usercontext = useContext()
+
+export default Usercontext

src/Pages/HomePage/Body.js

@@ -7,12 +7,15 @@ import Pagination from '../../components/Pagination/Pagination'
 import Footer from '../../components/Footer/Footer'
 import NavigationBar from '../../components/NavBar/NavigationBar'
 import db from '../../utils/db.json'
+// import Usercontext from '../../Context/Context'
+
 
 const initialUsers = {
   loading: true,
   users: [],
   error: '',
   pageNo: 1,
+  pageItems: 18
 }
 
 const reducer = (state, action) => {
@@ -40,8 +43,8 @@ function Body({match}) {
   const [state, dispatchState] = useReducer(reducer, initialUsers)
 
   useEffect(() => {
-    let startIndex = ((match.params.pageNo || 1) - 1) * 18
-    const data = db.authors.slice(startIndex, startIndex + 18)
+    let startIndex = ((match.params.pageNo || 1) - 1) * initialUsers.pageItems
+    const data = db.authors.slice(startIndex, startIndex + initialUsers.pageItems)
     dispatchState({
       type: 'FETCH_SUCCESS',
       payload: data,
@@ -54,7 +57,7 @@ function Body({match}) {
   return (
     <div>
       <Container>
-        {/* It is usefull when we fetch data from server */}
+
         {state.error !== '' ? (
           <h1 className="text-center">{state.error}</h1>
         ) : (
@@ -69,15 +72,23 @@ function Body({match}) {
           {state.users.map(user => {
             return (
               <Col key={user.id} md={4} sm={6} xs={12}>
-                <Card
-                  name={`${user.firstName} ${user.lastName}`}
+                <Card 
+                name={`${user.firstName} ${user.lastName}`}
                   id={user.id}
+                  img={user.numLikes}
+
+
                 />
+
+
+
+
+
               </Col>
             )
           })}
         </Row>
-        <Pagination page="/" pageNo={state.pageNo} />
+        <Pagination page="/" pageNo={state.pageNo} pageItems={initialUsers.pageItems}/>
       </Container>
     </div>
   )

src/Pages/PostPage/PostPage.js

@@ -4,6 +4,7 @@ import NavigationBar from '../../components/NavBar/NavigationBar'
 import './PostPage.css'
 import Comment from '../../components/comments/Comment'
 import db from '../../utils/db.json'
+import Image from '../../Images/images3.jpeg'
 function PostPage({match}) {
   const [post, setPost] = useState({})
   const [comments, setComments] = useState([])
@@ -20,6 +21,7 @@ function PostPage({match}) {
     const data = db.comments.filter(
       coment => parseInt(coment.postId) === parseInt(id),
     )
+
     console.log('After fetch comment ', data)
     setLoading(false)
     setComments([...data])
@@ -34,7 +36,7 @@ function PostPage({match}) {
   }, [fetchComments, match.params.postId])
 
   return (
-    <div>
+    <div >
       {post.title === undefined ? (
         <h1>Loading....</h1>
       ) : (
@@ -48,7 +50,7 @@ function PostPage({match}) {
       )}
 
       <h4 className="mt-4 text-center">Comments</h4>
-      <div className="comment-box d-flex justify-content-center">
+      <div className="comment-box d-flex justify-content-center" style={{backgroundColor: 'yellow'}}>
         <br></br>
         <ul className="list-unstyled m-4 ">
           {loading ? (

src/Pages/ProfilePage/Profile.js

@@ -14,8 +14,8 @@ function Profile({match}) {
   const [activeButton, setActiveButton] = useState('') // for active Button
 
   // for fetching Post from server
-  const fetchPost = useCallback(async id => {
-    let posts = db.posts.filter(post => post.authorId === parseInt(id))
+  const fetchPost = useCallback( id => {
+    let posts = db.posts.filter(post => post.authorId === Number(id))
 
     setPosts(posts)
   }, [])
@@ -120,7 +120,7 @@ function Profile({match}) {
       <AuthorCard author={author} />
 
       <div className="container">
-        <h3 className="pt-4 pl-4 pb-3">Posts</h3>
+        <h3 className="a" style={{fontFamily: 'monospace', color: 'crimson'}}><b>Drafted Posts</b></h3>
 
         {/* Filter Header */}
         <FilterHeader

src/components/AuthorCard/AuthorCard.js

@@ -1,19 +1,24 @@
 import React, {memo} from 'react'
+import ProfileImage from '../../Images/Profile4.jpeg'
 
 function AuthorCard({author}) {
   return (
-    <div className="cardProfile">
-      <img
-        src={`https://joeschmoe.io/api/v1/${
-          author.firstName + ' ' + author.lastName
-        }`}
-        alt="John"
-        style={{width: '100%'}}
-      />
+    <div className="cardProfile" style={{backgroundImage: `url(${ProfileImage})`}} >
+      {/* <img
+        // src={`https://joeschmoe.io/api/v1/${
+        //   author.firstName + ' ' + author.lastName
+        // }`}
+        // alt="John"
+        // style={{width: '100%'}}
+      /> */}
       <h1>{author.firstName + ' ' + author.lastName}</h1>
-      <p className="title text-secondary">mobile : {author.phone}</p>
-      <p>POSTS : {author.numPosts}</p>
-      <p>LIKES : {author.numLikes}</p>
+      <p className="title text-secondary"> <span style={{color: "white"}}>Call : {author.phone}</span></p>
+      <div style={{display: 'flex', flexDirection: 'row', justifyContent:'space-around'}}>
+        <p>📸 : {author.numPosts}</p>
+      <p>❤️ : {author.numLikes}</p>
+      <p>💬 : {author.numComments}</p>
+      </div>
+
     </div>
   )
 }

src/components/Footer/Footer.js

@@ -2,9 +2,11 @@ import React, {memo} from 'react'
 
 function Footer() {
   return (
-    <div className="card-footer text-muted text-center font-weight-bolder p-5 m-2">
-      Made with &hearts; by Mohit Sojitra
+    <div className="card-footer text-muted text-center font-weight-bolder p-5 m-2" style={{backgroundColor: "green", width: "100%", bottom: "0", border: '0', margin: '0px 0px 0px 0px', marginLeft: '0px', position: 'relative'}}>
+      Made with ❤️ By <span style={{color: "purple"}}>Himanshu</span>
     </div>
   )
 }
 export default memo(Footer)
+
+

src/components/NavBar/NavigationBar.css

@@ -1,7 +1,16 @@
-.navBar1{
-    /* background-color: black; */
-    /* color: white; */
-    font-weight: bold;
-    display: block;
-    padding-bottom: 100px;
-}
+.navBar1 {
+  position: static;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 999;
+  background-color: black;
+  color: white;
+  font-size: 1rem;
+  /* padding: 0.1rem 1.5rem; */
+  height: 4rem;
+  display: flex;
+  align-items: stretch;
+  list-style: none;
+
+}

src/components/NavBar/NavigationBar.js

@@ -10,40 +10,40 @@ import {
 } from 'reactstrap'
 import './NavigationBar.css'
 import {Link} from 'react-router-dom'
+import { useLocation } from 'react-router-dom/cjs/react-router-dom.min'
 
 // import {BrowserRouter as Router, Switch, Route} from "react-router-dom";
 // import App from "../../App.js"
 
 function NavigationBar() {
-  let pathName = useMemo(
-    () => window.location.pathname,
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [window.location.pathname],
-  )
+  let location = useLocation()
+  let pathName = location.pathname;
 
   const [isOpen, setIsOpen] = useState(false)
 
-  const toggle = useCallback(() => setIsOpen(!isOpen), [isOpen])
+  const toggle = useCallback(() => setIsOpen(po => !po), [])
 
   return (
-    <div className="navBar1">
+    <div className="navBar1" id="Navigationid" style={{display: 'flex', flexDirection: 'column', justifyContent:'space-around'}}> 
       <Navbar
-        color="dark"
-        dark
-        className="fixed-top d-flex justify-content-between"
-        expand="md"
+        className=" d-flex justify-content-fixed"
+        expand="sm"
+
       >
-        <NavItem>
-          <Link to="/" className="text-white">
-            JSOM
+
+
+          <NavItem >
+          <Link to="/" className="text-white" id="sdws23" >
+            🌞 Accuweather
           </Link>
         </NavItem>
+
         {/* <NavLink className=" text-white" to="/">
           {!isNaN(pathName.split('/')[1]) ? 'Authors' : pathName.split('/')[1]}
         </NavLink> */}
         <NavbarToggler onClick={toggle} style={{width: 'auto'}} />
         <Collapse
-          className=""
+          className="collapse1"
           isOpen={isOpen}
           navbar
           style={{
@@ -75,7 +75,7 @@ function NavigationBar() {
                   }`}
                 >
                   {' '}
-                  MostLikedPost
+                  ❤️
                 </p>
               </Link>
             </NavItem>
@@ -90,7 +90,7 @@ function NavigationBar() {
                   }`}
                 >
                   {' '}
-                  MostCommentPost
+                  💬
                 </p>
               </Link>
             </NavItem>

src/components/Pagination/Pagination.js

@@ -1,12 +1,47 @@
 import React, {memo} from 'react'
 import {Link} from 'react-router-dom'
+import db from '../../utils/db.json'
+import { useState } from 'react'
+import { useEffect } from 'react'
+
 function Pagination(props) {
+
+
+const [count, setCount] = useState([])
+const [number, setNumber] = useState(0)
+
+useEffect(() => {
+  setCount(db.authors.length)
+
+},[])
+
+useEffect(() => {
+console.log(props.pageItems)
+},[])
+
+useEffect(() => {
+  setNumber(count)
+})
+
   return (
     <nav aria-label="Page navigation example">
       <ul className="pagination justify-content-center pagination-lg p-4">
+
+        <li className="page-item">
+          <Link
+            className="page-link"
+            to={`/${
+              1
+            }`}
+          >
+            First Page
+          </Link>
+
+        </li>
+
         <li
           className={`page-item ${
-            props.pageNo === 1 || props.pageNo === 0 || isNaN(props.pageNo)
+            props.pageNo === 1 || isNaN(props.pageNo)
               ? 'disabled'
               : ''
           }`}
@@ -32,8 +67,20 @@ function Pagination(props) {
               isNaN(props.pageNo) || props.pageNo === 0 ? '2' : props.pageNo + 1
             }`}
           >
-            Next
+            next
+          </Link>
+
+        </li>
+        <li className="page-item">
+          <Link
+            className="page-link"
+            to={`/${
+             parseInt(count / props.pageItems)
+            }`}
+          >
+            Last page
           </Link>
+
         </li>
       </ul>
     </nav>

src/components/ShortPost/ShortPost.js

@@ -3,6 +3,7 @@ import {Link} from 'react-router-dom'
 
 function ShortPost(props) {
   let date = useMemo(() => new Date(props.date), [props.date])
+
   return (
     <Link to={`/Post/${props.id}`}>
       <h5 className="list-group-item row">

src/components/UserPostsList/UserPostList.js

@@ -1,14 +1,14 @@
 import React, {memo} from 'react'
-import Post from '../ShortPost/ShortPost'
+import ShortPost from '../ShortPost/ShortPost'
 function UserPostList({posts}) {
   return (
     <ul className="list-group">
-      {posts.length === 0 ? (
+      {(posts.length === 0) ? (
         <h1 className="text-center">loading.... </h1>
       ) : (
         posts.map(post => {
           return (
-            <Post
+            <ShortPost
               key={post.id}
               title={post.title}
               like={post.numLikes}