Merge pull request #12 from Dinujaya-Sandaruwan/build/beta (Bug Fix)

Bugfix: Alignment of the post component
Dinujaya-Sandaruwan · Mar 8, 2024 · aadb9d4 · aadb9d4
2 parents 4ef8b3a + 66fd451
commit aadb9d4
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 30 deletions.
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "firebase": "^10.3.1",
     "react": "^18.2.0",
     "react-burger-menu": "^3.0.9",
+    "react-content-loader": "^6.2.1",
     "react-dom": "^18.2.0",
     "react-icons": "^4.10.1",
     "react-infinite-scroll-component": "^6.1.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/App.tsx b/src/App.tsx
@@ -28,7 +28,6 @@ import useAuthStore from "./global/authStore";
 import useDisplayForm from "./global/displayFormStore";
 import { Posts } from "./interfaces/postFaces";
 import { slide as Menu } from "react-burger-menu";
-import InfiniteScroll from "react-infinite-scroll-component";
 
 function App() {
   const { displayForm } = useDisplayForm();
@@ -39,9 +38,7 @@ function App() {
   const [lastPost, setLastPost] = useState<any>(null);
   const [loading, setLoading] = useState<boolean>(false);
   const [hasMore, setHasMore] = useState<boolean>(true);
-  const [showLoadButton, setShowLoadButton] = useState<boolean>(true);
   const observer = useRef<IntersectionObserver | null>(null);
-  // const [isOpen, setIsOpen] = useState<boolean>(false);
 
   const isAdmin = userId === import.meta.env.VITE_USER_ID;
 
@@ -133,21 +130,12 @@ function App() {
         setLastPost(snapshot.docs[snapshot.docs.length - 1]);
       } else {
         setHasMore(false);
-        setShowLoadButton(false); // Hide the load more button when no more posts
       }
       setLoading(false);
     }
   };
 
-  const handleLoadMorePosts = () => {
-    fetchMorePosts();
-  };
-
   const [isOpen, setIsOpen] = useState(false);
-  // const showSettings = (event) => {
-  //   event.preventDefault();
-  //   // Your logic here
-  // };
 
   return (
     <main>
@@ -184,21 +172,13 @@ function App() {
               (post) => post.userId === userId && post.isApproved === false
             )
             .map((post, index) => <Post key={index} {...post} />)}
-        <InfiniteScroll
-          dataLength={posts.filter((post) => post.isApproved === true).length} //This is important field to render the next data
-          next={handleLoadMorePosts}
-          hasMore={true}
-          loader={showLoadButton ? <h4>Loading...</h4> : <h4></h4>}
-          // below props only if you need pull down functionality
-          refreshFunction={handleLoadMorePosts}
-          pullDownToRefresh
-          pullDownToRefreshThreshold={5}
-        >
-          {!isAdmin &&
-            posts
-              .filter((post) => post.isApproved === true)
-              .map((post, index) => <Post key={index} {...post} />)}
-        </InfiniteScroll>
+        {/* Render posts */}
+        {!isAdmin &&
+          posts
+            .filter((post) => post.isApproved === true)
+            .map((post, index) => <Post key={index} {...post} />)}
+        {/* Loader */}
+        {loading && <h4>Loading...</h4>}
       </div>
       <aside className="rightSide">
         <Trending />

diff --git a/src/components/Post.tsx b/src/components/Post.tsx
@@ -21,6 +21,8 @@ import { Menu, MenuItem, MenuButton } from "@szhsin/react-menu";
 import "@szhsin/react-menu/dist/index.css";
 import "@szhsin/react-menu/dist/transitions/slide.css";
 
+import ContentLoader from "react-content-loader";
+
 const Post = ({
   userName,
   userPhotoURL,
@@ -188,9 +190,15 @@ const Post = ({
             width="100%"
           />
         ) : (
-          <div className="react-loading-skeleton">
-            <div className="test"></div>
-          </div>
+          <ContentLoader
+            speed={2}
+            height={0}
+            viewBox="0 0 200 200"
+            backgroundColor="#f3f3f3"
+            foregroundColor="#ecebeb"
+          >
+            <rect x="0" y="0" rx="5" ry="5" width="200" height="200" />
+          </ContentLoader>
         )}
 
         {postPhotoURL.length > 1 && (
@@ -211,6 +219,7 @@ const Post = ({
           </div>
         )}
       </div>
+
       <div className="postButtons">
         <button
           className="like"

diff --git a/src/style/layout/_main.scss b/src/style/layout/_main.scss
@@ -510,3 +510,18 @@
     }
   }
 }
+
+.infinite-scroll-component {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 20px;
+
+  & > * {
+    width: clamp(300px, 85%, 800px);
+    @media (width > 1700px) {
+      width: 800px;
+    }
+  }
+}