Feat: Added Manging Block users in frontend successfully issue 389

[MeetDOD]

Pull Request Resolves [#389 ]

Title: Added Manging Block users in frontend successfully.

Description

1. In Backend at user, i created a route and controller for checkingBlockOrUnblock at user side if the blocked is true that it will return the true and false similarly.
2. In frontend, I created a Blocked page which show some text and email of the admin.
3. In App.tsx i am checking the true/false with the help of useBlock hook which i created in the hooks folder which is fetching the status from backend.
4. The Design is responsive.

Related Issues

Fixes #389

Changes Made

New features: Added Manging Block users in frontend.

Screenshots

Video

Style.Share._.Login.page.-.Google.Chrome.2024-07-08.15-58-24.online-video-cutter.com.mp4

I certify that I have carried out the relevant code of conduct and provided the requisite screenshot for validation by submitting this pull request.

Thank You for this contribution.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
style-share	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 9, 2024 8:19am

[github-actions]

Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. In the meantime, please ensure that your changes align with our CONTRIBUTING.md. If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊

[MeetDOD]

@VaibhavArora314 I created a types.ts where all the interface is situated and I am using IPost, IUser and IStats in other files as I promised !

[VaibhavArora314]

rest is looking good to me, just this one change and also add an logout button on account suspend page

[VaibhavArora314]

here we can use setInterval to check user block status every 5 or 10 minutes and we can store interval value in a state to remove or update interval

[MeetDOD]

Interval means, can you tell me more about it ! I haven't use interval approach in my projects can you elaborate please 😄

[VaibhavArora314]

I got this sample code snippet of a hook to fetch todos and refresh them after a while, you can take reference from this

import { useEffect, useState } from 'react';
import axios from 'axios';

// Custom hook for fetching todos with auto-refresh
function useTodos(n) {
  const [loading, setLoading] = useState(true);
  const [todos, setTodos] = useState([]);

  // Function to fetch data from the backend
  function getData() {
    axios.get("<api-url-here>")
      .then(res => {
        setTodos(res.data.todos);
        setLoading(false);
      })
      .catch(error => {
        console.error("Error fetching todos:", error);
        setLoading(false);
      });
  }

  useEffect(() => {
    // Initial data fetch
    getData();

    // Set up interval to fetch data every n seconds
    const intervalId = setInterval(() => {
      getData();
    }, n * 1000);

    // Clean up the interval on component unmount or when n changes
    return () => clearInterval(intervalId);
  }, [n]);

  // Return todos and loading state
  return {
    todos: todos,
    loading: loading
  };
}

// Main App component
function App() {
  // Using the custom hook to fetch todos with auto-refresh every 5 seconds
  const { todos, loading } = useTodos(5);

  // Rendering loading message if data is still loading
  if (loading) {
    return <div>Loading...</div>;
  }

  // Rendering Track component for each todo
  return (
    <>
      {todos.map(todo => <Track key={todo.id} todo={todo} />)}
    </>
  );
}

// Track component for rendering individual todo
function Track({ todo }) {
  return (
    <div>
      {todo.title}
      <br />
      {todo.description}
    </div>
  );
}

export default App;

[MeetDOD]

@VaibhavArora314 Amazing bro thank you very much i learned very new feature today,
I implemented it so, basically i add the timeout and updating state according to the time i set it to every 5 minute, so if admin unblock/block the user without reloading the page will update to suspended page.
So, if user is in the app and he/she is scrolling and using the app but when admin block the user, after 5 min the get api is called and user will dynamically see the suspended page.

Thank You very much 😄🙏

[MeetDOD]

rest is looking good to me, just this one change and also add an logout button on account suspend page

@VaibhavArora314 logout button done 👍

[github-actions]

🎉 Your pull request has been successfully merged! 🎉 Thank you for your valuable contribution to our project. Your efforts are greatly appreciated. Feel free to reach out if you have any more contributions or if there's anything else we can assist you with. Keep up the fantastic work! 🚀

[MeetDOD]

please Add GSSOC label and level !

[MeetDOD]

@VaibhavArora314 @Ultimateutkarsh11 please add label and level gssoc