pagination function working w/ dummy data from axios, styling completed, WIP link funct to user guides

Author: vyue013

how-to/src/components/MyGuidePosts.js

@@ -2,17 +2,20 @@ import React from 'react';
 import { Card, Image } from "semantic-ui-react";
 import choco from "../chocomilk.jpg";
 
-const MyGuidePosts = (props) => {
+const MyGuidePosts = ({ posts, loading }) => {
+    if(loading) {
+        return <h2>Loading...</h2>;
+    }
 
     return (
         <div>
-            {props.pages.map(pagee => (
+            {posts.map(post => (
                 <Card.Group>
                     <Image src={choco} avatar />
                     <Card>
                         <Card.Content>
-                            <Card.Header>{pagee.pageTitle}</Card.Header>
-                            <Card.Description>{pagee.pageDesc}</Card.Description>
+                            <Card.Header>{post.title}</Card.Header>
+                            <Card.Description>{post.body}</Card.Description>
                         </Card.Content>
                     </Card>
                 </Card.Group>

how-to/src/components/MyGuides.css

@@ -1,26 +1,39 @@
-div.ui.cards {
+/* div.ui.cards {
     background: #7EA85E;
     margin-bottom: 2em;
     width: fit-content;
-
     height: 115px;
     font-size: 0.76rem;
-}
 
-div.ui.cards>.card {
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+} */
+
+/* div.ui.cards>.card {
     background: #7EA85E;
     border: none;
-    display: contents;
+    display: flex;
     font-size: 1.1em;
     margin-left: 15px;
 }
 
+*/
+
+div.ui.cards {
+    margin-bottom: 20px;
+}
+
 img.ui.avatar.image {
-    width: 6em;
-    height: 6em;
+    width: 7em;
+    height: 7em;
+    margin: 0 auto;
+    margin-bottom: 10px;
+    margin-top: -15px;
 }
 
 p {
     padding-bottom: 8px;
     width: 353px;
-}
+} 
+

how-to/src/components/MyGuides.js

@@ -1,14 +1,15 @@
 import React, { useEffect } from "react";
-import { Header, Card, Image, Pagination } from "semantic-ui-react";
+import { Header } from "semantic-ui-react";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
 import { connect } from "react-redux";
 import GuideCard from "./GuideCard";
 import { getGuides, getUsers } from "../store/actions";
 import decode from "jwt-decode";
 
-import choco from "../chocomilk.jpg";
 import "./MyGuides.css";
+import MyGuidePosts from "./MyGuidePosts.js";
+import Pagination from './Pagination.js';
 
 const GuideContainer = styled.div`
   margin: 0 auto;
@@ -36,10 +37,12 @@ if (localStorage.token) {
 }
 
 function MyGuides({ guides, users, getGuides, getUsers }) {
+
   useEffect(() => {
     getGuides();
     getUsers();
   }, [getGuides, getUsers]);
+
   return (
     <div>
       <GuideContainer>
@@ -61,15 +64,6 @@ function MyGuides({ guides, users, getGuides, getUsers }) {
               ))
           : null}
 
-        <Pagination
-          boundaryRange={0}
-          defaultActivePage={1}
-          ellipsisItem={null}
-          firstItem={null}
-          lastItem={null}
-          siblingRange={1}
-          // totalPages={10}
-        />
       </GuideContainer>
     </div>
   );
@@ -86,3 +80,35 @@ export default connect(
   mapStateToProps,
   { getGuides, getUsers }
 )(MyGuides);
+
+
+// const [posts, setPosts] = useState([]);
+// const [loading, setLoading] = useState("false");
+// const [currentPage, setCurrentPage] = useState(1);
+// const [postsPerPage] = useState(3);
+
+// useEffect(() => {
+//   const fetchPosts = async () => {
+//       setLoading(true);
+//       const res = await axios.get('https://jsonplaceholder.typicode.com/posts');
+//       setPosts(res.data);
+//       setLoading(false);
+//   }
+
+//   fetchPosts();
+// }, []);
+
+// // Get current posts
+// const indexOfLastPost = currentPage * postsPerPage;                    
+// const indexOfFirstPost = indexOfLastPost - postsPerPage;               
+// const currentPosts2 = posts.slice(indexOfFirstPost, indexOfLastPost);
+
+// Change page
+// const paginate = pageNumber => setCurrentPage(pageNumber);
+
+// Pagination function in return();
+{/* <Pagination 
+  postsPerPage={postsPerPage}
+  totalPosts={posts.length}
+  paginate={paginate}
+/> */}

how-to/src/components/MyGuides2.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+const Pagination = ({ postsPerPage, totalPosts, paginate }) => {
+    const pageNumbers = [];
+
+    for(let i = 1; i <= Math.ceil(totalPosts / postsPerPage); i++) {
+        pageNumbers.push(i);
+    }
+
+    return (
+        <div>
+            {pageNumbers.map(number => (
+                <span onClick={() => paginate(number)}>
+                    {number + " "}
+                </span>
+            ))}
+        </div>
+    );
+};
+
+export default Pagination;

how-to/src/components/Paginate.js

@@ -1,15 +1,9 @@
 import React from "react";
 import "../../src/index.css";
-import { Link } from "react-router-dom";
-
-// testing use: remove imports later
-import Guide from "./Guide.js";
-import MyGuides2 from "./MyGuides2.js";
 
 function Welcome() {
   return (
     <div>
-      <MyGuides2 />
       <h1 className="ui header">WELCOME TO HOW-TO</h1>
     </div>
   );