Server dev

client/src/Services/communityService.js

@@ -1,5 +1,6 @@
 import { createAsyncThunk } from "@reduxjs/toolkit";
 import thaliaAPI from "../API/thaliaAPI";
+import { toast } from "react-toastify";
 
 export const getRecentDiscussions = async (page) => {
     try {
@@ -73,4 +74,52 @@ export const getMyCommunity = createAsyncThunk(
             }
             return thunkAPI.rejectWithValue(payload)
         }
-    })
+    })
+
+export const getAllCommunity = createAsyncThunk(
+    "community/getAllCommunity",
+    async (_, thunkAPI) => {
+        try {
+            const { data } = await thaliaAPI.get('/community/get-suggestions');
+            return data;
+        } catch (err) {
+            const payload = {
+                status: err.response.data.status,
+                message: err.response.data.message
+            }
+            return thunkAPI.rejectWithValue(payload)
+        }
+    })
+
+export const joinCommunity = createAsyncThunk(
+    "community/joinCommunity",
+    async (community_id, thunkAPI) => {
+        try {
+            const { data } = await thaliaAPI.post('/community/join', { community_id });
+            return data;
+        } catch (err) {
+            const payload = {
+                status: err.response.data.status,
+                message: err.response.data.message
+            }
+            return thunkAPI.rejectWithValue(payload)
+        }
+    })
+
+export const getDiscussions = async (id, pagination) => {
+    try {
+        const response = await thaliaAPI.get(`/community/discussions/${id}?page=${pagination}`);
+        return response.data;
+    } catch (error) {
+        toast.error("error while fetching discussion")
+    }
+}
+
+export const createDiscussion = async (payload) => {
+    try {
+        const response = await thaliaAPI.post('/community/discussions', payload);
+        return response.data;
+    } catch (error) {
+        toast.error(error.response?.data.message)
+    }
+}

client/src/components/community/CommunityCard/CommunityCard.jsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import PropTypes from "prop-types";
+import { joinCommunity } from "../../../Services/communityService";
 
 export default function CommunityCard({ community, type }) {
      const navigate = useNavigate();
@@ -32,7 +33,7 @@ export default function CommunityCard({ community, type }) {
                               className="w-full h-28 object-cover"
                          />
                     ) : (
-                         <div className="icon-with-text h-full flex items-center justify-center bg-gray-300">
+                         <div className="icon-with-text h-full flex items-center justify-center bg-gray-500">
                               <h1 className="text-6xl w-full h-28 rounded-full  text-center flex justify-center items-center">
                                    {typeof community?.community_name ===
                                         "string" &&
@@ -65,8 +66,10 @@ export default function CommunityCard({ community, type }) {
                          </button>
                     ) : (
                          <button
-                              className="view-community w-full py-2 rounded-md bg-primary hover:bg-primary"
-                              onClick={() => dispatch()}
+                              className="view-community w-full py-2 rounded-md bg-accent hover:bg-primary"
+                              onClick={() =>
+                                   dispatch(joinCommunity(community._id))
+                              }
                          >
                               Join
                          </button>

client/src/components/community/DiscoverCommunity/DiscoverCommunity.jsx

@@ -0,0 +1,40 @@
+import { useEffect } from "react";
+// import { getAllCommunity } from "../../services/communityService";
+import { useDispatch, useSelector } from "react-redux";
+import { resetCommunity } from "../../../features/communitySlice";
+import { getAllCommunity } from "../../../Services/communityService";
+import CommunityCard from "../CommunityCard/CommunityCard";
+
+export default function DiscoverCommunity() {
+     const dispatch = useDispatch();
+     const { community, isSuccess, isError } = useSelector(
+          (state) => state.community
+     );
+     const { user } = useSelector((state) => state.auth);
+     useEffect(() => {
+          dispatch(getAllCommunity());
+     }, [dispatch]);
+     useEffect(() => {
+          dispatch(resetCommunity());
+     }, [isSuccess, isError, dispatch]);
+
+     return (
+          <section className="your-community flex flex-col sm:ms-96 p-5 text-text flex-wrap gap-5 bg-gray-800 min-h-screen">
+               <h1 className="text-xl">Discover Community</h1>
+               {community.map((item, index) => {
+                    const members = item.members
+                         .filter((member) => member.status === "active")
+                         .map((com) => com.user_id);
+                    if (!members.includes(user?._id)) {
+                         return (
+                              <CommunityCard
+                                   key={index}
+                                   community={item}
+                                   type={"discover"}
+                              />
+                         );
+                    }
+               })}
+          </section>
+     );
+}