Fixing photobook and styling issues

digital-memory-book/src/App.js

@@ -148,8 +148,7 @@ function App() {
         <Route path="/timeline" element={<Post isAuth={isAuth} />} />
         <Route path="/addpost" element={<PostUploaderV2 isAuth={isAuth} />} />
         <Route path="/family" element={<FamilyView isAuth={isAuth} />} />
-        <Route path="/photobook" element={<PhotoBook isAuth={isAuth} />} />
-        <Route path="/bookexample" element={<NewBookExample isAuth={isAuth} />} />
+        <Route path="/photobook" element={<NewBookExample isAuth={isAuth} />} />
 
       </Routes>
     </BrowserRouter>

digital-memory-book/src/BookExample.css

@@ -4,6 +4,7 @@ text-align: center;
 }
 
 .page {
+padding-top: 150px;
 box-shadow: 0 1.5em 3em -1em rgb(70, 69, 69);
 }
 

digital-memory-book/src/DigitalTimeline.js

@@ -164,19 +164,21 @@ const DigitalTimeline = ({ isAuth }) => {
               <input
                 type="text"
                 placeholder="Family Name"
+                style = {{margin: '5px'}}
                 value={enteredName}
                 onChange={handleNameChange}
               />
               <input
                 type="password"
                 placeholder="Password"
                 value={password}
+                style = {{margin: '5px'}}
                 onChange={handlePasswordChange}
               />
-              <button style={button2} onClick={saveNewFamily}>
+              <button className = "login-button" onClick={saveNewFamily}>
                 Save
               </button>
-              <button style={button2} onClick={handleEnterFamilyCode}>
+              <button className = "login-button" onClick={handleEnterFamilyCode}>
                 Back
               </button>
             </>
@@ -188,18 +190,20 @@ const DigitalTimeline = ({ isAuth }) => {
                 type="text"
                 placeholder="Family Code"
                 value={familyCode}
+                style = {{margin: '5px'}}
                 onChange={handleFamilyCodeChange}
               />
               <input
                 type="password"
                 placeholder="Password"
                 value={password}
+                style = {{margin: '5px'}}
                 onChange={handlePasswordChange}
               />
-              <button style={button2} onClick={joinFamily}>
+              <button className = "login-button" onClick={joinFamily}>
                 Join
               </button>
-              <button style={button2} onClick={handleCreateNewFamily}>
+              <button className = "login-button" onClick={handleCreateNewFamily}>
                 Create New Family
               </button>
             </>

digital-memory-book/src/Interactable.css

@@ -39,7 +39,6 @@
   background-size: 500px 500px;
   background-position: center;
   background-repeat: repeat;
-  height: 100vh;
 }
 
 

digital-memory-book/src/NewPhotobook.js

@@ -3,6 +3,7 @@ import React, { useState, useEffect } from "react";
 import { collection, getDocs } from "firebase/firestore";
 import { db } from "./firebase";
 import "./BookExample.css";
+import { useNavigate } from "react-router-dom";
 
 const PageCover = React.forwardRef((props, ref) => (
   <div className="cover" ref={ref} data-density="hard">
@@ -13,81 +14,100 @@ const PageCover = React.forwardRef((props, ref) => (
 ));
 
 const Page = React.forwardRef(({ fetchData }, ref) => {
-  const [posts, setPosts] = useState([]);
-
-  useEffect(() => {
-    const fetchAllPosts = async () => {
-      try {
-        const postsRef = collection(db, "posts");
-        const postsData = await getDocs(postsRef);
-        const allPosts = [];
-
-        postsData.forEach((doc) => {
-          const ddata = doc.data();
-          allPosts.push({ id: doc.id, ...ddata });
-        });
-
-        allPosts.sort((a, b) => new Date(b.date) - new Date(a.date));
-        setPosts(allPosts);
-      } catch (error) {
-        console.error("Error fetching posts:", error);
-      }
-    };
-
-    fetchAllPosts();
-  }, []);
-
   return (
     <div className="page" ref={ref}>
-      <h1>Page Header</h1>
-      {posts.map((post) => (
-        <div key={post.id} className="post-item">
-          <img className="post-image" src={post.path} alt="Post" />
-          <div className="post-details">
-            <p className="post-caption">{post.caption}</p>
-            <p className="post-date">{post.date}</p>
-          </div>
-        </div>
-      ))}
     </div>
   );
 });
 
 function BookExample(props) {
-  // Set the desired number of content pages
-  const numberOfPages = 10;
+  const [posts, setPosts] = useState([]);
+  const [code, setCode] = useState(localStorage.getItem("code"));
+  const [contentPageNumbers, setNums] = useState([]);
+
+  const [numofpages, setPages] = useState(0);
 
-  // Create an array of page numbers for content pages
-  const contentPageNumbers = Array.from({ length: numberOfPages }, (_, index) => index + 1);
+  const fetchAllPosts = async () => {
+    try {
+      const postsRef = collection(db, "posts");
+      const postsData = await getDocs(postsRef);
+      const allPosts = [];
 
-  return (
-    <div>
-      <HTMLFlipBook
-        width={550}
-        height={650}
-        minWidth={315}
-        maxWidth={1000}
-        minHeight={420}
-        maxHeight={1350}
-        showCover={true}
-        flippingTime={1000}
-        style={{ margin: "0 auto" }}
-        maxShadowOpacity={0.5}
-        className="album-web"
-      >
-        {/* Front Cover */}
-        <PageCover>Front Cover</PageCover>
+      postsData.forEach((doc) => {
+        const ddata = doc.data();
+        if(ddata.code == code){
+          allPosts.push({ id: doc.id, ...ddata });
+          setPages(numofpages + 1);
+        }
+      });
 
-        {/* Content Pages */}
-        {contentPageNumbers.map((pageNumber) => (
-          <Page key={pageNumber} />
-        ))}
+      allPosts.sort((a, b) => new Date(b.date) - new Date(a.date));
+      setPosts(allPosts);
+      setNums(Array.from({ length: allPosts.length }, (_, index) => index + 1));
+    } catch (error) {
+      console.error("Error fetching posts:", error);
+    }
+  };
 
-        {/* Back Cover */}
-        <PageCover>Back Cover</PageCover>
-      </HTMLFlipBook>
-    </div>
-  );
+
+  const navigate = useNavigate();
+  const [isAuth, setIsAuth] = useState(localStorage.getItem("isAuth"));
+
+  useEffect(() => {
+    if (!isAuth) {
+      navigate("/login");
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchAllPosts();
+
+    const intervalId = setInterval(() => {
+      fetchAllPosts();
+    }, 30 * 60 * 1000);
+
+    // Clean up the timer on component unmount
+    return () => clearInterval(intervalId);
+  }, []);
+
+  if(posts.length > 0 && posts.length == contentPageNumbers.length && contentPageNumbers.length > 0){
+    return (
+      <div>
+        <HTMLFlipBook
+          width={550}
+          height={650}
+          minWidth={315}
+          maxWidth={1000}
+          minHeight={420}
+          maxHeight={1350}
+          showCover={true}
+          flippingTime={1000}
+          style={{ margin: "0 auto" }}
+          maxShadowOpacity={0.5}
+          className="album-web"
+        >
+          {/* Front Cover */}
+          <PageCover>Front Cover</PageCover>
+
+          {/* Content Pages */}
+          {contentPageNumbers.map((pageNumber) => (
+            <div className="page">
+            <div key={posts[pageNumber-1].id} className="post-item">
+              <img className="post-image" src={posts[pageNumber-1].path} alt="Post" />
+              <div className="post-details">
+                <p className="post-caption">{posts[pageNumber-1].caption}</p>
+                <p className="post-date">{posts[pageNumber-1].date}</p>
+              </div>
+            </div>
+            </div>
+          ))}
+
+          {/* Back Cover */}
+          <PageCover>Back Cover</PageCover>
+        </HTMLFlipBook>
+      </div>
+    );
+  }
 }
 
 export default BookExample;

digital-memory-book/src/PhotoBook.css

@@ -20,6 +20,7 @@
 
   .post-item {
     display: flex;
+    background-color: white;
     flex-direction: row; /* Set the flex direction to row for side-by-side layout */
     justify-content: center; /* Add space between the image and details */
     align-items: center; /* Align items vertically in the center */

digital-memory-book/src/Post.js

@@ -321,12 +321,6 @@ const Post = ({ isAuth }) => {
         <button
           onClick={makePost}
           className="login-button"
-          style={{
-            padding: "5px 10px",
-            border: "1px solid #ccc",
-            borderRadius: "5px",
-            cursor: "pointer",
-          }}
         >
           Add Post
         </button>
@@ -335,19 +329,17 @@ const Post = ({ isAuth }) => {
           onClick={() =>
             slideshowActive ? pauseSlideshow() : startSlideshow()
           }
-          style={postEditButton}
         >
           {slideshowActive ? "Pause Slideshow" : "Start Slideshow"}
         </button>
         <button
           className="login-button"
           onClick={viewFamily}
-          style={postEditButton3}
         >
           View Family
         </button>
 
-        <div>
+        <div style = {{ marginLeft: '130px'}}>
           {[3, 5, 7, 10].map((interval) => (
             <button
               key={interval}
@@ -430,7 +422,7 @@ const Post = ({ isAuth }) => {
             onClose={pauseSlideshow}
           />
         )}
-        <button style={postEditButton2} onClick={handleClose}>
+        <button className="login-button" onClick={handleClose} style = {{marginLeft: '230px'}}>
           Close the Final Chapter
         </button>
       </div>

digital-memory-book/src/PostUploaderV2.js

@@ -13,8 +13,6 @@ import { v4 } from "uuid";
 import { storage } from "./firebase";
 import backgroundImage from './Photos/triangle-mosaic.png'
 
-
-
 function PostUploaderV2 ({ isAuth }){
   const pageStyles = {
     textAlign: 'center',
@@ -216,8 +214,8 @@ function PostUploaderV2 ({ isAuth }){
         <div style={popupBox} id="popupBox">
           <div>
             <div style={{ display: 'flex' }}>
-              <button style = {button} id = "submit" type='submit' onClick={handleUpload}>Upload</button>
-              <button style={button} onClick={handleCancel}>Cancel</button>
+              <button className="login-button" id = "submit" type='submit' onClick={handleUpload}>Upload</button>
+              <button className="login-button" onClick={handleCancel}>Cancel</button>
             </div>
             <div style={postStyle}>
               {image ? (

digital-memory-book/src/setupTests.js

@@ -2,4 +2,4 @@
 // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
-import "@testing-library/jest-dom";
+import "@testing-library/jest-dom";