fix: environment config changes in the API are replicated in web and space app (#2699)

* fix: envconfig type changes

* chore: configuration variables  (#2692)

* chore: update avatar group logic (#2672)

* chore: configuration variables

---------

* fix: replacing slack client id with env config

---------

Co-authored-by: Nikhil <118773738+pablohashescobar@users.noreply.github.com>

web/lib/mobx/store-init.tsx

@@ -1,11 +1,12 @@
 import { useEffect, useState } from "react";
-// next themes
+import { observer } from "mobx-react-lite";
+import useSWR from "swr";
 import { useTheme } from "next-themes";
+import { useRouter } from "next/router";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
-import { useRouter } from "next/router";
+// helpers
 import { applyTheme, unsetCustomCssVariables } from "helpers/theme.helper";
-import { observer } from "mobx-react-lite";
 
 const MobxStoreInit = observer(() => {
   // router
@@ -13,16 +14,19 @@ const MobxStoreInit = observer(() => {
   const { workspaceSlug, projectId, cycleId, moduleId, globalViewId, viewId, inboxId } = router.query;
   // store
   const {
-    theme: themeStore,
-    user: userStore,
-    workspace: workspaceStore,
-    project: projectStore,
-    cycle: cycleStore,
-    module: moduleStore,
-    globalViews: globalViewsStore,
-    projectViews: projectViewsStore,
-    inbox: inboxStore,
+    theme: { sidebarCollapsed, toggleSidebar },
+    user: { currentUser },
+    workspace: { setWorkspaceSlug },
+    project: { setProjectId },
+    cycle: { setCycleId },
+    module: { setModuleId },
+    globalViews: { setGlobalViewId },
+    projectViews: { setViewId },
+    inbox: { setInboxId },
+    appConfig: { fetchAppConfig },
   } = useMobxStore();
+  // fetching application Config
+  useSWR("APP_CONFIG", () => fetchAppConfig(), { revalidateIfStale: false, revalidateOnFocus: false });
   // state
   const [dom, setDom] = useState<any>();
   // theme
@@ -34,36 +38,36 @@ const MobxStoreInit = observer(() => {
   useEffect(() => {
     const localValue = localStorage && localStorage.getItem("app_sidebar_collapsed");
     const localBoolValue = localValue ? (localValue === "true" ? true : false) : false;
-    if (localValue && themeStore?.sidebarCollapsed === undefined) {
-      themeStore.toggleSidebar(localBoolValue);
+    if (localValue && sidebarCollapsed === undefined) {
+      toggleSidebar(localBoolValue);
     }
-  }, [themeStore, userStore, setTheme]);
+  }, [sidebarCollapsed, currentUser, setTheme, toggleSidebar]);
 
   /**
    * Setting up the theme of the user by fetching it from local storage
    */
   useEffect(() => {
-    if (!userStore.currentUser) return;
+    if (!currentUser) return;
     if (window) {
       setDom(window.document?.querySelector<HTMLElement>("[data-theme='custom']"));
     }
-    setTheme(userStore.currentUser?.theme?.theme || "system");
-    if (userStore.currentUser?.theme?.theme === "custom" && dom) {
-      applyTheme(userStore.currentUser?.theme?.palette, false);
+    setTheme(currentUser?.theme?.theme || "system");
+    if (currentUser?.theme?.theme === "custom" && dom) {
+      applyTheme(currentUser?.theme?.palette, false);
     } else unsetCustomCssVariables();
-  }, [userStore.currentUser, setTheme, dom]);
+  }, [currentUser, setTheme, dom]);
 
   /**
    * Setting router info to the respective stores.
    */
   useEffect(() => {
-    if (workspaceSlug) workspaceStore.setWorkspaceSlug(workspaceSlug.toString());
-    if (projectId) projectStore.setProjectId(projectId.toString());
-    if (cycleId) cycleStore.setCycleId(cycleId.toString());
-    if (moduleId) moduleStore.setModuleId(moduleId.toString());
-    if (globalViewId) globalViewsStore.setGlobalViewId(globalViewId.toString());
-    if (viewId) projectViewsStore.setViewId(viewId.toString());
-    if (inboxId) inboxStore.setInboxId(inboxId.toString());
+    if (workspaceSlug) setWorkspaceSlug(workspaceSlug.toString());
+    if (projectId) setProjectId(projectId.toString());
+    if (cycleId) setCycleId(cycleId.toString());
+    if (moduleId) setModuleId(moduleId.toString());
+    if (globalViewId) setGlobalViewId(globalViewId.toString());
+    if (viewId) setViewId(viewId.toString());
+    if (inboxId) setInboxId(inboxId.toString());
   }, [
     workspaceSlug,
     projectId,
@@ -72,13 +76,13 @@ const MobxStoreInit = observer(() => {
     globalViewId,
     viewId,
     inboxId,
-    workspaceStore,
-    projectStore,
-    cycleStore,
-    moduleStore,
-    globalViewsStore,
-    projectViewsStore,
-    inboxStore,
+    setWorkspaceSlug,
+    setProjectId,
+    setCycleId,
+    setModuleId,
+    setGlobalViewId,
+    setViewId,
+    setInboxId,
   ]);
 
   return <></>;