Fix : Fetch organizations dynamically from collection

firebase.json

@@ -34,7 +34,7 @@
       "host": "127.0.0.1"
     },
     "hosting": {
-      "port": 5111,
+      "port": 5000,
       "host": "127.0.0.1"
     },
     "pubsub": {

src/components/User/UserProfile/UserProfile.jsx

@@ -9,6 +9,7 @@ import OrgUser from "../../../assets/images/org-user.svg";
 import { userList } from "../../HomePage/userList";
 import Card from "@mui/material/Card";
 import UserHighlights from "./UserHighlights";
+import { getAllOrganizations } from "../../../store/actions";
 import { useDispatch, useSelector } from "react-redux";
 import { useFirebase, useFirestore } from "react-redux-firebase";
 import {
@@ -59,10 +60,23 @@ function UserProfile(props) {
   const firebase = useFirebase();
   const firestore = useFirestore();
   const dispatch = useDispatch();
-  getTutorialFeedData;
 
   const profileData = useSelector(({ firebase: { profile } }) => profile);
 
+  // Use state for organizations just like before
+  const [organizations, setOrganizations] = useState([]);
+
+  // Add useEffect to fetch organizations
+  useEffect(() => {
+    const fetchOrgs = async () => {
+      const orgs = await getAllOrganizations()(firebase, firestore, dispatch);
+      if (orgs && orgs.length > 0) {
+        setOrganizations(orgs);
+      }
+    };
+    fetchOrgs();
+  }, [firebase, firestore, dispatch]);
+
   useEffect(() => {
     const getFeed = async () => {
       const tutorialIdArray = await getTutorialFeedIdArray(profileData.uid)(
@@ -83,39 +97,16 @@ function UserProfile(props) {
     }) => homepageFeedArray
   );
 
-  const [organizations, setUpOrganizations] = useState([
-    {
-      name: "Google Summer of Code",
-      img: [OrgUser]
-    },
-    {
-      name: "Google Summer of Code",
-      img: [OrgUser]
-    },
-    {
-      name: "Google Summer of Code",
-      img: [OrgUser]
-    },
-    {
-      name: "Google Summer of Code",
-      img: [OrgUser]
-    }
-  ]);
-
   return (
     <>
       <div className={classes.parentBody}>
         <div className={classes.leftBody}>
           <Grid>
             <Card>
               <ProfileCardOne
-                profileImage={
-                  props.profileData.photoURL
-                }
+                profileImage={props.profileData.photoURL}
                 name={props.profileData.displayName}
-                story={
-                  "Lorem ipsum dolor sit amet, consectetuer adipiscing elit"
-                }
+                story={"Lorem ipsum dolor sit amet, consectetuer adipiscing elit"}
                 followers={402}
                 following={40}
               />
@@ -156,4 +147,4 @@ function UserProfile(props) {
   );
 }
 
-export default UserProfile;
+export default UserProfile;

src/store/actions/index.js

@@ -14,6 +14,7 @@ export {
   signUp,
   verifyEmail,
   verifyPasswordResetCode
+
 } from "./authActions";
 export {
   addFollower,
@@ -33,7 +34,8 @@ export {
   subscribeOrg,
   unPublishOrganization,
   unSubscribeOrg,
-  uploadOrgProfileImage
+  uploadOrgProfileImage,
+  getAllOrganizations
 } from "./orgActions";
 export {
   addUserFollower,

src/store/actions/orgActions.js

@@ -3,6 +3,7 @@ import { useFirebase } from "react-redux-firebase";
 import Elasticlunr from "../../helpers/elasticlunr";
 import * as actions from "./actionTypes";
 import { checkOrgHandleExists } from "./authActions";
+import OrgUser from "../../assets/images/org-user.svg";
 
 const elasticlunr = new Elasticlunr("handle", "handle", "name");
 
@@ -425,3 +426,22 @@ export const deleteOrganization =
       console.log(e);
     }
   };
+
+  export const getAllOrganizations = () => async (firebase, firestore, dispatch) => {
+    try {
+      const orgDocs = await firestore
+        .collection("cl_org_general")
+        .get();
+
+      const organizations = orgDocs.docs.map(doc => ({
+        name: doc.data().org_name,
+        img: [OrgUser], // Using the same default image
+        date: '' // Optional: Add if you want to show date
+      }));
+
+      return organizations;
+    } catch (error) {
+      console.error("Error fetching organizations:", error);
+      return [];
+    }
+  };

src/store/reducers/orgReducer/index.js

@@ -3,10 +3,12 @@ import dataReducer from "./dataReducer";
 import generalReducer from "./generalReducer";
 import launchedOrgsReducer from "./launchedOrgsReducer";
 import userReducer from "./userReducer";
+import { organizationReducer } from "./orgReducer";
 
 export default combineReducers({
   general: generalReducer,
   user: userReducer,
   data: dataReducer,
-  launched: launchedOrgsReducer
+  launched: launchedOrgsReducer,
+  organisations:organizationReducer
 });

src/store/reducers/orgReducer/orgReducer.js

@@ -0,0 +1,31 @@
+const initialState = {
+    organizations: [],
+    loading: false,
+    error: null
+  };
+
+  export const organizationReducer = (state = initialState, action) => {
+    switch (action.type) {
+      case 'GET_ALL_ORGANIZATIONS_START':
+        return {
+          ...state,
+          loading: true,
+          error: null
+        };
+      case 'GET_ALL_ORGANIZATIONS_SUCCESS':
+        return {
+          ...state,
+          organizations: action.payload,
+          loading: false
+        };
+      case 'GET_ALL_ORGANIZATIONS_FAIL':
+        return {
+          ...state,
+          loading: false,
+          error: action.payload
+        };
+      default:
+        return state;
+    }
+  };
+