@rtbjs/use-state/dist/cjs/pages/register.page.js

`@rtbjs/use-state` is a state management tool that can act as a local state and be easily turned into a global redux state. It is an innovative approach to state management that combines the advantages of both React's useState and Redux's state management

"use strict";
exports.__esModule = true;
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = require("react");
var react_router_dom_1 = require("react-router-dom");
var auth_api_1 = require("../redux/api/auth-api");
var react_toastify_1 = require("react-toastify");
var antd_1 = require("antd");
var use_is_form_submittable_1 = require("../components/ui/form/use-is-form-submittable");
var login_page_styles_1 = require("./login.page/login.page.styles");
var icons_1 = require("@ant-design/icons");
var RegisterPage = function () {
    var form = antd_1.Form.useForm()[0];
    // 👇 Calling the Register Mutation
    var _a = (0, auth_api_1.useRegisterUserMutation)(), registerUser = _a[0], _b = _a[1], isLoading = _b.isLoading, isSuccess = _b.isSuccess, error = _b.error, isError = _b.isError, data = _b.data;
    var navigate = (0, react_router_dom_1.useNavigate)();
    (0, react_1.useEffect)(function () {
        if (isSuccess) {
            react_toastify_1.toast.success(data === null || data === void 0 ? void 0 : data.message);
            navigate('/verifyemail');
        }
        if (isError) {
            if (Array.isArray(error.data.error)) {
                error.data.error.forEach(function (el) {
                    return react_toastify_1.toast.error(el.message, {
                        position: 'top-right'
                    });
                });
            }
            else {
                react_toastify_1.toast.error(error.data.message, {
                    position: 'top-right'
                });
            }
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [isLoading]);
    var onSubmitHandler = function (values) {
        // 👇 Executing the RegisterUser Mutation
        registerUser(values);
    };
    var isSubmittable = (0, use_is_form_submittable_1.useIsFormSubmittable)({ form: form }).isSubmittable;
    return ((0, jsx_runtime_1.jsxs)(login_page_styles_1.Container, { children: [(0, jsx_runtime_1.jsx)(antd_1.Typography.Title, { children: "Create an account" }), (0, jsx_runtime_1.jsxs)(antd_1.Form, tslib_1.__assign({ name: "login", style: {
                    maxWidth: 300
                }, onFinish: onSubmitHandler, autoComplete: "off", form: form }, { children: [(0, jsx_runtime_1.jsx)(antd_1.Form.Item, tslib_1.__assign({ name: "name", messageVariables: { name: 'Name' }, rules: [{ required: true, min: 3, max: 100 }] }, { children: (0, jsx_runtime_1.jsx)(antd_1.Input, { prefix: (0, jsx_runtime_1.jsx)(icons_1.UserOutlined, {}), placeholder: "Name" }) })), (0, jsx_runtime_1.jsx)(antd_1.Form.Item, tslib_1.__assign({ name: "email", messageVariables: { name: 'Email' }, rules: [
                            {
                                type: 'email',
                                message: 'The input is not valid E-mail!'
                            },
                            {
                                required: true,
                                message: 'Please input your E-mail!'
                            },
                        ] }, { children: (0, jsx_runtime_1.jsx)(antd_1.Input, { prefix: (0, jsx_runtime_1.jsx)(icons_1.MailOutlined, {}), placeholder: "Email" }) })), (0, jsx_runtime_1.jsx)(antd_1.Form.Item, tslib_1.__assign({ name: "password", messageVariables: { name: 'Password' }, rules: [{ required: true, min: 8, max: 32 }] }, { children: (0, jsx_runtime_1.jsx)(antd_1.Input, { prefix: (0, jsx_runtime_1.jsx)(icons_1.LockOutlined, { className: "site-form-item-icon" }), type: "password", placeholder: "Password" }) })), (0, jsx_runtime_1.jsx)(antd_1.Form.Item, tslib_1.__assign({ name: "passwordConfirm", rules: [
                            { required: true, message: 'Please confirm your password!' },
                            function (_a) {
                                var getFieldValue = _a.getFieldValue;
                                return ({
                                    validator: function (_, value) {
                                        if (!value || getFieldValue('password') === value) {
                                            return Promise.resolve();
                                        }
                                        return Promise.reject(new Error('The new password that you entered do not match!'));
                                    }
                                });
                            },
                        ], dependencies: ['password'], hasFeedback: true }, { children: (0, jsx_runtime_1.jsx)(antd_1.Input, { prefix: (0, jsx_runtime_1.jsx)(icons_1.LockOutlined, { className: "site-form-item-icon" }), type: "password", placeholder: "Confirm password" }) })), (0, jsx_runtime_1.jsx)(antd_1.Form.Item, { children: (0, jsx_runtime_1.jsx)(login_page_styles_1.SubmitButton, tslib_1.__assign({ type: "primary", htmlType: "submit", disabled: !isSubmittable }, { children: "Sign up" })) }), "Already have an account?", ' ', (0, jsx_runtime_1.jsx)(antd_1.Typography.Link, { children: (0, jsx_runtime_1.jsx)(react_router_dom_1.Link, tslib_1.__assign({ to: "/login" }, { children: "Login" })) })] }))] }));
};
exports["default"] = RegisterPage;
//# sourceMappingURL=register.page.js.map