feat: add organization management with new store and update authentication flow

Author: abhishek-nexgen-dev

src/features/Auth/v1/Constant/Auth.Endpoint.Constant.ts

@@ -2,7 +2,7 @@ const AUTH_ENDPOINTS = {
   LOGIN: "/signIn",
   REGISTER: "/auth/register",
   REFRESH: "/auth/refresh",
-  GET_ORGANIZATION_BY_ID: "/organization",
+  GET_ORGANIZATION_BY_ID: "/get-community-by-auth-id",
 };
 
 export default AUTH_ENDPOINTS;

src/features/Auth/v1/Store/Auth.Store.ts

@@ -1,36 +1,21 @@
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
 
-export interface User {
-  _id: string;
-
-  email: string;
-  role: string;
-
-}
-
-interface AuthState {
-  // token: string | null;
-  user: User | null;
-
-  setAuthData: (user: User) => void;
-  clearAuthData: () => void;
-}
+import { AuthState, User } from "../Types/Auth.type";
 
 const useAuthStore = create<AuthState>()(
   persist(
     (set) => ({
       token: null,
       user: null,
 
-      setAuthData: (user) =>
+      setAuthData: (user: User) =>
         set({
           user,
         }),
 
       clearAuthData: () =>
         set({
-        
           user: null,
         }),
     }),

src/features/Auth/v1/Store/Organization.Store.ts

@@ -0,0 +1,24 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+import { CommunitySchema } from "../Types/Organization.Type";
+
+
+const useOrganizationStore = create<{
+  organization: CommunitySchema | null;
+  setOrganization: (organization: CommunitySchema) => void;
+}>()(
+  persist(
+    (set) => ({
+      organization: null,
+      setOrganization: (organization: CommunitySchema) =>
+        set({
+          organization,
+        }),
+    }),
+    {
+      name: "organization-storage",
+    },
+  ),
+);
+
+export default useOrganizationStore;

src/features/Auth/v1/Types/Auth.type.ts

@@ -0,0 +1,14 @@
+export interface User {
+  _id: string;
+
+  email: string;
+  role: string;
+}
+
+export interface AuthState {
+  // token: string | null;
+  user: User | null;
+
+  setAuthData: (user: User) => void;
+  clearAuthData: () => void;
+}

src/features/Auth/v1/Types/Organization.Type.ts

@@ -0,0 +1,20 @@
+export type CommunitySchema = {
+  CommunityName: string;
+  Bio: string;
+  Slug: string;
+  Website: string;
+  Country: string;
+  City: string;
+  OfficialEmail: string;
+  ContactPhone: string;
+  LogoUrl: string;
+
+  SocialLinks: {
+    github?: string;
+    discord?: string;
+    twitter?: string;
+    linkedin?: string;
+    youtube?: string;
+    instagram?: string;
+  };
+};

src/features/Auth/v1/hooks/useAuth.ts

@@ -3,61 +3,78 @@ import { useMutation } from "@tanstack/react-query";
 
 import AUTH_ENDPOINTS from "../Constant/Auth.Endpoint.Constant";
 import useAuthStore from "../Store/Auth.Store";
+import useOrganizationStore from "../Store/Organization.Store";
 
-const baseUrl = import.meta.env.VITE_API_BASE_URL || "http://localhost:8000/api/v1";
+const baseUrl =
+  import.meta.env.VITE_API_BASE_URL || "http://localhost:8000/api/v1";
 
 // =========================
-// LOGIN MUTATION HOOK
+// GET ORGANIZATION
 // =========================
 
-const useLoginMutation = () => {
+const useGetOrganizationMutation = () => {
   return useMutation({
-    mutationKey: ["login"],
-
-    mutationFn: async (credentials: { email: string; password: string }) => {
-      try {
-        const response = await api.post(`${baseUrl}${AUTH_ENDPOINTS.LOGIN}`, credentials);
-        return response.data;
-      } catch (error) {
-        console.error("Login failed:", error);
-        throw error;
-      }
-    },
+    mutationKey: ["organization"],
 
+    mutationFn: async (_id: string) => {
+      const response = await api.get(
+        `${baseUrl}${AUTH_ENDPOINTS.GET_ORGANIZATION_BY_ID}?ownerId=${_id}`
+      );
 
+      return response.data;
+    },
 
     onSuccess: (response) => {
-      
-      const user = response.data;
-      console.log("Login successful:", user);
-
-      if(user.role === "organization"){
-          let {mutate} = useGetOrganization_Mutation() 
-           mutate(user._id)
-
-      }
+      useOrganizationStore.getState().setOrganization(response.data);
+    },
 
-      useAuthStore.getState().setAuthData(user);
+    onError: (error) => {
+      console.error("Failed to fetch organization:", error);
     },
   });
 };
 
+// =========================
+// LOGIN
+// =========================
+
+const useLoginMutation = () => {
+  const organizationMutation = useGetOrganizationMutation();
 
-const useGetOrganization_Mutation = () => {
   return useMutation({
-    mutationKey: ["organization"],
+    mutationKey: ["login"],
+
+    mutationFn: async (credentials: {
+      email: string;
+      password: string;
+    }) => {
+      const response = await api.post(
+        `${baseUrl}${AUTH_ENDPOINTS.LOGIN}`,
+        credentials
+      );
+
+      return response.data;
+    },
+
+    onSuccess: async (response) => {
+      const user = response.data;
 
-    mutationFn: async (id: string) => {
-      try {
-        const response = await api.get(`${baseUrl}${AUTH_ENDPOINTS.GET_ORGANIZATION_BY_ID}?id=${id}`);
-        return response.data;
-      } catch (error) {
-        console.error("Failed to fetch organization data:", error);
-        throw error;
+      console.log("Login successful:", user);
+
+      // Save auth first
+      useAuthStore.getState().setAuthData(user);
+
+      // Fetch organization if needed
+      if (user.role === "organization") {
+        await organizationMutation.mutateAsync(user._id);
       }
     },
+
+    onError: (error) => {
+      console.error("Login failed:", error);
+    },
   });
-}
+};
 
 // =========================
 // AUTH HOOK
@@ -69,4 +86,4 @@ export const useAuth = () => {
   return {
     loginMutation,
   };
-};
+};

src/features/SideBar/v1/Section/SideBar.tsx

@@ -15,12 +15,15 @@ import SideBarLink from "../Components/SideBarLink";
 import { dashboardData } from "@/features/Member/v1/mock/dashboardData";
 import useAuthStore from "@/features/Auth/v1/Store/Auth.Store";
 import { useEffect } from "react";
+import useOrganizationStore from "@/features/Auth/v1/Store/Organization.Store";
 
 const SideBar = () => {
   const user = useAuthStore((state) => state.user);
-  const { theme } = useTheme();
-
+  const organization = useOrganizationStore((state) => state.organization);
 
+  console.log("User in SideBar:", user);
+  console.log("Organization in SideBar:", organization);
+  const { theme } = useTheme();
 
   return (
     <div
@@ -80,13 +83,13 @@ const SideBar = () => {
             style={{ backgroundColor: theme.bg.surfaceSecondary }}
           >
             <img
-              src="https://randomuser.me/api/portraits/men/1.jpg"
+              src={organization?.LogoUrl || "/defaultProfile.png"}
               alt="Profile"
               className="w-9 h-9 rounded-full object-cover shrink-0"
             />
             <div className="min-w-0 flex-1 flex flex-col justify-center gap-0.5">
               <p className="text-sm font-semibold truncate" style={{ color: theme.text.primary }}>
-                {/* {data?.user?.name} */}
+                {organization?.CommunityName}
               </p>
               <p className="text-xs truncate font-medium" style={{ color: theme.primary.default }}>
                 {user?.role}

src/features/template/LoginUserTemplate.tsx

@@ -1,23 +1,25 @@
+import useAuthStore from "../Auth/v1/Store/Auth.Store";
 import SideBar from "../SideBar/v1/Section/SideBar";
 import { Outlet, redirect } from "react-router";
 import BotamNavBar from "../SideBar/v1/Section/BotamNavBar";
-import { useAuth } from "../Auth/v1/hooks/useAuth";
+
 import { useMemo } from "react";
 
 const Organisation_Template = () => {
-  const { loginMutation } = useAuth();
+
+  let user = useAuthStore((state) => state.user);
 
   useMemo(() => {
-    let { data } = loginMutation;
 
-    if (data) {
-      let Role = data.role;
+    console.log("User in Organisation_Template-->:", user);
+   
 
-      if (Role === "org") {
-        redirect("/");
+      if (user?.role) {
+        if (user.role !== "organization") {
+          redirect("/");
+        }
       }
-    }
-  }, [loginMutation]);
+  }, [user]);
 
   return (
     <div className="flex w-screen min-h-screen overflow-x-hidden items-stretch cd-page">