Real-time and partly CRUD interactive comment section

Community feedback

• 

  Huy Phan•2,700

  @huyphan2210Posted about 1 month ago

  Hi, @KapteynUniverse

  Great work on this challenge! I checked out your solution and I have some thoughts:

  • Adding a loading screen: With your current setup, you can manage the loading state by using MobX, a state management library. Here's how you can implement it:

  1. Create a LoadingStore:

  // LoadingStore.js
  import { makeAutoObservable } from "mobx";
  
  class LoadingStore {
    isLoading = true;
    constructor() {
      makeAutoObservable(this);
    }
    setLoading(loading) {
      this.isLoading = loading;
    }
  }
  export default new LoadingStore();
  

  2. Update getDoc.js to use MobX for loading:

  // getDoc.js - consider to use "useComments.js" for consistency
  import { useEffect, useState } from "react";
  import loadingStore from "./LoadingStore"; // Import MobX store
  
  const useComments = () => {
    const [comments, setComments] = useState([]);
  
    useEffect(() => {
      // Fetch data...
      loadingStore.setLoading(true); // Set loading to true initially
      const unsubscribeComments = onSnapshot(query(...), (querySnapshot) => {
        setComments(commentsData);
        loadingStore.setLoading(false); // Set loading to false after fetching
      });
  
      return () => unsubscribeComments();
    }, []);
  
    return comments;
  };
  

  3. Use isLoading in your Home component:

  // Home.jsx
  import { observer } from "mobx-react-lite"; // Import the observer HOC from MobX to make the component reactive
  import loadingStore from "./LoadingStore"; // Import the MobX store that holds the loading state
  
  const Home = observer(() => {
    // If loading is true, show the loading screen
    if (loadingStore.isLoading) return <div className="loading-screen"></div>;
  
    // Once loading is false, render the content (for example, "Content Loaded")
    return <div>Content Loaded</div>;
  });
  
  export default Home;
  

  This should make the isLoading state globally accessible and simplifies handling loading logic.

  Let me know what you think!

  Marked as helpful

  0

  ---

  

  KapteynUniverse•2,720

  @KapteynUniversePosted about 1 month ago

  Hey @huyphan2210, Thanks for the feedback. Before submitting the solution for the issue with comments jumping on page load, I tried creating a custom loading component without using a package. I added it to the App.jsx, used some useState and useEffect to check if the home page had loaded, and then displayed the home page once it was ready. But the comments still kept jumping, so I removed the loading page because it was just increasing wait/load time.

  I’ve tried your suggestion on local files too, and it looks like it’s working in combination with the fade-in animation, which was one of the other leftover fixes I had tried. I’ll explore it more later. Thanks again!

  1
• 

  KapteynUniverse•2,720

  @KapteynUniversePosted about 1 month ago

  I don’t even have an animation, don't do this to me screenshot :D That reminds me (I know why the screenshot looks like that, but I don’t know the reason for that issue). I tried to add a loading screen to fix it, but the comments still jumped after the loading screen.

  1

  ---

  

  Dylan Heslop•2,400

  @dylan-dot-cPosted about 1 month ago

  @KapteynUniverse interesting, maybe it depends on how fast the website gets the data before fem takes a screenshot, the thing is that maybe NEXTJS and SSR would make it faster but you can't have state in server components and that would make it harder to use ig.

  1
• 

  Mahmood•2,110

  @MahmoodHashemPosted about 1 month ago

  Your project is amazing!

  Could you take a look at my project? I completed it a couple of hours ago. How can I improve it to make it more like yours, allowing users to log in and leave comments?

  Here is my solution:

  • Repo URL
  • Live Site

  0

  ---

  

  KapteynUniverse•2,720

  @KapteynUniversePosted about 1 month ago

  Hey @MahmoodHashem, thank you. I am not an expert and it is a bit late for me but i will check your code tomorrow and give feedback if i can.

  To answer your question: You need a database. I used Firebase for the real time database and authentication.

  1

  

  Mahmood•2,110

  @MahmoodHashemPosted about 1 month ago

  @KapteynUniverse Alright, take your time, brother.

  I’ve heard about Firebase before and even followed a tutorial to create a notes app with it. However, I didn’t realize it could be used for this kind of functionality. I’ll look into it, and if it seems simple enough, I’ll implement it in my project.

  0

  

  KapteynUniverse•2,720

  @KapteynUniversePosted about 1 month ago

  Hey @MahmoodHashem, i checked your solution. I don't have much feedback to give tbh. I am very new to React but the issue you are having with the replies feels like a mapping issue. Maybe tracking the user with a useEffect hook and update on the replies might fix the issue.

  0