@asaleh37/ui-base 1.1.3 → 1.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asaleh37/ui-base",
-  "version": "1.1.3",
+  "version": "1.1.5",
   "description": "",
   "license": "ISC",
   "author": "Ahmed Saleh Mohamed",

package/src/components/App.tsx

@@ -11,7 +11,6 @@ import { AppInfo, AppInfoActions } from "../redux/features/common/AppInfoSlice";
 const App: React.FC<AppInfo> = (props: AppInfo) => {
   const dispatch = useDispatch();
   console.log("App Info", props);
-  dispatch(AppInfoActions.setAppInfo(props));
   const AppLayoutState = useSelector((state: RootState) => state.AppLayout);
   let themeOptions = { ...LightThemeOptions };
   if (AppLayoutState.themeMode === "dark") {
@@ -23,10 +22,11 @@ const App: React.FC<AppInfo> = (props: AppInfo) => {
   });
   useEffect(() => {
     document.title = props.documentTitle;
+    dispatch(AppInfoActions.setAppInfo(props));
   }, []);
   return (
     <ThemeProvider theme={theme}>
-      <Layout />
+      {props?.apiBaseUrl ? <Layout /> : <>No Info Yet</>}
     </ThemeProvider>
   );
 };

package/src/components/common/Login.tsx

@@ -17,7 +17,7 @@ import { UserSessionActions } from "../../redux/features/common/UserSessionSlice
 import { DarkThemeOptions } from "../../theme/DarkThemeOptions";
 
 const Login: React.FC = () => {
-  const appInfo = useSelector((state: RootState) => state.AppInfo);
+  const appInfo = useSelector((state: RootState) => state.AppInfo.value);
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const [isLoginInProcess, setIsLoginInProcess] = useState(false);

package/src/hooks/useAxios.tsx

@@ -17,7 +17,7 @@ export interface APIRequest {
 const useAxios = () => {
   const mask = useLoadingMask();
   const apiBaseUrl = useSelector(
-    (state: RootState) => state.AppInfo.apiBaseUrl
+    (state: RootState) => state.AppInfo.value.apiBaseUrl
   );
   const axiosInstance = axios.create({
     baseURL: apiBaseUrl,

package/src/layout/MobileDrawer.tsx

@@ -34,7 +34,7 @@ const Puller = styled("div")(({ theme }) => ({
 export default function MobileDrawer(props: Props) {
   const { window } = props;
   const AppLayout = useSelector((state: RootState) => state.AppLayout);
-  const AppInfo = useSelector((state: RootState) => state.AppInfo);
+  const AppInfo = useSelector((state: RootState) => state.AppInfo.value);
   const dispatch = useDispatch();
   const toggleDrawer = (newState: boolean) => {
     dispatch(AppLayoutActions.setSideBarState(newState));

package/src/layout/SideBar.tsx

@@ -13,7 +13,7 @@ import {
 import NavigationTree from "./NavigationTree";
 
 const SideBar: React.FC = () => {
-  const AppInfo = useSelector((state: RootState) => state.AppInfo);
+  const AppInfo = useSelector((state: RootState) => state.AppInfo.value);
   const theme = useTheme();
   const AppLayout = useSelector((state: RootState) => state.AppLayout);
   const dispatch = useDispatch();

package/src/layout/TopBar.tsx

@@ -51,7 +51,7 @@ const AppBar = styled(MuiAppBar, {
 });
 
 const TopBar: React.FC = () => {
-  const AppInfo = useSelector((state: RootState) => state.AppInfo);
+  const AppInfo = useSelector((state: RootState) => state.AppInfo.value);
   const AppLayout = useSelector((state: RootState) => state.AppLayout);
   const UserSession = useSelector((state: RootState) => state.UserSession);
   const { handleGetRequest } = useAxios();

package/src/redux/features/common/AppInfoSlice.ts

@@ -1,19 +1,25 @@
 import { createSlice } from "@reduxjs/toolkit";
 
 export type AppInfo = {
-  documentTitle: string;
-  apiBaseUrl: string;
-  appName: string;
-  appVersion: string;
-  appLogo: any;
+  documentTitle: string | null;
+  apiBaseUrl: string | null;
+  appName: string | null;
+  appVersion: string | null;
+  appLogo: any | null;
 };
 
-const initialState: AppInfo = {
-  documentTitle: "",
-  apiBaseUrl: "",
-  appName: "",
-  appVersion: "",
-  appLogo: null,
+export type AppInfoProp = {
+  value: AppInfo;
+};
+
+const initialState: AppInfoProp = {
+  value: {
+    documentTitle: null,
+    apiBaseUrl: null,
+    appName: null,
+    appVersion: null,
+    appLogo: null,
+  },
 };
 
 const AppInfoSlice = createSlice({
@@ -21,7 +27,7 @@ const AppInfoSlice = createSlice({
   initialState: initialState,
   reducers: {
     setAppInfo: (state, action) => {
-      state = action.payload;
+      state.value = action.payload;
     },
   },
 });