fix: update the create ecosystem leads functionality based on ecosystem status (#8)

* fix/changes suggested for ui

Signed-off-by: sujitaw <sujit.sutar@ayanworks.com>

* fix/avoid other users from accessing platform admin

Signed-off-by: sujitaw <sujit.sutar@ayanworks.com>

---------

Signed-off-by: sujitaw <sujit.sutar@ayanworks.com>

Author: sujitaw

src/app/dashboard/Dashboard.tsx

@@ -1,10 +1,12 @@
 'use client'
-import { useEffect, useState, type ReactElement } from "react"
+import { useEffect, useState } from "react"
 
-import { Globe, Mail, Building2, Trash2 } from "lucide-react";
+import { Globe, Mail, Building2 } from "lucide-react";
 import { Card, CardContent } from "@/components/ui/card";
 import { getRequest } from "@/config/apiCalls";
-import { dashboardData } from "@/config/constant";
+import { dashboardData, ecosystemStatus } from "@/config/constant";
+import { useDispatch } from "react-redux";
+import { setEcosystemEnableStatus } from "@/lib/ecosystemSlice";
 
 
 export default function Dashboard() {
@@ -19,20 +21,38 @@ export default function Dashboard() {
       { title: "Invitations Sent", value: cardData.invitations, icon: Mail },
       { title: "Active Organizations", value: cardData.activeOrgs, icon: Building2 }
    ];
+
+   const dispatch = useDispatch()
+
   async function fetchDashboardDetails(): Promise<void> {
       try{
          const data = await getRequest(dashboardData)
-         console.log("data",data)
          if (data?.data.data) {
           setCardData(data?.data.data)
          }
       } catch {
-         console.log('failed to fetch dashboard details')
+         console.error('failed to fetch dashboard details')
+      }
+   }
+
+
+  const fetchEcosystemStatus = async ():Promise<void>=>{ 
+      try{
+        const response = await getRequest(ecosystemStatus)
+        if (response) {
+            dispatch(setEcosystemEnableStatus(response.data.data))
+        }
+      }catch(error){
+        console.error("failed to fetch ecosystem status",error)
       }
    }
 
+   useEffect(()=> {
+   },[])
+
    useEffect(()=> {
       fetchDashboardDetails()
+      fetchEcosystemStatus()
    },[])
 
    return (
@@ -45,7 +65,7 @@ export default function Dashboard() {
          </div>
 
          <div className="flex sm:flex justify-between gap-6">
-            {stats.map(({ title, value, icon: Icon }, index) => (
+            {stats.map(({ title, value, icon: Icon }) => (
                <Card
                   key={title}
                   className="shadow grow"

src/app/ecosystems/InvitationsList.tsx

@@ -14,7 +14,6 @@ import React, { useEffect, useState } from "react";
 import { dateConversion } from "@/config/common.functions";
 import {
   invitationsApi,
-  signOutApi,
 } from "@/config/constant";
 import { getRequest, postRequest } from "@/config/apiCalls";
 
@@ -23,15 +22,13 @@ import { CellContext } from "@tanstack/react-table";
 import { DataTable } from "@/components/ui/generic-table-component/data-table";
 import Modal from "@/components/Modal";
 import { RefreshCw } from "lucide-react";
-import { signOut } from "next-auth/react";
-import { useAppSelector } from "@/lib/hooks";
-import { useRouter } from "next/navigation";
 import { Input } from "@/components/ui/input";
-import Alert from "@/components/alert";
 import { HttpStatusCode } from "axios";
 import { AlertComponent } from "@/components/AlertComponent";
 import { TooltipContent, TooltipProvider, TooltipTrigger, Tooltip } from "@/components/ui/tooltip";
 import { Formik, Form as FormikForm } from "formik";
+import { useAppSelector } from '@/lib/hooks';
+import { RootState } from '@/lib/store';
 
 
 
@@ -70,12 +67,8 @@ const InvitationsList = (): React.JSX.Element => {
   const [errorMessage, setErrorMessage] = useState("");
   const [showAlert, setShowAlert] = useState(false);
   const [message, setMessage] = useState('')
-  const sessionId = useAppSelector((state) => state.session.sessionId);
 
-
-  const accessToken = useAppSelector(
-    (state) => state.session.token
-  );
+  const ecosystemEnabled = useAppSelector((state: RootState) => state.ecosystem?.ecosystemEnableStatus)
 
   const [paginationParameter, setPaginationParameter] = useState<PageParameter>(
     {
@@ -93,7 +86,6 @@ const InvitationsList = (): React.JSX.Element => {
     }
   );
 
-  const redirectUrl = `${process.env.NEXT_PUBLIC_CLIENT_URL}/dashboard`;
 
   const validationSchema = Yup.object().shape({
     email: Yup.string()
@@ -301,13 +293,15 @@ const InvitationsList = (): React.JSX.Element => {
                 className={`h-5 w-5 ${tableLoading ? "animate-spin" : ""}`}
               />
             </Button>
-            <Button
-              onClick={showInvitationPopUp}
-              className="flex items-center gap-2 px-4 py-2 text-base font-medium"
-              disabled={loading}
-            >
-              Create Ecosystem Lead
-            </Button>
+            { ecosystemEnabled &&
+               <Button
+                 onClick={showInvitationPopUp}
+                 className="flex items-center gap-2 px-4 py-2 text-base font-medium"
+                 disabled={loading}
+               >
+                 Create Ecosystem Lead
+               </Button>
+             }
           </div>
         </div>
         <div className="relative min-h-[400px]">

src/app/sessions/Sessions.tsx

@@ -25,7 +25,7 @@ function Sessions(): JSX.Element {
   const [deletionId, setDeletionId] = useState<string | null>(null)
 
   const [showConfirmation, setShowConfirmation] = useState<boolean>(false)
-  const userId = useAppSelector((state: RootState) =>{console.log("state",state);return state.user?.userDetails?.userId})
+  const userId = useAppSelector((state: RootState) =>{return state.user?.userDetails?.userId})
   console.log("userId",userId)
   const currentSession = useAppSelector(
     (state: RootState) => state.session.sessionId,

src/app/settings/Settings.tsx

@@ -8,18 +8,23 @@ import { Globe, CheckCircle2, XCircle } from "lucide-react";
 import { getRequest, putRequest } from "@/config/apiCalls";
 import { ecosystemStatus, updateEcosystemStatusApi } from "@/config/constant";
 import { HttpStatusCode } from "axios";
+import { useAppSelector } from "@/lib/hooks";
+import { RootState } from "@/lib/store";
+import { useDispatch } from "react-redux";
+import { setEcosystemEnableStatus } from "@/lib/ecosystemSlice";
 
 const Settings = () => {
-  const [ecosystemEnabled, setEcosystemEnabled] = useState(true);
   const [alertMessage, setAlertMessage] = useState<string | null>(null);
   const [alertType, setAlertType] = useState<"success" | "error">("success");
+  const ecosystemEnabled = useAppSelector((state: RootState) => state.ecosystem?.ecosystemEnableStatus)
+
+  const dispatch = useDispatch()
 
   async function updateEcosystemStatus(checked: boolean):Promise<void>{
       try{
         const response = await putRequest(updateEcosystemStatusApi,{ isEcosystemEnabled: checked })
-        console.log("response",response)
         if (response && response.status === HttpStatusCode.Ok) {
-           setEcosystemEnabled(checked);
+           dispatch(setEcosystemEnableStatus(checked))
            setAlertType("success");
            setAlertMessage(`Ecosystem ${checked ? "enabled" : "disabled"} successfully`);
            setTimeout(() => setAlertMessage(null), 3000);
@@ -38,9 +43,9 @@ const Settings = () => {
   const fetchEcosystemStatus = async ():Promise<void>=>{ 
       try{
         const response = await getRequest(ecosystemStatus)
-        console.log("response",response)
         if (response) {
-            setEcosystemEnabled(response.data.data)
+           dispatch(setEcosystemEnableStatus(response.data.data))
+           setAlertType("success");
         }
       }catch(error){
         console.error("failed to fetch ecosystem status",error)
@@ -49,6 +54,7 @@ const Settings = () => {
 
    useEffect(()=> {
     fetchEcosystemStatus()
+
    },[])
 
   return (

src/components/SessionCheck.tsx

@@ -5,7 +5,7 @@ import { setRefreshToken, setSessionId, setSessionToken } from '@/lib/sessionSli
 import { signOut, useSession } from 'next-auth/react'
 import { useAppDispatch, useAppSelector } from '@/lib/hooks'
 import { useEffect, useState } from 'react'
-import { usePathname, useRouter } from 'next/navigation'
+import {  useRouter } from 'next/navigation'
 
 import Image from 'next/image'
 import Loader from '@/components/Loader'
@@ -21,7 +21,6 @@ const SessionCheck = ({
   const [isChecking, setIsChecking] = useState(true)
   const dispatch = useAppDispatch()
   const router = useRouter()
-  const pathname = usePathname()
   const token = useAppSelector((state) => state.session.token);
 
   const setSessionDetails = (sessionDetails: any): void => {

src/config/apiCalls.ts

@@ -112,6 +112,9 @@ axios.interceptors.request.use(
 const handleError = async (error: any): Promise<never> => {
   if (error.response) {
     // Server responded with a status other than 200 range
+    if (error.response.status === 403){
+         logoutUser()
+      }
     if (error.response.status === 401) {
       await generateAccessToken()
     }

src/lib/ecosystemSlice.ts

@@ -0,0 +1,22 @@
+import { PayloadAction, createSlice } from "@reduxjs/toolkit";
+
+interface Ecosystem {
+   ecosystemEnableStatus: boolean
+}
+
+const initialState: Ecosystem = {
+  ecosystemEnableStatus: false,
+};
+
+const ecosystemSlice = createSlice({
+  name: "ecosystem",
+  initialState,
+  reducers: {
+    setEcosystemEnableStatus: (state, action: PayloadAction<boolean>) => {
+      state.ecosystemEnableStatus = action.payload;
+    },
+  },
+});
+
+export const { setEcosystemEnableStatus } = ecosystemSlice.actions;
+export default ecosystemSlice.reducer;

src/lib/store.ts

@@ -6,18 +6,20 @@ import storage from "redux-persist/lib/storage";
 import userReducer from "./userSlice";
 import userRegistrationSlice from "./userRegistrationSlice";
 import sessionSlice from "./sessionSlice";
+import ecosystemSlice from "./ecosystemSlice";
 
 const rootReducer = combineReducers({
   session: sessionSlice,
   organization: organizationReducer,
   user: userReducer,
-  userRegistartion: userRegistrationSlice
+  userRegistartion: userRegistrationSlice,
+  ecosystem: ecosystemSlice
 });
 
 const persistConfig = {
   key: "root",
   storage,
-  whitelist: ["session", "organization", "user", "userRegistartion"],
+  whitelist: ["session", "organization", "user", "userRegistartion", "ecosystem"],
 };
 
 const persistedReducer = persistReducer(persistConfig, rootReducer);