@qlover/create-app 0.4.1 → 0.4.2

package/templates/react-app/src/pages/auth/Login.tsx

@@ -3,9 +3,11 @@ import { Form, Input, Button } from 'antd';
 import { UserOutlined, LockOutlined, GoogleOutlined } from '@ant-design/icons';
 import { IOC } from '@/core/IOC';
 import { useBaseRoutePage } from '@/uikit/contexts/BaseRouteContext';
-import { RouterController } from '@/uikit/controllers/RouterController';
-import { UserController } from '@/uikit/controllers/UserController';
-import { useSliceStore } from '@qlover/slice-store-react';
+import { RouteService } from '@/base/services/RouteService';
+import { UserService } from '@/base/services/UserService';
+import { useStore } from '@/uikit/hooks/useStore';
+import * as i18nKeys from '@config/Identifier/I18n';
+import LocaleLink from '@/uikit/components/LocaleLink';
 
 interface LoginFormData {
   email: string;
@@ -14,19 +16,19 @@ interface LoginFormData {
 
 export default function Login() {
   const { t } = useBaseRoutePage();
-  const userController = IOC(UserController);
+  const userService = IOC(UserService);
   const AppConfig = IOC('AppConfig');
-  useSliceStore(userController);
+  useStore(userService);
   const [loading, setLoading] = useState(false);
 
   const handleLogin = async (values: LoginFormData) => {
     try {
       setLoading(true);
-      await userController.login({
+      await userService.login({
         username: values.email,
         password: values.password
       });
-      IOC(RouterController).replaceToHome();
+      IOC(RouteService).replaceToHome();
     } catch (error) {
       console.error(error);
     } finally {
@@ -45,19 +47,21 @@ export default function Login() {
           </span>
         </div>
         <h1 className="text-4xl font-bold text-text mb-4">
-          Welcome back to the future of learning
+          {t(i18nKeys.LOGIN_WELCOME)}
         </h1>
         <p className="text-text-secondary text-lg mb-8">
-          Unlock personalized AI-powered learning experiences designed to
-          accelerate your knowledge journey.
+          {t(i18nKeys.LOGIN_SUBTITLE)}
         </p>
         <div className="space-y-4">
+          <FeatureItem icon="🎯" text={t(i18nKeys.LOGIN_FEATURE_AI_PATHS)} />
           <FeatureItem
             icon="🎯"
-            text="AI-powered personalized learning paths"
+            text={t(i18nKeys.LOGIN_FEATURE_SMART_RECOMMENDATIONS)}
+          />
+          <FeatureItem
+            icon="📊"
+            text={t(i18nKeys.LOGIN_FEATURE_PROGRESS_TRACKING)}
           />
-          <FeatureItem icon="🎯" text="Smart content recommendations" />
-          <FeatureItem icon="📊" text="Real-time progress tracking" />
         </div>
       </div>
 
@@ -65,10 +69,10 @@ export default function Login() {
       <div className="w-full lg:w-1/2 p-8 sm:p-12 flex items-center justify-center">
         <div className="w-full max-w-[420px]">
           <h2 className="text-2xl font-semibold mb-2 text-text">
-            {t('Sign in to your account')}
+            {t(i18nKeys.LOGIN_TITLE)}
           </h2>
           <p className="text-text-secondary mb-8">
-            Enter your credentials to access your dashboard
+            {t(i18nKeys.LOGIN_SUBTITLE)}
           </p>
 
           <Form
@@ -83,11 +87,14 @@ export default function Login() {
           >
             <Form.Item
               name="email"
-              rules={[{ required: true, message: 'Please input your email!' }]}
+              rules={[
+                { required: true, message: t(i18nKeys.LOGIN_EMAIL_REQUIRED) }
+              ]}
             >
               <Input
                 prefix={<UserOutlined className="text-text-tertiary" />}
-                placeholder={t('email')}
+                placeholder={t(i18nKeys.LOGIN_EMAIL)}
+                title={t(i18nKeys.LOGIN_EMAIL_TITLE)}
                 className="h-12 text-base bg-secondary border-border"
               />
             </Form.Item>
@@ -95,19 +102,24 @@ export default function Login() {
             <Form.Item
               name="password"
               rules={[
-                { required: true, message: 'Please input your password!' }
+                { required: true, message: t(i18nKeys.LOGIN_PASSWORD_REQUIRED) }
               ]}
             >
               <Input.Password
                 prefix={<LockOutlined />}
-                placeholder={t('password')}
+                placeholder={t(i18nKeys.LOGIN_PASSWORD)}
+                title={t(i18nKeys.LOGIN_PASSWORD_TITLE)}
                 className="h-12 text-base"
               />
             </Form.Item>
 
             <div className="flex justify-end">
-              <a href="#" className="text-brand hover:text-brand-hover">
-                {t('Forgot your password?')}
+              <a
+                href="#"
+                className="text-brand hover:text-brand-hover"
+                title={t(i18nKeys.LOGIN_FORGOT_PASSWORD_TITLE)}
+              >
+                {t(i18nKeys.LOGIN_FORGOT_PASSWORD)}
               </a>
             </div>
 
@@ -116,27 +128,36 @@ export default function Login() {
                 type="primary"
                 htmlType="submit"
                 loading={loading}
+                title={t(i18nKeys.LOGIN_BUTTON_TITLE)}
                 className="w-full h-12 text-base"
               >
-                {t('Sign In')}
+                {t(i18nKeys.LOGIN_BUTTON)}
               </Button>
             </Form.Item>
 
             <div className="text-center text-text-tertiary my-4">
-              or continue with
+              {t(i18nKeys.LOGIN_CONTINUE_WITH)}
             </div>
 
-            <Button icon={<GoogleOutlined />} className="w-full h-12 text-base">
-              Sign in with Google
+            <Button
+              icon={<GoogleOutlined />}
+              className="w-full h-12 text-base"
+              title={t(i18nKeys.LOGIN_WITH_GOOGLE_TITLE)}
+            >
+              {t(i18nKeys.LOGIN_WITH_GOOGLE)}
             </Button>
 
             <div className="text-center mt-6">
               <span className="text-text-tertiary">
-                Don't have an account?{' '}
+                {t(i18nKeys.LOGIN_NO_ACCOUNT)}{' '}
               </span>
-              <a href="#" className="text-brand hover:text-brand-hover">
-                Create one here
-              </a>
+              <LocaleLink
+                href="/register"
+                className="text-brand hover:text-brand-hover"
+                title={t(i18nKeys.LOGIN_CREATE_ACCOUNT_TITLE)}
+              >
+                {t(i18nKeys.LOGIN_CREATE_ACCOUNT)}
+              </LocaleLink>
             </div>
           </Form>
         </div>

package/templates/react-app/src/pages/auth/Register.tsx

@@ -1,3 +1,240 @@
+import { useState } from 'react';
+import { Form, Input, Button, Checkbox } from 'antd';
+import { UserOutlined, LockOutlined, MailOutlined } from '@ant-design/icons';
+import { IOC } from '@/core/IOC';
+import { useBaseRoutePage } from '@/uikit/contexts/BaseRouteContext';
+import { RouteService } from '@/base/services/RouteService';
+import { UserService } from '@/base/services/UserService';
+import { useStore } from '@/uikit/hooks/useStore';
+import * as i18nKeys from '@config/Identifier/I18n';
+import type { RegisterFormData } from '@/base/port/LoginInterface';
+
 export default function Register() {
-  return <div>Register</div>;
+  const { t } = useBaseRoutePage();
+  const userService = IOC(UserService);
+  const AppConfig = IOC('AppConfig');
+  useStore(userService);
+  const [loading, setLoading] = useState(false);
+  const [form] = Form.useForm();
+
+  const handleRegister = async (values: RegisterFormData) => {
+    try {
+      setLoading(true);
+      await userService.register(values);
+      IOC(RouteService).replaceToHome();
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleLoginClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    IOC(RouteService).gotoLogin();
+  };
+
+  return (
+    <div className="flex min-h-screen text-xs1 bg-primary">
+      {/* Left side - Brand section */}
+      <div className="hidden lg:flex lg:w-1/2 bg-secondary p-12 flex-col">
+        <div className="flex items-center gap-3 mb-12">
+          <div className="w-10 h-10 bg-brand rounded-lg"></div>
+          <span className="text-2xl font-semibold text-text">
+            {AppConfig.appName}
+          </span>
+        </div>
+        <h1 className="text-4xl font-bold text-text mb-4">
+          {t(i18nKeys.REGISTER_TITLE)}
+        </h1>
+        <p className="text-text-secondary text-lg mb-8">
+          {t(i18nKeys.REGISTER_SUBTITLE)}
+        </p>
+        <div className="space-y-4">
+          <FeatureItem
+            icon="🎯"
+            text={t(i18nKeys.REGISTER_FEATURE_PERSONALIZED)}
+          />
+          <FeatureItem icon="👨‍🏫" text={t(i18nKeys.REGISTER_FEATURE_SUPPORT)} />
+          <FeatureItem
+            icon="👥"
+            text={t(i18nKeys.REGISTER_FEATURE_COMMUNITY)}
+          />
+        </div>
+      </div>
+
+      {/* Right side - Registration form */}
+      <div className="w-full lg:w-1/2 p-8 sm:p-12 flex items-center justify-center">
+        <div className="w-full max-w-[420px]">
+          <h2 className="text-2xl font-semibold mb-2 text-text">
+            {t(i18nKeys.REGISTER_TITLE)}
+          </h2>
+          <p className="text-text-secondary mb-8">
+            {t(i18nKeys.REGISTER_SUBTITLE)}
+          </p>
+
+          <Form
+            form={form}
+            name="register"
+            onFinish={handleRegister}
+            layout="vertical"
+            className="space-y-4"
+          >
+            <Form.Item
+              name="username"
+              rules={[
+                {
+                  required: true,
+                  message: t(i18nKeys.REGISTER_USERNAME_REQUIRED)
+                }
+              ]}
+            >
+              <Input
+                prefix={<UserOutlined className="text-text-tertiary" />}
+                placeholder={t(i18nKeys.REGISTER_USERNAME)}
+                className="h-12 text-base bg-secondary border-border"
+              />
+            </Form.Item>
+
+            <Form.Item
+              name="email"
+              rules={[
+                {
+                  required: true,
+                  message: t(i18nKeys.REGISTER_EMAIL_REQUIRED)
+                },
+                {
+                  type: 'email',
+                  message: t(i18nKeys.REGISTER_EMAIL_REQUIRED)
+                }
+              ]}
+            >
+              <Input
+                prefix={<MailOutlined className="text-text-tertiary" />}
+                placeholder={t(i18nKeys.REGISTER_EMAIL)}
+                className="h-12 text-base bg-secondary border-border"
+              />
+            </Form.Item>
+
+            <Form.Item
+              name="password"
+              rules={[
+                {
+                  required: true,
+                  message: t(i18nKeys.REGISTER_PASSWORD_REQUIRED)
+                }
+              ]}
+            >
+              <Input.Password
+                prefix={<LockOutlined />}
+                placeholder={t(i18nKeys.REGISTER_PASSWORD)}
+                className="h-12 text-base"
+              />
+            </Form.Item>
+
+            <Form.Item
+              name="confirmPassword"
+              dependencies={['password']}
+              rules={[
+                {
+                  required: true,
+                  message: t(i18nKeys.REGISTER_CONFIRM_PASSWORD_REQUIRED)
+                },
+                ({ getFieldValue }) => ({
+                  validator(_, value) {
+                    if (!value || getFieldValue('password') === value) {
+                      return Promise.resolve();
+                    }
+                    return Promise.reject(
+                      t(i18nKeys.REGISTER_PASSWORD_MISMATCH)
+                    );
+                  }
+                })
+              ]}
+            >
+              <Input.Password
+                prefix={<LockOutlined />}
+                placeholder={t(i18nKeys.REGISTER_CONFIRM_PASSWORD)}
+                className="h-12 text-base"
+              />
+            </Form.Item>
+
+            <Form.Item
+              name="agreeToTerms"
+              valuePropName="checked"
+              rules={[
+                {
+                  validator: (_, value) =>
+                    value
+                      ? Promise.resolve()
+                      : Promise.reject(
+                          new Error(t(i18nKeys.REGISTER_TERMS_REQUIRED))
+                        )
+                }
+              ]}
+            >
+              <Checkbox>
+                <span className="text-text-secondary">
+                  {t(i18nKeys.REGISTER_TERMS_PREFIX)}{' '}
+                  <a
+                    href="#"
+                    className="text-brand hover:text-brand-hover"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    {t(i18nKeys.REGISTER_TERMS_LINK)}
+                  </a>{' '}
+                  {t(i18nKeys.REGISTER_TERMS_AND)}{' '}
+                  <a
+                    href="#"
+                    className="text-brand hover:text-brand-hover"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    {t(i18nKeys.REGISTER_PRIVACY_LINK)}
+                  </a>
+                </span>
+              </Checkbox>
+            </Form.Item>
+
+            <Form.Item>
+              <Button
+                type="primary"
+                htmlType="submit"
+                loading={loading}
+                className="w-full h-12 text-base"
+              >
+                {t(i18nKeys.REGISTER_BUTTON)}
+              </Button>
+            </Form.Item>
+
+            <div className="text-center mt-6">
+              <span className="text-text-tertiary">
+                {t(i18nKeys.REGISTER_HAVE_ACCOUNT)}{' '}
+              </span>
+              <a
+                href="#"
+                className="text-brand hover:text-brand-hover"
+                onClick={handleLoginClick}
+              >
+                {t(i18nKeys.REGISTER_LOGIN_LINK)}
+              </a>
+            </div>
+          </Form>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Helper component for feature items
+function FeatureItem({ icon, text }: { icon: string; text: string }) {
+  return (
+    <div className="flex items-center gap-3 text-text">
+      <div className="w-8 h-8 bg-elevated rounded-lg flex items-center justify-center">
+        {icon}
+      </div>
+      <span>{text}</span>
+    </div>
+  );
 }

package/templates/react-app/src/pages/base/About.tsx

@@ -1,5 +1,5 @@
 import { useBaseRoutePage } from '@/uikit/contexts/BaseRouteContext';
-import * as i18nKeys from '@config/Identifier.I18n';
+import * as i18nKeys from '@config/Identifier/I18n';
 import {
   Button,
   Tooltip,

package/templates/react-app/src/pages/base/ErrorIdentifier.tsx

@@ -1,7 +1,7 @@
 import { Button } from 'antd';
 import { useBaseRoutePage } from '@/uikit/contexts/BaseRouteContext';
-import * as ErrorIdentifierList from '@config/Identifier.Error';
-import * as i18nKeys from '@config/Identifier.I18n';
+import * as ErrorIdentifierList from '@config/Identifier/Error';
+import * as i18nKeys from '@config/Identifier/I18n';
 
 export default function ErrorIdentifier() {
   const { t } = useBaseRoutePage();

package/templates/react-app/src/pages/base/Executor.tsx

@@ -4,8 +4,8 @@ import { useState, useEffect } from 'react';
 import { IOC } from '@/core/IOC';
 import { JSONStorageController } from '@/uikit/controllers/JSONStorageController';
 import { ExecutorController } from '@/uikit/controllers/ExecutorController';
-import { useSliceStore } from '@qlover/slice-store-react';
-import * as i18nKeys from '@config/Identifier.I18n';
+import { useStore } from '@/uikit/hooks/useStore';
+import * as i18nKeys from '@config/Identifier/I18n';
 
 interface Task {
   id: string;
@@ -24,12 +24,12 @@ export default function Executor() {
   const { t } = useBaseRoutePage();
   const executorController = IOC(ExecutorController);
   const jSONStorageController = IOC(JSONStorageController);
-  const requestTimeout = useSliceStore(
+  const requestTimeout = useStore(
     jSONStorageController,
     jSONStorageController.selector.requestTimeout
   );
 
-  const helloState = useSliceStore(
+  const helloState = useStore(
     executorController,
     executorController.selector.helloState
   );

package/templates/react-app/src/pages/base/Home.tsx

@@ -2,7 +2,7 @@ import { Button } from 'antd';
 import { useBaseRoutePage } from '@/uikit/contexts/BaseRouteContext';
 import LocaleLink from '@/uikit/components/LocaleLink';
 import clsx from 'clsx';
-import * as i18nKeys from '@config/Identifier.I18n';
+import * as i18nKeys from '@config/Identifier/I18n';
 
 export default function Home() {
   const { t } = useBaseRoutePage();

package/templates/react-app/src/pages/base/JSONStorage.tsx

@@ -2,13 +2,13 @@ import { IOC } from '@/core/IOC';
 import { useBaseRoutePage } from '@/uikit/contexts/BaseRouteContext';
 import template from 'lodash/template';
 import { JSONStorageController } from '@/uikit/controllers/JSONStorageController';
-import { useSliceStore } from '@qlover/slice-store-react';
+import { useStore } from '@/uikit/hooks/useStore';
 import { Button, Input } from 'antd';
-import * as i18nKeys from '@config/Identifier.I18n';
+import * as i18nKeys from '@config/Identifier/I18n';
 
 export default function JSONStorage() {
   const jsonStorageController = IOC(JSONStorageController);
-  const controllerState = useSliceStore(jsonStorageController);
+  const controllerState = useStore(jsonStorageController);
   const { t } = useBaseRoutePage();
 
   return (

package/templates/react-app/src/pages/base/Request.tsx

@@ -3,10 +3,10 @@ import { useBaseRoutePage } from '@/uikit/contexts/BaseRouteContext';
 import { JSONStorageController } from '@/uikit/controllers/JSONStorageController';
 import { RequestController } from '@/uikit/controllers/RequestController';
 import { useMemo } from 'react';
-import { useSliceStore } from '@qlover/slice-store-react';
+import { useStore } from '@/uikit/hooks/useStore';
 import { Button } from 'antd';
 import { LoadingOutlined } from '@ant-design/icons';
-import * as i18nKeys from '@config/Identifier.I18n';
+import * as i18nKeys from '@config/Identifier/I18n';
 
 function JSONValue({ value }: { value: unknown }) {
   const output = useMemo(() => {
@@ -25,8 +25,8 @@ function JSONValue({ value }: { value: unknown }) {
 
 export default function Request() {
   const requestController = IOC(RequestController);
-  const requestControllerState = useSliceStore(requestController);
-  const jsonStorageControllerState = useSliceStore(IOC(JSONStorageController));
+  const requestControllerState = useStore(requestController);
+  const jsonStorageControllerState = useStore(IOC(JSONStorageController));
   const { t } = useBaseRoutePage();
 
   return (

package/templates/react-app/src/pages/base/components/BaseHeader.tsx

@@ -1,6 +1,8 @@
 import ThemeSwitcher from '@/uikit/components/ThemeSwitcher';
 import LocaleLink from '@/uikit/components/LocaleLink';
 import LanguageSwitcher from '@/uikit/components/LanguageSwitcher';
+import { PublicAssetsPath } from '@/base/cases/PublicAssetsPath';
+import { IOC } from '@/core/IOC';
 
 export default function BaseHeader() {
   return (
@@ -11,9 +13,13 @@ export default function BaseHeader() {
             href="/"
             className="flex items-center hover:opacity-80 transition-opacity"
           >
-            <img src="/logo.svg" alt="logo" className="h-8 w-auto" />
+            <img
+              src={IOC(PublicAssetsPath).getPath('/logo.svg')}
+              alt="logo"
+              className="h-8 w-auto"
+            />
             <span className="ml-2 text-lg font-semibold text-text">
-              {'appName'}
+              {IOC('AppConfig').appName}
             </span>
           </LocaleLink>
         </div>

package/templates/react-app/src/uikit/components/LanguageSwitcher.tsx

@@ -1,20 +1,20 @@
 import { Select } from 'antd';
 import { GlobalOutlined } from '@ant-design/icons';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import i18nConfig from '@config/i18n';
 import { IOC } from '@/core/IOC';
 import { I18nService, I18nServiceLocale } from '@/base/services/I18nService';
 import { useCallback } from 'react';
-import { useSliceStore } from '@qlover/slice-store-react';
+import { useStore } from '@/uikit/hooks/useStore';
 
 const { supportedLngs } = i18nConfig;
 
 export default function LanguageSwitcher() {
   const navigate = useNavigate();
   const i18nService = IOC(I18nService);
-  const loading = useSliceStore(i18nService, i18nService.selector.loading);
+  const loading = useStore(i18nService, i18nService.selector.loading);
   const { lng } = useParams<{ lng: I18nServiceLocale }>();
-  const currentPath = window.location.pathname;
+  const { pathname } = useLocation();
 
   const languageOptions = supportedLngs.map((lang) => ({
     key: lang,
@@ -33,11 +33,11 @@ export default function LanguageSwitcher() {
       // Change i18n language
       await i18nService.changeLanguage(newLang);
       // Update URL path
-      const newPath = currentPath.replace(`/${lng}`, `/${newLang}`);
-      navigate(newPath);
+      navigate(pathname.replace(`/${lng}`, `/${newLang}`));
+
       i18nService.changeLoading(false);
     },
-    [lng, currentPath, navigate, i18nService]
+    [lng, pathname, navigate, i18nService]
   );
 
   return (

package/templates/react-app/src/uikit/components/ThemeSwitcher.tsx

@@ -1,6 +1,6 @@
 import { IOC } from '@/core/IOC';
 import { ThemeService } from '@qlover/corekit-bridge';
-import { useSliceStore } from '@qlover/slice-store-react';
+import { useStore } from '@/uikit/hooks/useStore';
 import { useTranslation } from 'react-i18next';
 import { Select } from 'antd';
 import {
@@ -11,7 +11,7 @@ import {
 } from '@ant-design/icons';
 import clsx from 'clsx';
 import { useMemo } from 'react';
-import * as i18nKeys from '@config/Identifier.I18n';
+import * as i18nKeys from '@config/Identifier/I18n';
 
 const colorMap: Record<
   string,
@@ -36,7 +36,7 @@ const colorMap: Record<
 
 export default function ThemeSwitcher() {
   const themeService = IOC(ThemeService);
-  const { theme } = useSliceStore(themeService);
+  const { theme } = useStore(themeService);
   const themes = themeService.getSupportedThemes();
   const { t } = useTranslation('common');
 

package/templates/react-app/src/uikit/contexts/BaseRouteContext.ts

@@ -5,7 +5,7 @@ import { RouteMeta } from '@/base/types/Page';
 import { createContext } from 'react';
 import merge from 'lodash/merge';
 import i18nConfig from '@config/i18n';
-import { WITHIN_PAGE_PROVIDER } from '@config/Identifier.Error';
+import { WITHIN_PAGE_PROVIDER } from '@config/Identifier/Error';
 
 const { defaultNS } = i18nConfig;
 

package/templates/react-app/src/uikit/controllers/ExecutorController.ts

@@ -6,9 +6,12 @@ import {
   RequestAdapterFetchConfig
 } from '@qlover/fe-corekit';
 import { inject, injectable } from 'inversify';
-import { SliceStore } from '@qlover/slice-store-react';
+import {
+  StoreInterface,
+  StoreStateInterface
+} from '@/base/port/StoreInterface';
 
-class ExecutorControllerState {
+class ExecutorControllerState implements StoreStateInterface {
   helloState = {
     loading: false,
     result: null as Record<string, unknown> | null,
@@ -31,7 +34,7 @@ const TestPlugin: ExecutorPlugin<RequestAdapterFetchConfig> = {
 };
 
 @injectable()
-export class ExecutorController extends SliceStore<ExecutorControllerState> {
+export class ExecutorController extends StoreInterface<ExecutorControllerState> {
   selector = {
     helloState: (state: ExecutorControllerState) => state.helloState
   };

package/templates/react-app/src/uikit/controllers/JSONStorageController.ts

@@ -1,15 +1,18 @@
 import { JSONStorage } from '@qlover/fe-corekit';
-import { SliceStore } from '@qlover/slice-store-react';
+import {
+  StoreInterface,
+  StoreStateInterface
+} from '@/base/port/StoreInterface';
 import { random } from 'lodash';
 
-interface JSONStoragePageState {
+interface JSONStoragePageState extends StoreStateInterface {
   testKey1?: number;
   testKey2?: number;
   expireTime: number;
   requestTimeout: number;
 }
 
-export class JSONStorageController extends SliceStore<JSONStoragePageState> {
+export class JSONStorageController extends StoreInterface<JSONStoragePageState> {
   selector = {
     requestTimeout: (state: JSONStoragePageState) => state.requestTimeout
   };