Convert JavaScript files to TypeScript

packages/base-shell/src/containers/Layout/index.tsx

@@ -0,0 +1,97 @@
+import React, { Suspense, useEffect, useState } from "react";
+import { useRoutes } from "react-router-dom";
+import { IntlProvider } from "react-intl";
+import { useLocale, useConfig, getLocaleMessages } from "@ecronix/base-shell";
+import {
+  AddToHomeScreenProvider,
+  AuthProvider,
+  UpdateProvider,
+  OnlineProvider,
+  SimpleValuesProvider,
+  LocaleProvider,
+} from "@ecronix/base-shell";
+
+interface LayoutContentProps {
+  appConfig?: any;
+}
+
+export const LayoutContent: React.FC<LayoutContentProps> = ({ appConfig = {} }) => {
+  const [messages, setMessages] = useState<any[]>([]);
+  const {
+    components,
+    routes = [],
+    containers,
+    locale: confLocale,
+    getDefaultRoutes,
+    auth,
+    update,
+  } = appConfig || {};
+  const { persistKey } = auth || {};
+  const { checkInterval = 5000 } = update || {};
+  const { Menu, Loading = () => <div>Loading...</div> } = components || {};
+  const { locales, onError } = confLocale || {};
+  const { LayoutContainer = React.Fragment } = containers || {};
+  const defaultRoutes = getDefaultRoutes ? getDefaultRoutes(appConfig) : [];
+  const { locale = {} } = useLocale();
+
+  useEffect(() => {
+    const loadPolyfills = async () => {
+      if (locale.locales && locale.locales.length > 0) {
+        for (let i = 0; i < locales.length; i++) {
+          const l = locales[i];
+          if (l.locale === locale) {
+            if (l.loadData) {
+              await l.loadData;
+            }
+          }
+        }
+      }
+    };
+    loadPolyfills();
+  }, [locale, locales]);
+
+  useEffect(() => {
+    const loadMessages = async () => {
+      const messages = await getLocaleMessages(locale, locales);
+      setMessages(messages);
+    };
+    loadMessages();
+  }, [locale, locales]);
+
+  return (
+    <AuthProvider persistKey={persistKey}>
+      <SimpleValuesProvider>
+        <AddToHomeScreenProvider>
+          <UpdateProvider checkInterval={checkInterval}>
+            <OnlineProvider>
+              <IntlProvider
+                locale={locale}
+                key={locale}
+                messages={messages}
+                onError={onError}
+              >
+                <LayoutContainer>
+                  <Suspense fallback={<Loading />}>{Menu && <Menu />}</Suspense>
+                  <Suspense fallback={<Loading />}>
+                    {useRoutes([...routes, ...defaultRoutes])}
+                  </Suspense>
+                </LayoutContainer>
+              </IntlProvider>
+            </OnlineProvider>
+          </UpdateProvider>
+        </AddToHomeScreenProvider>
+      </SimpleValuesProvider>
+    </AuthProvider>
+  );
+};
+
+export const LayoutContainer: React.FC = () => {
+  const { appConfig } = useConfig();
+  const { locale } = appConfig || {};
+  const { defaultLocale, persistKey } = locale || {};
+  return (
+    <LocaleProvider defaultLocale={defaultLocale} persistKey={persistKey}>
+      <LayoutContent appConfig={appConfig} />
+    </LocaleProvider>
+  );
+};

packages/base-shell/src/providers/AddToHomeScreen/Context.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+const Context = React.createContext<any>(null);
+
+export default Context;

packages/base-shell/src/providers/AddToHomeScreen/Provider.tsx

@@ -0,0 +1,35 @@
+import React, { useState } from "react";
+import Context from "./Context";
+
+interface A2HPState {
+  deferredPrompt: any;
+  isAppInstallable: boolean;
+  isAppInstalled: boolean;
+}
+
+const initialState: A2HPState = {
+  deferredPrompt: () => {},
+  isAppInstallable: false,
+  isAppInstalled: false,
+};
+
+const Provider: React.FC = ({ children }) => {
+  const [state, setA2HPState] = useState<A2HPState>(initialState);
+
+  window.addEventListener("beforeinstallprompt", (e) => {
+    e.preventDefault();
+    setA2HPState({ deferredPrompt: e, isAppInstallable: true });
+  });
+
+  window.addEventListener("appinstalled", () => {
+    setA2HPState({ isAppInstalled: true });
+  });
+
+  return (
+    <Context.Provider value={{ ...state, setA2HPState }}>
+      {children}
+    </Context.Provider>
+  );
+};
+
+export default Provider;

packages/base-shell/src/providers/AddToHomeScreen/index.ts

@@ -0,0 +1,13 @@
+import { useContext } from "react";
+import Context from "./Context";
+import Provider from "./Provider";
+
+function useAddToHomeScreen() {
+  return useContext(Context);
+}
+
+export {
+  useAddToHomeScreen,
+  Context as AddToHomeScreenContext,
+  Provider as AddToHomeScreenProvider,
+};

packages/base-shell/src/providers/Auth/Provider.tsx

@@ -0,0 +1,60 @@
+import React, { useEffect, useReducer } from "react";
+import Context from "./Context";
+
+interface AuthState {
+  [key: string]: any;
+}
+
+interface AuthAction {
+  type: "SET_AUTH" | "UPDATE_AUTH";
+  auth: AuthState;
+}
+
+function reducer(state: AuthState, action: AuthAction): AuthState {
+  const { type, auth } = action;
+  switch (type) {
+    case "SET_AUTH":
+      return auth;
+    case "UPDATE_AUTH":
+      return { ...state, ...auth };
+    default:
+      throw new Error();
+  }
+}
+
+interface ProviderProps {
+  persistKey?: string;
+  children: React.ReactNode;
+}
+
+const Provider: React.FC<ProviderProps> = ({ persistKey = "auth", children }) => {
+  const persistAuth = JSON.parse(
+    localStorage.getItem(persistKey)?.replace("undefined", "{}") || "{}"
+  );
+
+  const [auth, dispatch] = useReducer(reducer, persistAuth || {});
+
+  useEffect(() => {
+    try {
+      localStorage.setItem(persistKey, JSON.stringify(auth));
+    } catch (error) {
+      console.warn(error);
+    }
+  }, [auth, persistKey]);
+
+  const setAuth = (auth: AuthState) => {
+    dispatch({ type: "SET_AUTH", auth });
+  };
+
+  const updateAuth = (auth: AuthState) => {
+    dispatch({ type: "UPDATE_AUTH", auth });
+  };
+
+  return (
+    <Context.Provider value={{ auth, setAuth, updateAuth }}>
+      {children}
+    </Context.Provider>
+  );
+};
+
+export default Provider;

packages/base-shell/src/providers/Locale/Context.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+const Context = React.createContext<any>(null);
+
+export default Context;

packages/base-shell/src/providers/Locale/Provider.tsx

@@ -0,0 +1,33 @@
+import React, { useState, useEffect } from "react";
+import Context from "./Context";
+
+interface ProviderProps {
+  children: React.ReactNode;
+  defaultLocale?: string;
+  persistKey?: string;
+}
+
+const Provider: React.FC<ProviderProps> = ({
+  children,
+  defaultLocale = "en",
+  persistKey = "locale",
+}) => {
+  const persistLocale = localStorage.getItem(persistKey);
+  const [locale, setLocale] = useState<string>(persistLocale || defaultLocale);
+
+  useEffect(() => {
+    try {
+      localStorage.setItem(persistKey, locale);
+    } catch (error) {
+      console.warn(error);
+    }
+  }, [locale, persistKey]);
+
+  return (
+    <Context.Provider value={{ locale, setLocale }}>
+      {children}
+    </Context.Provider>
+  );
+};
+
+export default Provider;

packages/base-shell/src/providers/Locale/index.ts

@@ -0,0 +1,9 @@
+import { useContext } from "react";
+import Context from "./Context";
+import Provider from "./Provider";
+
+function useLocale() {
+  return useContext(Context);
+}
+
+export { useLocale, Context as LocaleContext, Provider as LocaleProvider };

packages/base-shell/src/providers/Online/Context.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+const Context = React.createContext<boolean | null>(null);
+
+export default Context;

packages/base-shell/src/providers/Online/Provider.tsx

@@ -0,0 +1,17 @@
+import React, { useState } from 'react'
+import Context from './Context'
+
+interface ProviderProps {
+  children: React.ReactNode;
+}
+
+const Provider: React.FC<ProviderProps> = ({ children }) => {
+  const [isOnline, setOnline] = useState<boolean>(navigator.onLine)
+
+  window.addEventListener('online', () => setOnline(true))
+  window.addEventListener('offline', () => setOnline(false))
+
+  return <Context.Provider value={isOnline}>{children}</Context.Provider>
+}
+
+export default Provider

packages/base-shell/src/providers/Online/index.ts

@@ -0,0 +1,9 @@
+import { useContext } from "react";
+import Context from "./Context";
+import Provider from "./Provider";
+
+function useOnline() {
+  return useContext(Context);
+}
+
+export { useOnline, Context as OnlineContext, Provider as OnlineProvider };

packages/base-shell/src/providers/SimpleValues/Context.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+const Context = React.createContext<any>(null);
+
+export default Context;